/* ==========================================================================
   SECTIONS — page-specific layout for Andrea & Andrés
   Stage 1: Nav + Hero fully implemented. Later sections are stubbed with
   a placeholder so nav anchors resolve; each will be filled in its own stage.
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}
/* On narrow screens the photo's baked-in caption spans nearly its full
   width, so cropping to fill the viewport (cover) would cut words off.
   Instead show the complete, uncropped photo at natural width and let
   the section height follow the image — this guarantees every word of
   the caption stays visible, matching how the source photo was designed. */
@media (max-width: 640px) {
  .hero {
    min-height: 0;
    display: block;
  }
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media picture {
  position: absolute;
  inset: 0;
  display: none;
}
/* Show only the photo matching the current language (each has its own
   baked-in caption text, exported directly from the design file). */
html[data-lang="es"] .hero__media picture[data-lang-image="es"],
html[data-lang="en"] .hero__media picture[data-lang-image="en"],
html:not([data-lang]) .hero__media picture[data-lang-image="es"] {
  display: block;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 72%;
}
@media (min-width: 900px) {
  .hero__media img { object-position: center 72%; }
}
/* Subtle bottom scrim: just enough to keep the RSVP button comfortably
   legible against the photo; the caption text itself is already baked
   into each language's photo, so no heavy masking is needed here. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(12,11,9,0) 55%, rgba(12,11,9,0.35) 100%);
}

.hero__content {
  position: absolute;
  inset: 0;
  text-align: center;
  color: var(--color-text-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: clamp(9vh, 13vh, 9rem);
  gap: var(--space-sm);
}

/* Heading/date/location are visually hidden now — the caption is baked
   into each language's hero photo directly (see .hero__media). These
   remain in the DOM as real text for screen readers and SEO. */

.hero__rsvp {
  margin-top: var(--space-sm);
  min-width: 160px;
}

/* Mobile hero overrides — placed AFTER the base rules above on purpose:
   with equal CSS specificity, source order decides the winner, so a
   mobile media-query block earlier in the file can be silently beaten
   by a later non-media rule. Keeping breakpoint overrides last avoids
   that trap for every section below too. */
@media (max-width: 640px) {
  .hero__media {
    position: static;
  }
  .hero__media picture {
    position: static;
    /* display:none / block per-language rule above still applies */
  }
  .hero__media img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: unset;
  }
  /* The button moves out of the photo entirely on mobile and sits in a
     simple bar right below it — this guarantees it can never overlap the
     baked-in caption, regardless of exact photo/text proportions. */
  .hero__scrim { display: none; }
  .hero__content {
    position: static;
    padding-block: var(--space-md);
    background: var(--color-near-black);
  }
}

/* ---------- Info section: Ceremonia / Recepción / Dress code ---------- */
.info-section {
  padding-block: var(--space-2xl) var(--space-xl);
  background: var(--color-cream);
}

.info-section__illustration {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-lg);
}
.info-section__illustration img {
  width: min(100%, 620px);
  height: auto;
}

.info-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  text-align: center;
}
@media (min-width: 760px) {
  .info-section__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }
}

.info-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.info-card .section-heading {
  color: var(--color-text-dark);
}

.info-card__body {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--fs-label);
  line-height: 1.9;
  color: var(--color-text-dark);
}

.btn--small {
  min-height: 38px;
  padding: var(--space-2xs) var(--space-sm);
  font-size: 0.65rem;
}

/* ---------- Mesa de Regalos ---------- */
.gifts-section {
  background: var(--color-khaki);
  padding-block: var(--space-2xl) var(--space-lg);
}

.gift-card-reveal {
  max-width: 1000px;
  margin-inline: auto;
}

.gift-card {
  position: relative;
}

.gift-card__frame-img {
  display: block;
  width: 100%;
  height: auto;
}

.gift-card__inner-border {
  display: none;
}

.gift-card__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-md);
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 6vw, 4rem);
}

.gift-card__body {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--fs-label);
  line-height: 1.9;
  color: var(--color-text-dark);
  max-width: 58ch;
}

.btn--muted {
  background: var(--color-khaki);
  color: var(--color-text-dark);
}
.btn--muted:hover,
.btn--muted:focus-visible {
  background: #a8a488;
}

/* ---------- Hospedaje ---------- */
.lodging-section {
  position: relative;
  background: var(--color-olive-dark);
  padding-block: var(--space-2xl) var(--space-lg);
  color: var(--color-text-light);
}

.lodging-section__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  max-width: 640px;
  padding-top: clamp(2rem, 5vw, 3rem);
}

.lodging-section__monogram {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -58%);
  width: 168px;
  height: auto;
  z-index: 1;
}

.lodging-section__intro .section-heading {
  color: var(--color-text-light);
}

.lodging-section__body {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--fs-label);
  line-height: 1.9;
  max-width: 42ch;
}

.lodging-section__airbnb {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--fs-label);
  line-height: 1.9;
  max-width: 46ch;
  opacity: 0.92;
  margin-top: var(--space-md);
}

.lodging-section__collage {
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl);
  padding-inline: var(--space-md);
}
.lodging-section__collage img {
  width: min(100%, 640px);
  height: auto;
}

/* ---------- Transporte: arrival block (photo + bordered box) ---------- */
.arrival-block {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 640px;
  overflow: hidden;
  padding: var(--space-lg) var(--space-md);
}
.arrival-block__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.arrival-block__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20,19,16,0.55), rgba(20,19,16,0.62));
}
.arrival-block__box {
  max-width: 760px;
  border: 1px solid rgba(var(--color-cream-rgb), 0.6);
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3rem);
  text-align: center;
  color: var(--color-text-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}
.arrival-block__box .section-heading { color: var(--color-text-light); }
.arrival-block__body {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--fs-label);
  line-height: 1.9;
  max-width: 52ch;
}

/* ---------- Transporte: transport block (cream, 3 columns) ---------- */
.transport-block {
  padding-block: var(--space-2xl) var(--space-xl);
  text-align: center;
}

.transport-block__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
}
.transport-block__subheading {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--fs-label);
  color: var(--color-text-dark);
}

.transport-block__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}
@media (min-width: 760px) {
  .transport-block__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }
}

.transport-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}
.transport-card__name {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--color-text-dark);
}
.transport-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text-dark);
}
.transport-card__contacts {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--color-text-dark);
}

/* ---------- Transporte: "Información importante" box ---------- */
.info-box {
  border: 1px solid var(--color-border-gold);
  padding: 5px;
}
.info-box__inner {
  border: 1px solid var(--color-border-gold);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}
.info-box__heading {
  color: var(--color-text-dark);
  font-size: clamp(1.7rem, 1.6vw + 1rem, 2.4rem);
}
.info-box__body {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--fs-label);
  line-height: 1.9;
  max-width: 52ch;
  color: var(--color-text-dark);
}

/* ---------- Guía de Antigua & Guatemala ---------- */
.guide-section {
  position: relative;
  padding-block: var(--space-2xl);
  overflow: hidden;
}
.guide-section__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.guide-section__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(var(--color-olive-dark-rgb), 0.55);
}

.guide-card {
  background: var(--color-cream);
  max-width: 1000px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  box-shadow: 0 30px 70px rgba(0,0,0,0.35);
}
@media (min-width: 760px) {
  .guide-card {
    grid-template-columns: 1fr 1fr;
  }
}

.guide-card__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-md);
  padding: clamp(2rem, 5vw, 3.5rem);
  position: relative;
}
/* Thin vertical divider between the text and illustration halves,
   like a postcard's center fold line. */
.guide-card__text::after {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  right: 0;
  width: 1px;
  background: var(--color-border-gold);
  opacity: 0.6;
}
@media (max-width: 759px) {
  .guide-card__text::after { display: none; }
}
.guide-card__text .section-heading {
  font-size: clamp(2.6rem, 3.2vw + 1.2rem, 4.2rem);
  line-height: 1.05;
}
.guide-card__body {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--fs-label);
  line-height: 1.9;
  color: var(--color-text-dark);
}

.guide-card__illustration img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Final RSVP ---------- */
.final-rsvp {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 620px;
}
.final-rsvp__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 78%;
  z-index: -2;
}
.final-rsvp__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Fades from the photo (top, shared visual continuity with the guide
     section above) into a solid olive panel where the RSVP content sits,
     mirroring the original design's photo-to-panel transition. */
  background: linear-gradient(
    180deg,
    rgba(var(--color-olive-dark-rgb), 0.35) 0%,
    var(--color-olive-dark) 42%,
    var(--color-olive-dark) 100%
  );
}

.final-rsvp__content {
  position: relative;
  max-width: 680px;
  text-align: center;
  color: var(--color-text-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding-inline: var(--space-md);
}
.final-rsvp__monogram {
  width: 90px;
  height: auto;
  margin-bottom: var(--space-2xs);
}
.final-rsvp__heading {
  color: var(--color-text-light);
  max-width: 18ch;
}
.final-rsvp__body {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--fs-label);
  line-height: 1.9;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-cream);
  padding-block: var(--space-xl);
  padding-inline: var(--space-md);
}
.site-footer__inner {
  width: var(--content-width);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.site-footer__wordmark {
  height: clamp(48px, 6vw, 84px);
  width: auto;
}
.site-footer__fc-logo {
  height: clamp(28px, 3.4vw, 44px);
  width: auto;
  opacity: 0.85;
}
@media (max-width: 560px) {
  .site-footer__inner {
    flex-direction: column;
    justify-content: center;
    gap: var(--space-sm);
  }
}

/* ---------- Placeholder for not-yet-built sections (removed stage by stage) ---------- */
.section-placeholder {
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px dashed rgba(var(--color-olive-dark-rgb), 0.25);
  color: var(--color-text-dark);
  font-family: var(--font-body);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--fs-label);
  opacity: 0.5;
  text-align: center;
  padding: var(--space-md);
}