/* marine-weather.css — live sea-conditions card (destination hubs) + hub page.
   Scoped to .mw-* so it cannot collide with other modules. Reuses the season
   palette (peak green / shoulder amber / off grey) and the site gradient. */

.mw-card {
  margin: 0 0 22px;
  padding: 18px 18px 14px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(6, 182, 212, 0.05), rgba(16, 185, 129, 0.03)),
    #fff;
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.06);
}

/* Skeleton while loading */
.mw-card.mw-loading { min-height: 168px; position: relative; }
.mw-card.mw-loading::after {
  content: 'Reading live conditions…';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 500 13px/1.4 'Roboto', sans-serif; color: var(--muted, #64748b);
  background: repeating-linear-gradient(90deg, transparent 0 40%, rgba(6,182,212,.06) 50%, transparent 60% 100%);
  background-size: 200% 100%;
  animation: mw-shimmer 1.3s linear infinite;
  border-radius: 16px;
}
@keyframes mw-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.mw-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.mw-head-title {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 14px/1.2 'Josefin Sans', sans-serif; letter-spacing: .04em;
  color: var(--text, #0f172a);
}
.mw-head-title i { color: var(--primary, #06b6d4); }
.mw-live-dot {
  display: inline-block; width: 8px; height: 8px; margin-left: 4px;
  border-radius: 50%; background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
  animation: mw-pulse 1.8s ease-out infinite;
}
@keyframes mw-pulse {
  0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
.mw-updated {
  font: 500 11px/1 'Roboto', sans-serif; letter-spacing: .03em;
  color: var(--muted, #64748b); white-space: nowrap;
}

/* Diveability verdict */
.mw-score {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin-bottom: 14px;
  border-radius: 12px; border: 1px solid transparent;
}
.mw-score-badge {
  flex: none;
  font: 700 12.5px/1 'Josefin Sans', sans-serif; letter-spacing: .04em;
  padding: 7px 12px; border-radius: 999px; color: #fff;
}
.mw-score-note { font: 500 12.5px/1.4 'Roboto', sans-serif; color: var(--text, #0f172a); }
.mw-score-excellent { background: rgba(22,163,74,.08); border-color: rgba(22,163,74,.25); }
.mw-score-excellent .mw-score-badge { background: #16a34a; }
.mw-score-good { background: rgba(13,148,136,.08); border-color: rgba(13,148,136,.22); }
.mw-score-good .mw-score-badge { background: #0d9488; }
.mw-score-fair { background: rgba(217,119,6,.09); border-color: rgba(217,119,6,.25); }
.mw-score-fair .mw-score-badge { background: #d97706; }
.mw-score-rough { background: rgba(220,38,38,.08); border-color: rgba(220,38,38,.22); }
.mw-score-rough .mw-score-badge { background: #dc2626; }

/* Metric grid */
.mw-metrics {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-bottom: 14px;
}
@media (min-width: 560px) { .mw-metrics { grid-template-columns: repeat(4, 1fr); } }
.mw-metric {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 10px;
  background: #fff; border: 1px solid var(--border, #e2e8f0);
}
.mw-metric > i {
  font-size: 16px; color: var(--primary, #06b6d4); width: 20px; text-align: center; flex: none;
}
.mw-metric-val { font: 700 16px/1.1 'Josefin Sans', sans-serif; color: var(--text, #0f172a); }
.mw-metric-lbl {
  font: 500 11px/1.2 'Roboto', sans-serif; letter-spacing: .02em;
  color: var(--muted, #64748b); margin-top: 2px;
}
.mw-metric-sub { color: var(--muted, #94a3b8); }

/* Live-vs-typical season line */
.mw-season {
  display: flex; align-items: flex-start; gap: 8px;
  font: 500 12.5px/1.45 'Roboto', sans-serif; color: var(--text, #334155);
  padding: 9px 11px; border-radius: 10px; margin-bottom: 10px;
}
.mw-season strong { font-weight: 700; }
.mw-season-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; flex: none; }
.mw-season-peak { background: rgba(22,163,74,.07); }
.mw-season-peak .mw-season-dot { background: #16a34a; }
.mw-season-shoulder { background: rgba(252,211,77,.14); }
.mw-season-shoulder .mw-season-dot { background: #fcd34d; }
.mw-season-off { background: rgba(148,163,184,.12); }
.mw-season-off .mw-season-dot { background: #94a3b8; }

.mw-foot {
  font: 400 11px/1.45 'Roboto', sans-serif; color: var(--muted, #94a3b8);
}
.mw-fallback {
  font: 500 13px/1.5 'Roboto', sans-serif; color: var(--text, #334155);
  padding: 6px 2px 4px;
}

/* ─────────────────────────────────────────────────────────────────────────
   /marine-weather/ hub — ranked grid of all destinations "best to dive now"
   ───────────────────────────────────────────────────────────────────────── */
.mwh-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.mwh-hero {
  /* Liveaboard-style image hero: coral reef photo + deep-teal overlay + white text.
     Top padding offsets the fixed 72px site header so the heading clears it. */
  text-align: center; padding: 132px 24px 56px;
  background:
    linear-gradient(180deg, rgba(12,63,83,.58) 0%, rgba(12,63,83,.78) 100%),
    url('/marine-weather/images/marine-weather-hero.webp') center/cover no-repeat;
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.mwh-hero h1 {
  font: 700 36px/1.15 'Josefin Sans', sans-serif; color: #fff;
  margin: 0 0 12px; letter-spacing: .01em;
  text-shadow: 0 2px 16px rgba(8,30,45,.45);
}
.mwh-hero p {
  font: 400 16px/1.6 'Roboto', sans-serif; color: rgba(255,255,255,.92);
  max-width: 680px; margin: 0 auto; text-shadow: 0 1px 10px rgba(8,30,45,.4);
}
/* Mobile header collapses to 60px tall — reduce the offset to match. */
@media (max-width: 900px) {
  .mwh-hero { padding: 104px 20px 40px; }
  .mwh-hero h1 { font-size: 28px; }
}
.mwh-controls {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  margin: 26px auto 18px;
}
.mwh-status { font: 500 13px/1.3 'Roboto', sans-serif; color: var(--muted, #64748b); }
/* Glassmorphic filter control (matches the homepage selection menus) */
.mwh-sort {
  display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.42) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
          backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: 0 6px 18px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.7);
}
.mwh-sort button {
  appearance: none; cursor: pointer;
  font: 600 12.5px/1 'Roboto', sans-serif; letter-spacing: .02em;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid transparent; background: transparent; color: var(--text, #334155);
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease, background .2s ease;
}
.mwh-sort button:hover { color: var(--primary, #0e7490); }
.mwh-sort button.is-active {
  color: #fff; border-color: rgba(255,255,255,0.28);
  background: linear-gradient(135deg,
    rgba(16, 185, 129, 0.96) 0%,
    rgba(6, 182, 212, 0.96) 50%,
    rgba(29, 78, 216, 0.96) 100%);
  box-shadow: 0 8px 22px rgba(29,78,216,0.32), 0 4px 12px rgba(16,185,129,0.18), inset 0 1px 0 rgba(255,255,255,0.28);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mwh-sort { background: rgba(255,255,255,0.92); }
}
.mwh-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px; padding-bottom: 56px;
}
.mwh-card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--border, #e2e8f0); border-radius: 14px; overflow: hidden;
  background: #fff; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mwh-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15,23,42,.12); border-color: rgba(6,182,212,.4); }
.mwh-card-media { position: relative; height: 132px; background-size: cover; background-position: center; background-color: var(--primary-soft, #ecfdf5); }
.mwh-card-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(6,23,42,.55) 100%); }
.mwh-card-badge {
  position: absolute; left: 10px; top: 10px; z-index: 1;
  font: 700 11px/1 'Josefin Sans', sans-serif; letter-spacing: .03em;
  padding: 6px 10px; border-radius: 999px; color: #fff;
}
.mwh-card-badge.excellent { background: #16a34a; }
.mwh-card-badge.good { background: #0d9488; }
.mwh-card-badge.fair { background: #d97706; }
.mwh-card-badge.rough { background: #dc2626; }
.mwh-card-badge.pending { background: #94a3b8; }
.mwh-card-name {
  position: absolute; left: 12px; bottom: 10px; z-index: 1; color: #fff;
  font: 700 17px/1.15 'Josefin Sans', sans-serif; text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.mwh-card-body { padding: 12px 14px 14px; }
.mwh-card-region { font: 500 11.5px/1 'Roboto', sans-serif; color: var(--muted, #64748b); margin-bottom: 8px; }
.mwh-card-stats { display: flex; flex-wrap: wrap; gap: 10px 16px; font: 500 12.5px/1.2 'Roboto', sans-serif; color: var(--text, #334155); }
.mwh-card-stats i { color: var(--primary, #06b6d4); margin-right: 5px; }
.mwh-card-stat span { color: var(--muted, #94a3b8); }
.mwh-card.is-pending .mwh-card-stats { color: var(--muted, #94a3b8); }