/* ==========================================================================
   Parking Operations & Intelligence Platform — GroupNexus case study
   (page-only rules). Every shared component lives in case-study.css,
   loaded before this file.
   ========================================================================== */

/* Hero glow, sampled from the Insights overview screenshot. */
.hero_blob { background-image: url('car-park-system/insights-overview.jpg'); }

/* --------------------------------------------------------------------------
   Architecture tree — root node branching into the platform's two halves
   (plain UI shapes, not an image): a trunk line down from the root to a
   shared bus line, then one drop per branch.
   -------------------------------------------------------------------------- */
.arch-tree { margin-top: var(--space-8); text-align: center; }
@media (min-width: 64em) { .arch-tree.media-centered { --n: 8; } }
.arch-root {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-inner);
  background: var(--color-primary-tint);
  color: var(--color-heading);
  font-weight: var(--weight-medium);
}
.arch-trunk { width: 1px; height: var(--space-4); margin: 0 auto; background: var(--color-hairline-strong); }
.arch-branches {
  position: relative;
  display: flex;
  gap: var(--space-4);
  padding-top: var(--space-4);
}
.arch-branches::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 1px;
  background: var(--color-hairline-strong);
}
.arch-branch { position: relative; flex: 1; }
.arch-branch::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--space-4));
  left: 50%;
  width: 1px;
  height: var(--space-4);
  background: var(--color-hairline-strong);
}
.arch-branch-label {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-inner);
  background: var(--color-white);
  box-shadow: var(--ring), var(--shadow-1);
  color: var(--color-heading);
  font-weight: var(--weight-medium);
}
.arch-branch-caption { margin-top: var(--space-2); font-size: var(--text-small); color: var(--color-text); }
.arch-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
@media (max-width: 39.99em) {
  .arch-branches { flex-direction: column; padding-top: 0; }
  .arch-branches::before, .arch-branch::before { display: none; }
}
@media (min-width: 40em) {
  .arch-root { font-size: var(--text-h3); }
}

/* ==========================================================================
   GroupNexus material from the 2021 portfolio file — added 7 Oct 2026.
   Every width below is a column span of the 4 / 8 / 12 column grid, using the
   span formula from case-study.css.
   ========================================================================== */

/* A centred figure on the columns: 4 of 4 on a phone, 6 of 8 (columns 2–7) on a
   tablet, 10 of 12 (columns 2–11) on desktop. Same spans as the screens carousel. */
.media-centered {
  --n: 4;
  --span: calc(var(--n) * (100% - (var(--cols) - 1) * var(--grid-gap)) / var(--cols) + (var(--n) - 1) * var(--grid-gap));
  width: var(--span);
  margin-inline: auto;
}
@media (min-width: 48em) { .media-centered { --n: 6; } }
@media (min-width: 64em) { .media-centered { --n: 10; } }
/* A portrait figure: 4 columns at every width (centred on columns 3–6 of 8, 5–8 of 12). */
.media-centered.is-narrow { --n: 4; margin-top: var(--space-6); }

/* Cover: two whole screens side by side on the showcase photo (the shared showcase overlaps and tilts them). Nothing
   overlaps and nothing is cropped: each keeps its own aspect ratio. Stacked on a phone. */
.company-showcase.is-flat { padding: var(--space-2); }
@media (min-width: 40em) { .company-showcase.is-flat { padding: var(--space-4); } }
.company-showcase.is-flat .company-showcase_stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-items: center; aspect-ratio: auto; }
@media (min-width: 40em) { .company-showcase.is-flat .company-showcase_stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }
.company-showcase.is-flat .company-showcase_screen { position: static; width: 100%; height: auto; transform: none; }

/* Caption bar inside a screenshot card. */
.media > figcaption {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--color-white);
  box-shadow: inset 0 1px 0 var(--color-hairline);
  color: var(--color-text); font-size: var(--text-xs);
}
/* Plain caption under a photo. */
.caption { margin-top: var(--space-2); color: var(--color-text); font-size: var(--text-xs); }

/* --------------------------------------------------------------------------
   Field strip — four photos: 2 × 2 on a phone (span 2 of 4), 4 across from
   48em (span 2 of 8, span 3 of 12).
   -------------------------------------------------------------------------- */
.field-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--grid-gap); align-items: start; margin-top: var(--space-6); }
@media (min-width: 48em) { .field-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.principles-head + .field-strip { margin-top: 0; }
.field-shot { margin: 0; }
.field-shot .media { aspect-ratio: 4 / 5; }
.field-shot .media img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Text column + wide screen: 4 + 8 columns on desktop; on a tablet the narrow
   figure is centred (columns 3–6) above the full-width one.
   -------------------------------------------------------------------------- */
.split-4-8 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); align-items: stretch; margin-top: var(--space-6); }
@media (min-width: 48em) {
  .split-4-8 { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
  .split-4-8 > :first-child { grid-column: 3 / span 4; }
  .split-4-8 > :last-child { grid-column: 1 / span 8; }
}
@media (min-width: 64em) {
  .split-4-8 > :first-child { grid-column: 1 / span 4; }
  .split-4-8 > :last-child { grid-column: 5 / span 8; }
}
.split-4-8 .media img { display: block; }
/* Cards in a row share one height; the caption bar sits on the bottom edge whatever its length. */
.split-4-8 > .media, .img-grid-2 > .media { display: flex; flex-direction: column; }
.split-4-8 > .media > figcaption, .img-grid-2 > .media > figcaption { margin-top: auto; }

/* --------------------------------------------------------------------------
   Annotated screen — numbered pins sit on the image at the % of the screen
   they point to, so they stay put as it scales.
   -------------------------------------------------------------------------- */
.annot_stage { position: relative; }
.annot_stage img { display: block; }
.pin {
  position: absolute; z-index: 1;
  display: grid; place-items: center;
  width: 24px; height: 24px; translate: -50% -50%;
  border-radius: 50%;
  background: var(--color-secondary); color: var(--color-white);
  box-shadow: 0 0 0 4px rgb(244 15 72 / 0.2);
  font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums;
}
@media (min-width: 48em) { .pin { width: 32px; height: 32px; } }
/* Screen + legend: 8 + 4 columns on desktop, stacked below. */
.split-8-4 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5) var(--grid-gap); align-items: center; margin-top: var(--space-6); }
@media (min-width: 64em) {
  .split-8-4 { grid-template-columns: var(--grid-12); }
  .split-8-4 > :first-child { grid-column: 1 / span 8; }
  .split-8-4 > :last-child { grid-column: 9 / span 4; }
}
.annot-legend { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }

/* Process strip: a second line under each phase name. */
.flow-step_label small { display: block; margin-top: 4px; color: var(--color-text); font-size: var(--text-xs); font-weight: 400; }

/* --------------------------------------------------------------------------
   Final-product screens: the shared peeking carousel, at the aspect of the
   screens themselves (1440 × 1024), each with a small label.
   -------------------------------------------------------------------------- */
#final-product .carousel_slide { position: relative; aspect-ratio: 1440 / 1024; }
.slide_chip {
  position: absolute; left: var(--space-2); bottom: var(--space-2);
  max-width: calc(100% - var(--space-4));
  padding: 4px 12px; border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.94); box-shadow: var(--ring);
  color: var(--color-heading); font-size: var(--text-xs); font-weight: var(--weight-medium);
}

/* Discover and Permits: one-line notes under a row of figures. */
.ask-note, .sprint-note { max-width: 44rem; margin-top: var(--space-3); }

/* Monitoring & Insights: two short blocks, each a heading, a few sentences and one screen at the same shape. */
.dive { display: flex; flex-direction: column; gap: var(--space-2); }
.dive .h3, .dive p { margin: 0; }
.dive .media { margin-top: var(--space-1); }
.dive .media img { aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; }

/* Constraints as three one-line callouts. */
.callouts { display: grid; gap: var(--space-2); }
.callout { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-outer); background: var(--color-white); box-shadow: var(--ring); color: var(--color-heading); font-size: var(--text-small); }
.callout .tag { flex: none; }
@media (max-width: 39.99em) { .callout { flex-direction: column; align-items: flex-start; gap: var(--space-1); } }

/* ==========================================================================
   Artefacts from the 2023 case-study deck — added 7 Oct 2026.
   ========================================================================== */

/* Two equal cards: 1 across, then span 4 of 8 / span 6 of 12 from 48em. */
.duo-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); margin-top: var(--space-6); text-align: left; }
@media (min-width: 48em) { .duo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.duo-grid .principle-card .check-list { margin-top: var(--space-1); }
.subhead { margin-top: var(--space-8); }


/* --------------------------------------------------------------------------
   Tabs: one panel at a time (journey maps). Behaviour: assets/case-study.js.
   -------------------------------------------------------------------------- */
.tabs { min-width: 0; }
.tabs_list { display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; margin: 0 auto var(--space-3); padding: 4px; border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: var(--ring); }
.tabs_tab {
  min-height: 44px; padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-pill); background: transparent; cursor: pointer;
  color: var(--color-text); font: inherit; font-size: var(--text-small); font-weight: var(--weight-medium);
  transition: background-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.tabs_tab:hover { color: var(--color-heading); }
.tabs_tab[aria-selected="true"] { background: var(--color-white); box-shadow: var(--ring), var(--shadow-1); color: var(--color-heading); }
.tabs_tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tabs_panel[hidden] { display: none; }
.tabs_panel .media { margin: 0; }

/* --------------------------------------------------------------------------
   Application-state flow (an inline SVG). On a phone it keeps a readable size
   and scrolls sideways inside its card.
   -------------------------------------------------------------------------- */
.flow-card { overflow: hidden; padding: 0; }
.flow-card_scroll { overflow-x: auto; padding: var(--space-3); background: var(--color-white); }
.flow-svg { display: block; width: 100%; min-width: 640px; height: auto; font-family: var(--font-sans); }
.flow-svg .fs-edge { fill: none; stroke: rgb(32 33 36 / 0.5); stroke-width: 1.5; }
.flow-svg .fs-edge.is-dashed { stroke-dasharray: 4 4; }
.flow-svg .fs-arrow { fill: rgb(32 33 36 / 0.5); }
.flow-svg .fs-label { fill: var(--color-text); font-size: 12px; }
.flow-svg .fs-text { fill: var(--color-heading); font-size: 14px; font-weight: 500; }
.flow-svg .fs-text.is-light { fill: var(--color-white); }
.flow-svg .fs-start { fill: var(--color-heading); }
.flow-svg .fs-wait { fill: #FBE9B0; stroke: #E0B000; stroke-width: 1.5; }
.flow-svg .fs-pay { fill: #D2F1F6; stroke: #7FC9D6; stroke-width: 1.5; }
.flow-svg .fs-paid { fill: #D4EFC2; stroke: #8DC76A; stroke-width: 1.5; }
.flow-svg .fs-rej { fill: #F9D3CB; stroke: #E8806E; stroke-width: 1.5; }
.flow-svg .fs-neutral { fill: var(--color-surface); stroke: var(--color-hairline-strong); stroke-width: 1.5; }
.flow-svg .fs-note { fill: #FFF6C7; stroke: #E8D77A; stroke-width: 1.5; }
.flow-rule { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2) var(--space-3); box-shadow: inset 0 1px 0 var(--color-hairline); background: var(--color-white); color: var(--color-heading); font-size: var(--text-small); }
.flow-rule .tag { flex: none; }

/* --------------------------------------------------------------------------
   Contrast, before and after: a swatch with the real hex and the checker's
   result for each WCAG level (word and mark, not colour alone).
   -------------------------------------------------------------------------- */
.contrast-pair { display: grid; gap: var(--grid-gap); }
/* A card is one column of its own (stacked) or, from 40em, an inner grid of the same columns as the page:
   4 columns (swatch 1, text 3), then 8 from 48em (swatch 2, text 6). The card is the full container on a
   tablet and span 8 of 12 on desktop, so those 8 inner columns are the page's columns either way. */
.contrast { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: var(--radius-outer); background: var(--color-white); box-shadow: var(--ring), var(--shadow-1); }
@media (min-width: 40em) {
  .contrast { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .contrast_swatch { grid-column: span 1; }
  .contrast_body { grid-column: span 3; padding-left: 0; }
}
@media (min-width: 48em) {
  .contrast { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .contrast_swatch { grid-column: span 2; }
  .contrast_body { grid-column: span 6; }
}
.contrast_swatch { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2); min-height: 160px; padding: var(--space-3); background: var(--swatch); color: var(--color-white); }
.contrast_aa { font-size: 3rem; --lh: 1; font-weight: var(--weight-heading); letter-spacing: -0.03em; }
.contrast_hex { font-size: var(--text-small); font-weight: var(--weight-medium); letter-spacing: 0.04em; }
.contrast_body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
.contrast_head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.contrast_ratio { margin: 0; color: var(--color-heading); font-size: 2rem; --lh: 1.1; font-weight: var(--weight-heading); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.contrast_ratio span { color: var(--color-text); font-size: var(--text-small); font-weight: 400; letter-spacing: 0; }
.contrast_checks { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.contrast_checks li { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; padding: 0 12px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.contrast_checks .is-pass { background: #E3F4E8; color: #14602F; }
.contrast_checks .is-fail { background: #FBE4E6; color: #A1182B; }
.contrast_checks b { font-size: var(--text-small); }
.principles-head + .duo-grid { margin-top: 0; }
/* the contrast cards share the height of the panel beside them */
.contrast-fig { display: flex; flex-direction: column; margin: 0; }
.contrast-fig .contrast-pair { flex: 1; grid-auto-rows: 1fr; }
/* Tabs on a phone: one row, equal halves. */
@media (max-width: 39.99em) {
  .tabs_list { flex-wrap: nowrap; width: 100%; }
  .tabs_tab { flex: 1 1 0; min-width: 0; padding: 0 var(--space-1); font-size: var(--text-xs); white-space: nowrap; }
}
.flow-card_scroll:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.subhead + * { margin-top: var(--space-4); }  /* one gap under every sub-heading (was 48 or 32 depending on what followed) */

/* ==========================================================================
   Style pass, 7 Oct 2026: align Car Park with the other case studies.
   ========================================================================== */

/* Validation: the six tasks, as numbered cards (1 across, 2 from 40em, 3 from 64em). */
.task-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .task-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.principles-head + .task-grid { margin-top: 0; }
.task { display: flex; align-items: center; gap: var(--space-2); min-height: 96px; padding: var(--space-3); border-radius: var(--radius-outer); background: var(--color-white); box-shadow: var(--ring), var(--shadow-1); color: var(--color-heading); font-weight: var(--weight-medium); }
.task .process-num { flex: none; margin: 0; }

/* The two research photos share one frame. */
#exploration .img-grid-2 .media img { aspect-ratio: 4 / 3; object-fit: cover; object-position: center 35%; }

/* --------------------------------------------------------------------------
   Consistency pass, 8 Oct 2026: every section head is left-aligned (Selected screens, Impact and
   Reflection were centred), cards share one padding, and paired captions share one height.
   -------------------------------------------------------------------------- */
.result-grid.is-duo { justify-content: flex-start; }
@media (min-width: 64em) { .result-grid.is-duo .result { --n: 6; } }  /* half of 12 columns; below that the shared 4-of-4 / 4-of-8 already gives full / half */
.muted-note.is-start { margin: var(--space-3) 0 0; text-align: left; }  /* 24px under its content, like the other notes */
.duo-grid .principle-card { padding: var(--space-3); }
.dive .media > figcaption { min-height: 56px; }
.meta-grid > .is-wide { grid-column: 1 / -1; }  /* the website link takes its own row under the 2 x 2 facts */