/* ==========================================================================
   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 now use the shared template-parts/hero
   (.site-hero); title size is the ACF hero_title_size field. */

/* ── Body wrapper ──────────────────────────────────────────────────────── */
.ifk-body {
  padding-top: 100px;
}

/* Intro lead paragraph (wide, large) */
.ifk-intro {
  max-width: 1000px;
  margin: 0 0 100px;
  font-size: var(--title-xs);
  line-height: var(--title-xs-lh);
  letter-spacing: -0.32px;
  color: var(--text-body);
}

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

/* text-widget variant: heading top-left (title-lg), body lower-right (660) */
.text-grid--ifk {
  display: grid;
  width: 100%;
  padding: 0 0 60px;
  row-gap: 60px;
  column-gap: 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.text-grid--ifk .tw-heading { grid-column: 1 / span 3; grid-row: 1; }
.text-grid--ifk .tw-heading .title-lg { font-size: var(--title-lg); line-height: var(--title-lg-lh); }
.text-grid--ifk .tw-text { grid-column: 3 / span 2; grid-row: 2; }

/* ── 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 ──────────────────────────────────────────────── */
.ifk-cases { padding-block: 60px 120px; }
.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 — Header/Small (mobile) */
  .ifk-intro {
    margin-bottom: 60px;
    color: var(--text-body, #4f4f4f);
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -0.48px;
    font-weight: 400;
  }

  .text-grid--ifk { row-gap: 24px; padding-bottom: 32px; }
  .text-grid--ifk .tw-heading,
  .text-grid--ifk .tw-text { grid-column: 1 / -1; }
  /* Section heading — Header/Large (mobile) */
  .text-grid--ifk .tw-heading .title-lg {
    color: #1c1b1f;
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -0.8px;
    font-weight: 400;
  }
  /* Section body — Body/Large (mobile). `p` not `.text-m`: the widget's
     paragraph class is .text-lg since the Figma Body/Large alignment. */
  .text-grid--ifk .tw-text p {
    color: var(--text-body, #4f4f4f);
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.2px;
    font-weight: 400;
  }

  /* 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 60px; }
}