/* page/ss-detail-h.css — the production case-study detail template
   ("Alternating Photo Panels", chosen from the draft-h exploration).
   Full-viewport-height panels alternate: real campaign photo on one side,
   story text on the other, flipping sides each panel — a magazine-spread
   rhythm built from real campaign photography. Reveals are opacity+scale,
   never clip-path (case-study.css's own T-0025 rule applies here too).
   Composes tokens/classes from styles.css + home-flagship.css only
   (R-04/R-05) — no shared file edited. Loads LAST.

   Used by every success-stories/<slug>.html page. Content is injected at
   runtime by page/case-study-h.js from components/data-case-studies.js —
   this file stays pure structure/style, no story-specific content. */

/* ---------------- Breadcrumb ---------------- */
.cs-crumb { padding: 18px var(--gutter) 0; }
.cs-crumb__link {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600;
  color: var(--text); transition: color .2s var(--ease-standard);
}
.cs-crumb__link:hover { color: var(--primary); }
.cs-crumb__link svg { width: 13px; height: 13px; }

/* ---------------- Masthead ---------------- */
.cs-h-mast { text-align: center; padding-bottom: 0; }
.cs-h-mast__kicker {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); justify-content: center; margin: 0 0 14px;
}
.cs-h-mast__kicker::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--primary); }
.cs-h-mast__title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(34px, 6vw, 64px); line-height: 1.02; color: var(--primary); margin: 0 auto; text-wrap: balance;
}
.cs-h-mast__lede {
  max-width: 62ch; margin: clamp(18px, 2.4vw, 26px) auto 0;
  font-size: clamp(15.5px, 1.6vw, 17.5px); line-height: 1.7; color: var(--text); text-wrap: pretty;
}

/* ---------------- Alternating panels ----------------
   Media column runs wider than copy (1.35fr vs 1fr) so the photo carries the
   panel's visual weight, per feedback that images read too small.

   No min-height. The old 68vh floor was written when every photo filled a
   fixed 4 / 3.6 frame and therefore reliably filled the panel; now the mount
   is the shape of the photograph, and a wide one is short — the floor turned
   into a few hundred pixels of dead air under every panel. The margin below
   still carries the spread rhythm. */
.cs-panel {
  max-width: var(--max); margin: clamp(56px, 7vw, 88px) auto 0;
  display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center;
}
.cs-panel--flip { grid-template-columns: 1fr 1.35fr; }
.cs-panel--flip .cs-panel__media { order: 2; }
/* Copy-only panel — a story whose source had no Mockup image for this slot
   (see page/case-study-h.js). One measured column instead of a half-empty
   grid: there is no photo left to fill it. */
.cs-panel--copy {
  grid-template-columns: 1fr; max-width: 760px;
  margin-top: clamp(40px, 5vw, 64px);
}
/* ---- The photo mount ----
   No case-study photograph is ever cropped. The frame does not impose a
   ratio on the image; the image gives the frame its ratio. --cs-ar is
   written per image by page/success-stories-detail.js from the file's own
   naturalWidth/naturalHeight the moment it decodes, so the mount ends up
   the exact shape of the photograph — nothing cut off, and no letterbox
   bands either. 4 / 3 is only the pre-decode placeholder that reserves
   the space.

   The mat (the padding) is what makes the zoom possible: overflow clips at
   the padding edge, so the photo can scale up into the mat on hover and
   still be entirely inside the frame. Growth is ~1.5% per side against a
   10-16px mat on a >=300px image, so the margin is never spent. */
.cs-panel__media {
  position: relative;
  border-radius: var(--r-frame);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: clamp(10px, 1.1vw, 16px);
  transform-origin: center;
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.cs-panel__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--cs-ar, 4 / 3);
  /* contain, not cover, is the whole point: if a ratio ever slips past the
     clamp in page/success-stories-detail.js the image letterboxes rather
     than losing an edge. No vh cap here — the JS clamp already bounds the
     height, and a viewport-relative cap would reintroduce bands on short
     screens. */
  object-fit: contain;
  border-radius: calc(var(--r-frame) - 8px);
  transform: scale(1);
  transition: transform .65s var(--ease-out);
}
/* Interaction: the photo eases up inside its mat, the mount lifts a little
   with it. Pointer-gated — a touch device gets the resting state, which is
   the whole photograph either way. */
@media (hover: hover) and (pointer: fine) {
  .cs-panel__media:hover img { transform: scale(1.03); }
  .cs-panel__media:hover { box-shadow: var(--sh-card); border-color: rgba(11,11,11,.12); }
}
/* Device/product mockup rather than a photograph (flagged fit:"contain" on the
   mockups entry — see components/data-case-studies.js). Its own ground is
   white, so the mat is white too and the artwork reads as the devices
   floating on the page rather than sitting on a grey card. */
.cs-panel__media--contain { background: var(--white); }
.cs-panel__kicker {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px;
}
.cs-panel__kicker::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--primary); }
.cs-panel__heading {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em;
  font-size: clamp(21px, 2.6vw, 30px); line-height: 1.2; color: var(--primary); margin: 0 0 14px;
}
.cs-panel__body { font-size: 15.5px; line-height: 1.7; color: var(--text); margin: 0 0 12px; }
.cs-panel__body:last-child { margin-bottom: 0; }
.cs-h-list { margin: 4px 0 14px; padding: 0; list-style: none; }
.cs-h-list li {
  position: relative; padding-left: 22px; margin-bottom: 9px;
  font-size: 15px; line-height: 1.6; color: var(--text);
}
.cs-h-list li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 5px; height: 9px; border: solid var(--primary); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg);
}
.cs-h-list:last-child { margin-bottom: 0; }

/* ---------------- Stats — light band, photo backdrop faded behind it ---------------- */
.cs-stats-h-wrap { position: relative; max-width: var(--max); margin: clamp(56px, 8vw, 84px) auto 0; border-radius: var(--r-frame); overflow: hidden; }
.cs-stats-h-wrap__bg { position: absolute; inset: 0; }
.cs-stats-h-wrap__bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); }
.cs-stats-h-wrap__bg::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.88); }
.cs-stats-h {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr);
  padding: clamp(28px, 3.5vw, 40px) clamp(20px, 3vw, 32px);
}
.cs-stats-h::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); z-index: 2; }
.cs-stats-h__item { text-align: center; padding: 0 14px; border-left: 1px solid rgba(11,11,11,.12); }
.cs-stats-h__item:first-child { border-left: 0; }
.cs-stats-h__value { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(24px, 3vw, 32px); color: var(--primary); margin: 0 0 6px; }
.cs-stats-h__label { font-size: 12.5px; color: var(--text); margin: 0; }

/* Variable result counts (2-6 in the source data) — JS applies one of these
   instead of the default 5-column grid; the max-width media queries below
   still take over on small screens regardless of which modifier is set. */
.cs-stats-h--cols-2 { grid-template-columns: repeat(2, 1fr); }
.cs-stats-h--cols-3 { grid-template-columns: repeat(3, 1fr); }
.cs-stats-h--cols-4 { grid-template-columns: repeat(4, 1fr); }
.cs-stats-h--cols-6 { grid-template-columns: repeat(6, 1fr); }

/* ---------------- Boost stats — a secondary, plainer strip for the rare
   story (Djurönäset) with a separate paid-boost figure block. No photo
   backdrop, so it reads as a supplementary note rather than the headline
   numbers. ---------------- */
.cs-boost-h-wrap { max-width: var(--max); margin: clamp(28px, 3.5vw, 40px) auto 0; border-radius: var(--r-frame); background: var(--surface-2); overflow: hidden; }
.cs-boost-h__label {
  display: block; padding: 16px clamp(20px, 3vw, 32px) 0; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.cs-boost-h { display: grid; grid-template-columns: repeat(5, 1fr); padding: 10px clamp(20px, 3vw, 32px) clamp(20px, 3vw, 28px); }
.cs-boost-h__item { text-align: center; padding: 0 14px; border-left: 1px solid rgba(11,11,11,.12); }
.cs-boost-h__item:first-child { border-left: 0; }
.cs-boost-h__value { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(19px, 2.3vw, 24px); color: var(--primary); margin: 0 0 4px; }
.cs-boost-h__label-sm { font-size: 12px; color: var(--text); margin: 0; }

/* ---------------- Quote ---------------- */
.cs-quote-h { max-width: 760px; margin: clamp(48px, 7vw, 76px) auto 0; text-align: center; }
.cs-quote-h__text {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(18px, 2.2vw, 23px); line-height: 1.55; color: var(--primary);
  margin: 0 0 18px; text-wrap: pretty;
}
.cs-quote-h__name { font-weight: 700; font-size: 15px; color: var(--primary); margin: 0; }
.cs-quote-h__role { font-size: 13.5px; color: var(--text); margin: 2px 0 0; }

/* ---------------- Conclusion ---------------- */
.cs-conclusion-h { max-width: 720px; margin: clamp(48px, 7vw, 76px) auto 0; text-align: center; }
.cs-conclusion-h__kicker {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); justify-content: center; margin: 0 0 14px;
}
.cs-conclusion-h__body {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em;
  font-size: clamp(20px, 2.6vw, 28px); line-height: 1.4; color: var(--primary); margin: 0; text-wrap: balance;
}

/* ---------------- More success stories ---------------- */
.cs-more__head { max-width: var(--max); margin: clamp(56px, 8vw, 84px) auto 20px; text-align: center; }
.cs-more { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: start; }
/* Same uncropped mount as the panels, at card scale. The brand label used to
   sit on the photo under a dark scrim; with the photo contained rather than
   filling the frame the scrim would have landed on the mat, so the label
   moved below the image where it is --primary on white and passes AA on its
   own (R-07) with no scrim to prop it up. */
.cs-more__card { display: block; position: relative; }
.cs-more__media {
  display: block;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 8px;
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.cs-more__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--cs-ar, 16 / 10);
  object-fit: contain;
  border-radius: calc(var(--r-card) - 5px);
  transform: scale(1);
  transition: transform .5s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cs-more__card:hover .cs-more__media img { transform: scale(1.03); }
  .cs-more__card:hover .cs-more__media { box-shadow: var(--sh-card); border-color: rgba(11,11,11,.12); }
}
.cs-more__card:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--r-card); }
.cs-more__brand {
  display: block; margin-top: 12px;
  color: var(--primary); font-family: var(--font-display); font-weight: 700; font-size: 16px;
}

@media (max-width: 860px) {
  .cs-panel, .cs-panel--flip { grid-template-columns: 1fr; }
  .cs-panel--flip .cs-panel__media { order: 0; }
  .cs-stats-h,
  .cs-stats-h--cols-2, .cs-stats-h--cols-3, .cs-stats-h--cols-4, .cs-stats-h--cols-6 { grid-template-columns: repeat(3, 1fr); }
  .cs-boost-h { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .cs-stats-h,
  .cs-stats-h--cols-2, .cs-stats-h--cols-3, .cs-stats-h--cols-4, .cs-stats-h--cols-6 { grid-template-columns: repeat(2, 1fr); }
  .cs-stats-h__item:nth-child(odd) { border-left: 0; }
  .cs-boost-h { grid-template-columns: repeat(2, 1fr); }
  .cs-boost-h__item:nth-child(odd) { border-left: 0; }
  .cs-more { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-panel__media { transition: none; opacity: 1; transform: none; }
  /* The photo still shows in full — only the easing stops (R-06). */
  .cs-panel__media img,
  .cs-more__media img,
  .cs-more__media { transition: none; transform: none; }
}