/* =====================================================================
   PHASE G — Mobile Compact + Minimalist Polish (May 19, 2026)
   PATCH May 27 2026: flowModal dark backdrop fix + chip rail parity
   ===================================================================== */

/* ============================================================
   0. CSS variables (Phase G tokens)
   ============================================================ */
:root{
  --pg-btn-h: 44px;
  --pg-btn-h-lg: 48px;
  --pg-btn-r: 12px;
  --pg-btn-w: 60%;
  --pg-btn-w-max: 320px;
  --pg-btn-w-min: 220px;
}

/* ============================================================
   PATCH: FLOW MODAL — dark backdrop (not white/blank screen)
   When .open is added, show a dark overlay. Without this the
   modal container has no background and shows the page behind.
   ============================================================ */
#flowModal,
#calModal {
  display: none;
}
#flowModal.open:not(.in-drawer),
#calModal.open {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1400 !important;
  background: rgba(10, 31, 44, 0.75) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  overflow-y: auto !important;
}

/* Inner modal card — always light background, never inherits the dark overlay */
#flowModal:not(.in-drawer) .modal,
#calModal .modal,
#flowModal:not(.in-drawer) > .modal,
#calModal > .modal {
  background: var(--paper, #FBFAF7) !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 520px !important;
  max-height: 90dvh !important;
  overflow-y: auto !important;
  box-shadow: 0 24px 80px -16px rgba(10, 31, 44, 0.30) !important;
  position: relative !important;
  color: var(--ink) !important;
}

/* Scroll lock */
body.modal-open {
  overflow: hidden !important;
  touch-action: none !important;
}

/* ============================================================
   PATCH: CHIP RAIL — semi-private parity (Philosophy + Promises)
   ============================================================ */
body.booking-page .chip-rail-track .chip[href="#philosophy"],
body.booking-page .chip-rail-track .chip[data-target="philosophy"],
body.booking-page .chip-rail-track .chip[href="#promises"],
body.booking-page .chip-rail-track .chip[data-target="promises"] {
  display: inline-flex !important;
}

/* ============================================================
   1. UNIFORM BUTTON SYSTEM (all viewports)
   ============================================================ */
.product-actions,
.hero-actions{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: clamp(10px, 2.4vw, 14px) !important;
  margin-top: clamp(12px, 3vw, 18px) !important;
}

.product-actions .btn,
.product-actions .btn-watch,
.product-actions .btn-ghost,
.product-actions .btn-primary,
.product-actions .btn-accent,
.product-actions a.btn,
.product-actions button.btn,
.hero-actions .btn{
  width: var(--pg-btn-w) !important;
  max-width: var(--pg-btn-w-max) !important;
  min-width: var(--pg-btn-w-min) !important;
  height: var(--pg-btn-h) !important;
  min-height: var(--pg-btn-h) !important;
  padding: 0 20px !important;
  border-radius: var(--pg-btn-r) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  line-height: 1 !important;
  box-shadow: var(--shadow-btn) !important;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease) !important;
}

.product-actions .btn-primary,
.product-actions .btn-accent{
  background: var(--accent);
  color: var(--ink);
  border: none;
}
.product-actions .btn-ghost,
.product-actions .btn-watch{
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.product-actions .btn-secondary{
  background: var(--ink);
  color: var(--paper);
  border: none;
}

.product-actions .btn-watch .btn-watch-icon{
  width: 18px !important;
  height: 18px !important;
}
.product-actions .btn-watch .btn-watch-icon svg{
  width: 9px !important;
  height: 9px !important;
}

.pf-book-rail__cta{
  height: var(--pg-btn-h-lg) !important;
  min-height: var(--pg-btn-h-lg) !important;
  border-radius: var(--pg-btn-r) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}

/* ============================================================
   2. MOBILE (≤1023px)
   ============================================================ */
@media (max-width: 1023px){

  .chip-rail-inner{
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .chip-rail-track{
    justify-content: center !important;
    gap: clamp(2px, 1vw, 6px) !important;
    padding: 5px clamp(8px, 3vw, 16px) !important;
    min-width: 0 !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
  }
  .chip-rail-track .chip{
    flex: 0 0 auto !important;
    padding: 5px 9px !important;
    font-size: 0.7rem !important;
    min-height: 26px !important;
    border-radius: 999px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    background: transparent !important;
    white-space: nowrap !important;
  }
  .chip-rail-track .chip.active{
    background: var(--ink) !important;
    color: #fff !important;
  }

  body.booking-page .product-hero,
  body.booking-page .hero{
    padding-top: calc(56px + 38px + clamp(10px, 3vw, 20px)) !important;
    padding-bottom: clamp(16px, 4vw, 28px) !important;
  }

  .product-hero-card,
  .product-hero-media,
  .product-hero .hero-bg,
  .product-hero figure.product-hero-card{
    max-height: clamp(200px, 46dvh, 320px) !important;
    aspect-ratio: 3/2 !important;
    border-radius: clamp(14px, 3vw, 18px) !important;
    overflow: hidden;
  }

  .product-hero-thumbs,
  .product-thumbs{
    gap: 6px !important;
    margin-top: clamp(8px, 2vw, 14px) !important;
  }

  .product-title-block,
  .product-title-block .container{
    padding-block: clamp(12px, 3vw, 20px) !important;
  }
  .product-title-block h1,
  .product-hero h1{
    font-size: clamp(1.55rem, 6.4vw, 2.1rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
    max-width: 22ch !important;
    margin: 0 auto clamp(8px, 2vw, 12px) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .product-tags,
  .product-title-block .tags,
  .hero-tags{
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    justify-content: center !important;
  }
  .product-tags > :nth-child(n+4),
  .product-title-block .tags > :nth-child(n+4),
  .hero-tags > :nth-child(n+4){
    display: none !important;
  }
  .product-tags > *,
  .product-title-block .tags > *,
  .hero-tags > *{
    font-size: 0.72rem !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
  }

  .philosophy,
  .product-philosophy,
  .philosophy-section{
    padding-block: clamp(20px, 5vw, 36px) !important;
  }
  .philosophy h2,
  .philosophy .tagline,
  .product-philosophy .tagline,
  .philosophy-tagline{
    font-size: clamp(1.1rem, 4.4vw, 1.4rem) !important;
    line-height: 1.3 !important;
    max-width: 30ch !important;
    margin-inline: auto !important;
  }
  .philosophy .eyebrow,
  .product-philosophy .eyebrow,
  .philosophy-eyebrow{
    font-size: 0.68rem !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 8px !important;
    white-space: nowrap !important;
  }

  .trust{
    padding-block: clamp(10px, 3vw, 18px) !important;
  }
  .trust-inner{
    gap: 8px 18px !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.06em !important;
  }
  .trust-item{
    font-size: 0.7rem !important;
    gap: 6px !important;
  }
  .trust-item svg{
    width: 14px !important;
    height: 14px !important;
  }

  section{
    padding-block: clamp(40px, 8vw, 72px) !important;
  }
  section + section{
    padding-top: clamp(36px, 7vw, 64px) !important;
  }

  .sticky-cta{
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom,0px)) !important;
  }

  .btn,
  .btn-lg{
    min-height: var(--pg-btn-h) !important;
    height: auto;
    font-size: 0.92rem !important;
    border-radius: var(--pg-btn-r) !important;
    padding: 0 20px !important;
  }
}

/* ============================================================
   3. SMALL-MOBILE (≤480px)
   ============================================================ */
@media (max-width: 480px){
  .product-title-block h1,
  .product-hero h1{
    font-size: clamp(1.4rem, 7vw, 1.8rem) !important;
    max-width: 18ch !important;
  }
  .philosophy .tagline,
  .product-philosophy .tagline,
  .philosophy-tagline{
    font-size: clamp(1rem, 4.8vw, 1.3rem) !important;
  }
  .chip-rail-track{
    gap: 2px !important;
    padding: 4px 6px !important;
  }
  .chip-rail-track .chip{
    padding: 4px 7px !important;
    font-size: 0.66rem !important;
    min-height: 24px !important;
  }
  .product-actions .btn,
  .product-actions .btn-watch,
  .product-actions .btn-ghost{
    width: 72% !important;
    max-width: 280px !important;
  }
}

/* ============================================================
   3.5 DESKTOP: align booking rail bottom with gallery bottom
   ============================================================ */
@media (min-width: 1024px){
  .booking-page .product-hero .container > .pf-book-rail{
    grid-row: 1 / span 2 !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: clamp(440px, calc(32.4vw + 121px), 645px) !important;
  }
  .pf-book-rail__trustlist,
  .pf-book-rail__trust{
    margin-top: auto !important;
  }
  .pf-book-rail__divider{
    margin-block: clamp(14px, 1.4vw, 22px) !important;
  }
}

/* ============================================================
   4. DESKTOP (≥1024px): spacing
   ============================================================ */
@media (min-width: 1024px){
  .product-hero{
    padding-bottom: clamp(36px, 4vw, 56px) !important;
  }
  section{
    padding-block: clamp(60px, 5vw, 96px) !important;
  }
  .philosophy{
    padding-block: clamp(48px, 5vw, 80px) !important;
  }
  .trust{
    padding-block: clamp(16px, 1.6vw, 24px) !important;
  }
  .product-title-block{
    padding-block: clamp(24px, 3vw, 40px) !important;
  }
}

/* ============================================================
   6. SECTION-HEAD CENTERING
   ============================================================ */
#philosophy .section-head,
section.tight#philosophy .section-head,
#expedition .section-head{
  text-align: center !important;
  margin-inline: auto !important;
  max-width: 760px !important;
}
#philosophy .section-head .eyebrow,
#expedition .section-head .eyebrow{
  display: block !important;
  text-align: center !important;
}
#philosophy .section-head h2,
#expedition .section-head h2{
  text-align: center !important;
  margin-inline: auto !important;
  max-width: 22ch !important;
}
#philosophy .section-head p,
#expedition .section-head p{
  text-align: center !important;
  margin-inline: auto !important;
  max-width: 58ch !important;
}

/* ============================================================
   5. Safe defaults
   ============================================================ */
.product-actions > *,
.hero-actions > *{
  box-sizing: border-box;
}