/* ==========================================================================
   Elite Bathrooms & Plumbing — page-level composition
   Gallery pinning, section-specific overrides, print.
   ========================================================================== */

/* ================================ GALLERY ================================ */
/* Below 900px: a native, snapping horizontal rail with drag assistance.    */
.gallery__pin {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.gallery__stage {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.gallery__stage::-webkit-scrollbar {
  display: none;
}

.shot {
  scroll-snap-align: center;
}

.gallery__hint-flat {
  display: inline;
}
.gallery__hint-pinned {
  display: none;
}

/* Above 900px: pinned, scroll-driven horizontal travel with depth. */
@media (min-width: 900px) {
  .gallery__pin {
    position: sticky;
    top: 0;
    height: 100svh;
  }

  .gallery__stage {
    overflow: visible;
    scroll-snap-type: none;
    will-change: transform;
  }

  .gallery__hint-flat {
    display: none;
  }
  .gallery__hint-pinned {
    display: inline;
  }

  .shot {
    width: clamp(300px, 30vw, 440px);
  }
}

/* Fallback for reduced-motion: let the rail just scroll. */
@media (prefers-reduced-motion: reduce) {
  .gallery__pin {
    position: static !important;
    height: auto !important;
  }
  .gallery__stage {
    overflow-x: auto !important;
    transform: none !important;
  }
  .shot {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ============================ SECTION SPACING ============================ */
/* The gallery owns its own vertical rhythm because JS sets its height. */
.gallery.section {
  padding-block: clamp(3.5rem, 8vw, 7.5rem) 0;
}

.gallery .gallery__pin {
  margin-top: clamp(1rem, 3vw, 2rem);
}

/* ================================ CONTACT ================================ */
.contact-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

@media (min-width: 940px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
  .contact-grid__aside {
    position: sticky;
    top: 5.5rem;
  }
}

.contact-aside__item + .contact-aside__item {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hair);
}

.contact-aside__item h2 {
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 0.7em;
}

.contact-aside__big {
  font-family: "Instrument Serif", serif;
  font-size: var(--step-3);
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.contact-aside__big a:hover {
  color: var(--brand-deep);
}

/* ================================ 404 ================================ */
.lost {
  display: grid;
  place-items: center;
  min-height: 74svh;
  padding-block: 8rem 4rem;
  text-align: center;
}

/* Pages without a dark hero (404) need the condensed header from the top. */
body.page-plain .site-header,
body.page-plain .site-header.is-stuck {
  background: color-mix(in oklab, var(--bone) 92%, transparent);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--hair);
}
@supports (backdrop-filter: blur(14px)) {
  body.page-plain .site-header {
    background: color-mix(in oklab, var(--bone) 76%, transparent);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
  }
}

.lost__code {
  font-family: "Instrument Serif", serif;
  font-size: clamp(5rem, 22vw, 13rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--bone-3);
}

.lost__title {
  font-family: "Instrument Serif", serif;
  font-size: var(--step-3);
  margin-top: 0.35em;
  position: relative;
  z-index: 1;
}

.lost__body {
  max-width: 42ch;
  margin: 1rem auto 0;
  color: var(--muted);
}

.lost__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
  margin-top: var(--s-5);
}

/* ============================== LONG-FORM ============================== */
.article-head {
  max-width: 40ch;
}

.article-body {
  max-width: 68ch;
  margin-top: var(--s-6);
}

.article-body h2 {
  font-family: "Instrument Serif", serif;
  font-size: var(--step-3);
  letter-spacing: -0.025em;
  margin-top: 2.2em;
  margin-bottom: 0.6em;
}

.article-body h3 {
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-top: 1.8em;
  margin-bottom: 0.5em;
}

.article-body p {
  color: var(--ink-3);
  line-height: 1.72;
}

.article-body p + p {
  margin-top: 1em;
}

.article-body ul {
  margin-top: 1em;
  display: grid;
  gap: 0.6em;
}

.article-body ul li {
  position: relative;
  padding-left: 1.4em;
  color: var(--ink-3);
  line-height: 1.65;
}

.article-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 8px;
  height: 1px;
  background: var(--brand-deep);
}

.article-body strong {
  font-weight: 550;
  color: var(--ink);
}

/* key-facts box, the bit AI answer engines like to quote */
.facts-box {
  margin-top: var(--s-6);
  padding: clamp(1.25rem, 3vw, 1.9rem);
  background: var(--bone-2);
  border-left: 2px solid var(--brand);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.facts-box h2 {
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 1em;
}

.facts-box dl {
  display: grid;
  gap: 0.75em;
  font-size: var(--step--1);
}

.facts-box dt {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.facts-box dd {
  margin: 0.15em 0 0;
  color: var(--ink-3);
  line-height: 1.55;
}

@media (min-width: 640px) {
  .facts-box dl {
    grid-template-columns: repeat(2, 1fr);
    gap: 1em 2em;
  }
}

/* ================================ PRINT ================================ */
@media print {
  .site-header,
  .nav-overlay,
  .call-fab,
  .hero__cue,
  .marquee,
  .gallery,
  .cta-band {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  .hero,
  .page-hero {
    min-height: auto;
    color: #000;
    background: #fff;
  }
  .hero__media,
  .hero__scrim,
  .page-hero__media,
  .page-hero__scrim {
    display: none;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    color: #555;
  }
}

/* ==========================================================================
   Narrow-viewport refinements
   The form and the opening hours are the two places people actually act on,
   so they get dedicated treatment below the tablet breakpoint rather than
   simply being allowed to reflow.
   ========================================================================== */

/* ---- Stacked layouts should size to the container, never to content ---- */
@media (max-width: 939px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 899px) {
  .visit,
  .split,
  .intro {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------- FORM ---------------------------------- */
@media (max-width: 599px) {
  .form-card {
    padding: 1.2rem 1.1rem 1.35rem;
    border-radius: var(--radius);
  }

  /* 16px is the threshold below which iOS Safari zooms the viewport when a
     field receives focus. Never go under it on touch. */
  .field input,
  .field select,
  .field textarea {
    font-size: 16px;
    line-height: 1.35;
    padding: 0.78em 0.85em;
    min-height: 50px;
  }

  .field select {
    padding-right: 2.5rem;
    background-position: right 0.9rem center;
  }

  .field {
    gap: 0.4rem;
    margin-bottom: 1.15rem;
  }

  .field > label {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
  }

  .field textarea {
    min-height: 108px;
  }

  /* Thumb-reachable primary action */
  .form-card .btn {
    width: 100%;
    padding-block: 1.05em;
  }

  .form-note {
    font-size: 0.8rem;
    line-height: 1.65;
  }
}

/* Two-up field rows only where there is genuinely room for two. */
@media (min-width: 560px) and (max-width: 639px) {
  .field-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------- OPENING HOURS ------------------------------ */
@media (max-width: 599px) {
  .hours {
    max-width: none;
    font-size: 15px;
    gap: 0;
  }

  .hours li {
    padding-block: 0.72em;
    gap: 0.75rem;
  }

  .hours li.is-today {
    padding-left: 0.65rem;
    margin-left: -0.65rem;
  }

  /* Keep "today" from wrapping onto its own line beside a long day name */
  .hours li span:first-child {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.1em 0.45em;
  }
  .hours li.is-today span:first-child::after {
    margin-left: 0;
  }
}

/* ------------------------------ MAP ------------------------------------ */
@media (max-width: 599px) {
  .map-frame {
    aspect-ratio: 3 / 2;
    min-height: 0;
    border-radius: var(--radius);
  }
}

/* --------------------- FLOATING CALL BUTTON ---------------------------- */
/* On the contact page the whole page is a call to action, so the pill is
   redundant there and only covers content. */
@media (max-width: 899px) {
  body.page-contact .call-fab {
    display: none;
  }
}

/* Never let the pill sit on top of the footer's small print. */
@media (max-width: 899px) {
  .footer__bottom {
    padding-bottom: 3.5rem;
  }
}

/* Messaging actions: stacked, full-width thumb targets on phones. */
@media (max-width: 599px) {
  .contact-aside__actions {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.7rem;
  }
  .contact-aside__actions .btn {
    width: 100%;
    min-height: 50px;
    justify-content: center;
  }
  .contact-aside__item > h2 {
    margin-bottom: 0.55rem;
  }
  .contact-aside__item > p {
    font-size: 0.95rem;
    line-height: 1.6;
  }
}

/* Under 380px the primary label is one word too long for one line at the
   default tracking, and a wrapped button reads as an accident. Tighten the
   type rather than shrinking the tap target. */
@media (max-width: 379px) {
  .form-card .btn {
    font-size: 11.5px;
    letter-spacing: 0.09em;
  }
  .form-card .btn > span {
    gap: 0.4em;
  }
  .contact-aside__actions .btn {
    font-size: 11.5px;
    letter-spacing: 0.09em;
  }
}