/*
 * Éclore Aesthetics — Contact page composition (VISUAL-DESIGN §5.10, §2)
 * ─────────────────────────────────────────────────────────────────────────────
 * Editorial two-column split (info / form) at lg, stacked below. The info column
 * holds the NAP, hours, and a reserved map frame; the form column holds the
 * contact form and a visually separate AestheticsPro booking path. Field
 * primitives live in forms.css; the submit and booking buttons reuse
 * .btn--primary (buttons.css) — composed here, never restyled.
 *
 * Structure is drawn with the grid and 1px hairlines — squared corners, no
 * shadow. NAP links use the house Terracotta underline-reveal (header nav).
 * Motion: only the underline-reveal animates, gated to non-reduced-motion.
 *
 * Breakpoints (literal): lg 1024px (the split engages).
 */

/* Top padding stays light — the hero above already provides the air
   (owner, 2026-07-24: "reduce the space here"). */
.contact-section {
  padding-block: clamp(var(--space-lg), 5vh, var(--space-xl)) var(--section-y);
}

/* ─── Editorial split: info / form (asymmetric, not 6/6) ─────────────────────── */

.contact-section__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 1024px) {
  .contact-section__inner {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-2xl);
    align-items: start;
  }
}

.contact-section__info-heading,
.contact-form__heading {
  margin: 0 0 var(--space-md);
}

/* ─── NAP ────────────────────────────────────────────────────────────────────── */

.contact-nap {
  font-style: normal; /* reset the UA <address> italic */
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  color: var(--color-text);
}

.contact-nap__name {
  margin: 0;
  font-weight: 500; /* Inter 500 — quiet emphasis (no 600 weight is loaded) */
}

.contact-nap__address {
  margin: 0;
  line-height: 1.6;
}

.contact-nap__phone,
.contact-nap__email {
  margin: 0;
}

/* Links — Ink text with the house Terracotta underline-reveal (the phone block
   only renders when a number is present, so this styles it for when it appears). */
.contact-nap__phone a,
.contact-nap__email a {
  position: relative;
  display: inline-block;
  color: var(--color-text);
  text-decoration: none;
}

.contact-nap__phone a::after,
.contact-nap__email a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--color-terracotta);
  transform: scaleX(0);
  transform-origin: left center;
}

.contact-nap__phone a:hover::after,
.contact-nap__phone a:focus-visible::after,
.contact-nap__email a:hover::after,
.contact-nap__email a:focus-visible::after {
  transform: scaleX(1);
}

/* ─── Map — Google embed pinned to the studio, tinted to the palette ─────────── */
/* The iframe can't be styled from outside, so the warm-paper look comes from a
   CSS filter on the frame: grayscale first, then a light sepia toward the
   greige/bone scheme. 4:3 frame reserved before load (protects CLS). */

.contact-map {
  margin-top: var(--space-lg);
}

.contact-map__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  background: var(--color-stone);
}

.contact-map__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) sepia(.22) saturate(.85) brightness(1.04) contrast(.92);
}

/* ─── Form composition (fields styled by forms.css) ──────────────────────────── */

.contact-form__heading {
  margin: 0 0 var(--space-2xs);
}

.contact-form__subheading {
  margin: 0 0 var(--space-lg);
  color: var(--color-text-muted);
}

.contact-form__submit {
  margin-top: var(--space-sm);
}

/* ─── Success — a calm confirmation block (no celebratory styling) ───────────── */

.contact-form__success {
  padding: var(--space-lg);
  background: var(--color-stone);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
}

.contact-form__success-heading {
  margin: 0 0 var(--space-sm);
}

.contact-form__success-body {
  margin: 0;
  color: var(--color-text);
}

/* ─── Motion — gate the underline-reveal transition to non-reduced-motion ────── */

@media (prefers-reduced-motion: no-preference) {
  .contact-nap__phone a::after,
  .contact-nap__email a::after {
    transition: transform var(--dur-short) var(--ease-reveal);
  }
}