/* =========================================================
   Treflyn Barn — FLOW v2.1.1
   Section rhythm, spacing & band transitions
   Never hide images
   ========================================================= */

/*
  Page story (top → bottom):
  1. Arrive   — hero → trust → stats → promise → checklist
  2. Discover — about → atmosphere → quote → gallery → sleep → film
  3. Feel     — experience → day → amenities → location
  4. Trust    — reviews → rules → faq
  5. Book     — reasons → form → final → host
*/

body.tb-front {
  --flow-pad: clamp(3.75rem, 7.5vw, 6.25rem);
  --flow-pad-sm: clamp(2rem, 4.5vw, 3.25rem);
  --flow-pad-xs: clamp(1.25rem, 3vw, 2rem);
  --flow-gap: clamp(1.25rem, 3vw, 2rem);
  --band-paper: #fffcf8;
  --band-ivory: #faf7f2;
  --band-warm: #f3eee5;
  --band-ink: #0f1c16;
  --band-ink-mid: #15241d;
}

/* —— Base section rhythm —— */
body.tb-front .section {
  padding-top: var(--flow-pad) !important;
  padding-bottom: var(--flow-pad) !important;
  position: relative;
}

body.tb-front .section-head {
  margin-bottom: clamp(1.85rem, 4vw, 2.85rem) !important;
  max-width: 40rem;
}

/* Soft fade connector on major sections (same band = subtle) */
body.tb-front .section::before {
  content: none;
}

/* —— 1. ARRIVE: hero → trust → stats → promise → checklist —— */

/* Trust sits flush under hero */
body.tb-front .trust-bar {
  padding: clamp(1.5rem, 3vw, 2rem) 0 !important;
  margin: 0 !important;
  border-top: 1px solid rgba(201, 166, 107, 0.12);
}

/* Stats: bridge card between dark trust and light content */
body.tb-front .stats-band {
  margin: 0 !important;
  padding: 0 0 var(--flow-gap) !important;
  background: linear-gradient(180deg, var(--band-ink) 0%, var(--band-ink) 42%, var(--band-ivory) 42%, var(--band-ivory) 100%);
  position: relative;
  z-index: 4;
}

body.tb-front .stats-band-inner {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  position: relative;
  z-index: 5;
  transform: translateY(0);
  /* sit half on trust, half on ivory via parent gradient */
  box-shadow:
    0 20px 50px rgba(8, 14, 11, 0.12),
    0 0 0 1px rgba(201, 166, 107, 0.2) !important;
}

/* Promise cards: no wild negative margin war with stats */
body.tb-front .promise {
  padding: 0 0 var(--flow-pad-sm) !important;
  background: var(--band-ivory) !important;
  margin: 0 !important;
}

body.tb-front .promise-grid {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 20px !important;
}

/* Checklist continues ivory band tightly */
body.tb-front .stay-checklist {
  padding: 0 0 var(--flow-pad) !important;
  margin: 0 !important;
  background: var(--band-ivory);
}

body.tb-front .stay-checklist-inner {
  margin: 0 auto;
}

/* —— 2. DISCOVER —— */

/* About: soft warm paper */
body.tb-front .about-section {
  background:
    linear-gradient(180deg, var(--band-ivory) 0%, var(--band-warm) 100%) !important;
  padding-top: var(--flow-pad) !important;
  padding-bottom: var(--flow-pad) !important;
}

/* Atmosphere: slim ribbon, same warm family */
body.tb-front .atmosphere-strip {
  padding: var(--flow-pad-xs) 0 !important;
  margin: 0 !important;
  background: var(--band-warm) !important;
  border-top: 1px solid rgba(15, 28, 22, 0.04);
  border-bottom: 1px solid rgba(15, 28, 22, 0.04);
}

/* Pull quote: full dark beat with breathing room */
body.tb-front .pull-quote {
  padding: clamp(3.25rem, 6vw, 5rem) 0 !important;
  margin: 0 !important;
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%, rgba(201, 166, 107, 0.1), transparent 55%),
    var(--band-ink) !important;
}

/* Gallery: cool ivory after dark quote */
body.tb-front .gallery-section {
  background: var(--band-warm) !important;
  padding-top: var(--flow-pad) !important;
  padding-bottom: var(--flow-pad-sm) !important;
}

body.tb-front .gallery-section .gallery-cta {
  margin-top: var(--flow-gap);
  text-align: center;
}

/* Sleep: dark media block — continuous with intentional weight */
body.tb-front .sleep-section {
  background:
    linear-gradient(180deg, #121f19 0%, var(--band-ink) 40%, #0c1611 100%) !important;
  padding-top: var(--flow-pad) !important;
  padding-bottom: var(--flow-pad-sm) !important;
  margin: 0 !important;
}

/* Filmstrip: light band with soft handoff from dark sleep */
body.tb-front .filmstrip-section {
  margin: 0 !important;
  padding: var(--flow-pad-sm) 0 var(--flow-pad) !important;
  background: var(--band-ivory) !important;
  box-shadow: inset 0 28px 40px -28px rgba(8, 14, 11, 0.18);
  border-top: 1px solid rgba(201, 166, 107, 0.12);
}

body.tb-front .filmstrip-head {
  margin-bottom: 1.35rem !important;
}

body.tb-front .filmstrip-head .eyebrow {
  color: var(--champagne-deep) !important;
}

body.tb-front .filmstrip-head h2 {
  color: var(--forest) !important;
  text-shadow: none !important;
}

body.tb-front .filmstrip-hint {
  margin-top: 1rem !important;
  color: var(--muted) !important;
  opacity: 0.85;
}

@media (max-width: 700px) {
  body.tb-front .filmstrip-section {
    padding-top: var(--flow-pad-xs) !important;
  }
}

/* —— 3. FEEL —— */

body.tb-front .experience-section {
  background: var(--band-ivory) !important;
  padding-top: var(--flow-pad-sm) !important;
  padding-bottom: var(--flow-pad) !important;
}

/* Day rhythm lives inside experience — give it air from amenities */
body.tb-front .day-rhythm {
  margin-top: clamp(2.5rem, 5vw, 3.75rem) !important;
  margin-bottom: 0 !important;
}

body.tb-front #amenities.section {
  background: var(--band-warm) !important;
  padding-top: var(--flow-pad) !important;
  padding-bottom: var(--flow-pad) !important;
}

body.tb-front .location-section {
  background: var(--band-ivory) !important;
  padding-top: var(--flow-pad) !important;
  padding-bottom: var(--flow-pad) !important;
}

body.tb-front .location-section .season-grid {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

body.tb-front .nearby-chips {
  margin-top: 1.5rem !important;
  margin-bottom: 0.25rem;
}

/* Location visual: photos + map — always visible */
body.tb-front .location-visual {
  display: grid;
  gap: 0.85rem;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}

body.tb-front .location-photos {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.65rem;
  min-height: 280px;
}

body.tb-front .loc-photo {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #d4ccc0;
  box-shadow: 0 12px 32px rgba(15, 20, 16, 0.1);
}

body.tb-front .loc-photo-main {
  grid-row: 1 / span 2;
  min-height: 280px;
}

body.tb-front .loc-photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 130px;
  object-fit: cover !important;
  opacity: 1 !important;
  visibility: visible !important;
  clip-path: none !important;
}

body.tb-front .loc-photo-main img {
  min-height: 280px;
}

body.tb-front .loc-photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.4rem 0.85rem 0.7rem;
  background: linear-gradient(transparent, rgba(8, 14, 11, 0.78));
  color: #fffcf8;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

body.tb-front .location-map {
  position: relative;
  min-height: 280px !important;
  aspect-ratio: auto !important;
  height: 280px;
  border-radius: 16px !important;
  overflow: hidden;
  opacity: 1 !important;
  visibility: visible !important;
  background: #dfe8e0;
  border: 1px solid rgba(15, 28, 22, 0.08);
  box-shadow: 0 12px 32px rgba(15, 20, 16, 0.1);
  /* Isolate map from pointer traps */
  isolation: isolate;
  z-index: 1;
}

body.tb-front .location-map iframe {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 280px !important;
  border: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
  z-index: 1;
}

/* Hide decorative pulse over interactive map */
body.tb-front .location-map .map-pulse {
  display: none !important;
}

body.tb-front .location-map::before {
  display: none !important;
}

body.tb-front .location-map-actions {
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
  max-width: calc(100% - 1rem);
  pointer-events: none;
}

body.tb-front .location-map-link {
  pointer-events: auto;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgba(15, 28, 22, 0.9);
  color: #f0d7b0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: 1px solid rgba(201, 166, 107, 0.4);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  white-space: nowrap;
}

body.tb-front .location-map-link:hover,
body.tb-front .location-map-link:focus-visible {
  background: #0f1c16;
  color: #fff6e6;
  outline: none;
}

body.tb-front .location-map-link-alt {
  background: rgba(255, 252, 248, 0.92);
  color: #0f1c16;
  border-color: rgba(15, 28, 22, 0.12);
}

body.tb-front .location-map-link-alt:hover,
body.tb-front .location-map-link-alt:focus-visible {
  background: #fffcf8;
  color: #0f1c16;
}

@media (max-width: 900px) {
  body.tb-front .location-grid {
    grid-template-columns: 1fr !important;
  }

  body.tb-front .location-photos {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    min-height: 0;
  }

  body.tb-front .loc-photo-main {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 220px;
  }

  body.tb-front .loc-photo-main img {
    min-height: 220px;
    aspect-ratio: 16 / 10;
  }

  body.tb-front .loc-photo-side img {
    aspect-ratio: 4 / 3;
    min-height: 140px;
  }
}

/* —— 4. TRUST —— */

body.tb-front .reviews-section {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(201, 166, 107, 0.07), transparent 55%),
    var(--band-warm) !important;
  padding-top: var(--flow-pad) !important;
  padding-bottom: var(--flow-pad) !important;
}

body.tb-front .reviews-featured {
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem) !important;
}

body.tb-front .reviews-cta {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
}

body.tb-front #rules.section {
  background: var(--band-ivory) !important;
  padding-top: var(--flow-pad) !important;
  padding-bottom: var(--flow-pad) !important;
}

body.tb-front .faq-section {
  background: var(--band-warm) !important;
  padding-top: var(--flow-pad) !important;
  padding-bottom: var(--flow-pad) !important;
}

body.tb-front .faq-search {
  margin-bottom: 1.5rem !important;
}

/* —— 5. BOOK —— */

body.tb-front .booking-section {
  background:
    linear-gradient(180deg, var(--band-warm) 0%, var(--band-ivory) 35%, var(--band-ivory) 100%) !important;
  padding-top: var(--flow-pad) !important;
  padding-bottom: var(--flow-pad) !important;
}

body.tb-front .book-reasons {
  margin: 0 auto clamp(1.75rem, 4vw, 2.5rem) !important;
  max-width: var(--max, 1180px);
}

body.tb-front .booking-wrap {
  margin-top: 0 !important;
}

/* Final CTA: full-bleed pause */
body.tb-front .final-cta {
  margin: 0 !important;
  min-height: clamp(42vh, 50vw, 52vh);
  padding: var(--flow-pad) 0 !important;
}

/* Host: soft landing before footer */
body.tb-front .host-band {
  padding: var(--flow-pad-sm) 0 !important;
  margin: 0 !important;
  background: var(--band-ivory) !important;
  border-bottom: 1px solid rgba(15, 28, 22, 0.05);
}

body.tb-front .site-footer {
  margin-top: 0 !important;
}

/* —— Hairline dividers between same-family light sections —— */
body.tb-front .about-section,
body.tb-front .gallery-section,
body.tb-front .experience-section,
body.tb-front #amenities.section,
body.tb-front .location-section,
body.tb-front .reviews-section,
body.tb-front #rules.section,
body.tb-front .faq-section,
body.tb-front .booking-section {
  border-top: 1px solid rgba(15, 28, 22, 0.04);
}

/* Dark sections: soft gold top edge */
body.tb-front .trust-bar,
body.tb-front .pull-quote,
body.tb-front .sleep-section,
body.tb-front .final-cta {
  border-top: 1px solid rgba(201, 166, 107, 0.14);
}

/* —— Container consistency —— */
body.tb-front .section > .container,
body.tb-front .stay-checklist > .container,
body.tb-front .filmstrip-section > .filmstrip-head,
body.tb-front .stats-band > .container,
body.tb-front .promise > .container {
  width: min(100% - 3rem, var(--max, 1180px));
  margin-inline: auto;
}

/* —— Scroll margin for fixed header —— */
body.tb-front #about,
body.tb-front #gallery,
body.tb-front #sleeping,
body.tb-front #experience,
body.tb-front #amenities,
body.tb-front #location,
body.tb-front #reviews,
body.tb-front #rules,
body.tb-front #faq,
body.tb-front #book {
  scroll-margin-top: calc(var(--nav-h, 90px) + 12px);
}

/* —— Mobile: tighter vertical rhythm, keep band logic —— */
@media (max-width: 720px) {
  body.tb-front {
    --flow-pad: clamp(3rem, 10vw, 4.25rem);
    --flow-pad-sm: clamp(1.75rem, 6vw, 2.5rem);
    --flow-pad-xs: 1.15rem;
  }

  body.tb-front .stats-band {
    background: linear-gradient(180deg, var(--band-ink) 0%, var(--band-ink) 36%, var(--band-ivory) 36%, var(--band-ivory) 100%);
    padding-bottom: 1.25rem !important;
  }

  body.tb-front .promise-grid {
    border-radius: 16px !important;
  }

  body.tb-front .stay-checklist {
    padding-bottom: var(--flow-pad-sm) !important;
  }

  /* Extra space above sticky mobile book bar */
  body.tb-front .site-footer {
    padding-bottom: calc(1.5rem + var(--mobile-bar-h, 74px));
  }
}

/* —— Reduce stacking collisions from older polish layers —— */
body.tb-front .stats-band {
  margin-top: 0 !important;
}

body.tb-front .promise-grid {
  margin-top: 0 !important;
}

/* Kill double-overlap from refine */
body.tb-front .refine-overlap,
body.tb-front .stats-band.refine-overlap {
  margin-top: 0 !important;
}

/* —— Optional: gentle top fade on light sections after dark —— */
body.tb-front .gallery-section::after,
body.tb-front .experience-section::after {
  content: none;
}

/* Gallery after pull-quote: slight top inset so first content breathes */
body.tb-front .gallery-section .section-head {
  padding-top: 0.25rem;
}

/* Sleep cards: consistent bottom spacing before filmstrip bridge */
body.tb-front .sleep-grid {
  margin-bottom: 0.5rem;
}

/* Experience day-rhythm shouldn't collide with section bottom */
body.tb-front .experience-section .container {
  display: flow-root;
}

/* Amenities note */
body.tb-front .amenity-note {
  margin-top: clamp(1.25rem, 3vw, 1.85rem);
  text-align: center;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

/* Rules grid breathing */
body.tb-front .rules-grid {
  margin-top: 0.25rem;
}

/* Host card not cramped */
body.tb-front .host-card {
  margin: 0 auto;
}

/* Final CTA actions spacing */
body.tb-front .final-cta-actions {
  margin-top: 1.35rem !important;
}

/* —— Prefer reduced motion: no layout change needed —— */
@media (prefers-reduced-motion: reduce) {
  body.tb-front .section,
  body.tb-front .stats-band,
  body.tb-front .filmstrip-section {
    scroll-behavior: auto;
  }
}

/* —— Back to top: always fixed bottom-right, easy to see —— */
body.tb-front .back-top,
body.treflyn-barn-theme .back-top {
  position: fixed !important;
  left: auto !important;
  right: 1.25rem !important;
  bottom: 1.35rem !important;
  z-index: 120 !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(201, 166, 107, 0.55) !important;
  background: #0f1c16 !important;
  color: #f0d7b0 !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  box-shadow:
    0 12px 32px rgba(8, 14, 11, 0.28),
    0 0 0 1px rgba(240, 215, 176, 0.15) inset !important;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.25s, color 0.25s !important;
}

body.tb-front .back-top.show,
body.treflyn-barn-theme .back-top.show {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

body.tb-front .back-top:hover,
body.treflyn-barn-theme .back-top:hover {
  background: #c9a66b !important;
  color: #0f1c16 !important;
  border-color: #c9a66b !important;
}

/* Clear of mobile book bar */
@media (max-width: 900px) {
  body.tb-front .back-top,
  body.treflyn-barn-theme .back-top {
    right: 1rem !important;
    bottom: calc(var(--mobile-bar-h, 74px) + 1rem) !important;
  }
}

/* Clear of desktop section rail + desk book bar */
@media (min-width: 1180px) {
  body.tb-front .back-top,
  body.treflyn-barn-theme .back-top {
    right: 1.5rem !important;
    bottom: 1.5rem !important;
  }

  body.tb-front .desk-book-bar.show ~ .back-top,
  body.tb-front.tb-front .back-top {
    bottom: 1.5rem !important;
  }
}