/* =============================================================================
   Liora — pages/the-space.css

   Ported from 02_design-update_2026-08-27/the-space.html's <style> block. Loads
   after shell.css. Split mechanically: rules already in shell.css dropped, rules
   whose selector names a class no page's markup uses dropped, the rest verbatim.

   Two things here that look shared and are not:

     · the Visit rows — `.visit-row`, `.visit-label`, `.visit-value`,
       `.visit-cta`, `.visit-socials` and friends. shell.css holds the parts The
       Space, Contact and the homepage all agree on; these are the ones where
       home.html genuinely disagrees, because the homepage lays the rows out as
       two columns with the value right-aligned while these stack label over
       value. THE SAME RULES ARE IN pages/contact.css: change one, change both.

     · `.closing` — the component is in shell.css with Our Story's values and
       this page tunes the padding. The delta table there lists all four.

   `.spc-media`/`.spc-gallery` are re-declared near the end of the file, after
   their first definitions, exactly as the design has it: round 3 took the
   gallery out of flow so the COPY sets the row height instead of the photo's
   own aspect ratio. Same-specificity later-wins, so the order matters — do not
   merge them.
   ============================================================================= */

/* ======================================================================
   PAGE-SPECIFIC SECTIONS — "The Space" inner page.
   Section-name-prefix + descriptive-suffix, per handover §3.
   Structure mirrors Elementor nesting: section > *-container > *-column > widgets.
   ====================================================================== */

/* ---------- 5. Closing CTA — dark, centred, text-only (photo intentionally omitted) ---------- */

.closing{ padding:56px 48px; }

/* ---------- Responsive — single 900px breakpoint (matches homepage / Our Story) ---------- */

@media (max-width: 900px){
.closing{ padding:44px 24px; }
}

/* ---------- The Space — round 2 rebuild ---------- */
.spc-head{ background:var(--bone); padding:170px 48px 90px; }
.spc-head-grid{ max-width:1360px; margin:0 auto; display:grid;
  grid-template-columns:5fr 7fr; gap:64px; align-items:center; }
.spc-head-title{ font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(36px,5.2vw,72px); line-height:1.03; max-width:12ch; margin-top:18px; }
.spc-head-body p{ font-size:16px; color:var(--ink-soft); font-weight:300; line-height:1.85; max-width:56ch; }

.spc-split{ display:grid; grid-template-columns:1fr 1fr; min-height:660px; }
.spc-split.is-reverse{ direction:rtl; }
.spc-split.is-reverse > *{ direction:ltr; }
.spc-media{ position:relative; min-height:520px; }
.spc-info{ background:var(--ink); color:var(--bone); display:flex; align-items:center;
  justify-content:center; padding:90px 72px; }
.spc-info-block{ max-width:460px; width:100%; }
.spc-info .eyebrow{ color:#DB9C6E; }
.spc-title{ font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(32px,4.4vw,58px); line-height:1.04; margin:18px 0 26px; }
.spc-body{ font-size:15.5px; font-weight:300; line-height:1.8;
  color:rgba(245,241,233,0.76); margin-bottom:18px; }
.spc-body:last-child{ margin-bottom:0; }
.spc-body b{ color:#F5F1E9; font-weight:600; }

/* swipeable gallery */
.spc-gallery{ position:relative; height:100%; overflow:hidden; background:#181310; }
.spc-track{ display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; }
.spc-track::-webkit-scrollbar{ display:none; }
.spc-slide{ flex:0 0 100%; height:100%; scroll-snap-align:center; }
.spc-slide img{ width:100%; height:100%; object-fit:cover; }
.spc-nav{ position:absolute; top:50%; margin-top:-22px; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,15,10,0.34); color:#F5F1E9; border:1px solid rgba(245,241,233,0.32);
  cursor:pointer; z-index:3; transition:background .3s ease, opacity .3s ease; }
.spc-nav:hover{ background:rgba(20,15,10,0.62); }
.spc-nav svg{ width:18px; height:18px; }
.spc-prev{ left:18px; }
.spc-next{ right:18px; }
.spc-dots{ position:absolute; left:0; right:0; bottom:20px; z-index:3;
  display:flex; justify-content:center; gap:9px; }
.spc-dot{ width:7px; height:7px; border-radius:50%; padding:0; cursor:pointer;
  background:rgba(245,241,233,0.42); border:none; transition:background .3s ease, transform .3s ease; }
.spc-dot.is-active{ background:#F5F1E9; transform:scale(1.35); }

/* The dot stays 7px and the target becomes 23x23. WCAG 2.2 asks 24x24; the last pixel is given
   up to `box-sizing:content-box`, which is what keeps the DRAWN dot at 7px while the box grows —
   and 23px of thumb against 7px is the difference that matters. Negative margin cancels the
   padding so the row of dots sits exactly where the design put it.

   background-clip:content-box keeps the dot's own fill off the padding. Without it the padding
   inherits the background and the dot simply becomes a 23px dot, which is the obvious wrong fix
   and looks like a design change. */
.spc-dot{
  padding:8px;
  margin:-8px;
  box-sizing:content-box;
  background-clip:content-box;
}

/* event enquiry form (ported from the Contact page) */
.spc-enquiry{ background:var(--bone); padding:120px 48px; border-top:1px solid var(--line); }

@media (max-width:760px){
  .contact-col-title{ font-size:clamp(28px, 8vw, 40px); }
  .enquiry-row-2{ grid-template-columns:1fr; gap:18px; }
}

@media (max-width:900px){
  .spc-head{ padding:130px 24px 64px; }
  .spc-head-grid{ grid-template-columns:1fr; gap:28px; }
  .spc-split{ grid-template-columns:1fr; min-height:0; }
  .spc-split.is-reverse{ direction:ltr; }
  .spc-media{ min-height:0; height:clamp(300px,58vw,420px); }
  .spc-info{ padding:64px 24px; }
  .spc-enquiry{ padding:84px 24px; }
  .spc-nav{ width:38px; height:38px; margin-top:-19px; }
}

/* ---------- Space rows — fit the viewport (round 3) ----------
   The gallery photos are portrait (1500x2000-2250). With height:100% resolving against an
   indefinite grid row, they fell back to their intrinsic ratio and drove the rows to
   950px / 1069px — taller than a 900px viewport, so a row could not be seen at once.
   Taking the gallery out of flow stops it driving the row; the row is then a viewport-aware
   min-height that the text column can still grow past if it ever needs to. */
.spc-split{ min-height:min(620px, calc(100vh - 160px)); }
.spc-media{ height:auto; align-self:stretch; min-height:0; }
.spc-gallery{ position:absolute; inset:0; height:auto; }

@media (max-width:900px){
  /* re-assert the stacked mobile layout after the rules above */
  .spc-split{ grid-template-columns:1fr; min-height:0; }
  .spc-media{ height:clamp(300px,58vw,420px); align-self:auto; }
}

/* ---------- Event Enquiries — two columns (round 3) ----------
   Form left, Visit block right. The Visit markup and its visit-* rules are lifted from
   the Contact page so the two pages present that block identically. */            /* superseded by the grid below */
.spc-enquiry-container{ max-width:1200px; margin:0 auto; }
.spc-enquiry-grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:80px; align-items:start; }
.spc-col-form{ text-align:left; }
.spc-col-form .enquiry-form{ max-width:460px; margin:0; text-align:left; }
.spc-col-form .enquiry-form > *{ margin-bottom:20px; }
.spc-col-form .enquiry-form > *:last-child{ margin-bottom:0; }
.spc-col-form .enquiry-sub{ max-width:460px; margin:0 0 30px; }
.spc-col-form .enquiry-sub b{ color:var(--ink); font-weight:600; }
.spc-enquiry .eyebrow{ margin-bottom:14px; display:block; }
.spc-enquiry .contact-col-title{ font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(28px,3.2vw,44px); line-height:1.05; margin-bottom:16px; }

.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; }
.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; }
.visit-social-static{ gap:8px; font-size:13px; }
.visit-cta{ margin-top:26px; }

@media (max-width:900px){
  .spc-enquiry-grid{ grid-template-columns:1fr; gap:52px; }
  .spc-enquiry .contact-col-title{ font-size:clamp(28px, 8vw, 40px); }
  .contact-col-visit > *{ max-width:100%; margin-left:0; }
  .visit-note{ margin:0 0 28px; }
  .visit-rows{ margin:0; }
  .visit-socials{ justify-content:flex-start; }
}