/**
 * @file
 * Homepage-specific styles for Lotus Vows.
 *
 * Design tokens reference:
 *   primary: #83505b (rose)
 *   secondary: #38693b (stem green)
 *   surface: #fcf9f6
 *   surface-container: #f0edea
 *   on-surface: #1b1c1a
 *   on-surface-variant: #514345
 */

/* ── Smooth scroll for anchor navigation ── */
html {
  scroll-behavior: smooth;
}

/* ── Hero-billboard stacking context fix ──
   Mercury applies a default surface background to all sections. The hero-billboard
   uses z-index:-1 on its media wrapper, which paints BELOW the section background
   unless the section creates its own stacking context. `isolation: isolate` does
   exactly that: media renders above the background but below the text overlay. */
.homepage .cq-full {
  isolation: isolate;
}

/* ── Glassmorphism header on homepage ── */
/* backdrop-filter is on ::before, not the element itself. A fixed descendant
   (the mobile menu overlay) would be positioned relative to an ancestor with
   backdrop-filter instead of the viewport — clipping it to navbar height. */
.homepage-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  box-shadow: 0 1px 40px -10px oklch(0.22 0.01 60 / 0.04);
}

.homepage-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: oklch(0.98 0.005 80 / 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Hero section ────────────────────────────────────────────────────────────
   Mercury hero-billboard (sdc.mercury.hero-billboard) DOM structure:
     section.cq-full:has(#hero)
       ├─ div.absolute.z-[-1].h-full     <- media wrapper
       │    └─ img.object-cover
       ├─ div.absolute.inset-0.bg-black/40  <- overlay
       └─ div.container.mx-auto          <- content wrapper
*/

/* Hero section: ensure site background shows through the faded image */
.homepage section:has(#hero) {
  background-color: var(--background);
  overflow: visible !important;
  height: 75dvh !important;
  min-height: 32rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Media wrapper: ensure it doesn't clip the corner accent bleed */
.homepage section:has(#hero) > div:first-child {
  overflow: visible;
}

/* Hero Image: lower opacity so it reads as a subtle background texture */
.homepage section:has(#hero) img {
  opacity: 0.22;
  filter: sepia(20%) contrast(90%);
}

/* Overlay: blend the faded image into the site background at the base.
   We use a gradient from transparent to var(--background) at the bottom.
   A z-index: 1 ensures it sits ON TOP of the image (since img has auto/no z-index). */
.homepage section:has(#hero) > div:first-child > div:first-child {
  z-index: 1;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 60%,
    var(--background) 100%
  ) !important;
}

/* Content wrapper: alignment and vertical spacing */
.homepage section:has(#hero) > div:last-child {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.875rem;
  max-width: 72%;
  margin: 0 auto;
  padding-top: calc(var(--navbar-height) + 3rem);
}

@media (min-width: 768px) {
  .homepage section:has(#hero) > div:last-child {
    padding-top: calc(var(--navbar-height) + 4rem);
  }
}

@media (min-width: 1280px) {
  .homepage section:has(#hero) > div:last-child {
    padding-top: calc(var(--navbar-height) + 5rem);
  }
}

@media (max-width: 767px) {
  .homepage section:has(#hero) > div:last-child {
    max-width: 90%;
    gap: 1.25rem;
  }
}

/* Title: larger, tighter line-height, 0.04em letter-spacing.
   Changed color to 'Warm Charcoal' (#3a3530) as defined in the Color Palette style guide. */
.homepage section:has(#hero) h1 {
  font-family: 'Cormorant Garamond', serif;
  color: #3a3530;
  font-weight: 400;
  font-size: clamp(2.75rem, 7vw, 5.25rem);
  letter-spacing: 0.04em;
  line-height: 1.05;
}

/* Ornament: 1px blush rule below the heading */
.homepage section:has(#hero) h1::after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: oklch(0.76 0.07 10 / 0.4);
  margin: 0.875rem auto 0;
}

@media (max-width: 767px) {
  .homepage section:has(#hero) h1::after {
    display: none;
  }
}

/* Subtitle: responsive Jost text.
   Changed color to on-surface-variant (#514345) for better contrast. */
.homepage section:has(#hero) p {
  color: #514345;
  font-family: 'Jost', sans-serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 300;
  line-height: 1.7;
  max-width: 40rem;
}

/* ── Section layout ── */
.homepage-section {
  padding: 4rem 1rem;
}

@media (min-width: 768px) {
  .homepage-section {
    padding: 5rem 2rem;
  }
}

@media (min-width: 1280px) {
  .homepage-section {
    padding: 6rem 2rem;
  }
}

.homepage-section--muted {
  background-color: #f0edea;
}

.homepage-section--surface {
  background-color: #fcf9f6;
}

.homepage-section__inner {
  max-width: 80rem;
  margin: 0 auto;
}

.homepage-section__inner--narrow {
  max-width: 56rem;
  margin: 0 auto;
}

.homepage-section__heading {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: var(--foreground);
  text-align: center;
  margin-bottom: 3rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

/* ── About section ───────────────────────────────────────────────────────────
   50-50 grid: tall editorial photo left, bio text right with blush left-border.

   Verified DOM structure (from Mercury templates):
     section:has(#about)
       div.container.px-4 [&_.cq-full]:mx-0
         div.@container.flex.flex-col
           div.grid
             figure (class="")          ← Mercury image = <figure>, NOT <div>
               div.cq-full.aspect-3/2
                 img.object-cover
             div[&_h2]:mt-8...           ← Mercury text = <div>
*/

/* Equal-height columns */
.homepage section:has(#about) .grid {
  align-items: stretch;
}

/* Image column — <figure> must stretch to grid row height */
.homepage section:has(#about) .grid > figure {
  align-self: stretch;
}

/* Override aspect-ratio so the image fills the figure's height */
.homepage section:has(#about) .grid > figure .cq-full {
  aspect-ratio: auto;
  height: 100%;
  min-height: 28rem;
}

/* Centered vertical rule: sits at 50% of grid, aligning with the ornament icon
   above the section heading. Using ::after on the grid rather than border-left
   on the text column, because border-left lands at 50%+gap/2 (off-center). */
.homepage section:has(#about) .grid {
  position: relative;
}

.homepage section:has(#about) .grid::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: oklch(0.76 0.07 10 / 0.28);
  transform: translateX(-50%);
  pointer-events: none;
}

/* Text column: vertically centered.
   No extra padding-left — the grid gap already provides equal gap/2 on
   both sides of the center rule. Adding padding here would push text
   further right and make the spacing asymmetric. */
.homepage section:has(#about) .grid > div {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Bio paragraphs */
.homepage section:has(#about) .grid > div p {
  font-family: 'Jost', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted-foreground);
  margin-bottom: var(--space-5);
}

.homepage section:has(#about) .grid > div p:last-child {
  margin-bottom: 0;
  font-size: 0.9375rem;
  color: var(--subtle-foreground);
}

/* Mobile: stack vertically, hide center rule */
@media (max-width: 767px) {
  .homepage section:has(#about) .grid::after {
    display: none;
  }

  .homepage section:has(#about) .grid > div {
    padding-left: 0;
    padding-top: var(--space-6);
  }

  .homepage section:has(#about) .grid > figure .cq-full {
    min-height: 20rem;
  }
}

/* ── Services section: 50/50 flagship + extras layout ────────────────────────
   DOM structure (verified from Mercury section/group/card/text/button templates):

   section.cq-full:has(#services)
     ├─ div.bg-muted.absolute.inset-0        background (muted color)
     └─ div.container.mx-auto.px-4
         └─ div.@container.flex.flex-col.lg:max-w-9/10
             ├─ header.mb-6                  anchor + section heading
             └─ div.grid.w-full.md:grid-cols-2    mercury section grid
                 ├─ div.flex.bg-none.flex-col      flagship wrapper (sdc.mercury.group)
                 │   ├─ div.group.relative.flex    wedding card (sdc.mercury.card)
                 │   ├─ div.text-foreground        description (sdc.mercury.text)
                 │   └─ a.group.flex               CTA button (sdc.mercury.button)
                 └─ div.flex.bg-none.flex-col.gap-2  extras wrapper (sdc.mercury.group)
                     ├─ div.group.relative.flex    corporate card
                     ├─ div.group.relative.flex    occasions card
                     └─ div.group.relative.flex    retreats card

   sdc.mercury.card renders div.group; sdc.mercury.button renders a.group.
   Using div.group for overlay rules correctly excludes the button anchor. */

/* Grid: both columns stretch to equal height */
.homepage section:has(#services) .grid {
  align-items: stretch;
}

/* Both column wrappers: flex column, stretch children to full width.
   align-self: stretch overrides Mercury group's self-start class so both
   columns expand to the taller one's height (grid align-items: stretch). */
.homepage section:has(#services) .grid > div {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
}

/* Flagship card fills the upper portion of the left column */
.homepage section:has(#services) .grid > div:first-child > div.group {
  flex: 1 1 auto;
  min-height: 38rem;
}

/* Extras: 3 cards divide the right column height equally */
.homepage section:has(#services) .grid > div:last-child > div.group {
  flex: 1 1 0;
  min-height: 11rem;
}

/* ── Card overlay: full-bleed image with gradient ──
   Targets div.group (cards) only — excludes a.group (buttons). */
.homepage section:has(#services) div.group {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Gradient overlay on all service cards */
.homepage section:has(#services) div.group::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    #3a3530cc 0%,
    #3a353077 25%,
    transparent 65%
  );
  pointer-events: none;
}

/* Extras: slightly more muted overlay so they read as secondary to the flagship */
.homepage section:has(#services) .grid > div:last-child div.group::before {
  background: linear-gradient(
    to top,
    #3a3530bb 0%,
    #3a353066 25%,
    transparent 60%
  );
}

/* Image container: override aspect-video, fill card absolutely */
.homepage section:has(#services) div.group > div:first-child {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
}

/* Image: hover zoom — matches gallery scale and timing */
.homepage section:has(#services) div.group img {
  transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.homepage section:has(#services) div.group:hover img {
  transform: scale(1.04);
}

/* All service cards: inset rose border on hover — matches gallery item treatment */
.homepage section:has(#services) div.group {
  transition: box-shadow 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.homepage section:has(#services) div.group:hover {
  box-shadow: inset 0 0 0 1px oklch(0.76 0.07 10 / 0.35);
}

/* Extras: constrain height so secondary cards read as smaller than flagship */
.homepage section:has(#services) .grid > div:last-child div.group {
  max-height: 12rem;
  min-height: 0;
}

/* Card content: pin to bottom of card */
.homepage section:has(#services) div.group > div:last-child {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: none;
  border-radius: 0;
  align-items: flex-start;
  padding-top: 0;
  padding-bottom: 1.5rem;
}

/* White text, left-aligned on all service cards */
.homepage section:has(#services) div.group h3,
.homepage section:has(#services) div.group p {
  color: #ffffff;
  text-align: left;
  text-shadow: 0 2px 8px rgba(27, 28, 26, 0.9), 0 1px 2px rgba(27, 28, 26, 0.7);
}

/* Card heading padding lives on the inner @container div, not on h3/p directly.
   Mercury's px-0! zeroes padding on the content wrapper, so we add horizontal
   padding one level deeper — the div inside the content div. */
.homepage section:has(#services) div.group > div:last-child > div {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Service cards are non-clickable: remove stretched link and pointer events.
   Mercury always wraps card headings in an <a>, but when no url is provided
   href="" links to the current page. This disables that behavior. */
.homepage section:has(#services) div.group h3 a {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: inherit;
}

.homepage section:has(#services) div.group h3 a::after {
  content: none;
}

/* Flagship card: larger editorial heading in Cormorant to visually outweigh the extras */
.homepage section:has(#services) .grid > div:first-child div.group h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

/* ── Flagship: card fills full column, button overlaid at bottom ──
   Text now lives inside the card overlay (card text field). The button is
   the only external sibling — positioned absolute at the card's bottom-left.
   The group wrapper is the positioning context. */

/* Positioning context for the absolutely-placed button */
.homepage section:has(#services) .grid > div:first-child {
  position: relative;
}

/* Extra gradient depth on flagship: accommodates heading + body copy */
.homepage section:has(#services) .grid > div:first-child div.group::before {
  background: linear-gradient(
    to top,
    #3a3530cc 0%,
    #3a353077 35%,
    #3a353011 75%,
    transparent 100%
  );
}

/* Flagship card content: extra bottom padding so button doesn't overlap text */
.homepage section:has(#services) .grid > div:first-child div.group > div:last-child {
  padding-bottom: 8rem;
}

/* Flagship body copy inside the overlay */
.homepage section:has(#services) .grid > div:first-child div.group p {
  font-family: 'Jost', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  opacity: 0.88;
  margin-top: var(--space-3, 0.75rem);
}

/* Button: absolute at bottom-left, visually inside the card */
.homepage section:has(#services) .grid > div:first-child > a {
  position: absolute;
  bottom: var(--space-8, 2rem);
  left: var(--space-5, 1.25rem);
  z-index: 10;
  margin: 0;
}

/* ── Staggered column reveal ── */
@keyframes services-col-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.homepage section:has(#services) .grid > div {
  animation: services-col-in 550ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.homepage section:has(#services) .grid > div:first-child {
  animation-delay: 60ms;
}

.homepage section:has(#services) .grid > div:last-child {
  animation-delay: 200ms;
}

/* ── Mobile: explicit heights since flex-auto collapses in single-column ── */
@media (max-width: 767px) {
  .homepage section:has(#services) .grid > div:first-child > div.group {
    min-height: 18rem;
  }

  /* Hide body copy on flagship — heading alone fits the constrained mobile height */
  .homepage section:has(#services) .grid > div:first-child div.group p {
    display: none;
  }

  /* Bottom padding clears the absolutely-positioned button (bottom: 2rem + ~3rem height) */
  .homepage section:has(#services) .grid > div:first-child div.group > div:last-child {
    padding-bottom: 6.5rem;
  }

  /* Shorter secondary cards — supporting tier, not competing with flagship */
  .homepage section:has(#services) .grid > div:last-child > div.group {
    min-height: 7rem;
    max-height: 8rem;
  }

  /* Small uppercase labels on secondary cards — wayfinder style, not feature cards */
  .homepage section:has(#services) .grid > div:last-child div.group h3 {
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    text-align: left;
  }

  /* Deeper overlay on secondary cards — darker = visually recedes */
  .homepage section:has(#services) .grid > div:last-child div.group::before {
    background: linear-gradient(
      to top,
      #3a3530ee 0%,
      #3a353099 30%,
      #3a353044 70%,
      transparent 100%
    );
  }
}

/* ── Services grid ── */
.homepage-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .homepage-services__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1280px) {
  .homepage-services__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Image-backed service cards ── */
.homepage-services__card {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  height: 22rem;
  cursor: default;
}

@media (max-width: 767px) {
  .homepage-services__card {
    height: 18rem;
  }
}

.homepage-services__card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.homepage-services__card:hover .homepage-services__card-image {
  transform: scale(1.06);
}

.homepage-services__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    oklch(0.15 0.01 30 / 0.72) 0%,
    oklch(0.15 0.01 30 / 0.35) 45%,
    oklch(0.15 0.01 30 / 0.10) 100%
  );
  transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.homepage-services__card:hover .homepage-services__card-overlay {
  opacity: 0.85;
}

.homepage-services__card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: 100%;
  padding: 1.5rem;
  color: #ffffff;
}

.homepage-services__card-content .icon {
  margin-bottom: 0.5rem;
  opacity: 0.9;
  filter: brightness(0) invert(1);
}

.homepage-services__card-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0 0 0.375rem;
  color: #ffffff;
}

.homepage-services__card-description {
  font-family: 'Jost', sans-serif;
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.55;
  color: oklch(1 0 0 / 0.88);
  margin: 0;
  max-width: 28ch;
}

/* ── About section (2-column: image + text) ── */
.homepage-about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 768px) {
  .homepage-about__grid {
    grid-template-columns: 2fr 3fr;
    gap: 3.5rem;
  }
}

.homepage-about__image-wrapper {
  overflow: hidden;
  border-radius: 0.5rem;
}

.homepage-about__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 28rem;
  border-radius: 0.5rem;
}

@media (max-width: 767px) {
  .homepage-about__image {
    max-height: 20rem;
  }
}

.homepage-about__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.homepage-about__text {
  font-family: 'Jost', sans-serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #514345;
  margin: 0;
}

@media (max-width: 767px) {
  .homepage-about__text {
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO — editorial upgrade
   Ornament rule.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Allow corner accent to bleed below the hero fold into gallery seam. */
.homepage section:has(#hero) {
  overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GALLERY INTRO — single-column centered (matches other section heading pattern)
   section:has(#gallery) targets only the intro section (4a); masonry is unaffected.
   ═══════════════════════════════════════════════════════════════════════════ */

.homepage section:has(#gallery) .container > div,
.homepage section:has(#gallery) .\@container {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT — editorial 50-50 (copy left, form right)

   Mirrors the Gallery intro pattern. The left column is a sdc.mercury.group
   containing anchor + h2 + intro text + direct-contact text. The right column
   is the webform block wrapper. Grid has exactly 2 direct children so the
   .grid > div:first-child / :last-child selectors work cleanly.

   DOM structure (verified via Mercury section/group/webform-block):
     section:has(#contact)
       div.container
         div.@container.flex.flex-col
           div.grid
             div.flex.flex-col           <- sdc.mercury.group (copy)
               span#contact                <- anchor
               div > h2                    <- heading
               div > p                     <- intro
               div > p                     <- phone/email
             div (block-webform wrapper)   <- webform block
   ═══════════════════════════════════════════════════════════════════════════ */

.homepage section:has(#contact) .grid {
  align-items: stretch;
  position: relative;
}

/* Copy column: stretch + vertically centered */
.homepage section:has(#contact) .grid > div:first-child {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Form column: stretch so its top/bottom edges align with the copy column */
.homepage section:has(#contact) .grid > div:last-child {
  align-self: stretch;
}

/* Centered vertical rule — same technique as About/Gallery */
.homepage section:has(#contact) .grid::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: oklch(0.76 0.07 10 / 0.28);
  transform: translateX(-50%);
  pointer-events: none;
}

/* Left column headline — editorial serif, left-aligned */
.homepage section:has(#contact) .grid > div:first-child h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: var(--foreground);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: 1.5rem;
  text-align: left;
}

/* Suppress the global h2::after lotus divider here — the centered rule
   already carries the ornament weight and a second ornament crowds the column. */
.homepage section:has(#contact) .grid > div:first-child h2::after {
  display: none;
}

/* Intro + direct-contact paragraphs */
.homepage section:has(#contact) .grid > div:first-child p {
  font-family: 'Jost', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted-foreground);
  margin-bottom: var(--space-5, 1.25rem);
}

.homepage section:has(#contact) .grid > div:first-child p:last-child {
  margin-bottom: 0;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

/* Phone/email links with blush hairline underline */
.homepage section:has(#contact) .grid > div:first-child a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid oklch(0.76 0.07 10 / 0.4);
  transition: color 0.2s, border-color 0.2s;
}

.homepage section:has(#contact) .grid > div:first-child a:hover {
  color: #dc9eaa;
  border-color: currentColor;
}

/* 2-column form grid: [Name | Email] / [Phone | Date] / [Venue full-width] / [Submit] */
.homepage section:has(#contact) .webform-submission-contact-form-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
  row-gap: 0.625rem;
}

/* grid handles row spacing; neutralise any default form-item margin */
.homepage section:has(#contact) .webform-submission-contact-form-form .form-item,
.homepage section:has(#contact) .webform-submission-contact-form-form .js-form-item {
  margin-bottom: 0;
}

/* Venue (5th field) and submit button span both columns */
.homepage section:has(#contact) .webform-submission-contact-form-form .js-form-item:nth-child(5),
.homepage section:has(#contact) .webform-submission-contact-form-form .form-actions {
  grid-column: 1 / -1;
}

.homepage section:has(#contact) .webform-submission-contact-form-form input[type="text"],
.homepage section:has(#contact) .webform-submission-contact-form-form input[type="email"],
.homepage section:has(#contact) .webform-submission-contact-form-form input[type="tel"],
.homepage section:has(#contact) .webform-submission-contact-form-form input[type="date"],
.homepage section:has(#contact) .webform-submission-contact-form-form textarea {
  /* 16px font prevents iOS auto-zoom; 0.75rem top/bottom with line-height gives ~44px touch target */
  font-size: 1rem;
  padding: 0.75rem 0.875rem;
  min-height: 44px;
}

/* Mobile: single-column form, drop the vertical rule */
@media (max-width: 767px) {
  .homepage section:has(#contact) .grid::after {
    display: none;
  }

  .homepage section:has(#contact) .webform-submission-contact-form-form {
    grid-template-columns: 1fr;
  }

  .homepage section:has(#contact) .webform-submission-contact-form-form .js-form-item:nth-child(5),
  .homepage section:has(#contact) .webform-submission-contact-form-form .form-actions {
    grid-column: 1;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   TESTIMONIAL — editorial pull quote
   section:has(#testimonial) targets only this section.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Decorative oversized open-quote mark behind the text */
.homepage section:has(#testimonial) {
  position: relative;
}

.homepage section:has(#testimonial)::before {
  content: '\201C';
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(8rem, 15vw, 14rem);
  line-height: 1;
  color: oklch(0.76 0.07 10 / 0.12);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

.homepage section:has(#testimonial) .grid {
  position: relative;
  z-index: 1;
  text-align: center;
}

/* Quote text — large Cormorant italic */
.homepage section:has(#testimonial) p:first-of-type {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.35rem, 2.25vw, 1.875rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.6;
  color: var(--foreground);
  margin-bottom: 1.5rem;
}

/* Attribution — small caps Jost, blush */
.homepage section:has(#testimonial) p:last-of-type {
  font-family: 'Jost', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0;
}

/* Suppress h2::after lotus ornament (no h2 in this section) */
.homepage section:has(#testimonial) h2::after {
  display: none;
}

@media (max-width: 767px) {
  .homepage section:has(#testimonial) {
    padding-inline: 1.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICES — extras column label (secondary tier signal)
   ═══════════════════════════════════════════════════════════════════════════ */

.homepage section:has(#services) .grid > div:last-child > div:first-child p {
  font-family: 'Jost', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-5, 1.25rem);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY: Touch targets (44×44px minimum)
   Ensures all interactive elements meet WCAG 2.5.5 minimum touch target size
   ═══════════════════════════════════════════════════════════════════════════ */

/* Buttons: ensure minimum 44px height with padding */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a.btn,
a[role="button"],
.homepage a.group {
  min-height: 44px;
  padding: 0.75rem 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Links: add padding to increase clickable area */
a {
  padding: 0.25rem 0.375rem;
  display: inline-block;
}

/* Navigation and menu links: ensure adequate spacing */
nav a,
[role="navigation"] a,
.menu a {
  min-height: 44px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
}

/* Gallery and service card links: ensure adequate hover area */
.homepage section:has(#services) div.group,
.homepage section:has(#gallery) a {
  min-height: 44px;
}

/* Form inputs: already have adequate height via min-height: 44px in CSS (line 849) */

/* Focus indicator: visible on all interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--primary, #83505b);
  outline-offset: 2px;
}

/* Additional link padding for better click targets */
.homepage a {
  padding: 0.25rem 0.375rem;
}

/* Ensure gallery, card, and service area links meet minimum touch target */
.homepage a[href]:not([class]) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Footer location text */
.site-footer .flex.flex-col.gap-6 > div > p:nth-child(3) {
  color: var(--meta-foreground);
}