/* ============================================================
   XB CAR — pages.css
   Layouts used by inner pages: split sections, image frames,
   booking sidebar, gallery header.
   ============================================================ */

/* ---- SPLIT (text + image) -------------------------------- */
.split{ display:grid; grid-template-columns:1fr; gap:34px; align-items:center; }
.split-txt .p-body{ color:var(--muted); font-size:15.5px; line-height:1.95; margin-bottom:14px; max-width:60ch; }
.split-txt .p-body:last-child{ margin-bottom:0; }
.split-txt .eyebrow{ margin-bottom:12px; }
.split-txt h2.t{ margin-bottom:16px; }

.split-img{ position:relative; }
.img-frame{
  margin:0; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--surface);
  box-shadow:var(--shadow);
}
.img-frame img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .8s var(--ease); }
.img-frame:hover img{ transform:scale(1.05); }
.img-frame.tall img{ aspect-ratio:3/4; }

/* small overlapping second image */
.img-float{
  position:absolute; width:44%; bottom:-26px; inset-inline-start:-14px;
  border:3px solid var(--bg); box-shadow:var(--shadow);
  animation:floaty 6s var(--ease) infinite alternate;
}
.img-float img{ aspect-ratio:1/1; }
@keyframes floaty{ from{ transform:translateY(0); } to{ transform:translateY(-12px); } }

/* keep the floating card from colliding with the next section */
.split-img{ margin-bottom:34px; }
.split:last-child .split-img{ margin-bottom:0; }

@media(prefers-reduced-motion:reduce){ .img-float{ animation:none; } }

/* ---- GALLERY head --------------------------------------- */
.gal-top{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:26px;
}
.gal-count{
  font-size:13px; color:var(--muted); display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line); border-radius:999px; padding:7px 14px; background:var(--surface);
}
.gal-count b{ font-family:var(--ff-en); color:var(--green-ink); font-weight:800; }

/* ---- BOOKING page layout -------------------------------- */
.book-layout{ display:grid; grid-template-columns:1fr; gap:20px; align-items:start; }
.book-aside{ display:flex; flex-direction:column; gap:14px; }
.aside-card{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  padding:22px 20px;
}
.aside-card h3{ font-size:16px; margin-bottom:14px; display:flex; align-items:center; gap:9px; }
.aside-card h3 svg{ width:16px; height:16px; color:var(--green-ink); flex:none; }
.aside-note{ color:var(--muted); font-size:13.5px; line-height:1.85; }
.aside-list{ display:flex; flex-direction:column; gap:10px; }
.aside-list li{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--muted); }
.aside-list svg{ width:14px; height:14px; color:var(--green-ink); flex:none; margin-top:5px; }

/* status pill (open / closed now) */
.open-pill{
  display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:999px;
  font-size:12.5px; font-weight:700; border:1px solid var(--line-strong); color:var(--muted);
}
.open-pill.open{ color:var(--green-ink); border-color:var(--green-edge); background:var(--green-soft); }
.open-pill.shut{ color:#E5484D; border-color:rgba(229,72,77,.34); background:rgba(229,72,77,.09); }

/* ---- REVIEWS page --------------------------------------- */
.rev-cta-row{ display:flex; justify-content:center; margin-top:30px; }

/* ---- CONTACT page --------------------------------------- */
/* On phones the form is the point of the page, so lift it directly under
   the hero. Reordering (not moving it in the HTML) keeps the desktop
   layout — cards, then hours/map, then form — exactly as it was. */
@media(max-width:899px){
  body[data-page="contact"] main{ display:flex; flex-direction:column; }
  body[data-page="contact"] .phero{ order:1; }
  body[data-page="contact"] .marquee{ order:2; }
  body[data-page="contact"] #msgSection{ order:3; padding-top:44px; }
  body[data-page="contact"] #ccSection{ order:4; }
  body[data-page="contact"] #hoursSection{ order:5; }
  body[data-page="contact"] #faqSection{ order:6; }
  body[data-page="contact"] cta-band{ order:7; }
}

.msg-shell{
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(165deg, var(--green-soft), transparent 55%), var(--surface);
}
.msg-head{ padding:26px 24px 0; }
.msg-head h2{ font-size:clamp(20px,4vw,26px); }
.msg-head p{ color:var(--muted); font-size:14px; margin-top:8px; }

/* ---- RESPONSIVE ----------------------------------------- */
@media(min-width:900px){
  .split{ grid-template-columns:1fr 1fr; gap:52px; }
  .split.reverse .split-txt{ order:2; }
  .split.reverse .split-img{ order:1; }
  .split-img{ margin-bottom:0; }
  .book-layout{ grid-template-columns:1.7fr 1fr; gap:24px; }
}