/* ------------------------------------------------------------------
   FAF product carousel - .cc-faf
   Source of truth: Figma "The Velobarn" file, node 21:872 ("Best
   Sellers") inside the 1380-wide container of the 1440 homepage. Card
   from the 21:765 component, nav pill from 21:883.

   Filed under faf/ rather than home/ because the control behind it is
   the platform's facet repeater - the same section can be dropped on a
   category or brand page with a different repeaterid.

   Depends on tokens in global/colors.css, global/typography.css and
   global/spacing.css, on .cc-btn in global/buttons.css and on
   .cc-carousel-nav in global/carousel-nav.css. Load those first, and
   load /splide/css/splide.min.css BEFORE this file.

   The geometry that matters, read off the comp: the section is 1380
   wide, cards are 330 on a 350 pitch, and 4 x 330 + 3 x 20 = 1380
   exactly. So four cards fill the container with no peek, and the fifth
   card in the comp (at x=1399) is genuinely outside it. That is why
   perPage is 4 and not a fractional width.
   ------------------------------------------------------------------ */

:root {
  /* Gap between a card's image and its text block. 23px in the comp
     (image bottom 330, text top 353) and off the 20px page rhythm, so
     it is kept as its own component token rather than rounded into
     --space-2xs and quietly losing 3px. */
  --cc-faf-card-gap: 23px;

  /* Product image corner radius. Matches the hero's inner image (10),
     not the hero card's outer 20. */
  --cc-faf-img-radius: 10px;

  /* The plate the product photo sits on. Product cut-outs are shot on
     white, and the comp draws the image box as white - so this is the
     photo's own background showing through, not a card fill. Named
     anyway, because if the image handler ever starts returning
     transparent PNGs this is the one place to change it. */
  --cc-faf-img-bg: #ffffff;
}

/* Section -------------------------------------------------------------- */

/* Sits inside the page container (unlike the hero, which is full bleed),
   so there is no side padding to add here - .container supplies it. */
.cc-faf {
  margin-bottom: var(--section-gap);
}

/* Header --------------------------------------------------------------- */

/* Title left, CTA right, both centred on the row. The comp draws a 64px
   row: the 40px title sits at y=12 and the 210x64 pill at y=0, which is
   exactly what centring the two gives. */
.cc-faf__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  /* 80px from the header to the card grid. */
  margin-bottom: var(--space-lg);
}

/* 40px / leading 1 / -1.2px tracking in the comp - which is what --h2
   and --tracking-heading already resolve to at 1440. */
.cc-faf__title {
  font-size: var(--h2);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  color: var(--foreground);
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
}

/* The comp has no description in this section, but the platform
   codebehind sets the Label regardless, so the <p> is always emitted.
   Collapse it when it comes back empty rather than removing the control
   and risking a null reference. */
.cc-faf__desc {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--text-muted);
  margin: var(--space-3xs) 0 0;
  max-width: 584px;
  overflow-wrap: break-word;
}

/* An <asp:Label> always renders its <span>, even with no Text - so :empty on
   the <p> never matches on the live page, and an empty inline box still
   generates a line box worth ~25.6px. The :has() rule is the one that
   actually fires; :empty is kept for the case where the label renders
   nothing at all (Visible="False", or a hand-written call site). */
.cc-faf__desc:empty,
.cc-faf__desc:has(> span:empty) {
  display: none;
}

/* .cc-btn supplies the pill - 18/38 padding, 20px label, radius 100,
   black on white - which is the comp's 210x64 exactly. Nothing to
   restate beyond keeping it from being squashed by the title. */
.cc-faf__cta {
  flex: 0 0 auto;
}

/* Cards ---------------------------------------------------------------- */

/* Splide sets the slide widths from perPage and gap, so the 330 is not
   restated here - it falls out of a 1380 container at perPage 4. */
.cc-faf__card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--cc-faf-card-gap);
  height: 100%;
  text-decoration: none;
  color: var(--foreground);
}

/* Square, per the comp's 500x500 image frame rendered into a 330 box.
   aspect-ratio rather than a fixed height so the card tracks whatever
   width Splide hands it at each breakpoint. */
.cc-faf__img {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--cc-faf-img-bg);
  border-radius: var(--cc-faf-img-radius);
  overflow: hidden;
  padding: 30px;
}

/* contain, not cover: these are product cut-outs on white and the comp
   shows the whole product with air around it. cover would crop the ends
   off a pump or a set of bars. */
.cc-faf__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--cc-faf-img-radius);
}

.cc-faf__card:hover .cc-faf__img img,
.cc-faf__card:focus-visible .cc-faf__img img {
  opacity: 0.85;
}

.cc-faf__card:focus-visible {
  outline: 2px solid var(--foreground);
  outline-offset: 4px;
  border-radius: var(--cc-faf-img-radius);
}

/* Name + price. Both 16px on a 1.6 line height, stacked with no gap -
   the comp's two lines are 25.6 apart, which is the line height doing
   the work, so adding a gap here would overshoot the 405 card height. */
.cc-faf__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}


/* Product Name */

.cc-faf__name {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  letter-spacing: 0;
  color: var(--foreground);
  margin: 0;
  overflow-wrap: break-word;
}

/* Price. The markup inside comes from the platform's clPricing-item
   control, which is outside this site's folder - so this styles the
   wrapper and inherits down rather than naming classes that may not
   exist. Check the rendered output on dev and tighten if the control
   emits its own colour or size.

   70% white (--ink-subtle), not the 50% used for body copy. */
.cc-faf__price {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: 0;
  color: var(--ink-subtle);
  margin: 0;
}

.cc-faf__price * {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* Splide's default slide is a block; the cards need to stretch so a
   two-line product name does not leave the row ragged. */
.cc-faf__splide .splide__list {
  align-items: stretch;
}

.cc-faf__slide {
  height: auto;
}

/* Nav pill ------------------------------------------------------------- */

/* .cc-carousel-nav draws it. 80px below the grid in the comp (grid ends
   at 549, pill sits at 629), and centred. */
.cc-faf .cc-carousel-nav {
  margin: var(--space-lg) auto 0;
}

/* Responsive ----------------------------------------------------------- */

/* Card count per page is Splide's job (see the breakpoints in the
   data-splide-opts on the page). What CSS has to handle is the header,
   which cannot keep a 40px title and a 210px pill side by side on a
   phone. */
@media (max-width: 767px) {
  .cc-faf__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs);
    margin-bottom: var(--space-sm);
  }

  .cc-faf .cc-carousel-nav {
    margin-top: var(--space-sm);
  }
}