/* ── cinematic_disciplines_grid ─────────────────────────────────────
   Asymmetric 5-tile image grid. Hardcoded nth-child spans give the
   pattern [4,6] [6,4] [10] — designed for exactly 5 disciplines.
   Tokens only. */

.block-cinematic_disciplines_grid {
  background: var(--color-bg);
  padding: clamp(96px, 14vh, 160px) 0 0;
}

.block-cinematic_disciplines_grid .cdg-head {
  max-width: 1520px;
  margin: 0 auto clamp(56px, 8vh, 88px);
  padding: 0 var(--space-section-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: end;
}
.block-cinematic_disciplines_grid .cdg-label {
  font-family: var(--font-eyebrow); font-weight: 500;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--color-muted);
  display: block; margin-bottom: 20px;
}
.block-cinematic_disciplines_grid .cdg-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 3.6vw, 56px); line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0; color: var(--color-fg);
  text-wrap: balance;
}
.block-cinematic_disciplines_grid .cdg-title em { font-style: italic; color: var(--color-accent); }
.block-cinematic_disciplines_grid .cdg-intro {
  margin: 0; color: var(--color-fg-muted); max-width: 44ch;
  font-size: 16px; line-height: 1.55;
}

.block-cinematic_disciplines_grid .cdg-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0;
}

/* Fixed 5-tile rhythm — [4,6] [6,4] [10] */
.block-cinematic_disciplines_grid .cdg-tile {
  position: relative; overflow: hidden;
  background: var(--color-dark-bg); color: var(--color-on-dark);
  grid-column: span 4;
  aspect-ratio: 4/5;
}
.block-cinematic_disciplines_grid .cdg-tile:nth-child(2) { grid-column: span 6; aspect-ratio: 6/5; }
.block-cinematic_disciplines_grid .cdg-tile:nth-child(3) { grid-column: span 6; aspect-ratio: 6/5; }
.block-cinematic_disciplines_grid .cdg-tile:nth-child(4) { grid-column: span 4; }
.block-cinematic_disciplines_grid .cdg-tile:nth-child(5) { grid-column: span 10; aspect-ratio: 10/4; }
.block-cinematic_disciplines_grid .cdg-tile:nth-child(n+6) { grid-column: span 5; aspect-ratio: 3/2; }

.block-cinematic_disciplines_grid .cdg-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1), filter 1s ease;
  filter: brightness(0.85);
}
.block-cinematic_disciplines_grid .cdg-tile:hover img { transform: scale(1.04); filter: brightness(0.72); }

/* readability scrim */
.block-cinematic_disciplines_grid .cdg-tile::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-dark-bg) 0%, transparent) 40%, color-mix(in srgb, var(--color-dark-bg) 55%, transparent) 100%);
  pointer-events: none;
}

.block-cinematic_disciplines_grid .cdg-tile-empty {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-eyebrow); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-on-dark) 60%, transparent);
}

.block-cinematic_disciplines_grid .cdg-tile-inner {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(24px, 3vw, 40px);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; z-index: 2;
}
.block-cinematic_disciplines_grid .cdg-name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 3.2vw, 48px); line-height: 1;
  letter-spacing: -0.015em; color: var(--color-on-dark);
}
.block-cinematic_disciplines_grid .cdg-meta {
  font-family: var(--font-eyebrow); font-weight: 500;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-on-dark) 85%, transparent);
}

@media (max-width: 900px) {
  .block-cinematic_disciplines_grid .cdg-head { grid-template-columns: 1fr; padding: 0 32px; }
  .block-cinematic_disciplines_grid .cdg-tile,
  .block-cinematic_disciplines_grid .cdg-tile:nth-child(n) {
    grid-column: 1 / -1; aspect-ratio: 3/2;
  }
}

/* ── Via Crispi — .cdg-head-left is emitted by render.php but styled in
   IDA's own stylesheet; carried locally here. ─────────────────────── */
.block-cinematic_disciplines_grid .cdg-head-left { flex: 1 1 auto; min-width: 0; }