/* ============================================================
   EXPERIENCES.CSS — page-specific styles for /experiences/
   Two big offer sections (Adventures, Private Events & Catering)
   plus a shared enquiry form. Cross-sell band styles live in
   base.css (shared with the Restaurant page). Shared chrome
   (header/nav/wave-dividers/section-shell/footer) lives in
   base.css. Requires src/css/tokens.css and src/css/base.css to
   be loaded first.
   ============================================================ */

body{background:var(--shell)}

/* This page has no hero photo behind the nav (unlike Restaurant/Hub), so
   the transparent-over-photo masthead has nothing dark to sit on — the
   nav text was unreadable against the light page background, and since
   the masthead is fixed, scrolled content showed straight through it.
   Force the same solid/blurred look base.css normally reserves for the
   post-scroll ".compact" state, as this page's permanent resting state. */
.masthead .bar{
  background:rgba(251,246,236,.94);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
  color:var(--aqua-ink);
}
.masthead .brand-text span{color:var(--gold)}
.masthead .nav a{color:var(--aqua-deep)}
.masthead .nav a:hover{color:var(--aqua-ink);border-bottom-color:var(--aqua)}
.masthead .menu-toggle{border-color:var(--line);color:var(--aqua-ink)}

/* ---- Intro ---- */
.exp-intro-band{background:var(--aqua-tint);position:relative}
.exp-intro{padding-top:calc(6.5rem + var(--gap));padding-bottom:var(--gap);text-align:center}
.exp-intro h1{font-size:var(--t-hero);text-wrap:balance;max-width:38rem;margin-inline:auto}
.exp-intro p{margin-top:1rem;max-width:44ch;margin-inline:auto;color:rgba(6,58,63,.78)}

/* ---- Adventures ---- */
.adv-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.adv-posters{display:flex;gap:1rem}
.adv-posters img{border-top:5px solid var(--aqua);flex:1;min-width:0}

/* ---- Private Events & Catering ---- */
.pe-hero{
  position:relative;background-image:url("../images/exp-event-atmosphere.jpg");
  background-size:cover;background-position:center;color:#fff;
}
.pe-hero::before{content:"";position:absolute;inset:0;background:rgba(6,58,63,.86)}
.pe-hero > .wrap{position:relative;z-index:2}
.pe-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.pe-poster{
  background-image:url("../images/exp-events-flyer.jpg");background-size:cover;background-position:top center;
  min-height:260px;border-top:5px solid var(--gold);
}
.pe-offer{padding:1.3rem 0;border-top:1px solid rgba(31,168,174,.6)}
.pe-offer h3{font-size:1.28rem;color:#fff;margin-bottom:.4rem}
.pe-offer p{color:rgba(255,255,255,.78);margin:0;font-size:.97rem}

/* ---- Shared enquiry form section background ---- */
.exp-book{background:var(--aqua-tint)}

@media (max-width:900px){
  .adv-grid,.pe-grid{grid-template-columns:1fr}
  .adv-posters{flex-direction:column}
}