/* ==========================================================================
   EVENTS - THE PROMO PLAQUE, THE FILM POPUP AND ITS RE-OPEN TAB
   The promo is the featured event on the ink (home heritage section, the
   events page): the film on the left, the event on the right, on the same
   lacquer plaque the pillars used. The popup plays the film over the page
   and ends on the way to the registration page (masterclass-popup.js).

   Performance: only transform and opacity animate; no backdrop blur (it
   repainted the textured page under it every frame); the film is never
   fetched until the popup opens.
   ========================================================================== */

/* ---------- the promo plaque ---------- */

.event-promo-wrap {
  margin-top: clamp(5rem, 8vw, 7.5rem);
}

.event-promo-head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hall-gold);
  z-index: auto;
}

.event-promo-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--hall-gold-2), transparent);
}

.event-promo {
  --edge-hi: oklch(0.82 0.09 84 / 0.85);
  --edge-lo: oklch(0.75 0.088 80 / 0.22);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  border: 1px solid transparent;
  background:
    radial-gradient(85% 55% at 70% 0%, oklch(0.75 0.088 80 / 0.07), transparent 70%) padding-box,
    linear-gradient(180deg, oklch(0.222 0.017 62), oklch(0.178 0.013 60)) padding-box,
    linear-gradient(135deg, var(--edge-hi), var(--edge-lo) 38%, var(--edge-lo) 62%, oklch(0.75 0.088 80 / 0.55)) border-box;
  box-shadow:
    inset 0 1px 0 oklch(0.85 0.08 84 / 0.1),
    0 46px 90px -50px oklch(0 0 0 / 0.85);
}

/* A gold diamond on each corner, ringed in the ink, like the pillars plaque. */
.event-promo::after {
  --d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolygon points='6,0.9 11.1,6 6,11.1 0.9,6' fill='%23c9a467' stroke='%23161210' stroke-width='1.8'/%3E%3C/svg%3E");
  content: "";
  position: absolute;
  inset: -7px;
  pointer-events: none;
  background:
    var(--d) left top / 13px 13px no-repeat,
    var(--d) right top / 13px 13px no-repeat,
    var(--d) left bottom / 13px 13px no-repeat,
    var(--d) right bottom / 13px 13px no-repeat;
}

/* The film: a still of it and a round play button. A link to the
   registration page without JS; masterclass-popup.js opens the popup. */
.promo-film {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  align-self: center;
  margin: clamp(10px, 1.2vw, 16px);
  background: oklch(0.13 0.01 60);
  cursor: pointer;
  z-index: auto;
}

.promo-film img,
.promo-film video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--hall-out, ease);
}

/* Darken toward the bottom so the label reads. */
.promo-film::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, oklch(0.12 0.01 60 / 0.75), transparent 45%);
  pointer-events: none;
}

.promo-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: clamp(64px, 6vw, 84px);
  aspect-ratio: 1;
  margin: calc(clamp(64px, 6vw, 84px) / -2) 0 0 calc(clamp(64px, 6vw, 84px) / -2);
  border-radius: 50%;
  border: 1px solid oklch(0.82 0.09 84 / 0.85);
  background: oklch(0.15 0.012 60 / 0.55);
  box-shadow: 0 0 0 6px oklch(0.75 0.088 80 / 0.16);
  transition: transform 0.6s var(--hall-out, ease), background-color 0.4s ease;
}

.promo-play::before {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent oklch(0.86 0.07 84);
  transform: translate(-50%, -50%);
}

.promo-film-label {
  position: absolute;
  left: clamp(1rem, 2vw, 1.5rem);
  bottom: clamp(0.9rem, 1.6vw, 1.25rem);
  z-index: 1;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: oklch(0.9 0.03 85);
}

.promo-film:hover :is(img, video),
.promo-film:focus-visible :is(img, video) {
  transform: scale(1.03);
}

.promo-film:hover .promo-play,
.promo-film:focus-visible .promo-play {
  transform: scale(1.08);
  background-color: oklch(0.75 0.088 80 / 0.9);
}

.promo-film:hover .promo-play::before,
.promo-film:focus-visible .promo-play::before {
  border-left-color: oklch(0.17 0.012 62);
}

/* While the film plays inline the play mark fades out - it would sit over
   moving footage - and comes back whenever the film is paused or stopped. */
.promo-play {
  transition: transform 0.6s var(--hall-out, ease), background-color 0.4s ease, opacity 0.45s ease;
}

.promo-film.is-playing .promo-play {
  opacity: 0;
  transform: scale(0.9);
}

.promo-film:focus-visible {
  outline: 1px solid var(--hall-gold);
  outline-offset: 4px;
}

.promo-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.25rem, 4vw, 3.75rem) clamp(1.75rem, 4vw, 3.75rem);
}

.promo-kicker {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hall-gold);
  z-index: auto;
}

.promo-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--hall-gold);
  transform: rotate(45deg);
}

.hall .promo-title,
.events-list .promo-title {
  margin-top: 1rem;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.75rem, 1.8vw + 1rem, 2.85rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: var(--hall-paper);
  text-wrap: balance;
  z-index: auto;
}

.hall .promo-sub,
.events-list .promo-sub {
  margin-top: 0.85rem;
  font-family: var(--font-text, "Source Serif 4", Georgia, serif);
  font-size: clamp(1.05rem, 0.35vw + 0.95rem, 1.22rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--hall-paper-2);
  z-index: auto;
}

/* Three facts in a ruled row. */
.promo-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
  border-top: 1px solid var(--hall-gold-3);
  border-bottom: 1px solid var(--hall-gold-3);
}

.promo-facts > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  gap: 0.4rem;
  padding: 1rem 0.5rem;
  text-align: center;
}

.promo-facts > div + div {
  border-left: 1px solid var(--hall-gold-3);
}

.promo-facts dd {
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1rem, 0.5vw + 0.85rem, 1.2rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--hall-paper);
}

.promo-facts dt {
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hall-paper-3);
}

.promo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
}

.promo-link {
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hall-gold);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 0.35rem;
  transition: color 0.3s ease;
  z-index: auto;
}

.promo-link:hover,
.promo-link:focus-visible {
  color: var(--hall-paper);
}

@media (max-width: 960px) {
  .event-promo {
    grid-template-columns: minmax(0, 1fr);
  }

  .promo-film {
    margin-bottom: 0;
  }
}

@media (max-width: 420px) {
  .promo-facts > div {
    padding-inline: 0.25rem;
  }

  .promo-facts dt {
    letter-spacing: 0.08em;
  }
}

/* ==========================================================================
   THE FILM POPUP
   A native <dialog>: focus is trapped and returned, Escape closes. Sized by
   the viewport height too, so the whole 16:9 film and its caption fit on a
   short laptop screen without scrolling.
   ========================================================================== */

.mc-dialog {
  --mc-ink: oklch(0.17 0.012 62);
  --mc-paper: oklch(0.93 0.014 88);
  --mc-paper-2: oklch(0.93 0.014 88 / 0.7);
  --mc-gold: oklch(0.75 0.088 80);
  --mc-gold-2: oklch(0.75 0.088 80 / 0.5);
  --mc-out: cubic-bezier(0.16, 1, 0.3, 1);
  width: min(1040px, calc(100vw - 32px), calc((100svh - 13.5rem) * 16 / 9));
  min-width: min(320px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100svh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  color: var(--mc-paper);
}

.mc-dialog::backdrop {
  background: oklch(0.12 0.012 56 / 0.78);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.mc-dialog.is-in::backdrop {
  opacity: 1;
}

.mc-card {
  position: relative;
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--mc-ink);
  border: 1px solid var(--mc-gold-2);
  box-shadow: 0 40px 90px oklch(0.08 0.01 50 / 0.55);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.4s ease, transform 0.55s var(--mc-out);
}

/* Focus lands on the card when it opens (not on Close, which then looked pressed). */
.mc-card:focus {
  outline: none;
}

.mc-dialog.is-in .mc-card {
  opacity: 1;
  transform: none;
}

.mc-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0.7rem 0.7rem 1.1rem;
}

.mc-seal {
  flex: none;
  width: 24px;
  height: 24px;
  background: var(--mc-gold);
  -webkit-mask: url("/html/Images/index/myvtsafeguardlogo-mono.png") center / contain no-repeat;
  mask: url("/html/Images/index/myvtsafeguardlogo-mono.png") center / contain no-repeat;
}

.mc-eyebrow {
  flex: 1;
  min-width: 0;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mc-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Close: a round cross button in gold on the ink. It used to be the word
   "Close" beside a 14px hairline cross - and on a phone the word was hidden,
   leaving only the hairline - so people missed it. 44px is the touch target. */
.mc-close {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -6px -6px -6px 0;
  padding: 0;
  border: 1px solid color-mix(in oklch, var(--mc-gold) 55%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--mc-gold);
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* The label stays for screen readers; the cross is the visible control. */
.mc-close-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mc-close::after {
  content: "";
  width: 16px;
  height: 16px;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}

.mc-close:hover,
.mc-close:focus-visible {
  color: var(--mc-ink);
  background-color: var(--mc-gold);
}

.mc-close:focus-visible {
  outline: 1px solid var(--mc-gold);
  outline-offset: 2px;
}

/* The film. */
.mc-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0d0806;
}

.mc-stage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

/* Play / pause and sound sit in the caption bar under the film, beside
   Register - nothing is laid over the picture but the progress line. */
.mc-foot-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.mc-controls {
  display: flex;
  gap: 0.5rem;
}

.mc-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  height: 2.25rem;
  padding: 0 0.85rem;
  border: 1px solid oklch(0.82 0.09 84 / 0.55);
  background: oklch(0.12 0.01 60 / 0.72);
  color: oklch(0.9 0.04 85);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.mc-ctrl:hover,
.mc-ctrl:focus-visible {
  background: var(--mc-gold);
  color: var(--mc-ink);
}

.mc-ctrl:focus-visible {
  outline: 1px solid var(--mc-gold);
  outline-offset: 2px;
}

.mc-ctrl svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* "Sound on" asks for attention while the film plays muted. */
.mc-sound[aria-pressed="false"] {
  background: var(--mc-gold);
  color: var(--mc-ink);
}

.mc-sound[aria-pressed="false"]:hover {
  background: oklch(0.82 0.09 84);
}

/* Progress: a gold hairline along the bottom edge (a scaled bar). */
.mc-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 2px;
  background: oklch(1 0 0 / 0.12);
}

.mc-progress span {
  display: block;
  height: 100%;
  background: var(--mc-gold);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  transition: transform 0.25s linear;
}

/* The end card: once the film ends, the way to the registration page. */
.mc-end {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 1.5rem;
  text-align: center;
  background: oklch(0.15 0.012 60 / 0.86);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.mc-stage.is-ended .mc-end {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0s;
}

.mc-end-date {
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mc-gold);
}

.mc-dialog .mc-end-title {
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--mc-paper);
  text-wrap: balance;
  z-index: auto;
}

.mc-replay {
  border: 0;
  background: none;
  padding: 0.35rem 0;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mc-paper-2);
  cursor: pointer;
  border-bottom: 1px solid currentColor;
  transition: color 0.3s ease;
}

.mc-replay:hover,
.mc-replay:focus-visible {
  color: var(--mc-paper);
}

/* Caption under the film: the event and the way in. */
.mc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.15rem 1.25rem 1.25rem 1.4rem;
  border-top: 1px solid oklch(0.75 0.088 80 / 0.22);
}

.mc-dialog .mc-title {
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.15rem, 1vw + 0.85rem, 1.6rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--mc-paper);
  z-index: auto;
}

.mc-dialog .mc-facts {
  margin-top: 0.4rem;
  font-family: var(--font-text, "Source Serif 4", Georgia, serif);
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--mc-paper-2);
  z-index: auto;
}

.mc-foot .cta {
  flex: none;
}

html.mc-open body {
  overflow: hidden;
}

@media (max-width: 640px) {
  .mc-eyebrow {
    letter-spacing: 0.14em;
  }

  .mc-foot {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .mc-foot-actions {
    justify-content: center;
    flex-wrap: wrap;
  }

  .mc-foot-actions .cta {
    flex: 1 1 100%;
    display: flex;
  }

  .mc-controls {
    justify-content: center;
  }

}

/* ---------- the re-open tab ---------- */

.mc-tab {
  position: fixed;
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid oklch(0.75 0.088 80 / 0.75);
  background: oklch(0.17 0.012 62);
  color: oklch(0.82 0.085 82);
  box-shadow: 0 10px 30px oklch(0.1 0.01 50 / 0.35);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, visibility 0s linear 0.5s;
  visibility: hidden;
}

.mc-tab.is-shown {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, visibility 0s;
}

/* Square, like the site's other plaques and buttons: the gold dot, then the
   label in two lines - the event, and who leads it. */
.mc-tab {
  padding: 0.7rem 1.1rem;
  gap: 0.8rem;
  border-radius: 0;
}

.mc-tab::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(0.75 0.13 82);
}

.mc-tab-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  line-height: 1;
}

.mc-tab-host {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 0.72rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
  color: oklch(0.86 0.03 85 / 0.8);
}

.mc-tab:hover,
.mc-tab:focus-visible {
  background: oklch(0.23 0.016 62);
}

.mc-tab:focus-visible {
  outline: 1px solid oklch(0.75 0.088 80);
  outline-offset: 3px;
}

/* Out of the way while the menu is open or the popup is up. */
html.menu-open .mc-tab,
html.mc-open .mc-tab {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 480px) {
  .mc-tab {
    padding: 0.6rem 0.9rem;
    gap: 0.6rem;
    font-size: 0.64rem;
    letter-spacing: 0.12em;
  }

  .mc-tab-host {
    font-size: 0.68rem;
  }

  /* Just the name on a phone - the date and seats are in the popup it opens,
     and the full line is still its accessible name. */
  .mc-tab-meta {
    display: none;
  }
}

/* On a phone the tab sat over the text on every screen. It steps aside while
   the reader scrolls down and comes back when they scroll up - riding the
   nav's own html.nav-hidden (nav.js), so the two always move together. Clear
   of the home indicator on notched phones. */
@media (max-width: 700px) {
  .mc-tab {
    bottom: max(12px, calc(env(safe-area-inset-bottom) + 6px));
  }

  html.nav-hidden .mc-tab.is-shown {
    opacity: 0;
    transform: translateY(calc(100% + 18px));
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .promo-film img,
  .promo-play,
  .mc-dialog::backdrop,
  .mc-card,
  .mc-end,
  .mc-tab,
  .mc-progress span {
    transition: none;
  }

  .promo-film:hover img,
  .promo-film:hover .promo-play {
    transform: none;
  }
}

/* Text for screen readers only. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}