/* ==========================================================================
   What Shipped carousel and pager

   Case study pages only. The arrow edge-bands live in lightbox.css, because
   one rule styles the carousel and the lightbox arrows together.
   ========================================================================== */


/* ---- What Shipped ---- */
/* What shipped */
.shipped-backdrop {
  background-image:
    linear-gradient(rgba(var(--bg-rgb), 0.6), rgba(var(--bg-rgb), 0.6)),
    url("../assets/backdrop.webp");
  background-size: auto, 640px;
  background-repeat: repeat, repeat;
}
.shipped-backdrop .section{

  padding-bottom: 24px;
}
.shipped-backdrop .carousel{
  padding-bottom: 70px;
}
.shipped-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
/* This heading sits directly above the caption band, so it drops the 40px the
   other section headings carry. It was an inline style on all four case
   studies before it moved here. */
.shipped-head h2 { margin-bottom: 0; }
.shipped-image {
  width: 100%;
  /* Fixed stage: the box keeps one height for every slide, so changing image
     never shifts the page. Slides are letterboxed into it, not cropped.
     max-height keeps tall sets inside the viewport; it depends on the viewport
     alone, so the box height never changes between slides.

     One ratio for all four case studies, not a per-page value. There was a
     --carousel-ratio custom property here, set inline on each page; it was
     commented out in favour of this literal and the four inline declarations
     were left behind reading nothing. They were removed on 2026-09-10.

     Read this number honestly. With object-fit: contain a slide renders at
     width / max(slideRatio, boxRatio). 1.4 is below every page's widest slide
     -- 84.51 1.421, DocDraft 1.552, Calendly 1.602, Point.me 1.653 -- so the
     max() picks the slide each time and the picture's height varies inside a
     frame that does not move. A box at least as wide as the widest slide is
     what pins the picture too and pushes the letterboxing to the sides. See
     the carousel section of CLAUDE.md, and TODO.md, for the open decision. */
  aspect-ratio: 1.4;
  max-height: 72vh;
  object-fit: contain;
  object-position: center;
  border-radius: 6px;
  margin-top: 30px;
  display: block;
  cursor: zoom-in;
  padding:64px 24px;
}
/* The caption and the pager sit above the carousel on plain cream, per the
   Figma frame (node 385:63011), where the section runs title row, caption
   row, then the picture. */
.shipped-caption-band {
  background: var(--paper);
}
.shipped-caption-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 12px var(--gutter);
}
.shipped-caption {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pager span:focus-visible,
.shipped-image:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 1440px) {
  .shipped-image{padding: 64px 24px;}
}

@media (max-width: 1200px) {
  .shipped-image{padding: 42px 12px;}
}

@media (max-width: 900px) {
  .shipped-image{padding: 0px 0px;}
  /* The picture leads here and the caption reads as a label under it, so
       the band moves after the carousel. The section is block-level at wider
       widths; flex is only here to give `order` something to act on. */
  .shipped-backdrop { display: flex; flex-direction: column; }
  .shipped-backdrop > .carousel { order: 1; }
  .shipped-backdrop > .shipped-caption-band { order: 2; }
  .shipped-backdrop .carousel{
    padding-bottom: 0px;
  }
  /* The caption band used to sit between the heading and the picture, which
       is why `.shipped-head h2` carries no bottom margin. The band moved, so
       the heading now needs its own gap. */
  .shipped-head h2 { margin-bottom: 24px; }
  .shipped-caption-inner { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 24px; }
}


/* ---- Carousel ---- */
.carousel { 
  position: relative; 
  padding: var(--carousel-pad, 0px) 0; 
  }
/* The shipped carousel breaks out of the 1280px column and runs the full
   width of the viewport, with breathing room above and below. The arrows read
   --carousel-pad too, so their bands stay level with the picture. */
.carousel-full {
  --carousel-pad: 0px 0px;
  width: 100%;
  max-width: 1400px;
  margin: auto;
}
.carousel-full .shipped-image {
  margin-top: 0;
  /* 92, not 85: the caption bar and pager sit above the carousel rather than
     beside it, so the picture does not have to share the viewport with them.
     At 85 this clamp, not the box ratio, was what sized the picture on wide
     screens -- it held 84.51 to 850px on a 1000px viewport where the ratio
     wanted 1064, and the difference came off as side bars. */
  max-height: 92vh;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}
.carousel.single .carousel-arrow,
.pager.single { display: none; }

@media (max-width: 900px) {
  /* The picture can never be wider than the screen here, so give it the space
       the 42px band was taking and keep more of it tappable to open the
       lightbox, which is where a phone actually reads these screenshots.
       The vertical padding now lives on .shipped-image, which this breakpoint
       already sets to 0; --carousel-pad no longer drives the arrows. */
  .carousel-full { --carousel-edge: 12%; }
}


/* ---- Pager ---- */
.pager {
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 16px;
}
.pager span { color: var(--idle); cursor: pointer; }
.pager span.active { color: var(--accent); font-weight: 600; }

@media (max-width: 900px) {
  /* 16x20px numbers are too small to tap; pad them out to 44px. */
  .pager { flex-wrap: wrap; gap: 4px; margin-left:-12px;}
  .pager span {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}