/* ───────────────────────────────────────────────────────────────────────────
 *  home.css (v2) — homepage module ONLY (loaded by / alone).
 *  Layers on styles.css (header, hero, smart-bar, sidebar/filter chrome,
 *  cards-grid, how-it-works, final-cta, laila modal, whatsapp float).
 *  Every class here is prefixed `home-` so edits can never leak into another
 *  page — and no other module may style `home-*`.
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── Shared section chrome (marine strip + reviews) ── */
.home-section { padding: 72px 0; }
.home-section-wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.home-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;          /* center heading/kicker/sub to match the sections below */
  gap: 16px;
  margin-bottom: 32px;
}
.home-kicker {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0d9488;
  margin-bottom: 8px;
}
.home-section-head h2 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(26px, 3.8vw, 38px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #0f172a;
  margin: 0 0 8px;
  line-height: 1.12;
}
.home-sub {
  font-size: 15px;
  line-height: 1.6;
  color: #64748b;
  max-width: 560px;
  margin: 0 auto;        /* keep the sub centered under the centered heading */
}
.home-see-all {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #0d9488;
  text-decoration: none;
  padding: 11px 20px 9px;
  border: 1.5px solid rgba(13, 148, 136, 0.35);
  border-radius: 100px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.home-see-all:hover { background: #0d9488; border-color: #0d9488; color: #fff; }
.home-see-all i { font-size: 12px; transition: transform .2s ease; }
.home-see-all:hover i { transform: translateX(3px); }

/* ── Aggregator grid cards (destinations + courses + liveaboards) ── */
.home-grid { padding-bottom: 8px; }
.home-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(6, 182, 212, 0.16);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.home-card * { text-decoration: none !important; }
.home-card:hover {
  transform: translateY(-4px);
  border-color: #06b6d4;
  box-shadow: 0 16px 32px rgba(6, 182, 212, 0.16), 0 6px 14px rgba(15, 23, 42, 0.06);
}
.home-card-img {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;   /* source card images are square (900/1000px); 4:3 cropped them */
  overflow: hidden;
  background: #f0fdff;
}
.home-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.home-card:hover .home-card-img img { transform: scale(1.05); }
.home-card-kind {
  position: absolute; top: 12px; left: 12px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  padding: 5px 11px 4px;
  border-radius: 100px;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.25);
}
.home-card-kind-d { background: linear-gradient(135deg, #0d9488 0%, #06b6d4 100%); }
.home-card-kind-f { background: linear-gradient(135deg, #0891b2 0%, #22d3ee 100%); }
.home-card-kind-c { background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%); }
.home-card-kind-t { background: linear-gradient(135deg, #db2777 0%, #f97316 100%); }
.home-card-kind-l { background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%); }
.home-card-rating {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.94);
  padding: 5px 10px 4px;
  border-radius: 100px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}
.home-card-rating i { color: #f59e0b; font-size: 11px; }
.home-card-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 18px 16px;
  flex: 1;
}
.home-card-title {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 19.5px;
  font-weight: 600;
  color: #164e63;
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.home-card-sub {
  font-size: 13px;
  line-height: 1.5;
  color: #475569;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.home-card-tag {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #0e7490;
  background: #ecfeff;
  border: 1px solid rgba(6, 182, 212, 0.25);
  padding: 4px 9px 3px;
  border-radius: 100px;
  white-space: nowrap;
}
.home-card .visibility-btn { align-self: flex-start; margin-top: 2px; }
.home-card-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 11px;
  border-top: 1px solid rgba(6, 182, 212, 0.12);
}
.home-card-price { font-size: 12px; color: #64748b; white-space: nowrap; }
.home-card-price strong {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 17.5px;
  font-weight: 700;
  color: #0d9488;
  margin-left: 2px;
}
.home-card-price-na { font-style: italic; }
.home-card-months,
.home-card-cta {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #0e7490;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.home-card-months i { font-size: 10.5px; color: #06b6d4; }
.home-card:hover .home-card-cta { color: #0d9488; }

/* Month select in the sidebar (native select, filter-chrome look) */
.home-month-select {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 10px;
  font: 500 13.5px/1.2 'Roboto', sans-serif;
  color: var(--text, #0f172a);
  background: #fff;
  cursor: pointer;
}
.home-month-select:focus { outline: none; border-color: var(--primary, #06b6d4); }

/* ── Marine life strip ── */
.home-marine { background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 70%); }
.home-marine-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.home-marine-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.home-marine-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(6, 182, 212, 0.2);
}
.home-marine-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .55s ease;
}
.home-marine-card:hover .home-marine-img { transform: scale(1.07); }
.home-marine-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 27, 33, 0) 45%, rgba(8, 27, 33, 0.85) 100%);
}
.home-marine-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 16px 13px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.home-marine-body strong {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 16.5px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}
.home-marine-body span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.82);
}

/* ── Reviews ── */
.home-reviews { background: #fff; padding-bottom: 80px; }
.home-reviews-body { min-height: 120px; }
.home-reviews-body > div + div { margin-top: 28px; }

/* ── Community banner ──────────────────────────────────────────────────────
   Full-bleed promo for /community/. Uses the signature green→cyan→indigo
   "Plan with Laila" gradient, glass feature chips and rising bubbles. All
   classes are home-community* (isolated). ─────────────────────────────────── */
.home-community { padding: 8px 32px 88px; background: #fff; }
.home-community-inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 56px;
  border-radius: 30px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(16, 185, 129, 0.55) 0%, transparent 55%),
    radial-gradient(120% 160% at 100% 100%, rgba(29, 78, 216, 0.62) 0%, transparent 55%),
    linear-gradient(135deg, #10b981 0%, #06b6d4 50%, #1d4ed8 100%);
  box-shadow: 0 30px 70px -28px rgba(13, 78, 99, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
/* top sheen + caustic particle sparkle (matches the Ocean Impact band texture) */
.home-community-inner::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(2px 2px at 12% 22%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1.5px 1.5px at 27% 68%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(2px 2px at 46% 28%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 62% 76%, rgba(255, 255, 255, 0.42), transparent),
    radial-gradient(2px 2px at 80% 38%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 90% 64%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 37% 90%, rgba(255, 255, 255, 0.34), transparent),
    radial-gradient(1.5px 1.5px at 72% 13%, rgba(255, 255, 255, 0.4), transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, transparent 32%);
}
/* fine film grain for depth so the gradient never reads as flat */
.home-community-inner::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.12; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
/* floating radial glows */
.home-community-glow {
  position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  filter: blur(46px); opacity: .55;
}
.home-community-glow-a { width: 320px; height: 320px; top: -120px; right: 6%;
  background: radial-gradient(circle, rgba(110, 231, 183, 0.9), transparent 70%);
  animation: homeCommFloat 14s ease-in-out infinite; }
.home-community-glow-b { width: 280px; height: 280px; bottom: -130px; left: 2%;
  background: radial-gradient(circle, rgba(125, 211, 252, 0.85), transparent 70%);
  animation: homeCommFloat 18s ease-in-out infinite reverse; }
@keyframes homeCommFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(18px, -22px); }
}
/* rising bubbles */
.home-community-bubbles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.home-community-bubbles i {
  position: absolute; bottom: -24px; display: block;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.12) 60%, transparent 70%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  animation: homeCommRise linear infinite;
  opacity: 0;
}
.home-community-bubbles i:nth-child(1) { left: 10%; width: 10px; height: 10px; animation-duration: 9s;  animation-delay: 0s; }
.home-community-bubbles i:nth-child(2) { left: 22%; width: 18px; height: 18px; animation-duration: 12s; animation-delay: 2.5s; }
.home-community-bubbles i:nth-child(3) { left: 38%; width: 8px;  height: 8px;  animation-duration: 8s;  animation-delay: 1.2s; }
.home-community-bubbles i:nth-child(4) { left: 52%; width: 13px; height: 13px; animation-duration: 11s; animation-delay: 3.6s; }
.home-community-bubbles i:nth-child(5) { left: 66%; width: 9px;  height: 9px;  animation-duration: 10s; animation-delay: 0.8s; }
.home-community-bubbles i:nth-child(6) { left: 78%; width: 16px; height: 16px; animation-duration: 13s; animation-delay: 4.2s; }
.home-community-bubbles i:nth-child(7) { left: 88%; width: 11px; height: 11px; animation-duration: 9.5s; animation-delay: 2s; }
.home-community-bubbles i:nth-child(8) { left: 95%; width: 7px;  height: 7px;  animation-duration: 8.5s; animation-delay: 5s; }
@keyframes homeCommRise {
  0%   { transform: translateY(0) translateX(0) scale(.6); opacity: 0; }
  12%  { opacity: .8; }
  85%  { opacity: .6; }
  100% { transform: translateY(-460px) translateX(20px) scale(1); opacity: 0; }
}

.home-community-content { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; text-align: center; }
.home-community-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Josefin Sans', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: #ecfeff;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 7px 15px; border-radius: 100px; backdrop-filter: blur(6px);
}
.home-community-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #a7f3d0;
  box-shadow: 0 0 0 4px rgba(167, 243, 208, 0.3); animation: homeCommPulse 2.2s ease-in-out infinite;
}
@keyframes homeCommPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .7; } }
.home-community-title {
  font-family: 'Josefin Sans', sans-serif; font-weight: 600;
  font-size: clamp(32px, 5vw, 52px); line-height: 1.04; letter-spacing: -0.02em;
  color: #fff; margin: 18px 0 0;
  text-shadow: 0 2px 24px rgba(8, 47, 73, 0.35);
}
.home-community-sub {
  font-family: 'Roboto', sans-serif; font-size: 16.5px; line-height: 1.65;
  color: rgba(240, 253, 255, 0.92); margin: 16px auto 0; max-width: 580px;
}
.home-community-features {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; justify-content: center;
}
.home-community-feat {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Josefin Sans', sans-serif; font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.02em; color: #fff;
  background: rgba(255, 255, 255, 0.13); border: 1px solid rgba(255, 255, 255, 0.26);
  padding: 9px 16px; border-radius: 100px; backdrop-filter: blur(8px);
}
.home-community-feat i { font-size: 13px; color: #a7f3d0; }
.home-community-cta {
  display: inline-flex; align-items: center; gap: 10px; margin: 30px 0 0;
  font-family: 'Josefin Sans', sans-serif; font-size: 16px; font-weight: 700;
  letter-spacing: 0.01em; color: #0f766e; text-decoration: none;
  background: #fff; padding: 15px 30px; border-radius: 100px;
  box-shadow: 0 14px 30px -10px rgba(8, 47, 73, 0.5);
  transition: transform .22s ease, box-shadow .22s ease, color .22s ease;
}
.home-community-cta i { font-size: 14px; transition: transform .22s ease; }
.home-community-cta:hover { transform: translateY(-3px); color: #1d4ed8; box-shadow: 0 22px 42px -12px rgba(8, 47, 73, 0.6); }
.home-community-cta:hover i { transform: translateX(5px); }

@media (max-width: 768px) {
  .home-community { padding: 4px 16px 64px; }
  .home-community-inner { padding: 44px 26px; border-radius: 24px; text-align: center; }
  .home-community-content { max-width: none; }
  .home-community-sub { margin-left: auto; margin-right: auto; }
  .home-community-features { justify-content: center; }
  .home-community-cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .home-community-glow, .home-community-bubbles i, .home-community-dot { animation: none; }
  .home-community-bubbles i { display: none; }
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .home-marine-grid { grid-template-columns: repeat(3, 1fr); }
  .home-marine-card:nth-child(4),
  .home-marine-card:nth-child(5) { aspect-ratio: 16 / 10; }
}
@media (max-width: 720px) {
  .home-section { padding: 52px 0; }
  .home-section-wrap { padding: 0 20px; }
  .home-section-head { flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-bottom: 24px; }
  .home-card-title { font-size: 17px; }
  .home-card-body { padding: 13px 14px; }
  .home-marine-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .home-marine-card { aspect-ratio: 4 / 3; }
  .home-marine-card:nth-child(4),
  .home-marine-card:nth-child(5) { aspect-ratio: 4 / 3; }
  .home-marine-card:last-child { grid-column: span 2; aspect-ratio: 16 / 9; }
  /* "Showing … destinations · fun dives · …" wraps to 2 lines on phones —
     give the lines breathing room so they don't touch. */
  .results-count { line-height: 1.6; }
}

/* ── Load more (grid pagination) ── */
.home-load-more-wrap {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding: 18px 0 6px;
}
.home-load-more {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #0d9488;
  background: #fff;
  border: 1.5px solid rgba(13, 148, 136, 0.35);
  border-radius: 100px;
  padding: 13px 30px 11px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.home-load-more span { font-size: 12px; font-weight: 500; opacity: .75; }
.home-load-more:hover { background: #0d9488; border-color: #0d9488; color: #fff; transform: translateY(-1px); }

/* ── Hero glass dropdown — per-option Font Awesome icon (homepage only).
   The dropdown component + glass panel styles live in styles.css; this only
   styles the FA icon prefix added to each option/trigger value. ──────────── */
.hero-opt-ico {
  color: var(--primary);
  width: 18px; text-align: center; flex-shrink: 0;
  margin-right: 8px; vertical-align: middle;
}
.hero-sheet-option .hso-label {
  display: inline-flex; align-items: center; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero-sheet-option .hso-label .hero-opt-ico { font-size: 15px; margin-right: 11px; }
.hero-sheet-option[aria-selected="true"] .hero-opt-ico,
.hero-select-trigger .hero-opt-ico { color: var(--primary); }

/* ── Brand gradient border on the active field + selected option ─────────────
   Matches the course configurator's selected cards (emerald→cyan→blue) instead
   of the flat blue border, via the padding-box/border-box double-background. */
.hero-select-trigger[aria-expanded="true"],
.hero-select-trigger:focus-visible {
  border: 1.5px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #10b981 0%, #06b6d4 50%, #1d4ed8 100%) border-box;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.12);
}
.hero-sheet-option[aria-selected="true"] {
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(236, 254, 255, 0.62), rgba(236, 254, 255, 0.62)) padding-box,
    linear-gradient(135deg, #10b981 0%, #06b6d4 50%, #1d4ed8 100%) border-box;
  color: var(--primary);
}

/* ── Anchored-dropdown mode (.hero-dd) ──────────────────────────────────────
   Keeps the glass-morphic look from styles.css but anchors the panel directly
   under the field (JS sets top/left/width) instead of sliding up from the
   bottom of the screen. Overrides win on mobile too via the extra .hero-dd
   class (higher specificity than the bare .hero-sheet media-query rules). */
.hero-sheet.hero-dd {
  left: auto; right: auto; bottom: auto;          /* JS sets top/left/width */
  width: auto; max-width: none;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  transform: translateY(-6px) scale(.99);
  transform-origin: top center;
  opacity: 0;
  transition: opacity .15s ease, transform .16s cubic-bezier(.4, 0, .2, 1);
  padding-bottom: 8px;
  box-shadow: 0 18px 44px rgba(6, 95, 120, 0.28);
}
.hero-sheet.hero-dd.open { transform: translateY(0) scale(1); opacity: 1; }
.hero-sheet.hero-dd .hero-sheet-grabber,
.hero-sheet.hero-dd .hero-sheet-header { display: none; }
.hero-sheet.hero-dd .hero-sheet-list { padding-top: 8px; }
/* transparent click-catcher — no page dimming for a dropdown */
.hero-sheet-overlay.hero-dd {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ── Smart-bar layout: the "Quick find" label is fixed and the pills live in
   their own scrolling track. This keeps the label always fully visible (it
   never scrolls off the left edge) and never lets it overlap the first pill.
   Only the .smart-track scrolls horizontally. ── */
.smart-bar { overflow: visible; }
.smart-bar .smart-label { flex: 0 0 auto; }      /* fixed, never shrinks */
.smart-track {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 auto; min-width: 0;                   /* allow it to shrink + scroll */
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
/* Trailing breathing room after "Clear all" — flex scroll containers otherwise
   drop the track's right padding once content overflows. */
.smart-track::after { content: ''; flex: 0 0 12px; }

/* Hide the horizontal scrollbar on desktop (mouse) devices — the global
   gradient ::-webkit-scrollbar (styles.css) otherwise paints a persistent
   track. Pills still scroll via wheel/trackpad/drag. Touch devices keep their
   native overlay scrollbar, which shows only while the user swipes. */
@media (hover: hover) and (pointer: fine) {
  .smart-track { scrollbar-width: none; -ms-overflow-style: none; }
  .smart-track::-webkit-scrollbar { width: 0; height: 0; display: none; }
}

/* ── Filter sidebar + cards grid balance (desktop) ──
   Wider filter panel (320px) gives the filter labels more room. The card grid
   switches to responsive auto-fill of smaller squares (1:1 hero is already set
   in styles.css) so cards reduce in width, pack ~4 per row on wide screens, and
   fill the content area edge-to-edge — aligning cleanly beside the sidebar.
   home.css loads on / only, so these are effectively homepage-scoped. ── */
:root { --sidebar-w: 320px; }
.cards-grid { grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); }

/* ── Uniform card alignment (desktop + mobile) ──
   Cards in a row have different description / tag lengths, so titles, buttons
   and prices drift out of line. Make cards equal-height per row, reserve a
   fixed 2-line title + 2-line description, and pin the visibility button (and
   the price footer) to the bottom so they line up across the whole row. ── */
.cards-grid { align-items: stretch; }
.home-card-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.4em;          /* always reserve 2 lines */
}
.home-card-sub { flex: 0 0 auto; min-height: 3em; }   /* reserve 2 lines */
.home-card .visibility-btn {
  white-space: nowrap; margin-top: auto;        /* single line + pin to bottom */
  font-size: 11.5px; padding: 8px 14px;         /* compact enough to fit ~235px cards on one line */
}
/* Cards without a visibility button: pin the footer to the bottom instead. */
.home-card-body:not(:has(.visibility-btn)) .home-card-foot { margin-top: auto; }

/* Mobile: 2 cards per row (matches the /marine-life/ grid) instead of a single
   stacked column. Tighten gap + card chrome so the denser cards stay readable. */
@media (max-width: 768px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .home-card-title { font-size: 15px; }
  .home-card-body { padding: 11px 12px; gap: 8px; }
  /* Keep "Check Visibility Chart" on a single line — full-width, centered,
     smaller text/padding so it fits the narrow 2-up cards. */
  .home-card .visibility-btn {
    width: 100%; justify-content: center; white-space: nowrap;
    font-size: 10px; letter-spacing: .01em; padding: 7px 6px; gap: 4px;
  }
  .home-card .visibility-icon { font-size: 11px; }
  /* Stack the price + "Best <months>" line so the month text isn't cropped. */
  .home-card-foot { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ── Final CTA → match the /liveaboards/ CTA (underwater banner + glass button).
   Homepage-only override (home.css loads on / alone). Content/wording unchanged. ── */
.final-cta {
  background:
    linear-gradient(135deg,
      rgba(15, 23, 42, 0.62) 0%,
      rgba(15, 23, 42, 0.38) 50%,
      rgba(6, 95, 120, 0.62) 100%),
    url('/marine-life/images/marine-cta-banner.webp?v=202605222345') center/cover no-repeat;
}
.final-cta::before { display: none; }
.final-cta .hero-cta {
  background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.12) 100%);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.42);
  padding: 12px 22px; font-size: 14px; font-weight: 600; letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 10px; line-height: 1;
  box-shadow: 0 6px 18px rgba(15,23,42,0.18), inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(255,255,255,0.10);
  transition: all .25s ease;
}
.final-cta .hero-cta:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.18) 100%);
  border-color: rgba(255,255,255,0.62); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15,23,42,0.26), inset 0 1px 0 rgba(255,255,255,0.38), inset 0 -1px 0 rgba(255,255,255,0.14);
}
.final-cta .hero-cta .cta-arrow { font-size: 12px; transition: transform .25s ease; opacity: .85; }
.final-cta .hero-cta:hover .cta-arrow { transform: translateX(3px); opacity: 1; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .final-cta .hero-cta { background: rgba(255,255,255,0.22); }
}