/* ==========================================================================
   hero.css — .wf-hero (PLAN §6.2, BRIEF §6)
   Couple names in script (h1), date, place, primary CTA.
   Wildflower arch frames the top; the venue photo is the hero background, with
   the content on a translucent cream panel.
   B authors the text layer markup inside #hero; these are the shared styles.
   ========================================================================== */

.wf-hero {
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: min(92vh, 48rem);
  padding-block: var(--space-2xl);
  padding-inline: var(--space-md);
  /* The venue photo as a full background, warmly darkened (stronger through the
     middle where the text sits) so the ivory text reads clearly. */
  background-image:
    linear-gradient(180deg, rgba(38, 26, 16, 0.32) 0%, rgba(38, 26, 16, 0.52) 50%, rgba(38, 26, 16, 0.36) 100%),
    url("../../assets/img/castle.jpg");
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}

/* Text sits directly on the photo — just constrain the measure. */
.wf-hero > .u-container {
  position: relative;
  max-inline-size: 42rem;
}

/* Shorter hero on phones so the first content is reachable with less scrolling. */
@media (max-width: 40rem) {
  .wf-hero {
    min-block-size: min(80vh, 40rem);
    padding-block: var(--space-xl);
  }
}

/* Shared soft halo so light text stays legible over the scenery. */
.wf-hero .u-eyebrow,
.wf-hero__names,
.wf-hero__date,
.wf-hero__venue,
.wf-hero__place {
  text-shadow: 0 1px 10px rgba(33, 21, 11, 0.55), 0 1px 2px rgba(33, 21, 11, 0.45);
}

/* Eyebrow ("We're getting married") in a soft warm ivory. */
.wf-hero .u-eyebrow { color: #EBD9BC; }

/* Couple names — the page's single h1 (BRIEF §4). Refined serif (not script)
   in ivory on the photo — elegant rather than flashy. */
.wf-hero__names {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 1.7rem + 3.4vw, 4rem);
  color: #FCF8EF;
  font-variant-caps: normal;        /* override h1/h2 small-caps */
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.15;
  margin-block: var(--space-xs);
}

/* The ampersand: elegant serif italic, same ivory as the names. */
.wf-hero__amp {
  font-style: italic;
  font-weight: 500;
  color: #FCF8EF;
  font-size: 0.82em;
  margin-inline: 0.06em;
}

.wf-hero__date {
  font-family: var(--font-serif);
  font-variant-caps: small-caps;
  letter-spacing: 0.1em;
  font-size: var(--step-1);
  color: #FBF6EA;
}

/* Venue name — refined serif small-caps, sits between the date and the city.
   Slightly larger than the city line; wraps gracefully on narrow screens. */
.wf-hero__venue {
  font-family: var(--font-serif);
  font-variant-caps: small-caps;
  letter-spacing: 0.06em;
  font-size: var(--step-0);
  line-height: 1.25;
  color: #FBF6EA;
  margin-block-start: var(--space-2xs);
  text-wrap: balance;
}

.wf-hero__place {
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: #F1E7D2;
  margin-block-start: var(--space-2xs);
}

.wf-hero__cta { margin-block-start: var(--space-lg); }
.wf-hero__cta .wf-btn { box-shadow: 0 6px 20px rgba(33, 21, 11, 0.35); }