/* ==============================================================
   O3 - Car category cards

   The reference's layout in our language: uppercase Archivo and
   square corners rather than a rounded face and 12px radii.
   ============================================================== */

.cartypes {
  background: var(--color-surface);
  color: var(--color-ink);
  padding-block: var(--space-8);
}

.cartypes__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}


/* --- Header --------------------------------------------------------
   Left-aligned, unlike the centred use-case header. That is the most
   visible difference between the two card sections.
   ------------------------------------------------------------------- */

.cartypes__header {
  margin-bottom: var(--space-6);
}

.cartypes__heading {
  margin: 0 0 var(--space-3);
  font-size: var(--text-section-heading);
  line-height: var(--leading-display);
  color: var(--color-heading-display);
}

.cartypes__intro {
  max-width: 80ch;
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-ink-muted);
}


/* --- Scroller ------------------------------------------------------ */

.cartypes__scroller {
  overflow-x: auto;

  /* Full-bleed to the container's padding edges so the row runs off
     the side, with the padding putting the first card back in line
     with the heading above it. */
  margin-inline: calc(var(--container-pad) * -1);
  padding-inline: var(--container-pad);
  scroll-padding-inline: var(--container-pad);
  overscroll-behavior-x: contain;

  /* overflow-x also computes overflow-y to auto, so a focused card's
     ring (2px offset + 2px width) would be clipped top and bottom.
     The padding gives it room; the negative margin keeps the spacing
     unchanged. */
  padding-block: var(--space-2);
  margin-block: calc(var(--space-2) * -1);

  /* The prev/next controls are the row's affordance now; the native
     scrollbar underneath it is redundant chrome, not information —
     drag, wheel, touch and the JS-driven buttons all still work with
     it hidden. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cartypes__scroller::-webkit-scrollbar {
  display: none;
}

/* --bleed: true edge-to-edge — both sides break out to the actual
   viewport width, independent of .cartypes__inner's centred
   max-width column. This deliberately gives up the first card's
   alignment with the heading above it (an earlier, asymmetric
   version of this rule preserved that alignment by only bleeding the
   END edge, but that read as "wider," not "full width").
   Requires the overflow-x guard on html/body in base.css: 100vw runs
   slightly wider than 100% on a page with a vertical scrollbar, and
   without that guard the excess shows up as a page-level horizontal
   scrollbar. */
.cartypes__scroller--bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.cartypes__list {
  display: flex;
  gap: var(--cartypes-gap);
  padding-inline-end: var(--container-pad);
}

.cartypes__item {
  flex: 0 0 auto;
  width: var(--cartypes-card-w);
}


/* --- Card ----------------------------------------------------------- */

.cartypes__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  color: var(--color-ink);
}

/* The tint is the card's only surface - the caption sits outside it -
   so darkening it on hover reads cleanly. */
.cartypes__media {
  aspect-ratio: var(--cartypes-media-ratio);
  overflow: hidden;
  background: var(--color-cartypes-media);
  transition: background var(--dur-fast) var(--ease);
}

.cartypes__card:hover .cartypes__media,
.cartypes__card:focus-visible .cartypes__media {
  background: color-mix(in srgb, var(--color-cartypes-media) 93%, var(--color-shade));
}

.cartypes__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --- Caption --------------------------------------------------------- */

.cartypes__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cartypes__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.cartypes__card:hover .cartypes__title,
.cartypes__card:focus-visible .cartypes__title {
  text-decoration: underline;
  text-underline-offset: var(--link-underline-offset);
}

.cartypes__desc {
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-ink-muted);
}


/* --- Controls -------------------------------------------------------- */

.cartypes__controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Reuses .btn--icon for target size and states; the border is what
   makes it read as a control rather than a bare glyph. */
.cartypes__control {
  --btn-border-w: 1px;
  border-color: var(--color-border);
}

.cartypes__control:hover { background: var(--color-surface-utility); }

.cartypes__control-icon {
  width: var(--icon-md);
  height: var(--icon-md);
  stroke-width: var(--icon-stroke);
}


/* ==============================================================
   O4 - Responsive
   Card width is handled by the clamp in tokens.css; this is the
   surrounding spacing.
   ============================================================== */

@media (max-width: 639px) {

  .cartypes { padding-block: var(--space-6); }

  .cartypes__header { margin-bottom: var(--space-5); }

  .cartypes__controls { margin-top: var(--space-4); }

  /* Title and description tighten by one step each so a card's
     caption does not outweigh the photograph above it. */
  .cartypes__title { font-size: var(--text-lg); }
  .cartypes__desc  { font-size: var(--text-body); }
}

/* The controls stay at every width. Hiding them on narrow screens is
   a common shortcut, but width is not a proxy for input type - a
   small desktop window still has a mouse, and the buttons are the
   only visible affordance that the row moves. */