/* --------------------------------------------------------------------------
   Festival pages — Navratri and Diwali

   Attached to the two fest-* bands rather than to a page slug, because they
   live on two pages. See swati_section_assets() in inc/pages/festival.php.

   Nothing on these pages is measured against a deck canvas: they are not slide
   conversions, so there are no --x/--y literals and no rebasing by 0.763. What
   is borrowed from the deck is the palette and the two faces, both already in
   site.css as custom properties — no colour below is a new hex.
   -------------------------------------------------------------------------- */

.fest-hero,
.fest-videos {
  background-image: var(--section-bg, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* The ornament in the top corner. author-publisher-orn-hero is the deck's own
   floral, left on disk unreferenced when the Author & Publisher band dropped
   it; a background rather than a <picture> because it is pure ornament and
   must stay out of the document. Sized as a share of the viewport so it holds
   the same corner at any width, and dropped entirely on small screens where it
   would crowd the heading. A chosen Background image replaces it. */
.fest-hero {
  background-image: var(--section-bg, image-set(
    url('../../images/author-publisher-orn-hero.webp') type('image/webp'),
    url('../../images/author-publisher-orn-hero.png')  type('image/png')
  ));
  background-position: right top;
  background-size: clamp(180px, 22%, 420px) auto;
  padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 3vw, 3rem);
}

/* Cinzel, letterspaced, in the ink the body already uses. The size tracks the
   viewport between a floor that stays readable on a phone and a ceiling that
   stops it outgrowing the container on a wide screen. */
.fest-hero__title {
  margin: 0;
  font-size: clamp(1.75rem, 4.6vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--c-ink);
  text-transform: capitalize;
}

/* Set in the body face, not a smaller heading: it names the page rather than
   opening a section, so it must not take a heading level. */
.fest-hero__sub {
  margin: 0.35rem 0 0;
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  line-height: 1.3;
  /* --font-body leads with Century Gothic, which carries a real bold, so this
     is a weight and not a synthesised one. Questrial behind it ships at 400
     only and the browser will approximate — acceptable, and the reason the
     figure is 700 rather than a middling 600 that would approximate poorly. */
  font-weight: 700;
  color: var(--c-ink);
}

.fest-hero__copy {
  margin-top: clamp(1.5rem, 3vw, 2.75rem);
  max-width: 62rem;
}

.fest-hero__copy p {
  margin: 0 0 1em;
}

.fest-hero__copy p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   The videos
   -------------------------------------------------------------------------- */

/* The band sits on its own tint rather than the page's paper. Declared as a
   colour, not in the background shorthand, so it stays underneath a chosen
   Background image instead of being reset by it — the two compose, and a band
   given an image keeps this behind any part of it that is transparent.

   #6b5e54 on #eadbd3 is 4.64:1 — AA for body text, and the figure is recorded
   because it is lower than the 5.3:1 the same ink gets on the page ground:
   this band is the least contrasty text on the site and has no margin left if
   the tint is ever darkened. */
.fest-videos {
  background-color: #eadbd3;
  padding-block: clamp(1.5rem, 4vw, 3.5rem) clamp(3rem, 7vw, 6rem);
}

/* Two columns, the player and the words. The ratio is the screenshot's — the
   player a little under half — and it collapses to one column at the width the
   rest of the site already breaks at, rather than at a number chosen here. */
.fest-video {
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  gap: clamp(1.25rem, 4vw, 3.25rem);
  align-items: start;
}

.fest-video + .fest-video {
  margin-top: clamp(2.5rem, 6vw, 5rem);
}

/* 16:9 for the providers, and for a file too — object-fit keeps a differently
   shaped file inside the box instead of stretching it. The frame is given the
   ratio rather than the iframe, so an oEmbed response that brings its own
   width and height attributes still fills it. */
.fest-video__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.fest-video__media iframe,
.fest-video__media video,
.fest-video__media > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.fest-video__media video { object-fit: contain; }

/* WordPress wraps oEmbed output in .wp-embed-aspect-* / .wp-block-embed
   helpers that carry their own padding-bottom trick. The frame above already
   holds the ratio, so those wrappers are flattened rather than fought. */
.fest-video__media .wp-embed-aspect-16by9,
.fest-video__media [class*="wp-embed-aspect"] {
  padding: 0;
  height: 100%;
}

.fest-video__title {
  margin: 0 0 0.6em;
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--c-ink);
}

.fest-video__copy p {
  margin: 0 0 1em;
}

.fest-video__copy p:last-child { margin-bottom: 0; }

.fest-video__fallback {
  padding: 1rem;
  color: #fff;
  word-break: break-all;
}

/* One column below the site's own breakpoint. The player leads, which is the
   order the two read in on a narrow screen. */
@media (max-width: 1024px) {
  .fest-video {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .fest-hero {
    background-size: clamp(120px, 34%, 220px) auto;
  }
}

@media (max-width: 600px) {
  /* The floral crowds the heading once the column is this narrow. */
  .fest-hero { background-image: var(--section-bg, none); }
}