/* ==========================================================================
   Page: Always On / IFK case study (slug: ifk) — Figma 1934-4103
   Hero reuses .expertise-hero / .case-hero-x (page-expertise-single + case-content).
   ========================================================================== */

/* Hero removed — always-on posts share the CASE hero (template-parts/case-hero,
   .expertise-hero .case-hero-x) since 2026-10-09. Tags come from the ifk_hero_*
   fields and a button joins them in the row under the heading. */

/* ── Body wrapper ──────────────────────────────────────────────────────── */
.ifk-body {
  padding-top: var(--space-100);
}

/* The page container moved OFF .ifk-body and onto each text block, so the
   media rows can bring their own container (or go full-bleed). .container
   pads its own bottom; here the section rhythm owns that space. */
.ifk-text { padding-bottom: 0; }

/* Collage rows stack with the SAME 20px gap the cases get from .case-media.
   Without this the rows sat flush against each other — .ifk-media had no
   styles at all. The section rhythm stays with .ifk-section. */
.ifk-media {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* A collage row IS a .container, and .container carries a bottom padding of
   its own (--margin-primary, 60px). Inside this stack that lands on TOP of the
   20px gap, so the rows sat 80px apart and the last row pushed a further 60px
   into .ifk-section's 100px margin — 160px down to the next section (Kajsa
   2026-10-05). In here the gap and the section margin own the rhythm. */
.ifk-media > .container { padding-bottom: 0; }

/* Intro lead paragraph — Title/XS (Figma steps it to Title/Small on mobile,
   see the media query below). Every value is a token. */
.ifk-intro {
  max-width: 1000px;
  /* 200, not 100 (Kajsa 2026-10-09): the intro needed more air before the
     first section heading. Lives on .ifk-intro and NOT on its .ifk-text
     container - that class wraps every section's text block too, so padding
     there would have moved the whole page apart. */
  margin: 0 0 var(--space-200);
  font-size: var(--title-xs);
  line-height: var(--title-xs-lh);
  letter-spacing: var(--title-xs-ls);
  color: var(--text-body);
}

/* ── Section = text-grid (heading + right body) + media grid ────────────── */
.ifk-section {
  margin-bottom: var(--space-100);
}

/* text-widget variant — KNOBS ONLY. The 4-column grid, the 20px column gap,
   the spans (heading 1/span 3, body 3/span 2), the Title/LG heading and the
   mobile full-width stack are all the widget's own defaults, so this variant
   only sets the wider heading→body gap and its own trailing space. */
.text-grid--ifk {
  --tw-row-gap: var(--space-60);
  --tw-pad-bottom: var(--space-60);
}

/* ── Media grid — 4-col auto-flow; each cell sized by its width class ────────
   Items flow in order (sparse) so widths that don't fill a row leave a gap, and
   "Empty space" cells reserve the gap explicitly (the staggered Figma grids). */
.ifk-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.ifk-cell {
  position: relative;
  border-radius: var(--radius-image);
  overflow: hidden;
  background: rgba(28, 27, 31, 0.04);
}
.ifk-cell img,
.ifk-cell video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Bunny Stream background embed — fills the (rounded, overflow-hidden) cell.
   pointer-events:none keeps it a pure background: no controls, no interaction.
   The 16:9 player is over-sized with container-query units so it COVERS any
   cell shape (no letterbox); the cell's overflow:hidden crops the excess. */
.ifk-cell .ifk-embed {
  position: absolute;
  inset: 0;
  container-type: size;
}
.ifk-cell .ifk-embed iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100cqw, 177.78cqh);  /* 16/9 */
  height: max(100cqh, 56.25cqw);  /* 9/16 */
  border: 0;
  pointer-events: none;
}
/* Square (1:1) Stream videos: cover with a square player sized to the cell's
   larger edge, so the 1:1 video fills the cell and the excess is cropped. */
.ifk-cell .ifk-embed--square iframe {
  width: max(100cqw, 100cqh);
  height: max(100cqw, 100cqh);
}
/* Click to play / Player: the visitor needs the player's controls, so the
   iframe fits the cell instead of being over-sized to cover it (the controls
   sit at the bottom edge and would otherwise be cropped away). */
.ifk-cell .ifk-embed.is-interactive iframe {
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

/* Widths: full = 4 cols, half = 2 cols, quarter = 1 col; half-tall spans 2 rows */
.ifk-cell--full      { grid-column: span 4; aspect-ratio: 1340 / 754; }
.ifk-cell--half      { grid-column: span 2; aspect-ratio: 660 / 450; }
.ifk-cell--half-tall { grid-column: span 2; grid-row: span 2; aspect-ratio: 660 / 920; }
.ifk-cell--quarter   { grid-column: span 1; aspect-ratio: 320 / 450; }

/* Empty spacer — reserves grid cells, draws nothing */
.ifk-cell--empty { background: transparent; border-radius: 0; }

/* ── Related case studies ──────────────────────────────────────────────── */
/* Other cases sits on white, so the band separates from the page ground. */
.ifk-cases {
  padding-block: var(--space-60) var(--section-py);
  background-color: var(--bg-white);
}
.ifk-cases__title { margin-bottom: 40px; }
.ifk-cases__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ifk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ifk-cell--full      { grid-column: span 2; aspect-ratio: 16 / 9; }
  .ifk-cell--half,
  .ifk-cell--half-tall { grid-column: span 2; grid-row: auto; aspect-ratio: 3 / 2; }
  .ifk-cell--quarter   { grid-column: span 1; aspect-ratio: 3 / 4; }
  .ifk-cell--empty     { display: none; }
}

@media (max-width: 767px) {
  .ifk-body { padding-top: 60px; }
  .ifk-section { margin-bottom: 60px; }

  /* Intro lead — Figma steps this down to Title/Small on mobile. */
  .ifk-intro {
    margin-bottom: 60px;
    font-size: var(--title-sm);
    line-height: var(--title-sm-lh);
    letter-spacing: var(--title-sm-ls);
  }

  /* Knobs only here too — the full-width stack, the 40/46 heading and the
     20/28 body copy are exactly what the mobile tokens already give. */
  .text-grid--ifk { --tw-row-gap: 24px; --tw-pad-bottom: 32px; }

  /* Mobile grid — matches the Figma mobile design: most media is full-width,
     small portrait tiles (desktop "quarter") sit 2-up. Videos/wide images keep
     16:9; tall images stay portrait. */
  .ifk-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ifk-cell { grid-column: 1 / -1; grid-row: auto; }   /* default: full width */
  .ifk-cell--full      { aspect-ratio: 16 / 9; }
  .ifk-cell--half      { aspect-ratio: 16 / 9; }
  .ifk-cell--half-tall { aspect-ratio: 3 / 4; }
  .ifk-cell--quarter   { grid-column: span 1; aspect-ratio: 320 / 450; }  /* 2-up portrait */
  .ifk-cell--empty     { display: none; }

  .ifk-cases__grid { grid-template-columns: 1fr; }
}

/* Mobile: cap oversized section padding to the 60px base rhythm. */
@media (max-width: 767px) {
  .ifk-cases { padding-block: 40px var(--space-60); }
}