/* ==========================================================================
   INVITATION BACKGROUNDS — Sneha & Jeffin
   Layers the three premium invitation-card artworks across the existing
   sections. Loaded after style.css / responsive.css so these rules win on
   background + colour only — no markup, animation, or JS behaviour here.
   ========================================================================== */

:root {
  --bg-page-1: url('../assets/backgrounds/page-1.jpg'); /* ivory · floral corners · butterfly · ring watermark — invitation section */
  --bg-page-2: url('../assets/backgrounds/page-2.jpg'); /* maroon · cover page · church + monogram (baked-in text) */
  --bg-page-3: url('../assets/backgrounds/page-3.jpg'); /* ivory · rings + church, open centre */
  --bg-page-4: url('../assets/backgrounds/page-4-footer.jpg'); /* maroon · clean/open centre, footer-only */
  --bg-fill: #F8F2EA;
  --bg-overlay: rgba(255, 248, 240, 0.12);
}

/* ---------- content width / spacing rhythm ---------- */
#invitation,
#calendar,
#countdown,
#gallery {
  padding-top: 140px;
  padding-bottom: 140px;
}

/* The portrait artwork is scaled with `background-size:contain`, so its
   rendered width is driven by the section's height. To keep every card at
   a comfortable, legible width (instead of the tall/short natural content
   height producing a too-narrow card), each mapped section is given a
   generous minimum height on desktop and its content is centred within
   it — this is also what keeps the "one printed invitation page per
   section" feel with extra vertical breathing room. Content wrappers are
   then capped narrower than the guaranteed card width so text can never
   spill past the artwork's border. */
@media (min-width: 901px) {
  #invitation,
  #calendar,
  #countdown,
  #gallery,
  footer#thankyou {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #invitation { min-height: 1500px; }
  #gallery { min-height: 1400px; }
  #calendar,
  #countdown,
  footer#thankyou { min-height: 1300px; }
}

#invitation .invitation-content { max-width: 640px; }
#calendar .calendar-content,
#countdown .countdown-content { max-width: 520px; }
#gallery .gallery-content { max-width: 560px; }
#gallery .gallery-grid { max-width: 560px; }
footer#thankyou .footer-content { max-width: 520px; }

/* Scaled down slightly so headings reliably fit inside the narrower card
   width without wrapping past its gold border */
#calendar .section-title,
#countdown .section-title {
  font-size: clamp(1.5rem, 3.6vw, 2.2rem);
}

/* ==========================================================================
   PAGE-2 (maroon cover) — Hero, Opening Invitation (gate)
   ========================================================================== */

/* Subtle readability veil, artwork stays fully visible */
#gate::before {
  background: var(--bg-overlay);
}
.hero__overlay {
  background: var(--bg-overlay);
}

/* Hero photo — couple.jpg; keep sepia filter off so the photo reads naturally */
.hero__bg-img {
  filter: none;
}
.hero {
  background: var(--bg-fill);
}

.hero__stage {
  position: relative;
  z-index: 2;
  max-width: 620px;
  background: transparent;
  border: none;
  padding: 48px 40px 56px;
}
@media (max-width: 640px) {
  .hero__stage { padding: 36px 22px 64px; }
  .hero__date { flex-wrap: wrap; row-gap: 6px; }
}

/* Text colours over dark maroon-tinted couple photo */
.hero__stage .eyebrow,
.hero__monogram {
  color: var(--gold-pale);
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.hero__date {
  color: var(--gold-pale);
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.hero__date em {
  color: var(--gold-light);
}
.hero__venue-line {
  color: rgba(248, 242, 234, 0.95);
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.hero__name {
  text-shadow: 0 3px 16px rgba(0,0,0,0.75);
}
.hero__amp {
  text-shadow: 0 3px 16px rgba(0,0,0,0.75);
}
.hero__ribbon-heart {
  background: var(--maroon-dark);
}
.scroll-cue__text {
  color: var(--gold-light);
}

footer#thankyou {
  color: var(--ivory);
}

/* ==========================================================================
   PAGE-4 (maroon, clean centre) — Footer only
   ========================================================================== */

footer#thankyou {
  background-image: var(--bg-page-4);
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--bg-fill);
}
footer#thankyou .footer-pattern {
  background: var(--bg-overlay);
}

/* ==========================================================================
   PAGE-1 (ivory · floral) — Story / Couple / Bride & Groom / Family
   ========================================================================== */

#invitation {
  background-image: var(--bg-page-1);
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--bg-fill);
}
#invitation .section-bg-pattern {
  background: var(--bg-overlay);
}

/* keep content clear of the corner floral artwork */
.invitation-content {
  padding: 0 6%;
}

/* ==========================================================================
   PAGE-3 (ivory · rings + church) — Betrothal, Marriage, Venue, Countdown
   ========================================================================== */

#calendar,
#countdown {
  background-image: var(--bg-page-3);
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--bg-fill);
  color: var(--text);
}
#calendar .calendar-bg,
#countdown .countdown-bg {
  background: var(--bg-overlay);
}

/* the calendar section previously relied on a dark charcoal backdrop with
   ivory type — re-tone for the light invitation page underneath */
#calendar .section-title { color: var(--maroon); }
.calendar-date__day { color: var(--gold-dark); }
.calendar-date__full { color: var(--maroon); }
.calendar-detail__label { color: var(--gold-dark); }
.calendar-detail__value { color: var(--text); }
.calendar-detail__icon { color: var(--maroon); border-color: var(--maroon); }
.calendar-badge { color: var(--maroon-dark); }

.calendar-content,
.countdown-content {
  padding: 0 6%;
}

/* ==========================================================================
   GALLERY — alternate page-1 / page-3 between gallery blocks
   ========================================================================== */

#gallery {
  background-image: var(--bg-page-3);
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--bg-fill);
}
#gallery .section-bg-pattern {
  background: var(--bg-overlay);
}
.gallery-item {
  background-size: cover;
  background-position: center;
}
.gallery-item--tall {
  background-image: var(--bg-page-3);
}
.gallery-item--right-top {
  background-image: var(--bg-page-3);
}
.gallery-item--right-bottom {
  background-image: var(--bg-page-3);
}

/* ==========================================================================
   CARDS — near-invisible, so the invitation artwork reads as the card
   ========================================================================== */

.couple-card,
.calendar-card,
.countdown-box {
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: none;
  border: none;
  box-shadow: none;
}
.couple-card::before,
.calendar-card::before,
.countdown-box::before {
  border-color: rgba(201, 161, 74, 0.35);
}

/* Gate carries the same printed monogram/quote as the cover art beneath
   it, so it gets the same dimming plaque treatment as the hero for
   readability rather than the fully-transparent "card" treatment. */
.gate-content {
  background: rgba(40, 13, 17, 0.78);
  backdrop-filter: none;
  padding-bottom: 64px;
}

/* ==========================================================================
   RESPONSIVE BEHAVIOUR
   Desktop → contain (never crops the artwork), extra space filled with the
   paper colour. Mobile → cover (artwork was designed for this ratio).
   ========================================================================== */

@media (min-width: 901px) {
  .hero__bg-img,
  #invitation,
  #calendar,
  #countdown,
  #gallery,
  footer#thankyou {
    background-size: contain;
  }
}

@media (max-width: 900px) {
  .hero__bg-img,
  #invitation,
  #calendar,
  #countdown,
  #gallery,
  footer#thankyou {
    background-size: cover;
  }

  #invitation,
  #calendar,
  #countdown,
  #gallery {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}