/* =============================================================================
   Liora — pages/contact.css

   Ported from 02_design-update_2026-08-27/contact.html's <style> block. Loads
   after shell.css. Split mechanically: every rule already in shell.css was
   dropped, every rule whose selector names a class NO page's markup uses was
   dropped, and what is left is verbatim, comments included.

   Two things here that look like they belong in shell.css and do not:

     · the Visit rows. .visit-row / .visit-label / .visit-value / .visit-cta /
       .visit-socials and friends are shared with The Space, and shell.css holds
       the parts those two agree on with the homepage. These are the ones where
       home.html genuinely disagrees — it lays the rows out as two columns with
       the value right-aligned, these stack label over value. Two presentations
       of one block, so each page carries its own verbatim. THE SAME RULES ARE
       IN pages/the-space.css: change one, change both.

     · `.closing` and `.closing-sub`. The component is in shell.css with Our
       Story's values; this page tunes the padding and drops the standfirst's
       bottom margin. The delta table in shell.css lists all four pages'.

   And one that is a live design question, not a porting decision:

     · `.nav-links a.is-current::after{ width:100%; background:#DB9C6E }` keeps
       the nav underline drawn under the current page. contact.html is the ONLY
       one of the five design files that has it, so as ported, Contact is the
       only page that draws it. That is faithful to the design and probably not
       what anyone intended — flagged for Keith, not resolved here.
   ============================================================================= */

/* ======================================================================
   GLOBAL DESIGN SYSTEM — copied verbatim from the approved homepage /
   "Our Story" / "The Space" pages so "Contact" inherits identical tokens,
   type and components. (handover §2)
   ====================================================================== */

/* ⚑ REMOVED 19 Sep 2026, Keith's call. contact.html was the ONLY one of the five design files
   that drew a permanent underline under the current nav item, so as ported Contact was the only
   page with one. Four pages out of five say no underline, and shell.css already marks the current
   page in terracotta on EVERY page — the underline was a second signal on one page only.

   To put it back everywhere instead, move this into shell.css beside `.nav-links a.is-current`:
       .nav-links a.is-current::after{ width:100%; background:#DB9C6E; }
   Do not put it back here: that recreates the inconsistency it was removed for. */

/* ======================================================================
   PAGE-SPECIFIC SECTIONS — "Contact" inner page.
   This page is the homepage "Visit / Contact" section expanded into a full
   page: it reuses the same arch-image motif, label+value rows and socials,
   re-scoped under section-name prefixes (handover §3).
   Structure mirrors Elementor nesting: section > *-container > *-column > widgets.
   ====================================================================== */

/* ---------- 2. Contact block — Enquiries form (left) + Visit details (right), side by side ----------
   Two independent blocks sharing ONE bone section (not merged): the left column keeps
   the enquiry form, the right column keeps the Visit intro + address/phone/hours rows +
   reserve. Each column retains its own eyebrow + title.
   PREVIEW form is static; on build the <form> becomes a Gravity Forms embed. */
.contact-block{ background:var(--bone); padding:56px 48px; border-top:1px solid var(--line); }
.contact-block-container{ max-width:1200px; margin:0 auto; }
.contact-block-grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:80px; align-items:center; }
.contact-col-enquiry{ text-align:left; }

  /* right-anchored, left-aligned block */
.contact-block .eyebrow{ margin-bottom:14px; }

.enquiry-form > *{ margin-bottom:20px; }
.enquiry-form > *:last-child{ margin-bottom:0; }

button.btn-ghost{ cursor:pointer; }

.visit-row{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:18px 0; border-top:1px solid var(--line); }

.visit-label{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); }
.visit-value{ font-size:14px; font-weight:300; color:var(--ink); line-height:1.7; }
.visit-value a{ border-bottom:1px solid transparent; transition:border-color .3s ease, color .3s ease; }
.visit-value a:hover{ color:#DB9C6E; border-color:#DB9C6E; }
.visit-value .visit-sub{ display:block; font-size:12px; color:var(--ink-soft); opacity:.85; margin-top:4px; }
/* Socials row — small centred icon links (mirrors homepage .visit-socials) */
.visit-socials{ display:flex; align-items:center; justify-content:flex-start; gap:18px; flex-wrap:wrap; margin-top:2px; }
.visit-socials a{ color:var(--ink); display:inline-flex; align-items:center; transition:color .3s ease, transform .3s ease; }
.visit-socials a:hover{ color:#DB9C6E; transform:translateY(-2px); border-color:transparent; }

.visit-social-brand img{ width:22px; height:22px; display:block; border-radius:6px; object-fit:contain; }  /* Xiaohongshu brand mark (matches homepage) */
.visit-social-static{ gap:8px; font-size:13px; }
.visit-cta{ margin-top:26px; }

/* ---------- 3. Closing CTA — dark, centred, text-only (matches Our Story / The Space) ---------- */

.closing{ padding:56px 48px; }

.closing-sub{ margin:0 auto; }

/* ---------- Responsive — single 900px breakpoint (matches the other pages) ---------- */

@media (max-width: 900px){
  .contact-block{ padding:48px 24px; }
  .contact-block-grid{ grid-template-columns:1fr; gap:52px; }
  .contact-col-title{ font-size:clamp(28px, 8vw, 40px); }
  .enquiry-row-2{ grid-template-columns:1fr; gap:18px; }
  /* stacked on mobile: both blocks full-width, left-aligned */
  .contact-col-visit{ text-align:left; }
  .contact-col-visit > *{ max-width:100%; margin-left:0; }
  .visit-note{ margin:0 0 28px; }
  .visit-rows{ margin:0; }
  .visit-row{ align-items:flex-start; }
  .visit-socials{ justify-content:flex-start; }

.closing{ padding:48px 24px; }
}