/* ============================================================
   ATA DALA PRODUCTION — «ANAMORPHOT» (dark, cinematic, red)
   pages/casting.css — «Casting & Talent». A typographic titre,
   one FEATURED actor on a large cinematic portrait with a
   frame-cutting mini-gallery, and a nine-frame TALENT POOL —
   unattributed, honest, grayscale lifting to colour with a red
   edge on hover. Tokens only: no hardcoded colour, font or
   duration. Load AFTER layout.css.
   ============================================================ */

/* ============================================================
   1. INTRO — the titre
   ============================================================ */

.cast-intro {
  position: relative;
  padding-block: calc(var(--header-h) + var(--sp-11)) var(--sp-10);
}

.cast-intro__eyebrow { margin-bottom: var(--sp-6); }

.cast-intro__title {
  max-width: var(--measure-wide);
  margin-bottom: var(--sp-6);
}

.cast-intro__lead {
  max-width: var(--measure);
  color: var(--c-text);
}

/* The pitch runs over two paragraphs — they need air between them,
   otherwise they read as one unbroken block. */
.cast-intro__lead + .cast-intro__lead { margin-top: var(--sp-5); }

/* Three numbers on a hairline strip — the theatre's stats */
.cast-intro__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-9);
  padding-top: var(--sp-6);
  border-top: var(--border);
}

.cast-intro__stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}

.cast-intro__num {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-h2);
  line-height: var(--lh-h2);
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}

.cast-intro__num--sm {
  font-size: var(--fs-h3);
  letter-spacing: var(--tr-h3);
  line-height: var(--lh-h3);
}

/* ============================================================
   2. FEATURED — one actor, a large portrait + mini-gallery
   ============================================================ */

.cast-featured {
  position: relative;
  padding-block: var(--sp-9) var(--sp-12);
}

.cast-featured__head { margin-bottom: var(--sp-7); }

.cast-featured__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--sp-10);
  align-items: center;
}

/* ---- The stage: large cinematic portrait ------------------- */

.cast-featured__stage {
  position: relative;
  margin: 0;
}

.cast-featured__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--g-frame);
  border: var(--border);
  filter: brightness(0.94);
}

/* .xf__img (from layout.css) is absolutely positioned + object-fit
   cover, so the crossfade frames fill the stage. */

/* Letterbox detail — the frame is "switched on" */
.cast-featured__lb {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--sp-6);
  background: var(--c-letterbox);
  z-index: var(--z-letterbox);
  pointer-events: none;
}
.cast-featured__lb--top    { top: 0; }
.cast-featured__lb--bottom { bottom: 0; }

/* Red plate caption, bottom-left over the frame */
.cast-featured__tag {
  position: absolute;
  left: 0;
  bottom: var(--sp-6);
  z-index: var(--z-content);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-accent);
  color: var(--on-accent);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  line-height: 1.4;
  text-transform: uppercase;
}

/* ---- The body: name, role, mini-gallery -------------------- */

.cast-featured__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-width: 0;
}

.cast-featured__no {
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  line-height: var(--lh-flat);
  text-transform: uppercase;
  color: var(--c-accent-ink);
  font-variant-numeric: tabular-nums;
}

.cast-featured__name {
  font-size: var(--fs-list);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-list);
  color: var(--c-text);
  text-wrap: balance;
}

.cast-featured__role {
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--c-accent-ink);
}

.cast-featured__note {
  max-width: var(--measure-col);
  margin-top: var(--sp-2);
}

/* Mini-gallery — three frames of the featured actor */
.cast-featured__reel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  list-style: none;
}

.cast-featured__reel-item { min-width: 0; }

.cast-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--g-frame);
  border: var(--border);
  padding: 0;
  cursor: pointer;
}

.cast-thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.82);
  transition: filter var(--d-cut) var(--e-out),
              transform var(--d-cut) var(--e-out);
}

.cast-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  pointer-events: none;
  transition: border-color var(--d-fast) var(--e-ease);
}

.cast-thumb:hover > img,
.cast-thumb:focus-visible > img { filter: grayscale(0) brightness(1); }

.cast-thumb:hover::after,
.cast-thumb:focus-visible::after { border-color: var(--c-accent); }

/* The active frame — the one on the stage */
.cast-thumb.is-active > img { filter: grayscale(0) brightness(1); }
.cast-thumb.is-active::after { border-color: var(--c-accent); }

/* ============================================================
   3. TALENT POOL — nine unattributed frames
   ============================================================ */

.cast-pool { padding-block: 0 var(--sp-12); }

.cast-pool__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-6);
  padding-bottom: var(--sp-8);
}

.cast-pool__head-lead > .eyebrow { margin-bottom: var(--sp-4); }
.cast-pool__title { max-width: 20ch; }

.cast-pool__note {
  max-width: 40ch;
  line-height: 1.5;
  padding-left: var(--sp-6);
  border-left: 2px solid var(--c-accent);
}

/* The grid — three columns of portrait frames */
.cast-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  list-style: none;
}

.cast-cell { min-width: 0; }

.cast-cell__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--g-frame);
  border: var(--border);
  margin: 0;
}

.cast-cell__frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.86);
  transform: scale(1.001); /* stable paint plane for the zoom */
  transition: filter var(--d-slow) var(--e-out),
              transform var(--d-slow) var(--e-out);
}

/* A red edge lands on hover/focus */
.cast-cell__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  pointer-events: none;
  z-index: var(--z-scrim);
  transition: border-color var(--d-fast) var(--e-ease);
}

.cast-cell__frame:hover > img,
.cast-cell__frame:focus-within > img {
  filter: grayscale(0) brightness(1);
  transform: scale(1.05);
}

.cast-cell__frame:hover::after,
.cast-cell__frame:focus-within::after { border-color: var(--c-accent); }

/* ============================================================
   4. CTA — cast in Kazakhstan
   ============================================================ */

.cast-cta__panel {
  border: var(--border);
  border-top: 2px solid var(--c-accent);
  background: var(--c-surface);
  padding: clamp(var(--sp-7), 5vw, var(--sp-10));
}

.cast-cta__panel > .eyebrow { margin-bottom: var(--sp-5); }

.cast-cta__title {
  max-width: 28ch;
  margin-bottom: var(--sp-5);
}

.cast-cta__body {
  max-width: var(--measure-col);
  margin-bottom: var(--sp-7);
  line-height: 1.55;
}

.cast-cta__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

/* ============================================================
   5. RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .cast-featured__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
  }
  .cast-featured__frame { aspect-ratio: 3 / 4; }
  .cast-featured__stage { max-width: 32rem; }
}

@media (max-width: 768px) {
  .cast-intro { padding-block: calc(var(--header-h) + var(--sp-9)) var(--sp-9); }

  .cast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cast-pool__head {
    align-items: flex-start;
    flex-direction: column;
  }
  .cast-pool__note { padding-left: var(--sp-5); }
}

@media (max-width: 560px) {
  .cast-intro__meta {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }
  .cast-featured__reel { gap: var(--sp-3); }
  .cast-grid { grid-template-columns: minmax(0, 1fr); }
  .cast-featured__stage { max-width: 100%; }
}

/* ============================================================
   6. REDUCED MOTION — the interface stays, the motion goes.
   The global reset in base.css already near-zeros transitions;
   here we make sure nothing is left mid-transform.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .cast-cell__frame > img,
  .cast-cell__frame:hover > img,
  .cast-cell__frame:focus-within > img { transform: none; }
}