/* --------------------------------------------------------------------------
   The Warrior Queen of Jhansi (2019)

   Attached to the three wq-* bands rather than a page slug, so any of them can
   be placed elsewhere. Nothing here is measured against a deck canvas and no
   colour is a new hex — ink, nav and rule come from site.css.
   -------------------------------------------------------------------------- */

.wq-band {
  background-image: var(--section-bg, none);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  padding-block: clamp(2rem, 5vw, 4rem);
}

/* The engraved face in caps, as every band heading on this page is set. */
.wq-band__title {
  margin: 0 0 clamp(1.5rem, 3.4vw, 2.75rem);
  font-family: var(--font-engraved);
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   People — cast, crew, awardees
   -------------------------------------------------------------------------- */

.wq-people__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Four across, as Cast and Crew have them.

   Eight tracks with each person spanning two, rather than four tracks spanning
   one: that is what lets a short last row start on a half-column and sit
   centred under the four above it, which an integer four-column grid cannot
   express. */
.wq-people__list--grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(1rem, 2.6vw, 2rem) clamp(0.75rem, 2vw, 1.5rem);
}

.wq-people__list--grid .wq-person {
  grid-column: span 2;
  text-align: center;
}

/* A trailing row of three, centred. :nth-child(4n+1) tests for "starts a row"
   and :nth-last-child(3) for "three remain", so the pair matches only when the
   last row holds exactly three — the Cast arrangement in the design. */
.wq-people__list--grid .wq-person:nth-child(4n+1):nth-last-child(3) {
  grid-column: 2 / span 2;
}

/* And a trailing two or one, which Crew ends on. Each starts one more track in
   than the last, so three sit 1 track from each edge, two sit 2, and one sits
   3 — the row stays centred whatever is left over. Only one of the three can
   match, because only one describes the remainder. */
.wq-people__list--grid .wq-person:nth-child(4n+1):nth-last-child(2) {
  grid-column: 3 / span 2;
}

.wq-people__list--grid .wq-person:nth-child(4n+1):nth-last-child(1) {
  grid-column: 4 / span 2;
}

/* Two across. Every row is then full or carries one trailing item, and the
   half-column offset above would misplace that item rather than centre it. */
@media (max-width: 900px) {
  .wq-people__list--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wq-people__list--grid .wq-person:nth-child(4n+1):nth-last-child(3),
  .wq-people__list--grid .wq-person:nth-child(4n+1):nth-last-child(2),
  .wq-people__list--grid .wq-person:nth-child(4n+1):nth-last-child(1) { grid-column: span 2; }
}

@media (max-width: 520px) {
  .wq-people__list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The white card round each portrait, the same mount the Team page uses. */
.wq-person__photo {
  padding: clamp(0.3rem, 0.6vw, 0.5rem);
  background: #fff;
  box-shadow: 0 3px 12px rgba(107, 94, 84, 0.18);
}

.wq-person__photo img,
.wq-person__photo picture {
  width: 100%;
  height: auto;
  display: block;
}

/* Bold, small and letterspaced under the picture — the deck sets every name in
   the two grids this way. --font-body leads with Century Gothic, which has a
   real bold, so this is a weight and not a synthesised one. */
.wq-people__list--grid .wq-person__name {
  margin: 0.8rem 0 0.15rem;
  font-size: clamp(0.78rem, 1vw, 0.9rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink);
}

.wq-people__list--grid .wq-person__text {
  margin: 0;
  font-size: clamp(0.78rem, 1vw, 0.9rem);
  line-height: 1.3;
  color: var(--c-ink);
}

/* Rows: the picture beside the words, as Awardees has them. The picture column
   is fixed in proportion so a run of them lines up down the page rather than
   each sizing to its own paragraph. */
.wq-people__list--rows .wq-person {
  display: grid;
  grid-template-columns: minmax(0, 18fr) minmax(0, 82fr);
  gap: clamp(1rem, 2.6vw, 2.25rem);
  align-items: start;
}

.wq-people__list--rows .wq-person + .wq-person {
  margin-top: clamp(1.5rem, 3.4vw, 2.75rem);
}

.wq-people__list--rows .wq-person__name {
  margin: 0 0 0.7em;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  line-height: 1.25;
  font-weight: 700;
  color: var(--c-ink);
}

.wq-people__list--rows .wq-person__text {
  margin: 0 0 0.75em;
  line-height: 1.5;
  color: var(--c-ink);
}

.wq-people__list--rows .wq-person__text:last-child { margin-bottom: 0; }

/* The picture leads on a narrow screen and is capped so a portrait cannot fill
   a phone on its own. */
@media (max-width: 760px) {
  .wq-people__list--rows .wq-person {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .wq-people__list--rows .wq-person__photo { max-width: 12rem; }
}

/* --------------------------------------------------------------------------
   Where to watch
   -------------------------------------------------------------------------- */

/* Full width: the line runs to the container edge as the design has it,
   rather than being held to a measure.

   Larger than the other band headings on this page, on request: capped at
   3.7rem against .wq-band__title's 2.4rem. Recapped rather than set flat —
   59.2px on a phone would break this sentence across five or six lines — so
   the floor stays the shared one and only the ceiling moves. The slope is
   that ceiling on the same 1302px container the other steps are rebased to. */
.wq-logos__title {
  max-width: none;
  font-size: clamp(1.4rem, 4.55vw, 3.7rem);
}

/* Three across, as the design has them, dropping to two then one. The marks
   are wordmarks of wildly different proportions, so each sits in a box of
   fixed height and is contained inside it — that is what lines them up on a
   common baseline instead of by their own bounding boxes. */
.wq-logos__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2.5rem);
  /* stretch, not center: each mark's width is a percentage of its column, and
     a centred item shrink-wraps its contents — the percentage would then
     resolve against a box being sized by the very thing it is sizing. The
     marks centre themselves with margin-inline instead. */
  justify-items: stretch;
  text-align: center;
}

.wq-logo__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Each mark at its own size, not normalised into a shared box.

   The earlier version held every one to 250 by 100 and contained it, which
   makes each mark as large as that box allows and hides the difference between
   them. The design does the opposite: Apple TV is small and nearly square,
   Google is half again as wide, DIRECTV is a long thin lockup, and the
   difference is the point.

   Every width below is that mark's own box on slide 25 divided by the column it
   sits in — 16230600 across three — so the row keeps the deck's proportions
   rather than a set of numbers that merely look about right. */
.wq-logo__mark {
  display: grid;
  place-items: center;
  /* Tall enough for the deepest mark, so the three in a row sit on one
     baseline even though none of them is the same height. */
  min-height: clamp(48px, 6.6vw, 92px);
  margin-inline: auto;
}

.wq-logo__mark img,
.wq-logo__mark picture {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.wq-logos__list > .wq-logo:nth-child(1) .wq-logo__mark { width: 38.0%; }   /* 2057071 */
.wq-logos__list > .wq-logo:nth-child(2) .wq-logo__mark { width: 43.5%; }   /* 2356051 */
.wq-logos__list > .wq-logo:nth-child(3) .wq-logo__mark { width: 38.3%; }   /* 2070218 */
.wq-logos__list > .wq-logo:nth-child(4) .wq-logo__mark { width: 61.6%; }   /* 3335087 */
.wq-logos__list > .wq-logo:nth-child(5) .wq-logo__mark { width: 55.2%; }   /* 2987235 */
.wq-logos__list > .wq-logo:nth-child(6) .wq-logo__mark { width: 53.2%; }   /* 2880651 */

.wq-logo__label {
  display: block;
  margin-top: 0.75rem;
  /* 20pt bold on the source, which is 26.7px on its 1704 box. */
  font-size: clamp(0.85rem, 1.567vw, 1.27rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink);
}

.wq-logo__link:hover .wq-logo__label,
.wq-logo__link:focus-visible .wq-logo__label {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (max-width: 700px) {
  .wq-logos__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .wq-logos__list { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Awards
   -------------------------------------------------------------------------- */

.wq-awards__split { align-items: start; }

.wq-awards__copy { min-width: 0; }

.wq-award + .wq-award { margin-top: clamp(1.25rem, 3vw, 2.25rem); }

/* Bold, and running straight on into the copy below with no gap — the two are
   one sentence in the design, not a heading and a paragraph. */
.wq-award__lead {
  margin: 0;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-ink);
}

.wq-award__body {
  margin: 0;
  line-height: 1.5;
  color: var(--c-ink);
}

/* Copy runs to more than one paragraph now, on the page and in the dialog
   alike. The dialog's own paragraphs are spaced by .body-copy in site.css;
   this is the same gap for the ones standing on the page. */
.wq-award__body + .wq-award__body { margin-top: 0.8em; }

/* The display face at the size the page asked for. Cinzel Decorative loads at
   700 only, so this heading takes that weight rather than .wq-band__title's
   400 — there is no 400 face for the browser to resolve to. The clamp is the
   one that was asked for, verbatim. */
.wq-awards__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 5vw, 6rem);
}

/* Bold, as every More on this site is. No longer on the end of the last
   sentence: it opens the rest of the award now rather than continuing it, and
   a control reads as a control when it stands on a line of its own. The
   dialog opener is the shared .more-dialog__open from site.css; this only
   gives it the space this column wants. */
.wq-awards__copy .more-dialog__open,
.wq-award__morerow { margin-top: 0.85rem; }

.wq-award__morerow { margin-bottom: 0; }

.wq-award__more {
  font-weight: 700;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
}

.wq-award__more::after { content: "\2026"; }

.wq-award__more:hover,
.wq-award__more:focus-visible {
  color: var(--c-nav-active);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.wq-awards__media { min-width: 0; }

/* The tilt stays; the mount is gone. The white ground and the drop shadow that
   drew a polaroid round this photograph were removed on request — the same
   call the team photographs got, where the uploaded file already carried its
   own frame and the CSS was drawing a second one round it.

   The rotation is still on the figure, and a whole degree still reads as
   deliberate where a fraction reads as a mistake.

   The padding is left in place: with no ground behind it it is an inset
   rather than a mount, and it is what keeps the tilted corners off whatever
   sits beside them. box-sizing: border-box (set globally in site.css) already
   makes that padding part of the box rather than added to it.

   The cap is 450px on request, up from the source's own 376. The ratio stays
   376/462 — it is the shape of the card the slide draws, and only its size was
   asked about — so the whole card grows rather than the picture stretching
   inside it, and a narrow screen still scales it whole. */
.wq-awards__frame {
  width: min(450px, 100%);
  aspect-ratio: 376 / 462;
  margin: 0;
  padding: clamp(0.5rem, 1.1vw, 0.9rem);
  transform: rotate(2deg);
}

/* The photograph fills whatever the padding leaves. cover, because the source
   is not that shape and letterboxing it would leave the band's own ground
   showing through the picture. */
.wq-awards__frame img,
.wq-awards__frame picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1024px) {
  .wq-awards__split {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  /* Straightened once it is the only thing on its row — a tilt that overlapped
     nothing would just look like a rendering fault. */
  .wq-awards__frame {
    max-width: 24rem;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Bands this page borrows, set the way this page wants them

   Everything above belongs to a wq-* band and so is this page's alone. The four
   rules below are not: bbc-hero, about-intro and pd-mwki are shared bands, and
   their base rules are measured for the pages they were built for. So each one
   is scoped to body.warrior-queen — the slug→class map in functions.php, the
   mechanism that was already there for womens-advocacy and bharatanatyam.

   Scoped rather than left to load order. This sheet only ever loads on this
   page, since no other page carries a wq-* band, so an unscoped rule would
   usually win anyway — but only if this sheet happened to be enqueued after
   blue-boy.css and site.css, which depends on the order the bands sit in on the
   page. The body class makes it a question of specificity instead, which does
   not move when somebody reorders the sections.
   -------------------------------------------------------------------------- */

/* The hero title in the display face, capped at 3.7rem rather than the shared
   4rem. Not the --display title face switch the band already has: that one also
   takes the weight to 700, drops the capitals and resets the tracking, and only
   the family and the size were asked for here. Floor and slope stay the band's
   own so the line still comes down on a narrow screen. */
body.warrior-queen .bbc-hero__kicker {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5.2vw, 3.7rem);
}

/* The About heading in the engraved face at 500.

   Worth knowing what 500 resolves to: the theme loads Cinzel at 400 and 600
   only. CSS weight matching for 500 tries 500, then descends — so this renders
   in the 400 face, one step lighter than the 700 .display-title asks for and
   lighter than the 600 Cinzel could give. That is what was asked for; 600 is
   the value if it ever wants to read bolder. */
body.warrior-queen .display-title {
  font-family: var(--font-engraved);
  font-weight: 500;
}

/* Only the film band's link row, not every one on the page: the Spirit of the
   Rani row's link sits under its own copy (see pd-mwki.php) and is never a
   .pd-film descendant, so this rule was never reaching it either way. */
body.warrior-queen .pd-film .pd-linkrow { margin-bottom: 20px; }

/* A longer measure than the 22em the band sets, on request. Scoped because the
   other two pd-mwki rows — Producer & Director and The Man Who Knew Infinity —
   are single short lines that were spaced against 22em. */
body.warrior-queen .pd-film__role--wrap { max-width: 30em; }