/* ============================================
   LAYOUT — sections, containers, responsive rhythm
   ============================================ */

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--max-w-narrow);
}

/* ── Sections ── */
section {
  padding-block: var(--sp-section);
  position: relative;
}

/* Theme classes — alternate dark/cream rhythm */
.welcome, .delivery, .faq, .contact {
  background: var(--c-bone);
  color: var(--c-ink);
}

.stock, .visit {
  background: var(--c-ink);
  color: #fff;
}

.site-footer {
  background: var(--c-ink);
  color: #fff;
  padding-block: var(--sp-9) var(--sp-6);
}

/* ── Section eyebrow ── */
.section-eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-mute);
  margin-bottom: var(--sp-5);
}

.section-eyebrow--light {
  color: rgba(255, 255, 255, 0.55);
}

/* ── Hero ── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-10) var(--gutter) var(--sp-7);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}

/* ── Welcome ── */
.welcome {
  padding-block: var(--sp-section);
}

/* ── Stock (dark category grid section) ── */
.stock .container { position: relative; }

/* ── Delivery ── */
.delivery {
  background: var(--c-bone-2);
}

/* ── Visit — split video + map ── */
.visit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  min-height: 54vh;
}

/* Map beside the hyperlapse video */
.visit__map {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  background: var(--c-ink);
}
.visit__map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: contrast(1.02) saturate(0.92);
}

.visit__photo {
  background-size: cover;
  background-position: center;
  padding: var(--sp-7);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}
/* Full-bleed cover without relying on object-fit (which some mobile
   browsers ignore for a playing <video>, causing black pillar-bars). */
.visit__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
}
.visit__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.7));
}
.visit__photo-tag, .visit__photo-h { position: relative; z-index: 2; }

.visit__info {
  padding: var(--sp-7);
  background: var(--c-bone-2);
  color: var(--c-ink);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  justify-content: center;
}

/* ── FAQ ── */
.faq .container { position: relative; }

/* ── Contact ── */
.contact__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-7);
  margin-top: var(--sp-6);
}

/* ── Footer ── */
.site-footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--sp-7);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--c-line-dark);
}

.site-footer__bottom {
  padding-top: var(--sp-5);
  font-size: var(--t-small);
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* ──────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────── */

/* Tablet */
@media (max-width: 980px) {
  .visit {
    grid-template-columns: 1fr;
  }
  .visit__photo {
    min-height: 50vh;
  }
  /* Stacked: map gets a real size (matches the video) instead of staying small */
  .visit__map {
    min-height: 50vh;
  }
  .contact__grid {
    grid-template-columns: 1fr;
  }
  .site-footer__top {
    grid-template-columns: 1fr 1fr;
  }
}

/* Phone */
@media (max-width: 640px) {
  section {
    padding-block: var(--sp-8);
  }
  .hero {
    padding: var(--sp-9) var(--gutter) var(--sp-6);
    min-height: 92vh;
  }
  /* Visit: vertical frame on phones so the portrait video shows upright,
     but contained so it fits the screen. Map matches it (same 4:5, full width). */
  .visit__photo,
  .visit__map {
    aspect-ratio: 4 / 5;
    min-height: 0;
    max-height: 70vh;
  }
  .site-footer__top {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}