/* ============================================================
   SANO | Case Studies — CSS panel
   ============================================================ */

.sano-cs {
  container-type: inline-size;
  container-name: sano-cs;

  /* ---- MOTION TOKENS — shared across every Sano module ---- */
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-out:  cubic-bezier(0.23, 1, 0.32, 1);
  --dur-reveal: 1000ms;
  --dur-hover: 300ms;
  --reveal-step: 120ms;

  /* ---- TYPOGRAPHY — replace "inherit" with the theme font ---- */
  --cs-font: inherit;

  /* ---- THE NUMBERS TO TUNE. No field behind these yet: change
     them here, or say the word and we add them to the Style tab. ---- */
  --cs-pad: 56px;          /* inside the white card, desktop  */
  --cs-pad-m: 26px;        /* inside the white card, narrow   */
  --cs-metric: 60px;       /* the big figure, desktop         */
  --cs-metric-m: 44px;
  --cs-metric-weight: 500;
  --cs-lead: 24px;         /* the line under the figure       */
  --cs-lead-m: 20px;
  --cs-lead-solo: 30px;    /* same line when there is no figure */
  --cs-lead-solo-m: 24px;
  --cs-gap-min: 24px;      /* smallest gap the auto layout may close to */
  --cs-peek: 88%;          /* card width in the rail — lower = more peek */
  --cs-metric-color: #F4511E;

  /* ---- FALLBACKS — the live values are printed by the HTML panel ---- */
  --cs-bg: #F4511E;
  --cs-max: 1140px;
  --cs-radius: 20px;
  --cs-h: 36px;
  --cs-h-m: 28px;
  --cs-h-weight: 500;
  --cs-heading-color: #FFFFFF;
  --cs-card-bg: #FFFFFF;
  --cs-card-title: #0B1B2B;
  --cs-card-desc: #5A6472;
  --cs-card-link: #3B2FB5;
  --cs-cta-bg: #FFFFFF;
  --cs-cta-text: #F4511E;

  background: var(--cs-bg);
  font-family: var(--cs-font);

  /* NO padding here. Vertical spacing belongs to the dnd section,
     so this lines up with every other section at the same width. */
}

.sano-cs__inner {
  max-width: var(--cs-max, 1140px);
  margin-inline: auto;
}

/* ---- HEAD ------------------------------------------------- */
.sano-cs__head {
  margin-bottom: clamp(28px, 4cqi, 40px);
  text-align: center;
}

.sano-cs__eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--cs-heading-color);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .9;
}

/* Two flat sizes at a breakpoint rather than a cqi clamp. The
   Style tab expresses it as "desktop size" and "mobile size", so
   the code should mean exactly that and nothing in between. */
.sano-cs__heading {
  max-width: 820px;
  margin: 0 auto;
  color: var(--cs-heading-color);
  font-size: var(--cs-h, 36px);
  font-weight: var(--cs-h-weight, 500);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.sano-cs__intro {
  max-width: 620px;
  margin: 16px auto 0;
  color: var(--cs-heading-color);
  font-size: 16px;
  line-height: 1.55;
  opacity: .88;
  text-wrap: pretty;
}

/* ---- TABS -------------------------------------------------
   On narrow screens these double as the carousel indicator, so
   they scroll horizontally rather than wrapping to two rows.
----------------------------------------------------------- */
.sano-cs__tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: clamp(24px, 3cqi, 32px);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.sano-cs__tabs::-webkit-scrollbar { display: none; }

.sano-cs__tab {
  flex: 0 0 auto;
  margin: 0;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: var(--cs-heading-color);
  font-family: var(--cs-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out);
}

.sano-cs__tab.is-active {
  background: var(--cs-card-bg);
  color: var(--cs-cta-text);
}

.sano-cs__tab:focus-visible {
  outline: 2px solid var(--cs-heading-color);
  outline-offset: 3px;
}

/* ---- RAIL / PANELS ----------------------------------------
   --mode is read by the JS so the breakpoint lives in exactly
   one place: this file. Never duplicate it in the script.
----------------------------------------------------------- */
.sano-cs__rail { --mode: tabs; }

.sano-cs__panel {
  display: none;
  overflow: hidden;
  border-radius: var(--cs-radius, 20px);
  background: var(--cs-card-bg);
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "content media";
  align-items: stretch;
  min-height: 420px;
}

.sano-cs__panel.is-active { display: grid; }

/* ---- THE AUTO LAYOUT --------------------------------------
   Figure at the top, text in the middle, link at the bottom.
   Two `margin-top: auto` split all the leftover height evenly
   between the two gaps, so the text block lands centred without
   any fixed number to go stale. Add three lines of description
   and the gaps close on their own; nothing needs retuning.
   padding-top on the link is the floor those gaps close to.
----------------------------------------------------------- */
.sano-cs__content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--cs-pad, 56px);
  min-width: 0;
}

.sano-cs__metric {
  display: block;
  margin-bottom: 10px;
  color: var(--cs-metric-color);
  font-size: var(--cs-metric, 60px);
  font-weight: var(--cs-metric-weight, 500);
  line-height: 1;
  letter-spacing: -0.03em;
}

.sano-cs__lead {
  margin: auto 0 14px;
  color: var(--cs-card-title);
  font-size: var(--cs-lead, 24px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* No figure yet — the line steps up and carries the card on its
   own. It also loses the auto margin: with nothing above it, the
   free space would open a hole exactly where the number is
   missing, which is the one place it must not. */
.sano-cs__content.has-no-metric .sano-cs__lead {
  margin-top: 0;
  font-size: var(--cs-lead-solo, 30px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.sano-cs__desc {
  margin: 0;
  max-width: 46ch;
  color: var(--cs-card-desc);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}

.sano-cs__link {
  margin-top: auto;
  padding-top: var(--cs-gap-min, 24px);
  color: var(--cs-card-link);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.sano-cs__arrow {
  display: inline-block;
  margin-left: 7px;
  transition: transform var(--dur-hover) var(--ease-out);
}

.sano-cs__link:focus-visible {
  outline: 2px solid var(--cs-card-link);
  outline-offset: 3px;
  border-radius: 4px;
}

.sano-cs__media {
  grid-area: media;
  overflow: hidden;
  min-height: 0;
}

.sano-cs__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-soft);
}

/* ---- FOOTER ----------------------------------------------- */
.sano-cs__footer {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 5cqi, 52px);
}

.sano-cs__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  border: 1px solid var(--cs-cta-bg);
  border-radius: 999px;
  background: var(--cs-cta-bg);
  color: var(--cs-cta-text);
  font-family: var(--cs-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 220ms var(--ease-out),
              background-color 180ms ease,
              border-color 180ms ease;
}

/* Ungated: the only feedback a touch user gets, and it releases */
.sano-cs__cta:active { transform: scale(.99); }

.sano-cs__cta:focus-visible {
  outline: 2px solid var(--cs-cta-bg);
  outline-offset: 4px;
}

/* ---- NARROW SCREENS — SWIPE RAIL WITH PEEK ----------------
   Every panel shows at once and the rail scrolls. The card sits
   at 88% so the edge of the next one is always visible: that
   sliver is what tells you there is more, and it does the job
   that a row of dots does badly.

   ONE NUMBER TO TUNE: the 760px, and the same 760px in the
   @supports fallback at the bottom of this file.
----------------------------------------------------------- */
@container sano-cs (max-width: 760px) {
  .sano-cs__heading { font-size: var(--cs-h-m, 28px); }

  .sano-cs__rail {
    --mode: rail;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .sano-cs__rail::-webkit-scrollbar { display: none; }

  /* grid-template-rows is the fix for the images coming out at
     different heights. The panels are flex items, so they all
     stretch to the tallest one; without a pinned first row that
     spare height was split between image and text, and every
     card has text of a different length. Now the image takes
     exactly its ratio and ALL the slack goes to the text row —
     which is also what feeds the auto layout above. */
  .sano-cs__panel,
  .sano-cs__panel.is-active {
    display: grid;
    flex: 0 0 var(--cs-peek, 88%);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "media" "content";
    min-height: 0;
  }

  .sano-cs__media { aspect-ratio: var(--cs-media-ratio-m, 16 / 9); }

  .sano-cs__content { padding: var(--cs-pad-m, 26px); }

  .sano-cs__metric { font-size: var(--cs-metric-m, 44px); }
  .sano-cs__lead   { font-size: var(--cs-lead-m, 20px); }

  .sano-cs__content.has-no-metric .sano-cs__lead {
    font-size: var(--cs-lead-solo-m, 24px);
  }

  .sano-cs__tabs { justify-content: flex-start; }
}

/* ---- SCROLL REVEAL ----------------------------------------
   Hidden state carries no transition, or adding .is-ready fades
   the section out for a second first. The delay lives on
   .is-visible, the state each part transitions INTO — that is
   what staggers them.
----------------------------------------------------------- */
.sano-cs.is-ready .sano-cs__eyebrow,
.sano-cs.is-ready .sano-cs__heading,
.sano-cs.is-ready .sano-cs__intro,
.sano-cs.is-ready .sano-cs__tabs,
.sano-cs.is-ready .sano-cs__rail {
  opacity: 0;
  transform: translateY(24px);
}

.sano-cs.is-ready .sano-cs__eyebrow.is-visible,
.sano-cs.is-ready .sano-cs__heading.is-visible,
.sano-cs.is-ready .sano-cs__intro.is-visible,
.sano-cs.is-ready .sano-cs__tabs.is-visible,
.sano-cs.is-ready .sano-cs__rail.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-reveal) var(--ease-soft),
              transform var(--dur-reveal) var(--ease-soft);
  transition-delay: calc(var(--i, 0) * var(--reveal-step));
}

/* Entrance over: hand transform back, or the rail carries a
   1000ms transition while the visitor is swiping it. */
.sano-cs.is-ready .sano-cs__rail.is-settled {
  transition: none;
  transition-delay: 0s;
}

/* ---- HOVER — gated so a tap does not leave the card stuck --- */
@media (hover: hover) and (pointer: fine) {
  .sano-cs__panel:hover .sano-cs__media img { transform: scale(1.03); }

  .sano-cs__link:hover { text-decoration: underline; }
  .sano-cs__link:hover .sano-cs__arrow { transform: translateX(4px); }

  .sano-cs__tab:not(.is-active):hover { background: rgba(255, 255, 255, .28); }

  .sano-cs__cta:hover {
    transform: translateY(-1px) scale(1.04);
    background: color-mix(in srgb, var(--cs-cta-bg) 92%, #000);
    border-color: color-mix(in srgb, var(--cs-cta-bg) 92%, #000);
  }
}

/* ---- REDUCED MOTION ---------------------------------------
   Zero the tokens, then force the resting state, so the section
   is never left hidden for someone who asked for less movement.
----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sano-cs { --dur-reveal: 1ms; --dur-hover: 1ms; --reveal-step: 0ms; }

  .sano-cs.is-ready .sano-cs__eyebrow,
  .sano-cs.is-ready .sano-cs__heading,
  .sano-cs.is-ready .sano-cs__intro,
  .sano-cs.is-ready .sano-cs__tabs,
  .sano-cs.is-ready .sano-cs__rail {
    opacity: 1;
    transform: none;
  }

  .sano-cs__media img,
  .sano-cs__arrow { transition: none; }
  .sano-cs__cta:hover { transform: none; }
}

/* ---- Fallback for browsers without container queries ------ */
@supports not (container-type: inline-size) {
  @media (max-width: 760px) {
    .sano-cs__heading { font-size: var(--cs-h-m, 28px); }
    .sano-cs__rail {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
    }
    .sano-cs__panel,
    .sano-cs__panel.is-active {
      display: grid;
      flex: 0 0 var(--cs-peek, 88%);
      scroll-snap-align: start;
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr;
      grid-template-areas: "media" "content";
      min-height: 0;
    }
    .sano-cs__media { aspect-ratio: var(--cs-media-ratio-m, 16 / 9); }
    .sano-cs__content { padding: var(--cs-pad-m, 26px); }
    .sano-cs__metric { font-size: var(--cs-metric-m, 44px); }
    .sano-cs__lead   { font-size: var(--cs-lead-m, 20px); }
  }
}