/* =========================================================
   Boat Tours landing page — page-scoped styles only.
   Reuses the shared design tokens from style.css (colors, spacing,
   fonts, buttons, etc.) but every new component class here is
   prefixed "bt-" and lives only on boat-tours.html. Nothing in
   style.css is modified for this page.
   ========================================================= */

/* ---------- Page-specific header (distinct from the CK Home Watch
   site nav on purpose — this page is meant to feel like its own
   private boat-tour microsite, not a page inside the Home Watch
   site menu) ---------- */
.bt-header{
  background:var(--white);
  border-bottom:var(--border-w) solid var(--border);
  position:sticky;
  top:0;
  z-index:500;
}
.bt-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-5);
  padding-block:.85rem;
}
.bt-brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  flex-shrink:0;
}
.bt-brand svg{width:30px;height:30px;stroke:var(--navy-800); flex-shrink:0;}
.bt-brand-text{
  font-family:var(--font-head);
  font-weight:600;
  font-size:1.08rem;
  line-height:1.15;
  color:var(--navy-800);
}
.bt-brand-text span{
  display:block;
  font-family:var(--font-body);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-top:1px;
}
.bt-inpage-nav{display:flex; gap:var(--sp-6);}
.bt-inpage-nav a{
  text-decoration:none;
  font-weight:600;
  font-size:.92rem;
  color:var(--ink);
  padding:.4rem 0;
  border-bottom:2px solid transparent;
}
.bt-inpage-nav a:hover{color:var(--navy-800); border-bottom-color:var(--gold-600);}
.bt-header-actions{display:flex; align-items:center; gap:var(--sp-4);}
.bt-header-phone{
  display:flex;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
  font-weight:700;
  color:var(--navy-800);
  font-size:.92rem;
  white-space:nowrap;
}
.bt-header-phone svg{width:17px;height:17px;stroke:var(--gold-600); flex-shrink:0;}

@media (max-width:860px){
  .bt-inpage-nav{display:none;}
}
@media (max-width:520px){
  .bt-header-phone{display:none;}
  .bt-header-actions .btn{font-size:.85rem; padding:.75rem 1.1rem;}
}
@media (max-width:400px){
  .bt-brand-text{font-size:.92rem;}
  .bt-brand svg{width:24px; height:24px;}
}

/* ---------- Hero (real <img>, not CSS background, so the LCP image
   can carry fetchpriority="high" and skip lazy-loading) ---------- */
.bt-hero{position:relative; color:var(--white); background:var(--navy-800); overflow:hidden;}
.bt-hero-media{position:absolute; inset:0; overflow:hidden;}
.bt-hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 42%; display:block;}
/* On narrow phones the hero box gets much taller relative to its width
   (stacked heading + two full-width buttons need more vertical room),
   so a horizontally-centered crop pushes the boat — which sits right
   of center in the source photo — almost entirely out of frame.
   Shifting the focal point right (and slightly higher) keeps the boat
   in view; a single "center" position can't serve both shapes well. */
@media (max-width:600px){
  .bt-hero-media img{object-position:70% 64%;}
}
.bt-hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(11,18,32,.90) 0%, rgba(11,18,32,.66) 34%, rgba(11,18,32,.28) 60%, rgba(11,18,32,.10) 82%);
}
.bt-hero-inner{position:relative; z-index:2; padding-block:var(--sp-11) var(--sp-10); max-width:680px;}
.bt-hero .eyebrow{color:var(--gold-400);}
.bt-hero .eyebrow::before{background:var(--gold-400);}
.bt-hero h1{color:var(--white); margin-bottom:var(--sp-4);}
.bt-hero p.lede{color:#dfe3ea; margin-bottom:var(--sp-3); max-width:56ch;}
.bt-hero-line{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--gold-400);
  margin-bottom:var(--sp-6);
}
.bt-hero-actions{display:flex; flex-wrap:wrap; gap:var(--sp-4);}
/* The hero and final-CTA buttons carry long call-to-action copy
   (e.g. "Call or Text to Check Availability — 239-201-5930"). The
   shared .btn class sets white-space:nowrap, which is fine at normal
   widths but overflows on narrow phones — so these two CTAs opt back
   into wrapping and center their text instead of clipping. */
.bt-hero-actions .btn,
.bt-final-cta-actions .btn{white-space:normal; text-align:center; line-height:1.3;}
@media (max-width:640px){
  .bt-hero-inner{padding-block:var(--sp-9) var(--sp-8);}
  .bt-hero-actions{flex-direction:column; align-items:stretch;}
  .bt-hero-actions .btn{width:100%;}
}

/* ---------- Cruise comparison cards ---------- */
.bt-cruise-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-7);}
@media (max-width:860px){ .bt-cruise-grid{grid-template-columns:1fr;} }

.bt-cruise-card{
  background:var(--white);
  border:var(--border-w) solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
}
.bt-cruise-photo{aspect-ratio:4/3; overflow:hidden; background:var(--navy-800);}
.bt-cruise-photo img{width:100%; height:100%; object-fit:cover;}
.bt-cruise-body{padding:var(--sp-6); display:flex; flex-direction:column; flex:1;}
.bt-cruise-duration{
  display:inline-block;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--gold-600);
  margin-bottom:var(--sp-2);
}
.bt-cruise-body h3{margin-bottom:var(--sp-3);}
.bt-cruise-body p{color:var(--ink-soft); font-size:.96rem;}
.bt-cruise-ctas{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:auto; padding-top:var(--sp-4);}
.bt-cruise-ctas .btn{font-size:.9rem; padding:.75rem 1.2rem;}

/* ---------- Editorial photo wall ---------- */
.bt-photo-wall{
  columns:4 260px;
  column-gap:var(--sp-5);
}
.bt-photo-wall figure{
  break-inside:avoid;
  margin:0 0 var(--sp-5);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  background:var(--navy-800);
}
.bt-photo-wall img{width:100%; height:auto; display:block;}
.bt-photo-wall figcaption{
  padding:.6rem .8rem;
  font-size:.78rem;
  color:var(--ink-faint);
  background:var(--white);
}
@media (max-width:640px){
  .bt-photo-wall{columns:2 160px;}
}

/* ---------- Subtle polaroid treatment (used sparingly — 3 photos) ---------- */
.bt-polaroid{
  display:inline-block;
  background:var(--white);
  padding:.6rem .6rem 1.6rem;
  box-shadow:0 8px 18px rgba(16,26,42,.16);
  max-width:280px;
}
.bt-polaroid img{width:100%; height:auto; display:block;}
.bt-polaroid figcaption{
  font-family:var(--font-head);
  font-style:italic;
  font-size:.82rem;
  color:var(--ink-soft);
  text-align:center;
  margin-top:.5rem;
}
.bt-polaroid--rot-l{transform:rotate(-2.5deg);}
.bt-polaroid--rot-r{transform:rotate(2deg);}
.bt-polaroid--rot-r2{transform:rotate(-1.5deg);}

.bt-wildlife-grid{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-7);
  justify-content:center;
  align-items:flex-start;
  padding-block:var(--sp-4);
}

/* ---------- The Boat section ---------- */
.bt-boat-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-9); align-items:center;}
.bt-boat-grid img{border-radius:var(--radius-md); box-shadow:var(--shadow-md); width:100%; height:auto;}
@media (max-width:900px){ .bt-boat-grid{grid-template-columns:1fr; gap:var(--sp-6);} }

/* ---------- Reviews ---------- */
.bt-review-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-6);}
@media (max-width:760px){ .bt-review-grid{grid-template-columns:1fr;} }
.bt-review-card{
  background:var(--white);
  border:var(--border-w) solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--sp-6);
}
.bt-stars{color:var(--gold-600); font-size:1rem; letter-spacing:.15em; margin-bottom:var(--sp-3);}
.bt-review-card p{color:var(--ink-soft); font-size:.96rem; margin-bottom:var(--sp-3);}
.bt-review-name{font-weight:700; color:var(--navy-800); font-size:.9rem;}
.bt-review-source{color:var(--ink-faint); font-size:.82rem;}
.bt-reviews-note{color:var(--ink-soft); margin-bottom:var(--sp-6);}

/* ---------- What to Bring ---------- */
.bt-bring-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--sp-4) var(--sp-7);
  list-style:none;
  padding:0;
  margin:0 0 var(--sp-6);
}
.bt-bring-list li{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  font-size:1rem;
  color:var(--ink);
}
.bt-bring-list svg{width:20px; height:20px; stroke:var(--gold-600); flex-shrink:0; margin-top:2px;}
@media (max-width:640px){ .bt-bring-list{grid-template-columns:1fr;} }

/* ---------- Booking section ---------- */
.bt-booking-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-7);}
@media (max-width:860px){ .bt-booking-grid{grid-template-columns:1fr;} }
.bt-booking-card{
  background:var(--white);
  border:var(--border-w) solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--sp-7);
  text-align:center;
}
.bt-booking-card h3{margin-bottom:var(--sp-3);}
.bt-booking-card p{color:var(--ink-soft); margin-bottom:var(--sp-5);}

/* ---------- Final CTA band ---------- */
.bt-final-cta{position:relative; color:var(--white); overflow:hidden;}
.bt-final-cta-media{position:absolute; inset:0;}
.bt-final-cta-media img{width:100%; height:100%; object-fit:cover; object-position:center;}
.bt-final-cta-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,18,32,.55) 0%, rgba(11,18,32,.78) 100%);
}
.bt-final-cta-inner{position:relative; z-index:2; text-align:center; max-width:680px; margin-inline:auto; padding-block:var(--sp-10);}
.bt-final-cta h2{color:var(--white);}
.bt-final-cta p{color:#e7e9ee; max-width:52ch; margin-inline:auto;}
.bt-final-cta-actions{display:flex; flex-wrap:wrap; gap:var(--sp-4); justify-content:center; margin-top:var(--sp-6);}
@media (max-width:520px){
  .bt-final-cta-actions{flex-direction:column; align-items:stretch;}
  .bt-final-cta-actions .btn{width:100%;}
}

/* ---------- Footer (page-specific — minimal, boat-tours only) ---------- */
.bt-footer{background:var(--navy-800); color:var(--cream); padding-block:var(--sp-8) var(--sp-6);}
.bt-footer-inner{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sp-6); align-items:flex-start;}
.bt-footer h4{color:var(--white); margin-bottom:var(--sp-3); font-size:.95rem;}
.bt-footer-links{display:flex; flex-direction:column; gap:.5rem;}
.bt-footer-links a{color:var(--cream); text-decoration:none; font-size:.92rem;}
.bt-footer-links a:hover{color:var(--gold-400);}
.bt-footer-links span{color:#b8c0cf; font-size:.92rem;}
.bt-cross-link{
  border-top:1px solid rgba(255,255,255,.14);
  margin-top:var(--sp-6);
  padding-top:var(--sp-5);
  font-size:.82rem;
  color:#aab2c2;
  text-align:center;
}
.bt-cross-link a{color:#c9cfdb; text-decoration:underline;}
.bt-cross-link a:hover{color:var(--gold-400);}

/* ---------- Sticky mobile call/text bar ---------- */
.bt-sticky-bar{
  display:none;
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:600;
  background:var(--navy-800);
  border-top:1px solid rgba(255,255,255,.14);
  padding:.65rem var(--sp-4);
  padding-bottom:calc(.65rem + env(safe-area-inset-bottom));
  gap:var(--sp-3);
}
.bt-sticky-bar a{
  flex:1;
  text-align:center;
  font-size:.88rem;
  padding:.7rem .5rem;
}
@media (max-width:760px){
  .bt-sticky-bar{display:flex;}
  body{padding-bottom:64px;} /* keep footer content clear of the sticky bar */
}

/* ---------- Section rhythm tweaks specific to this page ---------- */
.bt-section-alt{background:var(--white);}
.bt-weather-band{background:var(--cream-deep);}

/* =========================================================
   FINAL VISUAL QA FIXES — 2026-08-12
   Deliberate, consistent image frames. Real images keep their
   focal subjects visible without distortion.
   ========================================================= */

/* Main Day / Sunset cruise cards: same frame, individual focal points */
.bt-cruise-photo{
  aspect-ratio: 16 / 10;
  min-height: 0;
}
.bt-cruise-card:nth-child(1) .bt-cruise-photo img{
  object-position: 50% 48%;
}
.bt-cruise-card:nth-child(2) .bt-cruise-photo img{
  object-position: 50% 54%;
}
@media (max-width:860px){
  .bt-cruise-photo{aspect-ratio: 4 / 3;}
  .bt-cruise-card:nth-child(1) .bt-cruise-photo img{object-position:50% 46%;}
  .bt-cruise-card:nth-child(2) .bt-cruise-photo img{object-position:50% 48%;}
}

/* Replace masonry columns with an intentional, level editorial grid. */
.bt-photo-wall{
  columns: auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--sp-5);
}
.bt-photo-wall figure{
  margin:0;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.bt-photo-wall picture{
  display:block;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:var(--navy-800);
}
.bt-photo-wall img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.bt-photo-wall figcaption{
  flex:1;
}
/* individual focal points */
.bt-photo-wall figure:nth-child(1) img{object-position:50% 46%;}
.bt-photo-wall figure:nth-child(2) img{object-position:50% 50%;}
.bt-photo-wall figure:nth-child(3) img{object-position:62% 50%;}
.bt-photo-wall figure:nth-child(4) img{object-position:50% 50%;}
.bt-photo-wall figure:nth-child(5) img{object-position:50% 38%;}
.bt-photo-wall figure:nth-child(6) img{object-position:50% 54%;}
.bt-photo-wall figure:nth-child(7) img{object-position:50% 50%;}
.bt-photo-wall figure:nth-child(8) img{object-position:50% 42%;}
@media (max-width:1050px){
  .bt-photo-wall{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px){
  .bt-photo-wall{grid-template-columns:1fr;}
  .bt-photo-wall picture{aspect-ratio:4 / 3;}
}

/* Boat comfort image: consistent frame, preserve the bow and both guests. */
.bt-boat-grid picture{
  display:block;
  overflow:hidden;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  aspect-ratio:4 / 3;
  background:var(--navy-800);
}
.bt-boat-grid picture img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 48%;
  border-radius:0;
  box-shadow:none;
}
@media (max-width:700px){
  .bt-boat-grid picture{aspect-ratio:4 / 3;}
  .bt-boat-grid picture img{object-position:50% 46%;}
}

/* Wildlife prints: identical visual footprint and contained photographs. */
.bt-polaroid{
  width:min(280px, 100%);
  box-sizing:border-box;
}
.bt-polaroid img{
  width:100%;
  aspect-ratio:4 / 3;
  height:auto;
  object-fit:cover;
}
.bt-wildlife-grid .bt-polaroid:nth-child(1) img{object-position:50% 50%;}
.bt-wildlife-grid .bt-polaroid:nth-child(2) img{object-position:50% 50%;}
@media (max-width:640px){
  .bt-wildlife-grid{gap:var(--sp-5);}
  .bt-polaroid{width:min(82vw,280px);}
}

/* Final sunset keeps the sun/reflection in frame across aspect ratios. */
.bt-final-cta-media img{object-position:50% 48%;}
@media (max-width:600px){
  .bt-final-cta-media img{object-position:50% 45%;}
}

/* Cross-business links: remain subtle, but unmistakably visible/clickable. */
.bt-cross-link{
  color:#c5ccda;
  line-height:1.7;
}
.bt-cross-link a{
  color:var(--white);
  font-weight:700;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

/* === FINAL SAFE IMAGE LAYOUT 2026-08-12 === */
/* Primary cruise images: matching frames, no accidental height mismatch. */
.bt-cruise-photo{aspect-ratio:4 / 3 !important; min-height:0 !important;}
.bt-cruise-photo picture{display:block;width:100%;height:100%;}
.bt-cruise-photo img{width:100%!important;height:100%!important;object-fit:cover!important;display:block;}
.bt-cruise-card:nth-child(1) .bt-cruise-photo img{object-position:50% 52%!important;}
.bt-cruise-card:nth-child(2) .bt-cruise-photo img{object-position:50% 50%!important;}

/* Controlled photo gallery: consistent visual rhythm instead of masonry. */
.bt-photo-wall{columns:auto!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:1rem!important;}
.bt-photo-wall figure{margin:0!important;display:flex!important;flex-direction:column!important;min-width:0!important;background:var(--white);border-radius:var(--radius-md);overflow:hidden;}
.bt-photo-wall picture{display:block!important;width:100%!important;aspect-ratio:4/3!important;overflow:hidden!important;background:#e9edf2!important;}
.bt-photo-wall img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;}
.bt-photo-wall figcaption{min-height:2.8rem;display:flex;align-items:center;}
.bt-photo-wall figure:nth-child(3) img{object-position:58% 50%!important;}
.bt-photo-wall figure:nth-child(5) img{object-position:50% 35%!important;}
@media (max-width:900px){.bt-photo-wall{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media (max-width:560px){.bt-photo-wall{grid-template-columns:1fr!important;}.bt-photo-wall picture{aspect-ratio:4/3!important;}}

/* Polaroids: same footprint and image height. */
.bt-polaroid{width:min(280px,100%)!important;box-sizing:border-box!important;}
.bt-polaroid img{width:100%!important;height:auto!important;aspect-ratio:4/3!important;object-fit:cover!important;display:block!important;}

/* Keep the cross-business links readable. */
.bt-footer-links a{display:inline-block!important;position:relative!important;z-index:2!important;}