/* ==========================================================================
   custom.css — small layer kept on top of style.css
   Covers what the reference does with inline styles and runtime state,
   so it works with both the bundled style.css and the synced live CSS.
   ========================================================================== */

/* next/image "fill" images (the reference sets these inline) */
.img-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
}

/* Elements hidden by script stay hidden even when a display class (e.g. grid) is set */
[hidden] { display: none !important; }

/* Broken or not-yet-downloaded image: hide the browser's broken icon */
img.is-missing { visibility: hidden; }

/* Hero entrance delays (inline animation-delay on the reference) */
.hero-entrance[data-delay="50"]  { animation-delay: 50ms; }
.hero-entrance[data-delay="100"] { animation-delay: 100ms; }
.hero-entrance[data-delay="200"] { animation-delay: 200ms; }
.hero-entrance[data-delay="300"] { animation-delay: 300ms; }
.hero-entrance[data-delay="400"] { animation-delay: 400ms; }

/* Reveal delays (inline transition-delay on the reference) */
.reveal[data-delay="0"]   { transition-delay: 0ms; }
.reveal[data-delay="70"]  { transition-delay: 70ms; }
.reveal[data-delay="140"] { transition-delay: 140ms; }
.reveal[data-delay="80"]  { transition-delay: 80ms; }
.reveal[data-delay="90"]  { transition-delay: 90ms; }
.reveal[data-delay="100"] { transition-delay: 100ms; }
.reveal[data-delay="150"] { transition-delay: 150ms; }
.reveal[data-delay="160"] { transition-delay: 160ms; }
.reveal[data-delay="180"] { transition-delay: 180ms; }
.reveal[data-delay="200"] { transition-delay: 200ms; }

/* Reveal visible state (set by main.js) */
.reveal.is-visible,
.reveal.reveal-visible {
  opacity: 1 !important;
  transform: none !important;
}
/* Without JavaScript, show everything */
html:not(.js) .reveal {
  opacity: 1;
  transform: none;
}
/* A revealed card keeps its hover lift */
.reveal.is-visible.hover\:-translate-y-1:hover { transform: translateY(-0.25rem) !important; }

/* Sticky header shadow once the page is scrolled */
#site-header.is-scrolled {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Mobile menu open state */
#mobile-menu.is-open { grid-template-rows: 1fr; }
#mobile-menu.is-open .mobile-menu-list {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  opacity: 1;
}
#mobile-menu:not(.is-open) .mobile-menu-list { visibility: hidden; }

/* Form validation states */
.is-invalid { border-color: #dc2626 !important; }
.form-status.is-error {
  background: rgb(220 38 38 / 0.08);
  color: #b91c1c;
}

@media (prefers-reduced-motion: reduce) {
  .hero-entrance { animation: none; }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Deliberate deviation from the reference: below 480px the reference's
   no-wrap language button pushes the menu button off-screen (the page
   scrolls sideways at 320-375px). Delete this block for a strict 1:1 copy.
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  #lang-toggle {
    max-width: 9.5rem;
    white-space: normal;
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
  }
}
@media (max-width: 359px) {
  #lang-toggle { max-width: 7.75rem; padding-inline: 0.5rem; }
  #menu-toggle { padding: 0.375rem; }
}


/* --------------------------------------------------------------------------
   Inaugural Meeting slider + lightbox
   -------------------------------------------------------------------------- */
.inaug-slider {
  overflow: hidden;
  background: #f1f5f9;
  cursor: zoom-in;
}
.inaug-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.inaug-track {
  display: flex;
  height: 100%;
  transition: transform 500ms ease;
  will-change: transform;
}
.inaug-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
}
.inaug-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.85);
  color: #1e3a8a;
  cursor: pointer;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
  transition: background 150ms ease, color 150ms ease;
}
.inaug-nav:hover { background: #dc2626; color: #fff; }
.inaug-nav svg { width: 1.25rem; height: 1.25rem; }
.inaug-nav--prev { left: 0.75rem; }
.inaug-nav--next { right: 0.75rem; }
.inaug-counter {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  background: rgb(15 23 42 / 0.65);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  pointer-events: none;
}

/* Excerpt beside the slider: clamped by JS to the slider card's height,
   with a soft fade where the text is cut off */
.inaug-excerpt {
  position: relative;
  overflow: hidden;
}
.inaug-excerpt.is-clamped::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4rem;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), #fff);
  pointer-events: none;
}

/* Detail page: text (70%) beside a feature photo (30%) */
.inaug-detail-grid { display: grid; gap: 2rem; }
@media (min-width: 1024px) {
  .inaug-detail-grid {
    grid-template-columns: 6fr 4fr;
    gap: 3rem;
    align-items: start;
  }
}

/* Detail page: uniform photo grid */
.inaug-grid-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 300ms ease;
}
.inaug-grid-img:hover { transform: scale(1.04); }

/* Lightbox */
.inaug-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(15 23 42 / 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease, visibility 250ms ease;
}
.inaug-lightbox.is-open { opacity: 1; visibility: visible; }
.inaug-lightbox-stage {
  position: relative;
  width: min(92vw, 70rem);
  height: min(86vh, 48rem);
}
.inaug-lightbox-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.inaug-lightbox .inaug-nav {
  background: rgb(255 255 255 / 0.15);
  color: #fff;
}
.inaug-lightbox .inaug-nav:hover { background: #dc2626; }
.inaug-lightbox .inaug-nav--prev { left: max(0.75rem, calc(50% - 46vw)); }
.inaug-lightbox .inaug-nav--next { right: max(0.75rem, calc(50% - 46vw)); }
.inaug-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.15);
  color: #fff;
  cursor: pointer;
  transition: background 150ms ease;
}
.inaug-lightbox-close:hover { background: #dc2626; }
.inaug-lightbox-close svg { width: 1.5rem; height: 1.5rem; }
.inaug-lightbox .inaug-counter {
  bottom: 1.25rem;
  right: 50%;
  transform: translateX(50%);
  font-size: 0.875rem;
}
body.inaug-lightbox-open { overflow: hidden; }

@media (max-width: 639px) {
  .inaug-nav { width: 2rem; height: 2rem; }
  .inaug-nav svg { width: 1rem; height: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .inaug-track { transition: none; }
  .inaug-lightbox { transition: none; }
}

/* Honouring Friendship: 2 cards on the first row, third centred below,
   each card exactly as wide as in the original 3-column layout */
   @media (min-width: 640px) {
    .tribute-grid {
      grid-template-columns: repeat(2, calc((100% - 3rem) / 3));
      justify-content: center;
    }
    .tribute-grid > :nth-child(3) {
      grid-column: 1 / -1;
      justify-self: center;
      width: calc((100% - 1.5rem) / 2);
    }
  }