/* ==========================================================================
   Section: Producer & Director hero — slide 6 of old.pptx

   Lifted out of css/pages/producer-director.css when the band was put on the
   home page as well. A per-page sheet only loads for the page whose slug names
   it (see swati_enqueue_page_stylesheet), so a section used on two pages cannot
   live in one — it needs a sheet of its own, registered against the section in
   swati_section_assets(). Same arrangement the tiles band already uses.

   Sizes are source sizes from the 1920x1080 canvas multiplied by
   1300/1704 = 0.763, expressed against the 1300px container, exactly as
   css/pages/producer-director.css does.

   The three rules shared with the rest of that page — the link colour and the
   caption treatment — are scoped under .pd-hero here rather than copied flat.
   Two sheets defining a bare .pd-cap would be two things to keep in step, and
   whichever loaded second would win by source order alone; at (0,2,0) these
   win wherever they land, and they cannot reach the other page's captions.
   ========================================================================== */

.pd-hero {
  /* The body ink, as producer-director.css sets it for the other bands —
     changed from the deck's #5271FF blue on request. 5.25:1 on the page
     background. The underline is now the only cue that these are links, so it
     must stay. Change this and producer-director.css together. */
  --c-link: #6b5e54;
}

.pd-hero__split { gap: clamp(1rem, 2.17vw, 28.2px); }   /* 37px source */

.pd-hero__title {
  margin: 0 0 clamp(1rem, 2.11vw, 27.5px);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6.105vw, 4.96rem);   /* 104 -> 79.4px */
  font-weight: 700;
  line-height: 1.23;              /* lnSpc 95.95pt on a 78pt run */
  letter-spacing: -0.048em;       /* spc -374 */
  /* The markup carries the source string verbatim ("pRoduceR &" / "DIRECTOR").
     The Canva design renders that box in capitals — its own export shows eight
     full-height letters in PRODUCER — so the case change is made here rather
     than by retyping the copy. It has to be done in CSS: Cinzel Decorative
     maps lowercase to small capitals, so the typed string and a retyped
     all-caps string are two different glyph runs. */
  text-transform: uppercase;
  color: var(--c-ink);
}

.pd-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 0.53vw, 6.9px);
}

.pd-links li {
  display: flex;
  align-items: center;
  gap: clamp(0.35rem, 0.9vw, 11.7px);
}

/* The icon column is 78px wide in the source (x=108 to the label at x=186);
   the icons themselves are drawn at five different sizes and keep them. */
.pd-links__icon {
  flex: 0 0 clamp(38px, 4.564vw, 59.3px);
  display: flex;
  align-items: center;
}

.pd-links__icon img { width: clamp(27px, 3.256vw, 42.3px); }         /* 55.5 */
.pd-links__icon--chilli img { width: clamp(30px, 3.626vw, 47.1px); } /* 61.8 */
.pd-links__icon--lg img { width: clamp(36px, 4.281vw, 55.7px); }     /* 72.9 */
.pd-links__icon--md img { width: clamp(28px, 3.397vw, 44.2px); }     /* 57.9 */

.pd-links a {
  font-size: var(--step-body);
  color: var(--c-link);
  text-decoration: underline;
  overflow-wrap: anywhere;
}


/* The button itself is .section-more in css/site.css — six bands share it. Only
   the indent is this band's: it lines the button up with the link labels rather
   than with the icon column, which is a fixed flex basis the button is not part
   of. */
.pd-hero .section-more {
  margin-left: calc(clamp(38px, 4.564vw, 59.3px) + clamp(0.35rem, 0.9vw, 11.7px));
}


/* --------------------------------------------------------------------------
   The browser window
   Drawn rather than exported: the source asset is a 6KB flat outline that
   would have to be upscaled 1.39x to be used at size. Proportions are the
   asset's own (709x947 native): a 4px border, a 32px title bar and three 10px
   dots at x=32 / 46.5 / 61.5.
   -------------------------------------------------------------------------- */

.pd-browser {
  border: clamp(2px, 0.327vw, 4.25px) solid #ddccc2;
  border-radius: clamp(8px, 1.63vw, 21px);
}

.pd-browser__bar {
  display: flex;
  align-items: center;
  gap: 0.66%;
  height: clamp(14px, 2.61vw, 34px);
  padding-left: 3.81%;
  background: #ddccc2;
}

/* The dots are knockouts in the source artwork, so they show the page. */
.pd-browser__bar span {
  width: 1.41%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-bg);
}

.pd-browser__body { padding: 2.375% 2.745% 2.745%; }

/* Mosaic. Row A is two frames; rows B and C share a three-column block whose
   middle cell spans both. Column and row tracks are the source widths, and
   the gaps are the source gaps, both as percentages of the 931px photo area. */
.pd-mosaic__row {
  display: grid;
  gap: 0;
}

.pd-mosaic__row--a {
  aspect-ratio: 931.31 / 297.2;
  grid-template-columns: 542.14fr 379.12fr;
  column-gap: 1.0738%;
}

.pd-mosaic__row--b {
  margin-top: 0.9868%;
  aspect-ratio: 931.31 / 605.08;
  grid-template-columns: 381.27fr 276.49fr 252.79fr;
  grid-template-rows: 297.2fr 297.2fr;
  column-gap: 1.1113%;
  row-gap: 1.1468%;
}

.pd-mosaic__row--b > *:nth-child(1) { grid-area: 1 / 1; }
.pd-mosaic__row--b > *:nth-child(2) { grid-area: 1 / 2 / span 2 / span 1; }
.pd-mosaic__row--b > *:nth-child(3) { grid-area: 1 / 3; }
.pd-mosaic__row--b > *:nth-child(4) { grid-area: 2 / 1; }
.pd-mosaic__row--b > *:nth-child(5) { grid-area: 2 / 3; }

.pd-mosaic__row > picture,
.pd-mosaic__tall { display: block; height: 100%; margin: 0; }

.pd-mosaic__row img { width: 100%; height: 100%; object-fit: cover; }

.pd-mosaic__tall { position: relative; }
.pd-mosaic__tall picture { display: block; height: 100%; }

/* Handwritten captions in the source ("Canva Student Font", which has no web
   release). Set in the site body face instead. The shadow is an addition:
   plain white over a photograph is not reliably legible.

   Scoped, per the note at the top — this is the same treatment
   css/pages/producer-director.css gives its own captions, and at ≤1024px that
   sheet turns .pd-cap into ordinary ink-on-page text for the collages that
   reflow. The one inside the mosaic never reflows, so it must not follow. */
.pd-hero .pd-cap {
  font-size: clamp(0.75rem, 1.807vw, 1.468rem);   /* 30.78 -> 23.5px */
  line-height: 1.4;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.pd-hero .pd-cap--inset {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4.65%;
  text-align: center;
  flex: none;
}


/* --------------------------------------------------------------------------
   Responsive — breakpoints match css/site.css (tablet 1024, mobile 767)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* Five frames across a 345px phone would be 90px each, so the mosaic drops
     to two columns and each frame keeps its own aspect. */
  .pd-mosaic__row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    aspect-ratio: auto;
    gap: 6px;
  }

  .pd-mosaic__row--b > * { grid-area: auto; }
  .pd-mosaic__row > picture,
  .pd-mosaic__tall { height: auto; }
  .pd-mosaic__row img { height: auto; aspect-ratio: 3 / 2; }
  .pd-mosaic__tall img { aspect-ratio: 352 / 769; }

  .pd-hero__title { letter-spacing: -0.02em; }

  /* The icon column collapses with the rest of the row, so the indent that
     lined the button up with the labels has nothing left to clear. */
  .pd-hero .section-more { margin-left: 0; }
}