/* =====================================================================
   CTFY · Midnight Theta · Contact (/contact/) — page layer
   Spec: docs/redesign/pages/38-contact.md. Builds on css/site.css (foundation) and css/modules.css (M01–M33).
   Chapters: I arrive (H4 compact → M25 route street → door → chamber) · II details & booking (M25 rows + map, M16) · bridge M30
   Desktop: route, then details/map left and the booking panel sticky right. Phones: the booking panel comes first.
   ===================================================================== */

/* "Book a Session" everywhere lands on #book with the dock clear of the panel */
#book,#find{scroll-margin-top:96px}

/* ---------- I · Hero (H4 compact): the street still, graded at 20%, under the quiet field ---------- */
.contact-hero{padding-bottom:clamp(32px,5vh,56px)}
.contact-hero__photo{z-index:-1;margin:0}          /* after the field in the DOM, so it grades on top of it */
.contact-hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;opacity:.18;
  -webkit-mask-image:linear-gradient(270deg,#000 0,transparent 85%),linear-gradient(to bottom,#000 60%,transparent);-webkit-mask-composite:source-in;
          mask-image:linear-gradient(270deg,#000 0,transparent 85%),linear-gradient(to bottom,#000 60%,transparent);mask-composite:intersect}
.contact-hero .crumbs{margin-bottom:20px}
.contact-hero .hero__main{max-width:720px}
.contact-hero .hero__ctas .link{margin-left:6px}
.contact-hero .hero__ctas .link .icon{color:var(--theta-300)}

/* ---------- II · Stage: one grid so phones can reorder (booking → details → route → map) ---------- */
.contact-stage{padding-top:clamp(24px,3vw,48px);padding-bottom:var(--section-y-tight);overflow-x:clip}
.contact-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  grid-template-areas:"route route" "details book" "map book" "studio book";
  gap:clamp(48px,6vw,88px) clamp(32px,5vw,80px);align-items:start}
.contact-route{grid-area:route}
.contact-details{grid-area:details;align-self:start}
.contact-map{grid-area:map;align-self:start}
.contact-book{grid-area:book;position:sticky;top:96px;align-self:start}
.contact-studio{grid-area:studio}
.contact-details h2{margin-bottom:clamp(16px,2vw,28px)}
.contact-details .m-arrival__rows li:last-child{border-bottom:1px solid var(--line-1)}
/* the route's three panels are 4:5 by default; here they read as a calm 16:10 strip on desktop */
@media (min-width:768px){
  .contact-route .m-arrival__panel .m-frame{aspect-ratio:16/10}
}

/* map card: the street still dimmed behind the poster; nothing from Google loads until "Show map" */
.contact-map .m-map{aspect-ratio:auto;height:320px}
.contact-map__img{position:absolute;inset:0;z-index:-1}
.contact-map__img img{width:100%;height:100%;object-fit:cover;opacity:.32}
.contact-map__note{margin-top:2px;color:var(--text-3)}
.contact-map .m-map__links{margin-top:12px}

/* booking: the lounge at 30% gives the Lens glass something to bend */
.contact-book>.bloom{inset:-18% -12%}
.contact-book__bg{position:absolute;inset:-2% -2%;z-index:-1;border-radius:var(--r-xl);overflow:hidden;opacity:.3;pointer-events:none;
  -webkit-mask-image:radial-gradient(80% 80% at 50% 50%,#000 40%,transparent 100%);mask-image:radial-gradient(80% 80% at 50% 50%,#000 40%,transparent 100%)}
.contact-book__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.contact-book .m-booking__btns .btn{white-space:normal;text-align:center}

/* the studio from above, with its caption chip */
.contact-studio{position:relative;margin:0;aspect-ratio:16/10;border-radius:var(--r-xl);overflow:hidden;background:var(--bg-2)}
.contact-studio picture,.contact-studio img{display:block;width:100%;height:100%}
.contact-studio img{object-fit:cover;object-position:var(--pos,50% 50%)}
.contact-studio figcaption{position:absolute;left:16px;bottom:16px}

@media (max-width:1023px){
  .contact-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"book" "details" "route" "map" "studio";gap:clamp(40px,8vw,64px)}
  .contact-book{position:relative;top:auto}
  .contact-book__bg{display:none}
  .contact-studio{aspect-ratio:16/9}
}
@media (max-width:767px){
  .contact-hero .hero__ctas{align-items:stretch}
  .contact-hero .hero__ctas .link{justify-content:center}
  .contact-map .m-map{height:280px}
  .contact-hero__photo img{opacity:.18}
}

/* G3 CTA Dock: hidden on this page after the hero — the booking panel it would duplicate is the next module (PRD §6) */
.cta-dock{display:none!important}