/* ============================================================
   Galveston Duck Tours — site styles (token overrides + components)
   base.css handles the framework; this file owns identity + signature.
   Vibe: vintage Galveston postcard meets modern Gulf-coast resort.
   ============================================================ */

/* ---- token overrides ---- */
:root{
  /* deliberate cool Gulf-mist surface (faint teal-grey), NOT a warm cream — crisp white cards on top */
  --bg:#eef4f4; --surface:#ffffff; --ink:#0e2b3d; --muted:#566873; --line:#dde6e6;
  --brand:#0c7777; --brand-ink:#ffffff; --brand-2:#f6b829; --accent:#c54a27;
  /* darker shades reserved for when teal/orange are used as TEXT on light surfaces */
  --brand-text:#0a6264; --accent-text:#b13e1f;
  --focus:#0c7777;
  --font-display:"Clash Display",system-ui,sans-serif;
  --font-body:"Figtree",system-ui,sans-serif;
  --navy:#0e2b3d;
  --sand-deep:#dfe9e7;
  --sh-2:0 8px 24px rgba(14,43,61,.12),0 24px 60px rgba(14,43,61,.16);
}

/* slightly warmer body link/selection */
::selection{background:color-mix(in srgb,var(--brand-2) 60%,transparent);color:var(--navy)}

/* tighten the display tracking the brief implies, stay above the -0.04em floor */
h1,.h1{letter-spacing:-.025em}

/* ---- brand mark in nav: small inline duck ---- */
.brandmark{flex:none;width:30px;height:30px}

/* ---- nav CTA shows phone; keep it punchy ---- */
.nav__cta{box-shadow:var(--sh-1)}

/* =========================================================
   HERO — full-viewport-ish, left-anchored navy scrim
   ========================================================= */
.hero{min-height:clamp(560px,86vh,860px);display:flex;align-items:center;color:#fff;background:var(--navy);padding:16px}
.hero__media img{filter:saturate(1.05)}
.hero__scrim{
  background:
    linear-gradient(90deg, rgba(8,28,40,.86) 0%, rgba(8,28,40,.64) 38%, rgba(8,28,40,.18) 70%, rgba(8,28,40,0) 100%),
    linear-gradient(0deg, rgba(8,28,40,.45) 0%, rgba(8,28,40,0) 40%);
}
.hero__inner{padding:48px 0 64px;max-width:44rem}
@media(min-width:760px){.hero__inner{padding-block:clamp(3rem,6vw,6rem) clamp(5rem,9vw,8rem)}}
.hero .eyebrow{color:var(--brand-2)}
.hero h1{color:#fff;text-shadow:0 2px 24px rgba(8,28,40,.35)}
/* non-pill, non-uppercase location/meta line under the headline (replaces the tracked-caps eyebrow) */
.hero__meta{margin-top:.9rem;font-weight:600;font-size:1.3rem;line-height:1.4;color:var(--brand-2);letter-spacing:0;text-transform:none;max-width:46ch}
.gallery-hero .hero__meta{color:var(--brand-2)}
.hero .lead{color:#fff;max-width:40ch;margin-top:1.1rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero__cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.7)}
.hero__cta .btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* sun badge tucked top-right of hero on wide screens */
.hero__since{
  position:absolute;top:clamp(1.5rem,4vw,2.6rem);right:clamp(1.5rem,4vw,3rem);z-index:1;
  display:none;width:118px;height:118px;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,var(--brand-2),#eaa61c);
  color:var(--navy);place-items:center;text-align:center;
  font-family:var(--font-display);font-weight:700;line-height:1.05;
  box-shadow:0 10px 30px rgba(14,43,61,.3);transform:rotate(-8deg)}
.hero__since span{display:block}
.hero__since b{font-size:1.5rem}
.hero__since small{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
@media(min-width:1040px){.hero__since{display:grid}}

/* wave divider sitting at the bottom of the hero, "splashing" into next section */
.wave{position:absolute;left:0;right:0;bottom:-1px;z-index:1;width:100%;height:clamp(48px,7vw,92px);display:block;color:var(--bg)}
.wave path{fill:currentColor}

/* =========================================================
   THE RIDE
   ========================================================= */
.ride{position:relative}
.ride__grid{display:grid;gap:clamp(1.6rem,4vw,3.2rem);align-items:center}
@media(min-width:860px){.ride__grid{grid-template-columns:1.05fr .95fr}}
.ride__media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);position:relative;aspect-ratio:4/3}
.ride__media img{width:100%;height:100%;object-fit:cover}
.ride__tag{position:absolute;left:1rem;bottom:1rem;background:var(--brand-2);color:var(--navy);
  font-weight:700;font-size:.75rem;padding:.5em 1em;border-radius:var(--r-pill);box-shadow:var(--sh-1)}
.ride ul{display:grid;gap:.7rem;margin-top:1.4rem;padding:0;list-style:none}
.ride li{display:flex;gap:.7rem;align-items:flex-start;font-weight:500;color:var(--ink)}
.ride li svg{flex:none;width:24px;height:24px;color:var(--brand);margin-top:2px}

/* =========================================================
   HOW IT WORKS — street -> sea sequence (the signature reveal)
   ========================================================= */
.steps{position:relative}
.steps__grid{display:grid;gap:clamp(1rem,2.5vw,1.6rem)}
@media(min-width:760px){.steps__grid{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2rem);overflow:hidden}
.step__n{font-family:var(--font-display);font-weight:700;font-size:3.6rem;line-height:1;color:var(--brand-text);
  -webkit-text-stroke:1px color-mix(in srgb,var(--brand-2) 55%,transparent)}
.step h3{margin:.5rem 0 .4rem}
.step p{color:var(--muted);max-width:34ch}
/* tinted "ground" at the foot of each step that deepens 1->3, land going to water */
.step::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px}
.step:nth-child(1)::after{background:var(--brand-2)}
.step:nth-child(2)::after{background:color-mix(in srgb,var(--brand-2) 45%,var(--brand))}
.step:nth-child(3)::after{background:var(--brand)}

/* =========================================================
   TICKETS
   ========================================================= */
.tickets__grid{display:grid;gap:clamp(1rem,2.5vw,1.6rem)}
@media(min-width:640px){.tickets__grid{grid-template-columns:repeat(3,1fr)}}
.price{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px 24px;text-align:center;display:flex;flex-direction:column;gap:.3rem}
.price__amt{font-family:var(--font-display);font-weight:700;font-size:clamp(2.6rem,5vw,3.4rem);color:var(--navy);line-height:1}
.price__amt span{font-size:1.4rem;vertical-align:.5rem;color:var(--brand);margin-right:.05em}
.price__label{font-weight:700;font-size:1.3rem}
.price__sub{color:var(--muted);font-size:.75rem}
.price--feature{background:var(--navy);color:#fff;border-color:transparent}
.price--feature .price__amt,.price--feature .price__label{color:#fff}
.price--feature .price__amt span{color:var(--brand-2)}
.price--feature .price__sub{color:rgba(255,255,255,.72)}

.booknote{margin-top:clamp(1rem,2.5vw,1.6rem);background:color-mix(in srgb,var(--brand) 8%,var(--surface));
  border:1px solid color-mix(in srgb,var(--brand) 24%,var(--line));border-radius:var(--r-lg);
  padding:28px 24px;display:grid;gap:1rem}
@media(min-width:760px){.booknote{grid-template-columns:auto 1fr;align-items:center;gap:1.6rem}}
.booknote svg{width:48px;height:48px;color:var(--brand)}
.booknote h3{margin-bottom:.3rem}
.booknote p{color:var(--ink);margin:0}

/* =========================================================
   GALLERY TEASER STRIP
   ========================================================= */
.strip{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
@media(min-width:760px){.strip{grid-template-columns:repeat(4,1fr)}}
.strip a{display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:1/1;position:relative;box-shadow:var(--sh-1)}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.strip a:hover img{transform:scale(1.06)}

/* =========================================================
   VISIT (info + FAQ)
   ========================================================= */
.visit__grid{display:grid;gap:clamp(1.6rem,4vw,3rem)}
@media(min-width:860px){.visit__grid{grid-template-columns:1fr 1fr}}
.infolist{display:grid;gap:1.1rem;margin-top:1.4rem}
.infolist .row{display:flex;gap:.8rem;align-items:flex-start}
.infolist svg{flex:none;width:22px;height:22px;color:var(--brand);margin-top:3px}
.infolist b{display:block;font-weight:700}
.infolist a{color:var(--brand-text);font-weight:600}
.infolist a:hover{text-decoration:underline}

details.faq{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  padding:0 1.2rem;margin-bottom:.7rem;transition:border-color .2s}
details.faq[open]{border-color:color-mix(in srgb,var(--brand) 35%,var(--line))}
details.faq summary{list-style:none;cursor:pointer;font-family:var(--font-display);font-weight:600;
  font-size:1.3rem;padding:1.05rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"";flex:none;width:13px;height:13px;border-right:2.5px solid var(--brand);
  border-bottom:2.5px solid var(--brand);transform:rotate(45deg);transition:transform .25s var(--ease)}
details.faq[open] summary::after{transform:rotate(-135deg)}
details.faq p{padding:0 0 1.1rem;color:var(--muted);margin:0}

/* =========================================================
   HERITAGE NOTE (small B&W DUKW)
   ========================================================= */
.heritage{display:grid;gap:1.4rem;align-items:center;background:var(--sand-deep);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 24px}
@media(min-width:680px){.heritage{grid-template-columns:auto 1fr;gap:2rem}}
.heritage img{width:clamp(180px,40vw,260px);border-radius:var(--r);filter:sepia(.15);box-shadow:var(--sh-1)}
.heritage p{color:var(--ink);margin:0}

/* =========================================================
   GALLERY PAGE
   ========================================================= */
.gallery-hero{background:var(--navy);color:#fff}
.gallery-hero .eyebrow{color:var(--brand-2)}
.gallery-hero h1{color:#fff}
.gallery-hero .lead{color:#fff}

.masonry{columns:1;column-gap:clamp(.8rem,2vw,1.2rem)}
@media(min-width:600px){.masonry{columns:2}}
@media(min-width:980px){.masonry{columns:3}}
.gitem{break-inside:avoid;margin-bottom:clamp(.8rem,2vw,1.2rem);border-radius:var(--r);overflow:hidden;
  position:relative;box-shadow:var(--sh-1);background:var(--line)}
.gitem img{width:100%;height:auto;display:block;transition:transform .55s var(--ease)}
.gitem:hover img{transform:scale(1.05)}
.gitem figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .9rem .8rem;
  color:#fff;font-size:.75rem;font-weight:600;
  background:linear-gradient(0deg,rgba(8,28,40,.82),rgba(8,28,40,0))}
/* small source images (~500-700px) are capped by the column width and never blown up full-bleed,
   so they stay crisp; only the large galv-* + boat-splash images get the wider columns naturally. */

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact__grid{display:grid;gap:clamp(1.8rem,4vw,3.2rem)}
@media(min-width:860px){.contact__grid{grid-template-columns:1fr 1fr}}
.callcard{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:clamp(1.6rem,4vw,2.6rem)}
.callcard h2{color:#fff}
.callcard .lead{color:#fff}
.callcard .btn--big{margin-top:1.4rem;font-size:1.3rem;min-height:62px}
.callcard .infolist b{color:#fff}
.callcard .infolist a{color:var(--brand-2)}
.callcard .infolist svg{color:var(--brand-2)}
.callcard .infolist .muted{color:rgba(255,255,255,.7)}
.formwrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:36px 28px}

/* =========================================================
   shared section eyebrow color tweak + footer specifics
   ========================================================= */
.foot__grid{display:grid;gap:2rem}
@media(min-width:760px){.foot__grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot__brand{font-family:var(--font-display);font-weight:700;font-size:1.3rem;display:flex;align-items:center;gap:.55rem}
.foot__brand svg{width:34px;height:34px}
.site-footer h3{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-2);margin-bottom:.9rem}
.site-footer .foot__links{display:grid;gap:.5rem}
.site-footer .foot__bottom{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;align-items:center;font-size:.75rem}

/* callbar accent action */
.callbar .btn--accent{color:#fff}

/* reduced motion: kill the strip/gallery zoom transl\ */
@media (prefers-reduced-motion:reduce){
  .strip img,.gitem img,.ride__media img{transition:none}
  .strip a:hover img,.gitem:hover img{transform:none}
}