/* Building blocks inside case studies: methods, lists, figures,
   side-by-side panels, steps, equation, results, takeaways, related link. */

/* Blocks */
.block { margin-bottom: var(--space-7); }
.block:last-child { margin-bottom: 0; }
.block h3 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); letter-spacing: -0.025em; margin-bottom: var(--space-4); }
/* sub-groups inside a method: dashed divider above */
.block h4 { margin: var(--space-6) 0 var(--space-3); padding-top: var(--space-5); font-size: var(--text-md); background: linear-gradient(90deg, var(--rule) 50%, transparent 50%) 0 0 / 8px 1px repeat-x; }
.block > h4:first-of-type, .split h4:first-child { margin-top: 0; padding-top: 0; }
.block > h4:first-of-type, .block .split > div > h4:first-child { background: none; }

/* Lists read as clean rows */
.block ul, .part--insights ul { list-style: none; padding: 0; margin: var(--space-3) 0 var(--space-4); }
.block ul li, .part--insights ul li { padding: var(--space-3) 0; margin: 0; border-bottom: 1px solid var(--color-line); }
.block ul li:last-child, .part--insights ul li:last-child { border-bottom: 0; }
.part--indepth .block ul li { border-bottom-color: rgba(255, 255, 255, 0.1); }

/* Figures (images open in a lightbox) */
.figure { margin: var(--space-6) 0; }
.figure img, .figure video { width: 100%; border-radius: var(--radius-tile); background: var(--color-surface); }
.part .figure > img { cursor: zoom-in; }
.figure--video .yt { border-radius: var(--radius-tile); }
.figure figcaption { margin-top: var(--space-2); padding-top: var(--space-2); font-size: var(--text-xs); color: var(--color-ink-2); }
.figure figcaption strong { display: block; margin-bottom: 2px; font-size: var(--text-sm); color: var(--color-ink); }
.part--indepth .figure figcaption strong { color: #fff; }
.figure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--space-5); margin: var(--space-6) 0; }
.figure-grid .figure { margin: 0; }
.figure-grid--1 { grid-template-columns: 1fr; }
.figure-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
/* same_size= in build: every image and video cropped to one shape so the grid lines up */
.figure-grid--same img, .figure-grid--same video { aspect-ratio: var(--ratio, 16 / 9); height: auto; object-fit: cover; }

/* Side-by-side groups as panels */
/* text panel and image always share the same height; a shorter image fills its box */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: stretch; margin: var(--space-5) 0; }
.split > div { background: var(--color-surface); border-radius: var(--radius-tile); padding: var(--space-5); }
.split > div > :last-child { margin-bottom: 0; }
.split > div .figure-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-5); }
.split > .figure { display: flex; flex-direction: column; background: none; padding: 0; margin: 0; }
.split > .figure img { flex: 1 1 auto; min-height: 0; object-fit: cover; }
.part--indepth .split > div { background: var(--color-graphite-2); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* Numbered steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); list-style: none; padding: 0; margin: var(--space-5) 0; max-width: none; counter-reset: step; }
.steps li { counter-increment: step; margin: 0; padding: var(--space-4) var(--space-5); background: var(--color-surface); border-radius: var(--radius-tile); }
.steps li::before { content: counter(step); display: block; margin-bottom: var(--space-2); font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); line-height: 1; color: var(--color-ink); }
.part--indepth .steps { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* Equation: term + term = result */
.equation { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-3); margin: var(--space-5) 0; }
.equation__term { flex: 1 1 180px; padding: var(--space-4); background: var(--color-surface); border-radius: var(--radius-tile); font-size: var(--text-sm); }
.equation__term strong { display: block; font-family: var(--font-display); font-size: var(--text-md); }
.equation__op { align-self: center; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; color: var(--color-ink); }

/* Results cards */
.results { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); list-style: none; padding: 0; margin: var(--space-5) 0; max-width: none; }
.results li { margin: 0; padding: var(--space-4); background: var(--color-surface); border-radius: var(--radius-tile); font-size: var(--text-sm); }
.block ul.results li { padding: var(--space-4) var(--space-5); border-bottom: 0; }
.results .verdict { display: block; margin-bottom: var(--space-1); font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--color-ink-2); }
.results .is-yes { border: 1px solid var(--color-accent); }
.results .is-yes .verdict { color: var(--color-accent-text); }

/* Card panels on dark */
.part--indepth .steps li, .part--indepth .equation__term, .part--indepth .results li { background: var(--color-graphite-2); color: rgba(255, 255, 255, 0.86); }
.part--indepth .equation__op, .part--indepth .steps li::before { color: #fff; }
.part--indepth .results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.part--indepth .results .verdict { font-family: var(--font-body); font-size: var(--text-sm); color: #fff; }
@media (max-width: 640px) { .part--indepth .results { grid-template-columns: 1fr; } }

/* Insights: featured image, then key takeaways as a numbered list */
.part--insights .wrap > .figure:first-of-type { margin-top: 0; }
.part--insights ul { counter-reset: take; padding: var(--space-2) var(--space-6); background: var(--color-surface); border-radius: var(--radius-tile); }
.part--insights ul li { counter-increment: take; position: relative; padding-left: 2.75rem; }
.part--insights ul li::before { content: counter(take, decimal-leading-zero); position: absolute; left: 0; top: calc(var(--space-3) + 0.2em); font-size: var(--text-xs); color: var(--color-ink-2); }

/* ---------- Extra building blocks (pull quote, timeline, bars, rules, swatches) ----------
   Use them to give each case study's methods their own shape (see _build/pieces.py). */

/* Images that span the whole In depth section, under the method title too */
.part--indepth .block > .figure--wide { grid-column: 1 / -1; }

/* Tags inside a method (e.g. reused components) */
.block .chips { margin: var(--space-3) 0 var(--space-5); }
.block .chips li { padding: 0; border: 0; }
.part--indepth .chip { color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.3); }

/* Placeholder for an image that isn't in assets/img yet (see the build output) */
.figure__missing { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: var(--space-4); border: 1px dashed var(--color-line); border-radius: var(--radius-tile); font-size: var(--text-sm); color: var(--color-ink-2); text-align: center; }
.part--indepth .figure__missing, .case-hero__media .figure__missing { border-color: rgba(255, 255, 255, 0.3); color: var(--color-ink-3); }

/* A button inside a method (e.g. "Open the flow in Figma") */
.cta-row { margin: var(--space-5) 0; }

/* Pull quote: one key sentence */
.quote { margin: var(--space-6) 0; padding-left: var(--space-5); border-left: 3px solid var(--color-accent); }
.quote p { margin: 0; max-width: 34ch; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; color: var(--color-ink); }
.part--indepth .quote p { color: #fff; }

/* Timeline: phases on a line, a dot for each */
.timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-5) var(--space-3); list-style: none; padding: 0; margin: var(--space-6) 0; max-width: none; }
.timeline li { position: relative; margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.timeline li::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); }
.timeline strong { display: block; font-size: var(--text-sm); }
.timeline span { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-ink-2); }
.part--indepth .timeline span { color: var(--color-ink-3); }

/* Bars: relative sizes at a glance (one row per item: label, bar, value) */
.block .bars { margin: var(--space-5) 0 var(--space-6); max-width: 560px; }
.block .bars li { display: grid; grid-template-columns: 5rem 1fr; align-items: center; column-gap: var(--space-4); padding: var(--space-2) 0; border: 0; }
.block .bars li::before { content: ""; grid-column: 2; grid-row: 1; width: calc(var(--p) * 1%); min-width: 12px; height: 10px; border-radius: 999px; background: var(--color-accent); }
.bars strong { grid-column: 1; grid-row: 1 / span 2; font-size: var(--text-sm); }
.bars span { grid-column: 2; font-size: var(--text-xs); color: var(--color-ink-2); }
.part--indepth .bars span { color: var(--color-ink-3); }

/* Verdict cards in one row; numbered steps three per row */
.part--indepth .results.results--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.part--indepth .steps.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .part--indepth .results.results--row { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .part--indepth .steps.steps--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Rules: case → what happens */
.rules { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); margin: var(--space-5) 0; }
.rules dt, .rules dd { margin: 0; padding: var(--space-3) 0; border-top: 1px solid var(--rule); }
.rules dt { padding-right: var(--space-4); font-weight: 600; }
.part--indepth .rules dt { color: #fff; }

/* Swatches: a colour, its name and what it means */
.block .swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); margin: var(--space-5) 0; }
.block .swatches li { padding: 0 0 var(--space-3); border: 0; border-radius: var(--radius-tile); overflow: hidden; background: var(--color-surface); }
.part--indepth .block .swatches li { background: var(--color-graphite-2); }
.swatch { display: block; height: 64px; margin-bottom: var(--space-3); background: var(--swatch); }
.swatches strong, .swatches li > span:last-child { display: block; padding: 0 var(--space-4); }
.swatches strong { font-size: var(--text-sm); }
.swatches li > span:last-child { margin-top: 2px; font-size: var(--text-xs); color: var(--color-ink-2); }
.part--indepth .swatches li > span:last-child { color: var(--color-ink-3); }

/* Related research link (Tutorial guidance → Learn loop) */
.related { margin-top: var(--space-6); }
.related__label { display: block; font-size: var(--text-xs); font-weight: 500; color: var(--color-ink-2); margin-bottom: var(--space-2); }
.related__link { position: relative; display: flex; flex-direction: column; gap: 4px; max-width: 640px; padding: var(--space-5) 3.5rem var(--space-5) var(--space-5); background: var(--color-surface); border-radius: var(--radius-tile); outline: 1px solid var(--color-line); outline-offset: -1px; color: var(--color-ink); text-decoration: none; }
.related__link strong { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.02em; }
.related__link span { color: var(--color-ink-2); font-size: var(--text-sm); }
.related__link::after { content: "→"; position: absolute; right: var(--space-5); top: 50%; transform: translateY(-50%); transition: transform 250ms var(--ease); }
.related__link:hover { outline-color: var(--color-accent); }
.related__link:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.related__link:hover strong, .related__link:hover::after { color: var(--color-accent-text); }
.related__link:hover::after { transform: translate(3px, -50%); }

/* Placeholders to fill in before publishing (todo() in build.py) */
.todo { display: inline; padding: 0.1em 0.35em; border-radius: 4px; background: rgba(0, 113, 227, 0.08); outline: 1.5px dashed var(--color-accent); outline-offset: 1px; color: var(--color-accent); font-style: italic; }
.part--indepth .todo, .info--impact .todo { color: #6CB6FF; background: rgba(108, 182, 255, 0.1); outline-color: #6CB6FF; }