/* ============================================================
   HOME.CSS — page-specific styles for the home page (index.html)
   Hero, facts strip, about, menu teaser, gallery mosaic + lightbox,
   events + enquiry form. Shared chrome (header/nav/signboard/
   wave-dividers/section-shell/footer) lives in base.css.
   Requires src/css/tokens.css and src/css/base.css to be loaded first.
   ============================================================ */

/* Named lookups for the gallery lightbox — home.js reads
   var(--img-<tile.dataset.img>) to show the full-size photo. */
:root{
  --img-front:url("../images/hero-front.jpg");
  --img-fire:url("../images/hero-fire.jpg");
  --img-green:url("../images/hero-green.jpg");
  --img-night:url("../images/hero-night.jpg");
}

body{background:var(--shell)}

/* ============================================================
   4. HERO
   ============================================================ */
.hero{
  position:relative;min-height:min(88svh,760px);display:flex;align-items:flex-end;
  background-image:url("../images/hero-front.jpg");background-size:cover;background-position:center 62%;
  color:#fff;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(78deg,rgba(6,58,63,.9) 0%,rgba(6,58,63,.62) 42%,rgba(6,58,63,.1) 78%);
}
.hero-inner{position:relative;z-index:2;padding-block:clamp(3rem,9vw,6rem);max-width:44rem}
.hero h1{font-size:var(--t-hero);font-weight:600;text-wrap:balance}
.hero p{margin-top:1.2rem;font-size:clamp(1.02rem,1.5vw,1.2rem);color:rgba(255,255,255,.92);max-width:34rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero p,.hero-cta{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .hero p{animation-delay:.12s}
  .hero-cta{animation-delay:.22s}
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.facts{background:var(--aqua);color:var(--aqua-ink);display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.facts div:not(.wave){padding:1.4rem var(--pad) clamp(4.5rem,9vw,6.5rem);border-left:1px solid rgba(6,58,63,.22);font-size:.92rem}
.facts div:first-child{border-left:0}
.facts b{display:block;font-family:var(--display);font-size:1.08rem;font-weight:600;margin-bottom:.15rem}

/* ============================================================
   6. ABOUT
   ============================================================ */
.about{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.about-photo{
  background-image:url("../images/hero-green.jpg");background-size:cover;background-position:center;
  min-height:clamp(300px,42vw,520px);border-top:5px solid var(--aqua);
}
.about ul{list-style:none;margin:1.8rem 0 0;padding:0;border-top:1px solid var(--line)}
.about li{padding:.85rem 0;border-bottom:1px solid var(--line);display:flex;gap:1rem;align-items:baseline}
.about li b{font-family:var(--display);font-weight:600;color:var(--aqua-deep);min-width:8.5rem;flex:none}

/* ============================================================
   7. MENU TEASER — the full menu now lives on menu.html
   ============================================================ */
.teaser{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.teaser-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(224,178,105,.4)}
.teaser-list li{
  display:flex;align-items:baseline;gap:1rem;justify-content:space-between;
  padding:.85rem 0;border-bottom:1px solid rgba(224,178,105,.4);
}
.teaser-list span{font-family:var(--display);font-weight:600;font-size:1.05rem;color:#fff}
.teaser-list b{font-variant-numeric:tabular-nums;color:var(--gold-lift);white-space:nowrap}
.gratuity{margin-top:2rem;font-size:.88rem;color:rgba(255,255,255,.68)}

/* ============================================================
   8. GALLERY
   ============================================================ */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(130px,17vw,210px);gap:.75rem}
.tile{
  position:relative;border:0;padding:0;cursor:pointer;overflow:hidden;
  background-size:cover;background-position:center;color:#fff;text-align:left;font:inherit;
}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,58,63,.85),rgba(6,58,63,0) 55%)}
.tile figcaption{position:absolute;left:0;bottom:0;z-index:2;padding:1rem 1.1rem;font-size:.9rem;line-height:1.35}
.tile:hover figcaption,.tile:focus-visible figcaption{text-decoration:underline;text-underline-offset:3px}
.t1{grid-column:span 2;grid-row:span 2;background-image:url("../images/hero-front.jpg")}
.t2{grid-column:span 2;grid-row:span 1;background-image:url("../images/hero-fire.jpg")}
.t3{grid-column:span 1;grid-row:span 1;background-image:url("../images/hero-green.jpg")}
.t4{grid-column:span 1;grid-row:span 1;background-image:url("../images/hero-night.jpg")}

.lightbox{position:fixed;inset:0;z-index:300;display:none;background:rgba(6,58,63,.96);padding:clamp(1rem,4vw,3rem)}
.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}

/* ============================================================
   9. EVENTS
   Enquiry-form field styles (.card/.field/.row2/.send-row/
   .form-note) moved to base.css — the Experiences page reuses
   the same form and doesn't load home.css.
   ============================================================ */
.events{position:relative;background-image:url("../images/hero-night.jpg");background-size:cover;background-position:center;color:#fff}
.events::before{content:"";position:absolute;inset:0;background:rgba(6,58,63,.88)}
.events > .wrap{position:relative;z-index:2}
.events-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.offer{padding:1.3rem 0;border-top:1px solid rgba(31,168,174,.6)}
.offer h3{font-size:1.28rem;color:#fff;margin-bottom:.4rem}
.offer p{color:rgba(255,255,255,.78);margin:0;font-size:.97rem}

/* ============================================================
   RESPONSIVE — home-only grid collapses (shared chrome responsive
   rules — nav dropdown, footer grid — live in base.css)
   ============================================================ */
@media (max-width:900px){
  .about,.events-grid,.teaser{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .facts div:not(.wave){border-left:0;border-top:1px solid rgba(6,58,63,.22);padding-block:1rem}
  .facts div:nth-last-child(2){padding-bottom:4rem}
  .facts div:first-child{border-top:0}
  .mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(120px,32vw,190px)}
  .t1{grid-column:span 2;grid-row:span 2}
  .t2{grid-column:span 2}
  .t3,.t4{grid-column:span 1}
}