/* ------------------------------------------------------------------
   Our Work gallery - .cc-work
   Source of truth: Figma "The Velobarn" file, node 21:670 ("Frame 42")
   inside the 1380-wide container of the 1440 homepage.

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

   Unlike the hero and Best Sellers, this section draws NO nav pill, so
   global/carousel-nav.css is not a dependency. The gallery is a
   continuously-panning marquee: it has no discrete pages for dots to
   point at, and the arrows were dropped with them.

   The geometry, read off the comp:

     panel   1380 x 786, black on the page grey, 20px radius
     inset   40 top, 40 left; the gallery escapes the left inset and
             runs flush to the panel edge, overflowing off the right
     header  title, 10px, 2-line body at 465 wide, 40px, the 210x64 pill
     gap     160px of empty black between the pill and the row
     row     324 tall, 20px gaps, 20px clear of the panel bottom

   40 + (138 + 40 + 64) + 160 + 324 + 20 = 786, so the panel's designed
   height falls out of its contents rather than being pinned.

   All six slides in the comp are the same width EXCEPT the third, which
   is drawn at 432 (= 324 x 4:3). That is not a second card type - it is
   one slide caught mid-hover. Slides 1, 2, 4 and 5 are visibly portrait
   CROPS of landscape photographs; the third is the same photograph
   uncropped. So: every slide rests cropped, and the hovered one grows
   to the width its image actually wants.
   ------------------------------------------------------------------ */

:root {
  /* Row height. 324 at 1440, scaled below that so a 324px band does not
     swallow a phone screen. 23.5vw is 324/1380. */
  --cc-work-row-h: clamp(200px, 23.5vw, 324px);

  /* Resting slide aspect: 241.3333 / 324 off the comp. Width is derived
     from the row height rather than fixed, so the strip keeps its
     proportions at every viewport. */
  --cc-work-rest-ar: 0.744856;

  /* The empty black between the CTA and the row. Deliberate in the comp
     - it is what gives the panel its height - so it is reproduced
     rather than collapsed onto the spacing scale. Clamped for the same
     reason --space-xl is: 160 is right at 1440 and absurd on a phone.
     11.6vw is 160/1380. */
  --cc-work-header-gap: clamp(60px, 11.6vw, 160px);

  /* Ceiling on the hover expand. A panorama would otherwise push every
     other slide off the panel; 2x the row height is a shade wider than
     the comp's 4:3 and comfortably inside the container. */
  --cc-work-expand-max: 2;

  /* Fallback expand aspect, used until our-work.js has read the image's
     intrinsic size (and if the image 404s). 4:3 is what the comp draws. */
  --cc-work-nat-ar: 1.33333;

  /* Panel and slide corners. Both 20, matching the hero card and the
     other raised panels - not the 10 the product cards use. */
  --cc-work-radius: 20px;
}

/* Panel ---------------------------------------------------------------- */

/* Sits inside the page container, so no side padding to add here -
   .container supplies it. overflow:hidden does double duty: it clips the
   marquee at the panel's right edge and it is what makes the radius
   actually cut the corner slides. */
.cc-work {
  position: relative;
  background: var(--surface-panel);
  border-radius: var(--cc-work-radius);
  overflow: hidden;
  padding: var(--space-sm) 0 var(--space-2xs) var(--space-sm);
  margin-bottom: var(--section-gap);
}

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

/* 465 is the comp's text column. The CTA sits under the copy, not beside
   it - this section stacks where Best Sellers puts the pill on the right. */
.cc-work__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 465px;
  /* The 160px pause before the gallery. */
  margin-bottom: var(--cc-work-header-gap);
}

/* h2 so the homepage keeps a single h1 (the welcome message in
   default.aspx), same as the Best Sellers title.

   The comp draws this text box 64 tall on a 40px face, i.e. leading 1.6,
   where faf-carousel.css sets the Best Sellers title to --leading-tight.
   Two section headings on one page should match, so this follows Best
   Sellers. If the extra 24px turns out to be deliberate, change it here
   and nowhere else. */
.cc-work__title {
  font-size: var(--h2);
  font-weight: var(--weight-demibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  color: var(--foreground);
  margin: 0;
  overflow-wrap: break-word;
}

/* 20px copy at 1.6, which is the comp's two 32px lines. 10px under the
   title - the "tight heading-to-body pairing" --space-3xs is named for. */
.cc-work__desc {
  margin: var(--space-3xs) 0 0;
  overflow-wrap: break-word;
}

/* 40px from the copy to the pill. .cc-btn draws the pill itself - 210x64
   as designed - so there is nothing to restate. */
.cc-work__cta {
  margin-top: var(--space-sm);
}

/* Gallery -------------------------------------------------------------- */

/* Pulled back out of the panel's 40px left inset so the strip starts
   flush at x=0, as drawn. The right edge is clipped by the panel. */
.cc-work__splide {
  margin-left: calc(var(--space-sm) * -1);
}

/* Splide's track clips by default; the panel is already doing that, and
   the slides need to be able to sit under its rounded corners rather
   than against a second straight edge inside them. */
.cc-work__splide .splide__track {
  overflow: visible;
}

.cc-work__splide .splide__list {
  align-items: flex-start;
}

/* Rest state. Width is derived, not fixed, so autoWidth reads whatever
   the current row height implies - which is how the strip scales down
   without a breakpoint per size. */
.cc-work__slide {
  height: var(--cc-work-row-h);
  width: calc(var(--cc-work-row-h) * var(--cc-work-rest-ar));
  flex: 0 0 auto;
}

.cc-work__card {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--cc-work-radius);
  overflow: hidden;
  text-decoration: none;
}

/* cover, not contain: at rest the slide is narrower than the photograph,
   and cover is what crops the sides off. When the slide expands to the
   image's own aspect there is nothing left to crop, so cover quietly
   becomes a no-op - the reveal needs no second object-fit. */
.cc-work__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-work__card:focus-visible {
  outline: 2px solid var(--foreground);
  outline-offset: 4px;
}

/* Hover expand ---------------------------------------------------------- */

/* Gated on a real pointer. On touch there is no hover to leave, so the
   slide would expand on the tap that was meant to follow the link and
   then have no way back - the strip just pans and drags there instead.

   Width, not transform: scaleX would stretch the photograph sideways,
   where the whole point is to reveal the parts cover is cutting off.
   The row is a flex line, so the neighbours are pushed along by the
   growth. Splide is NOT told about any of this - no refresh() - because
   re-measuring mid-hover is what would snap the marquee back. The
   translate keeps running underneath and the layout change rides on top. */
@media (hover: hover) and (pointer: fine) {
  .cc-work__slide {
    transition: width 0.45s cubic-bezier(0.25, 1, 0.5, 1) !important;
  }

  /* focus-within, not just hover: the card is a link, so this is also
     what reveals the photo for someone tabbing through the strip. */
  .cc-work__slide:hover,
  .cc-work__slide:focus-within {
    width: min(
      calc(var(--cc-work-row-h) * var(--cc-work-nat-ar)),
      calc(var(--cc-work-row-h) * var(--cc-work-expand-max))
    );
  }
}

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

/* The row height, slide width and header gap are all clamped above, so
   the strip needs no breakpoint of its own. What does need one is the
   panel inset: 40px of padding on a 375px screen leaves very little for
   a 40px heading. */
@media (max-width: 767px) {
  .cc-work {
    padding: var(--space-2xs) 0 var(--space-2xs) var(--space-2xs);
  }

  .cc-work__splide {
    margin-left: calc(var(--space-2xs) * -1);
  }
}

/* Motion ---------------------------------------------------------------- */

/* A continuously-panning strip is precisely what this setting is for.
   splide-config.js switches the auto-scroll itself off; this drops the
   expand animation to an instant state change rather than removing it,
   so the interaction still works without the movement. */
@media (prefers-reduced-motion: reduce) {
  .cc-work__slide {
    transition: none;
  }
}