/* Tandm case study: visual sizing and placement, matched to the uxfolio layout */

/* Full content-width visuals sitting under their text (problem, solution, prototype) */
.cs section figure.full { margin: 40px 0 0; }

/* Break out wider than the text column, like the full-bleed flows and wireframes */
.cs section figure.bleed {
  width: min(calc(100vw - 32px), 1280px);
  position: relative; left: 50%; translate: -50% 0;
  margin-top: 48px;
}
.cs section figure.bleed figcaption {
  text-align: center; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); color: var(--text); margin: 0 0 16px;
}
.cs section figure.bleed { display: flex; flex-direction: column-reverse; }

/* Medium, centred visual */
.cs section figure.mid { max-width: 780px; margin: 48px auto 0; }

/* Features: every screen shown large, one after another */
.feature-stack { display: grid; gap: 56px; margin-top: 32px; }
.feature-stack figure { margin: 0 !important; }
.feature-stack figcaption { margin: 0 0 12px; font-size: var(--fs-card); color: var(--muted); }
.feature-stack figcaption b { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); color: var(--text); margin-bottom: 4px; }

/* Text beside a visual: centred vertically, visual first on the left */
.cs .split.media-first, .cs .split.rev { align-items: center; }
.cs .split.media-first { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.cs #design-problems .split { margin-top: 64px; }
.cs #design-problems .split .hmw { margin: 0 0 8px; }
.cs #design-problems .split h3 { font-size: var(--fs-h3); line-height: 1.35; }
.cs #final .split .eyebrow { margin-bottom: 8px; }

@media (max-width: 760px) {
  .cs .split.media-first { grid-template-columns: 1fr; }
  .cs .split.media-first > figure { order: 2; }
  .cs .split.rev > figure { order: 2; }
  .feature-stack { gap: 40px; }
}

/* Hero: full-screen textured band; copy lines up with the nav, prototype runs wide to the right */
html { overflow-x: clip; }
.cs.page { padding-top: 0; }
.hero-band {
  --edge: max(var(--gutter), calc(50vw - var(--max) / 2 + var(--gutter)));
  position: relative; isolation: isolate;
  margin-inline: calc(50% - 50vw);
  padding: 20px max(var(--gutter), calc(50vw - 680px)) 56px var(--edge);
  min-height: calc(100svh - var(--nav-h, 84px));
  display: flex; flex-direction: column;
  background:
    radial-gradient(900px 520px at 78% 45%, rgba(255, 255, 255, .5), transparent 65%),
    var(--band, var(--card-sky));
}
/* paper-like grain so the empty space around the prototype doesn't feel flat */
.hero-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .35 0 0 0 0 .45 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .45 0 0 0 0 .55 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .hero-band::before { mix-blend-mode: screen; opacity: .18; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-band::before { mix-blend-mode: screen; opacity: .18; } }
:root[data-theme="dark"] .hero-band { background: var(--band, var(--card-sky)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-band { background: var(--band, var(--card-sky)); } }
.hero-band .crumbs { margin: 0; }
.hero-intro {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(32px, 4.5vw, 72px); align-items: center; padding-block: 32px 8px;
}
.hero-intro .hero-proto { margin: 0; }
.hero-intro .hero-proto video {
  display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); background: #fff;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .3);
}
.hero-intro .tag { display: inline-block; margin-bottom: 16px; }
.hero-intro h1 { margin: 0 0 12px; font-size: var(--fs-h1); }
.hero-intro .hero-sub { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.4; margin: 0 0 16px; color: var(--text); }
.hero-intro .lede { margin: 0; max-width: 34ch; }
.cs-hero .role-cards { margin: 64px 0 56px; }
@media (max-width: 860px) {
  .hero-band { min-height: 0; padding: 20px var(--gutter) 40px; }
  .hero-intro { grid-template-columns: 1fr; gap: 28px; padding-top: 24px; }
  .cs-hero .role-cards { margin: 40px 0; }
}

/* One media style across the case study: same corner radius everywhere */
.cs figure img, .cs figure video.anim, .cs .gallery img, .cs-hero .cover, .cs .problem-art { border-radius: 10px; }

/* Small labels use the same muted eyebrow color everywhere */
.cs .hmw { color: var(--muted) !important; }

/* Retailer / seller problem illustrations: each column is one block, art and text the same width,
   so the edges line up; the two blocks sit centred as a balanced pair */
.cs .problems { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; gap: clamp(40px, 8vw, 104px); }
.cs .problems .problem-art { width: 100%; max-width: none; }
.cs .problems dl { margin-top: 20px; }
@media (max-width: 720px) {
  .cs .problems { grid-template-columns: minmax(0, 320px); }
}

/* ---------- Hero: four finished screens, crossfading in one frame ---------- */
.hero-show { display: grid; gap: 14px; }
.hs-screen {
  position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; isolation: isolate;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(10, 40, 60, .45), 0 4px 14px -8px rgba(10, 40, 60, .2);
}
.hs-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* the image is wider-than-tall inside a 16:10 frame, so it only ever moves up and down */
  object-fit: cover; object-position: 50% 0%;
  border: 0 !important; border-radius: 0 !important; opacity: 0;
  transition: opacity .8s ease;
}
.hs-slide.on { opacity: 1; }
/* the screen on show scrolls slowly down the page, holding at the top and bottom */
.hs-slide.on { animation: hs-scroll var(--dur, 7s) cubic-bezier(.4, 0, .5, 1) both; }
@keyframes hs-scroll {
  0%, 14% { object-position: 50% 0%; }
  86%, 100% { object-position: 50% 100%; }
}

/* caption and progress sit under the frame, not over the screen */
.hs-bar { display: flex; align-items: center; gap: 20px; min-height: 22px; }
.hs-caps { position: relative; flex: 1; min-width: 0; margin: 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.hs-cap {
  position: absolute; left: 0; top: 0; width: 100%; opacity: 0; translate: 0 6px;
  transition: opacity .45s ease, translate .45s cubic-bezier(.22, 1, .36, 1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hs-cap.on { opacity: 1; translate: 0 0; }
.hs-cap b { font-family: var(--font-display); font-weight: 500; color: var(--text); margin-right: 6px; }
.hs-dots { flex: none; display: flex; gap: 6px; }
.hs-dots button { width: 30px; height: 16px; padding: 6px 0; border: 0; background: none; cursor: pointer; }
.hs-dots i { display: block; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--text) 18%, transparent); position: relative; overflow: hidden; }
.hs-dots button:hover i { background: color-mix(in srgb, var(--text) 32%, transparent); }
.hs-dots i::after { content: ""; position: absolute; inset: 0; border-radius: 2px; background: var(--text); transform-origin: left; scale: 0 1; }
.hs-dots button[aria-current="true"] i::after { animation: hs-fill var(--dur, 5s) linear forwards; }
.hs-dots button:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }
@keyframes hs-fill { from { scale: 0 1; } to { scale: 1 1; } }
@media (max-width: 860px) {
  .hs-bar { flex-wrap: wrap; gap: 10px; }
  .hs-caps { flex: 1 0 100%; order: 2; }
  .hs-cap { position: static; display: none; white-space: normal; overflow: visible; }
  .hs-cap.on { display: block; }
  .hs-dots { order: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-slide, .hs-slide.on, .hs-cap { transition: none; animation: none; object-position: 50% 0%; }
  .hs-dots button[aria-current="true"] i::after { animation: none; scale: 1 1; }
}