/* ==========================================================
   Article layout for case studies (work/*).
   LAYOUT ONLY — widths, alignment and rhythm. Every text style,
   tile, colour, border and number style comes from styles.css
   (the Figma style guide): .display-hero, .heading-h2/h3,
   .body-large, .eyebrow, .display-statement, .cs-tiles,
   .cs-stat, .cs-persona, .cs-target, .cs-meta, .cs-figure.
   Spacing uses the --space-* tokens only.
   ========================================================== */
.article { --measure: 720px; --wide: 1040px; --full: 1440px; --pad: var(--space-24); }

/* widths: each block centres itself */
.a-col, .a-wide, .a-full { width: 100%; margin-inline: auto; padding-inline: var(--pad); }
.a-col { max-width: calc(var(--measure) + var(--pad) * 2); }
.a-wide { max-width: calc(var(--wide) + var(--pad) * 2); }
/* full width = the site container (same edges as the nav, homepage and Work page) */
.a-full { max-width: calc(var(--full) + var(--gutter) * 2); padding-inline: var(--gutter); }
@media (min-width: 901px) {
  /* keep breakouts clear of the ruler on the right */
  .a-wide { padding-inline: max(var(--pad), var(--space-96)); }
}

/* hero: the homepage title row (left aligned, container width) */
.a-hero { padding-block: var(--space-48) var(--space-64); }
.a-hero .cs-back { display: inline-flex; margin-bottom: var(--space-48); }
.a-hero .title-row { margin-bottom: 0; }
.a-hero .title-row__cols { align-items: start; }
.a-hero .display-hero { text-wrap: balance; }
.a-hero__intro { display: flex; flex-direction: column; gap: var(--space-24); }
.a-byline { display: flex; align-items: center; gap: var(--space-12); }
.a-byline img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.a-hero .cs-meta { margin-top: var(--space-48); }
.a-hero .cs-figure { margin-top: var(--space-48); }

/* chapter head: eyebrow above the heading, as in the homepage title row */
.a-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--space-24); }

/* reading flow: Body/Large paragraphs with Body/Large gaps */
.a-prose { display: flex; flex-direction: column; gap: var(--space-16); }
.a-prose + .a-prose, .a-sub { margin-top: var(--space-64); }
.a-sub + .a-prose { margin-top: var(--space-16); }
.a-prose .cs-checks, .a-prose .cs-zones { margin-block: var(--space-8); }

/* breakouts sit between paragraphs */
.a-break { margin-block: var(--space-48); }
.a-break .cs-tiles, .a-break .cs-figure { margin-top: 0; }
.a-statement { margin-block: var(--space-64); text-align: center; }
.a-statement .display-statement { max-width: 860px; margin-inline: auto; text-wrap: balance; }
.section > :last-child.a-statement { margin-bottom: 0; }
.section > .a-break:last-child { margin-bottom: 0; }

/* end of article */
.a-end { padding-top: 0; }
.a-end .cs-tiles { margin-top: 0; }

@media (max-width: 900px) {
  .article { --pad: var(--gutter); } /* same side margin as the nav and containers */
  .a-hero .cs-back { margin-bottom: var(--space-48); }
  .a-statement { margin-block: var(--space-48); }
}
.a-sub + .a-sub-body { margin-top: var(--space-16); }
.a-break + .a-col > .a-sub:first-child { margin-top: 0; }

/* ---------- SalesPro+ additions (still tokens + existing styles only) ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
ol.cs-tiles { list-style: none; }

/* four stats in one joined row */

/* device screens: the PNGs already carry the iPad bezel, so they sit on a Background/Surface panel */
.a-gallery > .cs-figure { margin: 0; padding: var(--space-24); display: flex; flex-direction: column; }
.a-gallery .cs-figure__frame--device { padding: var(--space-24); }

/* compact before/after comparison */
.a-compare { width: 100%; margin-top: var(--space-48); border-collapse: collapse; text-align: left; }
.a-compare th, .a-compare td { padding: var(--space-16) var(--space-16) var(--space-16) 0; border-bottom: 1px solid var(--border-default); vertical-align: top; }
.a-compare thead th { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); border-bottom-color: var(--border-strong); }
.a-compare tbody th { font-weight: 600; }
.a-compare td:last-child { color: var(--text-hero-emphasis); font-weight: 500; }
.a-compare th, .a-compare td { font-size: 16px; line-height: 1.5; }
.a-compare + .a-after-table { margin-top: var(--space-48); }

@media (max-width: 1100px) {
  .cs-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-tiles--4 > :nth-child(n) { border-right: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
  .cs-tiles--4 > :nth-child(2n) { border-right: 0; }
  .cs-tiles--4 > :nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (max-width: 900px) {
  .cs-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-tiles--4 > :nth-child(odd) { border-right: 1px solid var(--border-default) !important; }
  .cs-tiles--4 > :nth-last-child(-n + 2) { border-bottom: 0 !important; }
  .cs-figure__frame--device, .a-gallery .cs-figure__frame--device { padding: var(--space-12); }
  .a-gallery > .cs-figure { padding: var(--space-16); }
}

/* ---------- Screens slideshow: big, right to left ----------
   The active slide lines up with the content edge; the next one peeks in
   from the right. Tokens and existing frame/caption styles only. */
.a-slider-section { overflow: hidden; }
.a-slider__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); margin-bottom: var(--space-32); }
.a-slider__controls { display: flex; align-items: center; gap: var(--space-12); }
.a-slider__count { margin-right: var(--space-12); font-variant-numeric: tabular-nums; }
.a-slider__btn { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--border-strong); border-radius: var(--radius-button); background: var(--background-page); color: var(--text-primary); font-size: 18px; transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s; }
.a-slider__btn:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-on-primary); }

.a-slider {
  --edge: calc(max(0px, (100vw - var(--full) - var(--gutter) * 2) / 2) + var(--gutter));
  --slide-w: calc(100vw - var(--edge) * 2);
  position: relative; padding-left: var(--edge); outline-offset: -3px; touch-action: pan-y; user-select: none;
}
@media (min-width: 901px) {
}
.a-slider__track { display: flex; gap: var(--space-24); will-change: transform; }
.a-slider__track.is-moving { transition: transform .9s var(--ease-in-out); }
.a-slider__slide { flex: none; width: var(--slide-w); margin: 0; transition: opacity .9s var(--ease-out); }
.a-slider__slide { opacity: .45; }
.a-slider__slide.is-active { opacity: 1; }
.a-slider__frame { padding: var(--space-48); background: var(--background-page); }
.a-slider__frame img { width: 100%; height: auto; pointer-events: none; }
.a-slider__slide figcaption { margin-top: var(--space-16); font-size: 14px; line-height: 1.5; color: var(--text-secondary); }

/* autoplay progress */
.a-slider__bar { height: 2px; margin-top: var(--space-32); background: var(--border-default); overflow: hidden; }
.a-slider__bar span { display: block; height: 100%; background: var(--brand-primary); transform-origin: 0 50%; transform: scaleX(0); }

@media (max-width: 900px) {
  .a-slider { --slide-w: calc(100vw - var(--edge) * 2 - 40px); }
  .a-slider__track { gap: var(--space-12); }
  .a-slider__frame { padding: var(--space-16); }
  .a-slider__btn { width: 40px; height: 40px; }
}
.nowrap { white-space: nowrap; }

/* ---------- Nurturey additions (tokens + existing styles only) ---------- */
/* tall phone screens: keep them a sensible height on a surface panel */
.a-phone { display: flex; justify-content: center; }
.a-phone img { width: auto; max-width: 100%; max-height: 640px; }
/* participant quote + the questions parents asked (existing pill style) */
.a-quote { margin-top: var(--space-48); }
.a-quote footer { margin-top: var(--space-12); }
.a-chips { margin-top: var(--space-32); }
.a-chips li { height: auto; min-height: 30px; }
/* slides with mixed shapes: one frame shape, image fitted inside */
.a-slider__frame--fit { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; }
.a-slider__frame--fit img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.a-statement--first { margin-top: var(--space-24); }
@media (max-width: 900px) {
  .a-phone img { max-height: 480px; }
  .a-slider__frame--fit { aspect-ratio: 4 / 5; }
  .a-slider__frame--fit img { height: auto; max-height: 100%; }
}

/* ---------- Money Uncle · Industrial IoT · Grocareh! additions ---------- */
/* browser frame for web screens: a slim chrome bar above the screen */
.a-browser { overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-card); background: #FFFFFF; }
.a-browser__bar { display: flex; gap: 6px; padding: var(--space-12) var(--space-16); background: var(--background-surface-subtle); border-bottom: 1px solid var(--border-default); }
.a-browser__bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-default); }
.a-browser > img { width: 100%; height: auto; }
.a-browser--bare { border: 0; border-radius: 0; background: transparent; }
/* very tall page captures scroll inside a fixed-height window */
.a-scrollframe { height: min(720px, 75vh); overflow-y: auto; overscroll-behavior: contain; }
.a-scrollframe img { width: 100%; height: auto; }
.a-scrollframe:focus-visible { outline-offset: -3px; }

/* rows of phone screens with captions */
.a-phones { display: grid; gap: var(--space-24); align-items: start; }
.a-phones--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; margin-inline: auto; }
.a-phones--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.a-phones__item { margin: 0; }
.a-phones__item > img, .a-phone-frame img { width: 100%; height: auto; }
.a-phones__item figcaption { margin-top: var(--space-12); font-size: 14px; line-height: 1.5; color: var(--text-secondary); text-align: center; }
/* screens without their own device: a plain phone bezel */
.a-phone-frame { overflow: hidden; border: 8px solid #1D1B1B; border-radius: 36px; background: #1D1B1B; }
.a-phone-frame img { border-radius: 28px; }

/* tiles with a line illustration (black line art: inverted in dark mode) */
.a-level__icon { width: 120px; height: auto; margin-bottom: var(--space-8); }
:root[data-theme="dark"] .a-level__icon { filter: invert(1); }

@media (max-width: 900px) {
  /* phone rows become a sideways swipe */
  .a-phones--4 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-16); padding-bottom: var(--space-8); }
  .a-phones--4 .a-phones__item { flex: 0 0 62%; scroll-snap-align: start; }
  .a-phone-frame { border-width: 6px; border-radius: 28px; }
  .a-phone-frame img { border-radius: 22px; }
}
.cs-stat__num.is-text { white-space: normal; }
@media (max-width: 900px) {
  /* rows of exactly three tiles stack in one column (no lone tile) */
  .cs-tiles--3:not(:has(> :nth-child(4))) { grid-template-columns: 1fr; }
  .cs-tiles--3:not(:has(> :nth-child(4))) > * { border-right: 0 !important; border-bottom: 1px solid var(--border-default) !important; }
  .cs-tiles--3:not(:has(> :nth-child(4))) > :last-child { border-bottom: 0 !important; }
  .a-level__icon { width: 96px; }
}
/* source line under a sourced stat */
.a-source { margin-top: auto; padding-top: var(--space-8); color: var(--text-secondary); }
.a-source .text-link { font-size: inherit; }
.a-phones--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-16); }
@media (max-width: 900px) {
  .a-phones--5 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-16); padding-bottom: var(--space-8); }
  .a-phones--5 .a-phones__item { flex: 0 0 62%; scroll-snap-align: start; }
}
/* status pill sits directly under the case-study title */
.a-hero__title { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); }
.a-hero__title .cs-badge { margin-top: 0; }
/* posts: paragraphs right after a sub-heading */
.a-col:has(> .a-sub:only-child) + .a-col > .a-prose { margin-top: var(--space-16); }

/* ---------- Thoughts articles ---------- */
.a-post__title { text-wrap: balance; }
.a-post + .a-post { padding-top: 0; }
.a-h3 { margin-top: var(--space-32); }
.a-prose > .a-h3:first-child { margin-top: 0; }
.a-note { margin-top: calc(var(--space-8) * -1); }
/* numbered lists: brand-coloured numbers, Body/Large text */
.a-olist { counter-reset: a-ol; display: grid; gap: var(--space-12); padding: 0; list-style: none; }
.a-olist li { position: relative; padding-left: 2.2em; counter-increment: a-ol; }
.a-olist li::before { content: counter(a-ol, decimal-leading-zero); position: absolute; left: 0; top: .1em; font-size: .8em; font-weight: 600; color: var(--brand-primary); font-variant-numeric: tabular-nums; }
/* key line: Display/Statement as a blockquote */
blockquote.display-statement { margin: 0 auto; max-width: 860px; text-wrap: balance; }
.a-source-line { margin-top: var(--space-48); padding-top: var(--space-24); border-top: 1px solid var(--border-default); }
.a-more__label { margin-bottom: var(--space-16); }
.a-more { justify-content: space-between; gap: var(--space-16); }
.a-cta-center { justify-content: center !important; }
.a-end + .a-end { padding-top: var(--space-48); }
/* article titles are full sentences: one step down from Display/Hero */
/* (removed: titles now use Display/Hero at its style-guide size) */
.post .a-hero { padding-bottom: 0; }
.a-olist { font-size: 18px; line-height: 1.5; } /* Body/Large, same as the paragraphs */
/* Thoughts: cover under the title row, and portrait slide decks */
.a-post__cover { margin-top: var(--space-48); }
.a-post__cover .cs-figure { margin-top: 0; }
.a-slider--portrait { --slide-w: min(520px, 78vw); }
.a-slider--portrait .a-slider__frame--fit { aspect-ratio: 4 / 5; padding: 0; background: transparent; border: 0; }
.a-slider--portrait .a-slider__frame--fit img { width: 100%; height: 100%; object-fit: contain; }
.a-slides__pdf { margin-top: var(--space-24); }
.a-source-line { margin-bottom: var(--space-64); }

/* ---------- Thoughts article header: back link bar + narrow title column ---------- */
.a-post-hero { padding-top: var(--space-24); }
.a-post-bar { padding-bottom: 0; }
.a-post-bar .cs-back { margin-bottom: 0; }
.a-post-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); padding-top: var(--space-48); }
.a-post-head .a-post__title { text-wrap: balance; } /* Heading/H2 from the style guide */
.a-post-head .a-dek { margin: 0; max-width: none; }
.a-post-head .a-note { margin-top: calc(var(--space-16) * -1); }
.a-post-head .a-byline { flex-wrap: wrap; row-gap: var(--space-8); }
.a-byline__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); }
.post .a-post__cover { margin-top: var(--space-64); }
.post .a-hero + .a-post { padding-top: var(--space-64); }
.a-byline__meta { display: inline-flex; align-items: center; gap: var(--space-12); white-space: nowrap; }
@media (max-width: 900px) {
  /* title column lines up with the back-link bar */
  .post .a-post-head { padding-inline: var(--gutter); }
}
@media (max-width: 600px) {
  /* date · read time drop to their own line under the name, without a leading dot */
  .a-post-head .a-byline__meta { flex-basis: 100%; padding-left: 44px; }
  .a-post-head .a-byline__meta > .a-byline__sep:first-child { display: none; }
}

/* ---------- Case studies use the same opening as Thoughts articles ---------- */
.a-post__cover { margin-top: var(--space-64); }
.a-post-head .eyebrow { margin-bottom: calc(var(--space-8) * -1); }
.a-post-head .cs-badge { margin-top: calc(var(--space-8) * -1); }
.a-post-head .cs-meta { width: 100%; margin-top: var(--space-16); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.a-post-head .cs-meta > div:nth-child(3) { padding-left: 0; border-left: 0; }
.a-post-head .cs-meta > div:nth-child(n + 3) { border-top: 1px solid var(--border-default); }
@media (max-width: 600px) {
  .a-post-head .cs-meta { grid-template-columns: 1fr; }
}

/* Case-study 30-second video: hidden until a src is set (see main.js) */
.cs-video { margin: var(--space-48) 0 0; }
.cs-video[hidden] { display: none; }
.cs-video video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--border-default); border-radius: var(--radius-badge); background: #000; }