/* ============================================================
 * case-study-single.css
 *
 * Page-specific styles for single-case_study.php (Tier-3 single
 * post at /case-study/{slug}/).
 *
 * Contents (each region lifted verbatim from the locked canonical
 * `flibbr-design-mockup-final-single-case-study.html`,
 * de-indented from the 2-space <style>-block indentation):
 *
 *   1. .case-header*           — case-header chassis (kicker, serif
 *                                headline, meta row, inline awards
 *                                strip). Heavier than the editorial
 *                                page-header chassis.
 *   2. .case-hero*             — Vimeo (16:9) or image (16:10) hero
 *                                medium with placeholder fallback.
 *   3. .case-figure*           — inline figures inside .page-prose;
 *                                supports default / .is-wide / and
 *                                a v0.5.47 addition .is-pair (paired
 *                                images side-by-side).
 *   4. .case-stats*            — three-up quiet stat callouts (used
 *                                inside body_blocks WYSIWYG when an
 *                                impact section authors them).
 *   5. .case-recognition*      — recognition section grid (year
 *                                kicker + serif name + host meta).
 *                                Authored inside the recognition
 *                                body_block's WYSIWYG content.
 *   6. .case-credits*          — team-credits grid (phase headings
 *                                + flat <ul> per phase). Renders
 *                                from case_credits_list repeater
 *                                grouped by credit_role.
 *   7. .case-media*            — related-media list (sans-caps
 *                                outlet · date · title with arrow
 *                                marker). Authored inside the
 *                                prose body_block when used.
 *   8. .case-related-grid +
 *      .case-related-card*     — card grammar for the tail-rail
 *                                (2 related cards, equal weight).
 *                                The OUTER wrapper family
 *                                (.case-related, .case-related-header,
 *                                .case-related-label, .case-related-headline)
 *                                lives in base.css per op-learning #16.
 *
 * NEW IN v0.5.47 (NOT IN CANONICAL)
 *   - .case-figure.is-pair + .case-figure-pair-grid: Two-column
 *     side-by-side image grid for the `image_pair` body block.
 *     The canonical demonstrates only image_full; image_pair was
 *     defined in the ACF schema but never rendered in the locked
 *     mockup. The .is-pair modifier is composed from the existing
 *     .case-figure primitive (margin-block, figcaption styles
 *     inherited).
 *
 * Scoped via conditional enqueue to is_singular( 'case_study' ).
 *
 * @package Flibbr
 * @since   0.5.47
 */

/* --- Case header + Case hero (lines 2052-2153) --- */

/* page header — single case study variant
   Heavier than the editorial pages: brand kicker, serif headline,
   metadata row, awards strip, then the hero medium below. */
.case-header {
  padding-block: var(--s-9) var(--s-6);
  border-bottom: 1px solid var(--rule-soft);
}
.case-header-kicker {
  font-family: var(--sans); font-weight: 600;
  font-size: 11px; line-height: 1; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: var(--s-5);
}
/* When .case-header-campaign follows the kicker, tighten the kicker's
   bottom margin so the kicker + campaign read as a stacked unit. */
.case-header-kicker:has(+ .case-header-campaign) {
  margin-bottom: var(--s-2);
}
/* Campaign name — sits between kicker and headline.
   Serif italic, soft ink. The campaign's actual name in
   editorial register, separate from the awards-submission
   headline below. Honours the brand convention of italicising
   campaign titles inline. Optional — suppressed if blank. */
.case-header-campaign {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 16px; line-height: 1; color: var(--ink-soft);
  margin-bottom: var(--s-5);
}
.case-header-headline {
  margin: 0 0 var(--s-5);
  max-width: 22ch;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 5.5vw, 68px); line-height: 1.06;
  letter-spacing: -0.018em; color: var(--ink);
}
.case-header-headline em { font-style: italic; }

/* metadata row — client (bold) · brand · category · year · read-time */
.case-header-meta {
  font-family: var(--sans); font-size: 13px; line-height: 1.5;
  color: var(--ink-soft);
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  max-width: 80ch;
}
.case-header-meta strong { font-weight: 600; color: var(--ink); }
.case-header-meta > * + *::before {
  content: "·"; color: var(--ink-quiet); margin-right: var(--s-3);
}

/* awards strip — single sans-caps line between meta and hero.
   Honest credibility without ornament. The full Recognition
   section inside the page-body carries metal / category detail.
   v0.5.87 reverted from v0.5.83's detailed structured rail to
   match locked canonical v6 (op-learning #5: locked canonical
   trumps in-flight expansions). The Recognition body section
   provides the granular reading. */
.case-header-awards {
  margin-top: var(--s-5);
  font-family: var(--sans); font-weight: 500;
  font-size: 11px; line-height: 1.4; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-quiet);
  max-width: 80ch;
}
.case-header-awards .awards-label {
  color: var(--ink); font-weight: 600;
}
.case-header-awards .awards-list-inline > * + *::before {
  content: " · "; color: var(--rule); margin-inline: var(--s-1);
}

/* hero medium — Vimeo embed (16:9) or still image (16:10).
   Sits below the header, full-width within the container.
   Class family lifted to base.css at v0.5.49 (op-learning #16,
   eighth application — second consumer is single-bootcamp_event.php
   in the recap branch). */

/* --- Case figure (lines 2155-2186) --- */

/* Results strip — typographic 4-up grid between hero and body.
   Optional (renders only if case_results ACF repeater has rows).
   Source for figures: official awards-submission deck or other
   verified figure. Visual register: serif numerals, sans-caps
   kicker label + sub-labels, hairline rules. No card lift, no
   fills — typography carries hierarchy. 4-up at desktop, 2x2
   at tablet (≤880), 1-up at small (≤540). */
.case-results {
  padding-block: 0 var(--s-7);
}
.case-results-inner {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-6);
}
.case-results-kicker {
  font-family: var(--sans); font-weight: 600;
  font-size: 11px; line-height: 1; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: var(--s-5);
}
.case-results-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.case-results-item {
  padding: var(--s-3) var(--s-5);
  border-left: 1px solid var(--rule-soft);
}
.case-results-item:first-child {
  border-left: 0;
  padding-left: 0;
}
.case-results-metric {
  display: flex; align-items: baseline; gap: var(--s-1);
  font-family: var(--serif); font-weight: 400;
  color: var(--ink); line-height: 1;
  margin-bottom: var(--s-3);
}
.case-results-metric .metric-num {
  font-size: clamp(36px, 4.5vw, 56px);
  letter-spacing: -0.02em;
}
.case-results-metric .metric-unit {
  font-size: clamp(18px, 2vw, 24px);
  color: var(--ink-soft);
  letter-spacing: -0.01em;
}
.case-results-label {
  font-family: var(--sans); font-weight: 400;
  font-size: 13px; line-height: 1.4;
  color: var(--ink-quiet);
  max-width: 22ch;
}
@media (max-width: 880px) {
  .case-results-grid { grid-template-columns: repeat(2, 1fr); }
  .case-results-item:nth-child(3) {
    border-left: 0;
    padding-left: 0;
    padding-top: var(--s-5);
    border-top: 1px solid var(--rule-soft);
  }
  .case-results-item:nth-child(4) {
    padding-top: var(--s-5);
    border-top: 1px solid var(--rule-soft);
  }
  .case-results-item:nth-child(1),
  .case-results-item:nth-child(2) {
    padding-bottom: var(--s-5);
  }
}
@media (max-width: 540px) {
  .case-results-grid { grid-template-columns: 1fr; }
  .case-results-item {
    border-left: 0; border-top: 1px solid var(--rule-soft);
    padding: var(--s-5) 0 0;
  }
  .case-results-item:first-child {
    border-top: 0; padding-top: 0;
  }
  .case-results-item:nth-child(3),
  .case-results-item:nth-child(4) {
    padding-top: var(--s-5);
  }
  .case-results-item:nth-child(1),
  .case-results-item:nth-child(2) {
    padding-bottom: 0;
  }
}

/* inline figures inside the prose — BTS, on-set, OOH stills.
   Three sizes:
   - .case-figure (default): inline within the 60ch measure
   - .case-figure.is-wide: breaks measure to ~80ch
   - .case-figure.is-bleed: breaks to full prose-column width */
.page-prose .case-figure {
  margin-block: var(--s-6);
}
.page-prose .case-figure-frame {
  background: var(--paper-warm);
  aspect-ratio: 16/10;
  position: relative; overflow: hidden;
  border-radius: 4px;
}
.page-prose .case-figure-frame::before {
  content: "image"; position: absolute;
  bottom: var(--s-3); left: var(--s-3);
  font-family: var(--sans); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-quiet);
}
.page-prose .case-figure figcaption {
  margin-top: var(--s-3);
  font-family: var(--sans); font-size: 12px;
  line-height: 1.5; color: var(--ink-quiet);
  max-width: 56ch;
}
/* wide variant — overflows the measure for impact */
.page-prose .case-figure.is-wide {
  max-width: none;
}


/* --- Case stats — quiet stat callouts (lines 2187-2211) --- */

/* impact section needs visible numbers — quiet stat callouts */
.page-prose .case-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-block: var(--s-6);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule-soft);
}
@media (max-width: 720px) {
  .page-prose .case-stats { grid-template-columns: 1fr; gap: var(--s-4); }
}
.page-prose .case-stat-figure {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 4vw, 48px); line-height: 1;
  color: var(--ink); margin: 0;
  letter-spacing: -0.018em;
}
.page-prose .case-stat-figure em { font-style: italic; }
.page-prose .case-stat-label {
  margin-top: var(--s-2);
  font-family: var(--sans); font-size: 12px;
  line-height: 1.45; color: var(--ink-soft);
  max-width: 28ch;
}

/* --- Case recognition (lines 2213-2247) --- */

/* recognition detail section — ported from v10.2 .recognition.
   Sits within the prose flow but breaks the measure for layout. */
.page-prose .case-recognition {
  margin-block: var(--s-7);
  max-width: none;
}
.page-prose .case-recognition-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6) var(--s-5);
  margin-top: var(--s-5);
}
@media (max-width: 720px) {
  .page-prose .case-recognition-grid { grid-template-columns: 1fr; }
}
.page-prose .case-recognition-item {
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}
.page-prose .case-recognition-item .t-kicker {
  font-family: var(--sans); font-weight: 600;
  font-size: 11px; line-height: 1; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
}
.page-prose .case-recognition-item .award {
  margin: var(--s-2) 0 var(--s-3);
  font-family: var(--serif); font-size: 19px; font-weight: 400;
  line-height: 1.3; color: var(--ink);
}
.page-prose .case-recognition-item .award em { font-style: italic; }
.page-prose .case-recognition-item .host {
  font-family: var(--sans); font-size: 12px;
  color: var(--ink-quiet); line-height: 1.5;
}

/* team credits — grouped by phase. Lighter than the v10.2

/* --- Case credits (lines 2249-2295) --- */

.page-prose .case-credits {
  margin-block: var(--s-7);
  max-width: none;
}
.page-prose .case-credits-grid {
  display: grid; grid-template-columns: 200px 1fr;
  gap: var(--s-5) var(--s-7);
  align-items: start;
}
@media (max-width: 720px) {
  .page-prose .case-credits-grid {
    grid-template-columns: 1fr; gap: var(--s-3);
  }
}
.page-prose .case-credits-phase {
  font-family: var(--sans); font-weight: 600;
  font-size: 11px; line-height: 1.2;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
}
.page-prose .case-credits-list {
  list-style: none; padding: 0; margin: 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  font-family: var(--serif); font-size: 17px;
  line-height: 1.55; color: var(--ink-soft);
}
.page-prose .case-credits-list li + li { margin-top: var(--s-1); }
.page-prose .case-credits-list .who { color: var(--ink); }
.page-prose .case-credits-list .who.is-flibbrati a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-bottom-color var(--motion-duration-ui) var(--motion-ease-ui);
}
.page-prose .case-credits-list .who.is-flibbrati a:hover {
  border-bottom-color: var(--accent);
}
.page-prose .case-credits-list .where {
  color: var(--ink-quiet);
  font-size: 14px;
}
.page-prose .case-credits-list .where::before {
  content: ", ";
}

/* --- Case media list (lines 2298-2340) --- */

.page-prose .case-media {
  margin-block: var(--s-7);
  max-width: none;
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-soft);
}
.page-prose .case-media-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.page-prose .case-media-list li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.page-prose .case-media-list a {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--s-4);
  font-family: var(--sans); font-size: 13px; line-height: 1.5;
  color: var(--ink); text-decoration: none;
  transition: color var(--motion-duration-ui) var(--motion-ease-ui);
}
.page-prose .case-media-list a:hover { color: var(--accent); }
.page-prose .case-media-list .media-title {
  font-weight: 500;
}
.page-prose .case-media-list .media-source {
  display: block;
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-quiet);
  margin-top: var(--s-1); font-weight: 600;
}
.page-prose .case-media-list .media-arrow {
  align-self: center;
  font-family: var(--sans); font-size: 13px;
  color: var(--ink-quiet);
  transition: transform var(--motion-duration-ui) var(--motion-ease-ui), color var(--motion-duration-ui) var(--motion-ease-ui);
}
.page-prose .case-media-list a:hover .media-arrow {
  color: var(--accent);
  transform: translateX(3px);
}

/* ----------------------------------------------------------

/* --- Case related grid + card grammar (lines 2379-2436); wrapper family already in base.css --- */

.case-related-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-7);
}
@media (max-width: 880px) {
  .case-related-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}
.case-related-card {
  display: flex; flex-direction: column;
  gap: var(--s-4);
  text-decoration: none; color: inherit;
  padding: 0 var(--s-4) var(--s-4);
  border-radius: 4px;
  transition: box-shadow var(--motion-duration-content) var(--motion-ease-content);
}
.case-related-card:hover {
  box-shadow: 0 8px 32px rgba(20,20,19,.06);
}
.case-related-image {
  background: var(--paper);
  aspect-ratio: 4/3;
  position: relative; overflow: hidden;
  margin-inline: calc(var(--s-4) * -1);
}
.case-related-image::before {
  content: "image"; position: absolute;
  bottom: var(--s-3); left: var(--s-3);
  font-family: var(--sans); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-quiet);
}
/* When a real image is present, hide placeholder caption + let
   the <img> fill the frame. v0.5.83. */
.case-related-image.has-image::before { content: none; }
.case-related-image.has-image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--motion-duration-content) var(--motion-ease-content),
              filter var(--motion-duration-content) var(--motion-ease-content);
}
.case-related-card:hover .case-related-image.has-image img {
  transform: scale(1.012);
  filter: brightness(0.96);
}
.case-related-content {
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
.case-related-card .case-related-card-headline {
  margin: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.22;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.case-related-card .case-related-card-headline em { font-style: italic; }
.case-related-card .case-related-card-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-soft);
  margin-top: var(--s-2);
  font-family: var(--sans); font-size: 12px;
  color: var(--ink-soft);
}
.case-related-card .case-related-card-meta strong {
  font-weight: 600; color: var(--ink);
}
.case-related-card .case-related-card-meta > * + *::before {
  content: "·"; color: var(--ink-quiet); margin-right: var(--s-3);
}

/* --- v0.5.47: image_pair grid (no canonical reference; introduced
       to support the ACF schema's `image_pair` body block layout) --- */
.page-prose .case-figure.is-pair .case-figure-pair-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
@media (max-width: 720px) {
  .page-prose .case-figure.is-pair .case-figure-pair-grid {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
}
.page-prose .case-figure.is-pair .case-figure-pair-grid img,
.page-prose .case-figure.is-pair .case-figure-pair-grid .case-figure-frame {
  width: 100%;
  display: block;
}