/* ============================================================
   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}

/* Flyers open a full-size lightbox on click, same pattern as the
   restaurant menu's printed boards. Buttons wrap the <img>/backgrounds
   so the reset below strips native button chrome without touching layout. */
.flyer{
  display:block;border:none;padding:0;background:none;font:inherit;color:inherit;
  text-align:left;cursor:pointer;flex:1;min-width:0;
}
.flyer:hover,.flyer:focus-visible{opacity:.9}
.flyer:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.adv-posters .flyer{border-top:5px solid var(--aqua)}
.adv-posters .flyer img{display:block;width:100%}

/* ---- 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{
  width:100%;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)}

/* ---- Lightbox (flyer viewer) ---- */
.lightbox{position:fixed;inset:0;z-index:300;display:none;background:rgba(6,58,63,.97);padding:clamp(1rem,3vw,2.5rem)}
.lightbox.is-open{display:flex;flex-direction:column;gap:1rem}
.lightbox-img{flex:1;background-size:contain;background-repeat:no-repeat;background-position:center}
.lightbox-bar{display:flex;justify-content:space-between;align-items:center;color:#fff;gap:1rem}
.lightbox-close{background:none;border:1px solid rgba(255,255,255,.5);color:#fff;font:inherit;padding:.45rem .9rem;cursor:pointer}

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