/* =========================================================================
   home.css — homepage sections + shared page-hero for inner pages
   ========================================================================= */

/* ---------- HERO (WebGL water) ---------- */
.hero{ position:relative; isolation:isolate; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__poster,#hero-gl{ position:absolute; inset:0; width:100%; height:100%; }
.hero__poster{
  object-fit:cover; z-index:0;
  background:
    radial-gradient(120% 80% at 70% 0%, rgba(31,163,155,.22), transparent 55%),
    radial-gradient(90% 70% at 20% 100%, rgba(224,178,76,.16), transparent 60%),
    linear-gradient(180deg, #061018 0%, #0A1A24 45%, #0c2531 100%);
}
#hero-gl{ z-index:1; opacity:0; transition:opacity 1.2s ease; }
#hero-gl.ready{ opacity:1; }
.hero__scrim{ position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, rgba(6,16,24,.5) 0%, transparent 30%, rgba(6,16,24,.55) 78%, rgba(8,21,29,.96) 100%); pointer-events:none; }
.hero__inner{ position:relative; z-index:3; width:100%; padding-bottom:clamp(3rem,8vh,7rem); padding-top:9rem; }
.hero__eyebrow{ margin-bottom:1.4rem; }
.hero h1{ max-width:16ch; margin-bottom:1.5rem; }
.hero h1 .word{ display:inline-block; }
.hero__sub{ max-width:48ch; font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--foam); opacity:.9; margin-bottom:2.2rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:2.2rem; margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line); }
.hero__meta div{ display:flex; flex-direction:column; }
.hero__meta b{ font-family:var(--serif); font-size:1.7rem; color:var(--gold); font-weight:500; }
.hero__meta span{ font-size:.82rem; color:var(--slate); letter-spacing:.04em; }
.hero__scroll{ position:absolute; right:var(--gutter); bottom:2rem; z-index:3; writing-mode:vertical-rl; font-size:.72rem; letter-spacing:.25em; text-transform:uppercase; color:var(--slate); display:flex; align-items:center; gap:.8rem; }
.hero__scroll::after{ content:""; width:1px; height:46px; background:linear-gradient(var(--gold),transparent); animation:scrollpulse 2s var(--ease) infinite; }
@keyframes scrollpulse{ 0%,100%{ transform:scaleY(.4); opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } }

/* ---------- marquee strip ---------- */
.marquee{ border-block:1px solid var(--line); background:var(--panel); overflow:hidden; padding-block:1.1rem; }
.marquee__track{ display:flex; gap:3rem; white-space:nowrap; width:max-content; animation:marquee 28s linear infinite; }
.marquee__track span{ font-family:var(--serif); font-size:1.15rem; color:var(--slate); display:inline-flex; align-items:center; gap:3rem; }
.marquee__track span::after{ content:"◆"; color:var(--gold); font-size:.7rem; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* ---------- trips ---------- */
.trip-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.trip-card{ display:flex; flex-direction:column; min-height:380px; padding:0; }
.trip-card__media{ height:200px; position:relative; overflow:hidden; background:linear-gradient(160deg,#0c2531,#0e2a38); }
.trip-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.trip-card:hover .trip-card__media img{ transform:scale(1.06); }
.trip-card__media .tag{ position:absolute; top:1rem; left:1rem; z-index:2; }
.trip-card__body{ padding:1.6rem 1.6rem 1.8rem; display:flex; flex-direction:column; flex:1; }
.trip-card__body h3{ margin-bottom:.6rem; }
.trip-card__body p{ color:var(--slate); font-size:.96rem; flex:1; }
.trip-card__species{ font-size:.82rem; color:var(--teal-bright); margin-top:1rem; font-weight:500; }
.trip-card__foot{ margin-top:1.4rem; display:flex; align-items:center; justify-content:space-between; }
.trip-card__price{ font-family:var(--serif); font-size:1.2rem; color:var(--gold); }
.trip-card__price small{ font-family:var(--sans); font-size:.72rem; color:var(--slate); display:block; }
.arrow-link{ display:inline-flex; align-items:center; gap:.4rem; color:var(--teal-bright); font-weight:600; font-size:.9rem; }
.arrow-link svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.arrow-link:hover svg{ transform:translateX(4px); }

/* ---------- split feature (captain) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split__media{ position:relative; border-radius:var(--r-card); overflow:hidden; aspect-ratio:4/5; background:var(--panel-2); }
.split__media img{ width:100%; height:100%; object-fit:cover; }
.split__media .badge{ position:absolute; bottom:1.2rem; left:1.2rem; right:1.2rem; background:rgba(8,21,29,.78); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:12px; padding:1rem 1.2rem; }
.split__media .badge b{ font-family:var(--serif); color:var(--gold); font-size:1.1rem; }
.split__media .badge span{ display:block; font-size:.85rem; color:var(--slate); }
.feature-list{ margin-top:1.8rem; display:grid; gap:1rem; }
.feature-list li{ display:flex; gap:.9rem; align-items:flex-start; }
.feature-list svg{ width:22px; height:22px; color:var(--teal-bright); flex:none; margin-top:2px; }
.feature-list b{ display:block; }
.feature-list span{ color:var(--slate); font-size:.92rem; }

/* ---------- species ---------- */
.species-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.species-chip{ position:relative; border-radius:var(--r-card); overflow:hidden; aspect-ratio:1/1; background:var(--panel-2); border:1px solid var(--line); display:flex; align-items:flex-end; padding:1rem; transition:transform .4s var(--ease), border-color .4s; }
.species-chip:hover{ transform:translateY(-5px); border-color:var(--gold); }
.species-chip img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; transition:opacity .4s, transform .6s var(--ease); }
.species-chip:hover img{ opacity:.8; transform:scale(1.05); }
.species-chip__scrim{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(8,21,29,.9)); }
.species-chip b{ position:relative; z-index:2; font-family:var(--serif); font-size:1.15rem; }
.species-chip span{ position:relative; z-index:2; display:block; font-size:.74rem; color:var(--teal-bright); letter-spacing:.04em; }

/* ---------- stats band ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.stats div{ padding:2rem 1.5rem; text-align:center; border-right:1px solid var(--line); position:relative; }
.stats div:last-child{ border-right:0; }
.stats b{ display:block; font-family:var(--serif); font-size:clamp(2rem,4vw,3rem); color:var(--gold); line-height:1; margin-bottom:.5rem; }
.stats span{ font-size:.85rem; color:var(--slate); letter-spacing:.03em; }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; counter-reset:step; }
.step{ position:relative; padding:2rem 1.6rem; }
.step__num{ font-family:var(--serif); font-size:3rem; color:var(--teal); opacity:.4; line-height:1; }
.step h3{ margin:.6rem 0 .6rem; }
.step p{ color:var(--slate); font-size:.95rem; }

/* ---------- reviews ---------- */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.review{ padding:1.9rem; display:flex; flex-direction:column; gap:1rem; }
.review__stars{ color:var(--gold); letter-spacing:.15em; font-size:1rem; }
.review p{ font-family:var(--serif); font-size:1.12rem; line-height:1.5; color:var(--foam); flex:1; }
.review__by{ display:flex; align-items:center; gap:.8rem; }
.review__by .av{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--gold)); display:flex; align-items:center; justify-content:center; font-weight:700; color:#04201e; flex:none; }
.review__by b{ display:block; font-size:.92rem; }
.review__by span{ font-size:.8rem; color:var(--slate); }

/* ---------- areas ---------- */
.area-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.area-card{ padding:1.5rem 1.6rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.area-card b{ font-family:var(--serif); font-size:1.25rem; }
.area-card span{ font-size:.85rem; color:var(--slate); display:block; }

/* ---------- gallery teaser ---------- */
.gallery-strip{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:.8rem; }
.gallery-strip a{ position:relative; overflow:hidden; border-radius:12px; background:var(--panel-2); }
.gallery-strip a:nth-child(1){ grid-row:span 2; }
.gallery-strip a:nth-child(4){ grid-row:span 2; }
.gallery-strip img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.gallery-strip a:hover img{ transform:scale(1.08); }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; border-radius:clamp(16px,3vw,28px); padding:clamp(3rem,7vw,6rem) clamp(1.5rem,5vw,5rem); text-align:center; background:linear-gradient(160deg,#0e2a38,#0a1a24); border:1px solid var(--line-strong); }
.cta-band h2{ max-width:18ch; margin:0 auto 1.2rem; }
.cta-band p{ max-width:52ch; margin:0 auto 2rem; color:var(--slate); }
.cta-band .hero__actions{ justify-content:center; }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin-inline:auto; }
.faq details{ border-bottom:1px solid var(--line); padding:1.3rem 0; }
.faq summary{ display:flex; justify-content:space-between; align-items:center; gap:1rem; cursor:pointer; font-family:var(--serif); font-size:1.15rem; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.5rem; color:var(--teal-bright); transition:transform .3s; flex:none; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ color:var(--slate); padding-top:.9rem; max-width:68ch; }

/* ---------- page hero (inner pages) ---------- */
.page-hero{ position:relative; padding-top:clamp(8rem,16vh,11rem); padding-bottom:clamp(3rem,6vw,4.5rem); overflow:hidden; isolation:isolate; }
.page-hero::before{ content:""; position:absolute; inset:0; z-index:-1; background:
  radial-gradient(80% 120% at 80% -10%, rgba(31,163,155,.18), transparent 55%),
  radial-gradient(60% 90% at 0% 110%, rgba(224,178,76,.12), transparent 60%),
  linear-gradient(180deg,#061018,#0A1A24); }
.page-hero h1{ max-width:18ch; margin:.8rem 0 1rem; }
.page-hero p{ max-width:60ch; color:var(--slate); font-size:1.1rem; }
.page-hero .crumb{ padding-top:0; }

/* ---------- quick answer / key facts (AEO) ---------- */
.quick-answer{ border-left:3px solid var(--teal); background:rgba(31,163,155,.07); border-radius:0 12px 12px 0; padding:1.4rem 1.6rem; margin-bottom:2rem; }
.quick-answer b{ color:var(--teal-bright); display:block; margin-bottom:.4rem; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; }
.facts-table{ width:100%; border-collapse:collapse; margin:1.5rem 0; }
.facts-table th,.facts-table td{ text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--line); font-size:.95rem; }
.facts-table th{ color:var(--slate); font-weight:600; width:38%; }
.facts-table tr:hover{ background:rgba(31,163,155,.05); }

/* ---------- prose ---------- */
.prose{ max-width:760px; }
.prose h2{ margin:2.4rem 0 1rem; }
.prose h3{ margin:1.8rem 0 .7rem; }
.prose p{ color:var(--slate); margin-bottom:1.1rem; }
.prose ul{ margin:1rem 0 1.4rem; display:grid; gap:.6rem; }
.prose ul li{ position:relative; padding-left:1.6rem; color:var(--slate); }
.prose ul li::before{ content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.toc{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.3rem 1.5rem; margin-bottom:2rem; }
.toc b{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); }
.toc a{ display:block; padding:.35rem 0; color:var(--teal-bright); font-size:.95rem; }

/* ---------- gallery page ---------- */
.gallery-full{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.gallery-full a{ position:relative; overflow:hidden; border-radius:12px; aspect-ratio:4/3; background:var(--panel-2); }
.gallery-full img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.gallery-full a:hover img{ transform:scale(1.07); }

/* ---------- responsive ---------- */
@media (max-width:960px){
  .trip-grid,.species-grid,.stats,.steps,.reviews,.area-list,.gallery-strip,.gallery-full{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; }
  .split__media{ aspect-ratio:16/10; max-height:440px; }
  .stats div:nth-child(2){ border-right:0; }
  .stats div:nth-child(-n+2){ border-bottom:1px solid var(--line); }
}
@media (max-width:600px){
  .trip-grid,.species-grid,.stats,.steps,.reviews,.area-list,.gallery-strip,.gallery-full{ grid-template-columns:1fr; }
  .gallery-strip{ grid-auto-rows:160px; }
  .gallery-strip a:nth-child(1),.gallery-strip a:nth-child(4){ grid-row:span 1; }
  .stats div{ border-right:0; border-bottom:1px solid var(--line); }
  .hero__meta{ gap:1.4rem; }
}