/* ------------------------------------------------------------------
   site.css — small additions for the static (HTML/CSS/Bootstrap) build.
   Loaded AFTER bootstrap.min.css and styles.css so the bespoke design
   always wins. Keeps Bootstrap from touching the custom layout.
   ------------------------------------------------------------------ */

.masthead,
.footer,
main,
.container {
  --bs-gutter-x: 0; /* neutralise Bootstrap row gutters if ever nested */
}

/* Real photo inside a placeholder box (.ph .production__img / .prod-card__img
   / .tile__img). Adds .ph--photo: shows the FULL image (no crop) at its own
   aspect ratio, and hides the placeholder hatch, alt label and corner tag. */
.ph--photo {
  aspect-ratio: auto;   /* drop the fixed 4:5 crop box */
  height: auto;
  background: transparent;
}
.ph--photo::before { display: none; }
.ph--photo .ph__label,
.ph--photo .ph__corner { display: none; }
.ph--photo img {
  position: static;
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: inherit;
}

/* Home nav tiles: force a uniform image box so the 3-up grid stays aligned.
   Fixed 3:2 matches the source photos (800x531) → identical width & height,
   no visible crop. object-fit:cover guarantees uniformity even if a photo
   with a different ratio is dropped in later. */
.tiles .ph--photo {
  aspect-ratio: 3 / 2;
  height: auto;
}
.tiles .ph--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Equalise the tiles' content width so all three images are the SAME size.
   The base stylesheet zeroes the outer padding on the first/last tile, which
   makes the middle tile ~28px narrower (and thus shorter). Restore symmetric
   padding so every column's content width — and image — matches. */
@media (min-width: 720px) {
  .tiles .tile:first-child { padding-left: 28px; }
  .tiles .tile:last-child { padding-right: 28px; }
}

/* Productions repertoire grid (Work page): the source photos are a mix of
   landscape and portrait, which makes the 3-up rows uneven. Lock every card
   image to a uniform portrait box so the whole grid aligns. Scoped to the main
   .prod-index grid so it does NOT touch the 16:9 video-excerpt cards below. */
.prod-index .prod-grid .prod-card .ph--photo {
  aspect-ratio: 3 / 4;
  height: auto;
}
.prod-index .prod-grid .prod-card .ph--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Reel section: three production-highlight videos replace the single player.
   The clips are portrait 9:16 reels — shown at natural ratio (no crop) and
   capped to a phone-reel size so the trio stays tidy. */
.reel__videos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  justify-items: center;
}
@media (min-width: 720px) {
  .reel__videos {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 840px;
    justify-items: stretch;
  }
}
.reel__video { margin: 0; width: 100%; max-width: 300px; }
.reel__video video {
  width: 100%;
  height: auto;
  display: block;
  background: #000;
  border-radius: var(--r-2);
  cursor: pointer;
}
.reel__video figcaption {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.reel__video figcaption span { color: var(--gold); }

.gaps__list { margin: 0; }

/* The mobile nav drawer animates via max-height; .open is toggled by JS. */
.nav-drawer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.nav-drawer.open {
  max-height: 80vh;
}

/* Accordion (Visiting Chowdiah) body collapse — JS toggles aria-expanded. */
.visit-row .visit-row__body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.32s ease;
}
.visit-row[aria-expanded="true"] .visit-row__body {
  max-height: 480px;
}
.visit-row[aria-expanded="true"] .visit-row__icon {
  transform: rotate(45deg);
}
.visit-row__icon {
  transition: transform 0.2s ease;
  display: inline-block;
}

/* Voice carousel: only the active slide shows. */
.voice__slide[hidden] { display: none; }

/* Fake-form confirmation message. */
.form-msg {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--purple);
}

/* About → Council appointments: the status/verify column is removed, so use a
   2-column layout (role + organisation) that fills the row width cleanly. */
@media (min-width: 720px) {
  .acc-rows--2col .acc-row { grid-template-columns: 5fr 7fr; }
}

/* Gallery page — responsive image grid; GLightbox handles the pop-up. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: clamp(10px, 1.6vw, 18px);
}
.gallery-grid a {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2);
  background: var(--paper-2);
  border: 1px solid var(--ink-30);
  cursor: zoom-in;
}
.gallery-grid img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.gallery-grid a:hover img {
  transform: scale(1.04);
}

/* Hidden top-menu items — AIM, The School, Partner With Us (nav + mobile
   drawer, all pages). Remove this block to bring them back. */
.nav a[href$="aim.html"],
.nav a[href$="the-school.html"],
.nav a[href$="partner.html"],
.nav-drawer a[href$="aim.html"],
.nav-drawer a[href$="the-school.html"],
.nav-drawer a[href$="partner.html"],
.nav-drawer li:has(> a[href$="aim.html"]),
.nav-drawer li:has(> a[href$="the-school.html"]),
.nav-drawer li:has(> a[href$="partner.html"]) {
  display: none !important;
}

/* Prominent "Buy Tickets" button in the masthead (top-right). */
.masthead__cta {
  align-self: center;
  padding: 9px 18px;
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
@media (min-width: 1100px) {
  .nav { margin-left: auto; }
}
@media (max-width: 1099px) {
  .masthead__cta { margin-left: auto; margin-right: 4px; }
}

/* Remove leftover prototype scaffolding site-wide: verify tags, placeholder
   "alt:" labels, placeholder photo credits, and the "TBC" stat chips. */
.verify,
.ph__label,
.ph__credit,
.stat__tbc {
  display: none !important;
}

/* Enquiry modal (Photo Booth / Patron tiers) — bespoke styling over Bootstrap. */
#enquiryModal .modal-content {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink-30);
  border-radius: var(--r-3);
}
#enquiryModal .modal-header,
#enquiryModal .modal-footer {
  border-color: var(--ink-30);
}
#enquiryModal .modal-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--ink);
}
#enquiryModal .enquiry-modal__intro {
  color: var(--ink-60);
  font-size: 14px;
  margin: 0 0 18px;
}
#enquiryModal .modal-footer .btn {
  margin: 0;
}

/* Home Yakshagana band — two-column feature with the award photo. */
.yakshagana__media { margin: 0; }
.yakshagana__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-2);
  border: 1px solid rgba(201, 166, 71, 0.35);
}
@media (min-width: 900px) {
  .yakshagana__inner--split {
    grid-template-columns: 1.35fr 1fr;
    align-items: center;
    gap: clamp(40px, 5vw, 72px);
  }
  .yakshagana__media { max-width: 380px; margin-left: auto; }
}

/* Work "festival cut" — responsive 16:9 YouTube embed in the reel player. */
.reel__player--embed {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--r-2);
  overflow: hidden;
  background: #000;
}
.reel__player--embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}