/* Atlantic Road Seaside Housing — boat rental page
   Loads after css/main.css (tokens, base, header, footer). */
/* Page override: boats keeps its warmer sand background */
body{background:var(--sand)}
img{max-width:100%;display:block}
h2 em,h1 em{font-style:italic;color:var(--brass-ink)} /* light bg default */
.hero h1 em,.gtk h2 em,.cta h2 em{color:var(--brass-soft)} /* dark sections */

/* ---------- header ---------- */

/* overlay nav */

/* ---------- hero ---------- */
.hero{
  position:relative;height:88vh;min-height:560px;
  background:var(--petrol);
  display:flex;align-items:flex-end;color:var(--sand);
  isolation:isolate;
}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(19,43,58,.45),rgba(19,43,58,.65));pointer-events:none;z-index:1}
.hero .img-slot{position:absolute;inset:0;z-index:0}
.hero-inner{width:100%;padding:0 40px 72px;max-width:1240px;margin:0 auto;position:relative;z-index:2}
.breadcrumb{font-family:var(--accent);letter-spacing:.28em;text-transform:uppercase;font-size:10px;color:var(--brass-soft);margin-bottom:22px}
.breadcrumb a{color:var(--brass-soft)}
.breadcrumb a:hover{color:var(--sand)}
.hero h1{font-size:clamp(38px,6vw,72px);max-width:15ch}
.hero .lede{margin-top:18px;max-width:520px;font-size:16px;color:rgba(237,231,220,.85)}

/* ---------- image slots (placeholders) ---------- */

/* ---------- intro ---------- */
.intro{padding:110px 0 80px;text-align:center}
.intro h2{font-size:clamp(28px,3.6vw,44px);max-width:22ch;margin:0 auto}
.intro p{max-width:600px;margin:24px auto 0;color:var(--slate);font-size:15.5px}

/* ---------- fleet ---------- */
.fleet{padding:0 0 40px}
.boat{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:64px;align-items:center;padding:64px 0;border-top:1px solid rgba(19,43,58,.12);
}
.boat:first-of-type{border-top:none}
.boat:nth-of-type(even){direction:rtl}
.boat:nth-of-type(even)>*{direction:ltr}
.boat .img-slot{aspect-ratio:4/3}
.boat figure img{aspect-ratio:4/3;width:100%;object-fit:cover}
.boat-index{font-family:var(--accent);letter-spacing:.35em;text-transform:uppercase;font-size:10px;color:var(--brass-ink);margin-bottom:14px;display:block}
.boat h3{font-size:clamp(26px,3vw,36px);margin-bottom:6px}
.boat .engine{font-family:var(--accent);letter-spacing:.24em;text-transform:uppercase;font-size:11px;color:var(--slate);margin-bottom:20px}
.boat p{color:var(--slate);font-size:15px;max-width:46ch}
.rates{
  display:flex;gap:0;margin:28px 0 20px;border:1px solid rgba(19,43,58,.15);
}
.rates .rate{flex:1;padding:18px 22px}
.rates .rate + .rate{border-left:1px solid rgba(19,43,58,.15)}
.rates .amount{font-family:var(--display);font-size:30px;line-height:1;color:var(--fjord)}
.rates .amount small{font-size:15px;color:var(--brass-ink)}
.rates .per{font-family:var(--accent);letter-spacing:.26em;text-transform:uppercase;font-size:10px;color:var(--slate);margin-top:8px;display:block}
.licence-tag{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--accent);letter-spacing:.2em;text-transform:uppercase;font-size:10px;color:var(--slate);
}
.licence-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brass);flex:none}
.licence-tag.free::before{background:#5E8C6A}
.boat .btn-line{margin-top:26px}
.btn--light{border-color:var(--sand);color:var(--sand)}
.btn--light:hover{background:var(--sand);color:var(--fjord)}

/* ---------- good to know ---------- */
.gtk{background:var(--petrol);color:var(--sand);padding:96px 0}
.gtk .eyebrow{color:var(--brass-soft)}
.gtk h2{font-size:clamp(28px,3.4vw,42px);max-width:20ch}
.gtk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:56px}
.gtk-item h3{font-size:20px;margin-bottom:12px;color:var(--sand)}
.gtk-item p{color:rgba(237,231,220,.75);font-size:14.5px}
.licence-note{
  margin-top:56px;padding:28px 32px;border:1px solid rgba(237,231,220,.25);
  display:flex;gap:22px;align-items:flex-start;
}
.licence-note .mark{font-family:var(--display);font-size:34px;color:var(--brass-soft);line-height:1}
.licence-note p{color:rgba(237,231,220,.8);font-size:14.5px;max-width:75ch}

/* ---------- out to the banks (sea chart) ----------
   Sticky chart on the left, four leg cards scrolling past on the right.
   The chart itself is drawn by css/chart.css (shared with index.html); all
   this block does is choose which layers show, size the sticky column and
   style the legs. Everything animated is gated on .banks.is-enhanced, which
   js/boats.js adds — without JS the route is complete and all four legs read
   at full strength. */
.banks{background:var(--fjord);color:var(--sand);padding:96px 0 80px}
.banks-head{text-align:center}
.banks-head .eyebrow{color:var(--brass)} /* dark bg — brass over brass-ink */
.banks-head h2{font-size:clamp(28px,4vw,48px);max-width:18ch;margin:0 auto}
.banks-head h2 em{color:var(--brass-soft)}
.banks-head p{max-width:56ch;margin:20px auto 0;color:rgba(237,231,220,.75);font-size:15px}

.banks-scroll{
  position:relative;
  max-width:1240px;
  margin:0 auto;
  padding:0 clamp(20px,4vw,56px);
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); /* same rhythm as .boat */
  gap:64px;
}
/* align-self:start is load-bearing twice over: a stretched grid item fills the
   row and has nothing to slide inside, and a sticky box that is 100svh tall
   would unstick a full viewport before the last leg is done, dropping the
   chart out from under leg four. Content height + a top offset clear of the
   fixed header keeps it pinned the whole way. */
.banks-sticky{
  position:sticky;
  top:7rem;
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
.seachart .chart{display:block;width:100%;height:auto}
/* This is the boat's chart: the driving route, the car marker and the road
   waypoints belong to #journey on index.html, not here. The jetty
   (.chart-wp--home), the fishing-grounds mark (data-ch 6) and the Grip
   arrow stay. */
.seachart .chart-route,
.seachart .chart-route-ghost,
.seachart .chart-you,
.seachart .chart-wp:not(.chart-wp--home),
.seachart .chart-detour:not([data-ch="6"]):not(.chart-detour--edge){display:none}

/* The readout only tells the truth once js/boats.js is tracking scroll —
   without it, it would sit frozen on "The jetty · 0 km" beside leg four. */
.banks-readout{display:none}
.banks.is-enhanced .banks-readout{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  gap:.1rem .8rem;
  border-top:1px solid rgba(237,231,220,.16);
  padding-top:.55rem;
}
.banks-place{
  font-family:var(--accent);
  font-size:.7rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--brass-soft);
}
.banks-count{
  font-family:var(--accent);
  font-size:.66rem;
  letter-spacing:.3em;
  color:rgba(237,231,220,.62);
  text-align:right;
}
.banks-dist{
  grid-column:1 / -1;
  font-size:.86rem;
  color:rgba(237,231,220,.78);
  font-variant-numeric:tabular-nums;
}
.banks-dist b{font-weight:500;color:var(--linen)}

.banks-legs{list-style:none}
.banks-leg{
  min-height:78vh;
  min-height:78svh;
  display:flex;
  align-items:center;
  padding:3rem 0;
}
/* Full height on the last leg too: the sticky box unpins one box-height before
   the scroller ends, and 78svh puts that moment safely after leg four has been
   read rather than while it is being read. */
.banks-leg:last-child{padding-bottom:0}
.banks-card{
  position:relative;
  border-left:1px solid var(--brass);
  padding:.4rem 0 .4rem 2rem;
}
.banks-card::after{
  content:attr(data-num);
  position:absolute;
  top:-.6rem;
  right:0;
  font-family:var(--accent);
  font-size:3rem;
  line-height:1;
  font-weight:300;
  color:rgba(177,138,84,.28);
  pointer-events:none;
}
.banks-card .eyebrow{display:block;color:var(--brass);margin-bottom:.9rem;margin-right:3.2rem}
.banks-card h3{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.9rem}
.banks-card p{color:rgba(237,231,220,.82);font-size:15px}
.banks-card p + p{margin-top:.9rem}
.banks-km{
  font-family:var(--accent);
  font-size:.72rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--brass-soft);
  margin-bottom:1rem;
}
.banks-boats{list-style:none;display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;margin-top:1.5rem}
.banks-boats a{
  font-family:var(--accent);
  font-size:.74rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--linen);
  border-bottom:1px solid var(--brass);
  padding-bottom:.3em;
  transition:color .3s var(--ease);
}
.banks-boats a:hover{color:var(--brass-soft)}

/* Enhanced only: the leg you are on is the one at full strength. */
.banks.is-enhanced .banks-card{opacity:.4;transition:opacity .6s var(--ease)}
.banks.is-enhanced .banks-leg.is-current .banks-card{opacity:1}

/* ---------- fishing rec ---------- */
.fishing{padding:100px 0}
.fishing-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.fishing .img-slot{aspect-ratio:3/4;max-height:520px}
.fishing figure img{aspect-ratio:3/4;max-height:520px;width:100%;object-fit:cover}
.fishing h2{font-size:clamp(28px,3.4vw,42px)}
.fishing p{color:var(--slate);font-size:15px;margin-top:18px;max-width:48ch}

/* ---------- CTA ---------- */
.cta{background:var(--fjord);color:var(--sand);padding:110px 0;text-align:center}
.cta .eyebrow{color:var(--brass)} /* dark bg — brass over brass-ink */
.cta h2{font-size:clamp(28px,4vw,48px);max-width:22ch;margin:0 auto}
.cta p{max-width:520px;margin:20px auto 36px;color:rgba(237,231,220,.75);font-size:15px}

/* ---------- footer ---------- */

/* ---------- reveal ---------- */

/* ---------- responsive ---------- */
@media (max-width:820px){
  .wrap{padding:0 24px}
  .hero-inner{padding:0 24px 56px}
  .boat{grid-template-columns:1fr;gap:32px;padding:48px 0}
  .boat:nth-of-type(even){direction:ltr}
  .gtk-grid{grid-template-columns:1fr;gap:32px}
  .fishing-layout{grid-template-columns:1fr;gap:36px}
  .rates{flex-direction:column}
  .rates .rate + .rate{border-left:none;border-top:1px solid rgba(19,43,58,.15)}
  /* One column: the chart pins under the fixed header, legs scroll beneath it,
     so it needs its own solid ground to cover them. */
  .banks-scroll{grid-template-columns:1fr;gap:0}
  .banks-sticky{
    top:3.2rem;
    height:auto;
    z-index:2;
    background:var(--fjord);
    padding:1rem 0 .9rem;
    gap:.6rem;
  }
  .banks-place{font-size:.6rem;letter-spacing:.2em}
  .banks-dist{font-size:.76rem}
  .banks-leg{min-height:auto;padding:2.4rem 0}
  .banks-card{padding-left:1.4rem}
  .banks-card::after{font-size:2.4rem}
}

@media (prefers-reduced-motion:reduce){
  .banks.is-enhanced .banks-card{opacity:1}
}