/* ============================================================================
   site.css - the public retreat site (split out of layout.css, 2026-10-15)
   Cancellation and About pages, the registration extras, gallery and
   lightbox, home hero and Save the Date, event detail pages, the
   registration event indicator. Needs base.css loaded first.
   ============================================================================ */

.about-figure {
  margin: 0 0 20px;
  text-align: center;
}

.about-figure img {
  max-width: 100%;
  width: 420px;
}

.about-figure figcaption {
  margin-top: 10px;
  font-size: 0.9rem;
  font-style: italic;
  color: #666;
}

.form-container .qr-code {
  text-align: center;
  margin-bottom: 18px;
}

.form-container .qr-code img {
  width: 120px;
  height: auto;
}

.form-container .qr-code a {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
}

.form-container .qr-code a:hover {
  text-decoration: underline;
}

/* ============================ Gallery page ============================ */
.gallery-intro {
  text-align: center;
  margin: -6px 0 14px;
}

.gallery-status {
  text-align: center;
  margin: 16px 0 24px;
  color: #666;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.gallery-item {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.gallery-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0;
  border-radius: 8px;
  box-shadow: var(--card-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery-item:hover .gallery-thumb,
.gallery-item:focus .gallery-thumb,
.gallery-item:focus-visible .gallery-thumb {
  transform: scale(1.02);
  box-shadow: var(--elevated-shadow);
}

/* Folder-driven event cards (2026-09-08 gallery revamp) - same card
   pattern as .merch-card/.merch-grid (styles below), just named for
   the gallery page since it's a separate page with its own markup.
   One card per /gallery/<folder>/, via gallery_events.php. */
.gallery-section-heading {
  margin: 32px 0 4px;
  color: var(--accent);
}

.gallery-section-heading:first-of-type {
  margin-top: 8px;
}

.gallery-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin: 16px 0 8px;
}

.gallery-event-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  padding: 16px;
  text-align: center;
  overflow: hidden;
  box-sizing: border-box;
}

.gallery-event-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 0 12px;
  border-radius: 6px;
  overflow: hidden;
  background: #fafafa;
}

.gallery-event-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  display: block;
}

.gallery-event-photo.zoomable {
  cursor: zoom-in;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery-event-photo.zoomable:hover {
  transform: scale(1.02);
  box-shadow: var(--elevated-shadow);
}

.gallery-event-video-wrapper {
  position: relative;
}

.gallery-event-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #000;
}

.gallery-event-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  color: #999;
  font-size: 0.9rem;
  text-align: center;
  padding: 12px;
  box-sizing: border-box;
}

.gallery-event-card h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  color: var(--accent);
}

.gallery-event-dates {
  font-size: 0.9rem;
  color: #666;
  margin: 0 0 10px;
}

.gallery-event-link {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--accent);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}

.gallery-event-link:hover {
  text-decoration-style: solid;
}

/* ============================ Home hero & Save the Date ============================ */
/* .home-hero now lives OUTSIDE .content-wrapper in both index.php and
   the maintenance page (moved 2026-08-14 so the banner could grow past
   the site's 1000px container width - see .home-logo below), so it
   needs its own horizontal padding here to keep the same side gutter
   .content-wrapper used to provide. */
.home-hero {
  text-align: center;
  padding: 4px 20px 12px;
}

/* Was a small square-ish logo mark (264px, capped at 72% on narrow
   screens). Replaced 2026-08-14 with a wide banner graphic (~2.7:1),
   updated again the same day once the white background behind the
   ribbon artwork was cut to real transparency (alpha channel, not just
   a white canvas) - so it sits directly on the page's cream --bg with
   no visible rectangle at all - and updated a third time the same day
   to double the display size (560px -> 1120px) per Steve's follow-up.
   That's wider than the site's 1000px container, which is why
   .home-hero was pulled out of .content-wrapper above; otherwise this
   max-width would just get clamped down to the container's ~960px
   inner width and never actually reach double size. Still comfortably
   under the source artwork's native 2060px width, so no upscaling
   softness even at this size. box-shadow is explicitly none here: a
   CSS box-shadow follows an element's rectangular box regardless of its
   alpha channel, so leaving it on would draw a shadow rectangle right
   behind the transparent corners - exactly the artifact transparency
   was meant to remove. (The merch page banner is a different image and
   is NOT transparent, so its own shadow in the merch-page section below
   is unaffected by this.) */
.home-logo {
  width: 100%;
  max-width: 1120px;
  height: auto;
  margin: 0 auto 14px;
  box-shadow: none;
}

.home-tagline {
  max-width: 560px;
  margin: 0 auto;
  font-size: 1.05rem;
  color: #444;
}

.save-the-dates h1 {
  text-align: center;
  margin-bottom: 4px;
  font-size: 1.8rem;
  color: var(--accent);
}

.std-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-top: 14px;
}

.std-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 12px;
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.std-card:hover,
.std-card:focus,
.std-card:focus-visible {
  transform: scale(1.02);
  box-shadow: var(--elevated-shadow);
}

.std-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: bold;
  color: #fff;
}

.std-badge-sold-out {
  background-color: #a8585c;
}

.std-card-placeholder {
  cursor: default;
  opacity: 0.75;
}

.std-card-placeholder:hover,
.std-card-placeholder:focus {
  transform: none;
  box-shadow: var(--card-shadow);
}

.std-thumb {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  margin: 0 0 10px;
  border-radius: 6px;
  box-shadow: none;
}

.std-caption {
  display: block;
  font-weight: bold;
  color: var(--accent);
  font-size: 1rem;
}

.std-subcaption {
  display: block;
  font-size: 0.85rem;
  color: #666;
  margin-top: 2px;
}

/* ============================ Event detail pages ============================ */
.event-page {
  text-align: center;
}

.event-cta {
  margin-top: 24px;
}

.event-cta-top {
  margin-top: 0;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.event-cta .btn {
  display: inline-block;
  padding: 14px 28px;
  font-size: 1.1rem;
}

.btn-sold-out {
  background-color: #a8585c;
  color: #fff;
  cursor: not-allowed;
  opacity: 0.9;
}

.btn-sold-out:hover {
  background-color: #a8585c;
}

.details-modal-content {
  background: #fff;
  border-radius: 10px;
  padding: 28px;
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  text-align: left;
}

.details-modal-content h2 {
  text-align: center;
  margin: 0 0 16px;
  font-size: 1.4rem;
  color: var(--accent);
}

.details-modal-content h3 {
  margin: 18px 0 6px;
  font-size: 1.05rem;
  color: var(--accent);
}

.details-modal-content p {
  margin: 0 0 12px;
  line-height: 1.5;
}

.details-modal-content a {
  color: var(--accent);
}

/* ============================ Registration event indicator ============================ */
.event-display {
  text-align: center;
  background: #f3f0e8;
  border-radius: 6px;
  padding: 8px 10px;
  margin: 0 0 16px;
  font-size: 0.95rem;
  color: #444;
}

.no-event-notice {
  text-align: center;
  padding: 10px 4px 4px;
}

.no-event-notice p {
  margin: 0 0 14px;
  color: #555;
}

@media (max-width: 768px) {
  .std-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
  }
}

@media (max-width: 768px) {

  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
  }

  .gallery-events-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 480px) {

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-events-grid {
    grid-template-columns: 1fr;
  }
}

/* Top menu right-aligned on every page (2026-10-22). */
@media (min-width: 769px) {
  .main-nav .nav-links {
    justify-content: flex-end;
  }
}

/* Footer link row (2026-10-22) */
.footer-links {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-bottom: 10px;
  font-size: 14px;
}

.footer-links a {
  color: var(--accent);
}