/* FlyingFish — Marine Life species hub (per-species)
 * Layered on top of /destinations/destination.css (hero, season-bar, faq, spec-card all inherited).
 * Defines: cross-destination heatmap + a few species-specific tweaks.
 */

/* ─── Cross-destination heatmap ─── */
.species-heatmap {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 14px;
}
.species-heatmap-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.6fr) repeat(12, 1fr);
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.species-heatmap-row:last-child { border-bottom: none; }
.species-heatmap-row.species-heatmap-head {
  background: var(--bg-soft, #f8fdff);
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.species-heatmap-cell {
  padding: 8px 4px;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 11.5px;
  border-right: 1px solid var(--border);
}
.species-heatmap-cell:last-child { border-right: none; }
.species-heatmap-row .species-heatmap-cell.species-heatmap-loc {
  text-align: left;
  padding: 14px 14px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--deep);
  border-right: 1px solid var(--border);
  text-decoration: none;
}
.species-heatmap-row a.species-heatmap-cell.species-heatmap-loc { color: var(--deep); transition: color .2s; }
.species-heatmap-row a.species-heatmap-cell.species-heatmap-loc:hover { color: var(--primary); }
.species-heatmap-row .species-heatmap-loc-country {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: 0;
  text-transform: none;
}
.species-heatmap-cell.high     { background: linear-gradient(135deg, #06b6d4 0%, #0d9488 100%); color: #fff; font-weight: 600; }
.species-heatmap-cell.seasonal { background: #cffafe; color: #0e7490; }
.species-heatmap-cell.low      { background: #f8fafc; color: #cbd5e1; }
.species-heatmap-cell.empty    { background: #fff; color: transparent; }

.species-heatmap-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-family: 'Roboto', sans-serif;
  font-size: 12.5px;
  color: var(--muted);
  margin: -4px 0 14px;
}
.species-heatmap-legend-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
  vertical-align: -1px;
  margin-right: 6px;
}
.species-heatmap-legend-dot.high     { background: linear-gradient(135deg, #06b6d4 0%, #0d9488 100%); }
.species-heatmap-legend-dot.seasonal { background: #cffafe; }
.species-heatmap-legend-dot.low      { background: #f8fafc; border: 1px solid #e2e8f0; }

/* ─── Species spec card overrides (extends .dest-spec-card) ─── */
.species-spec-card .photo-stars {
  color: #fcd34d;
  letter-spacing: 1px;
  font-size: 14px;
}
.species-spec-card .conservation-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.species-spec-card .conservation-badge.lc  { background: #d1fae5; color: #065f46; }
.species-spec-card .conservation-badge.nt  { background: #fef9c3; color: #713f12; }
.species-spec-card .conservation-badge.vu  { background: #fed7aa; color: #9a3412; }
.species-spec-card .conservation-badge.en  { background: #fecaca; color: #991b1b; }
.species-spec-card .conservation-badge.cr  { background: #fee2e2; color: #7f1d1d; }
.species-spec-card .conservation-badge.na  { background: #f1f5f9; color: #475569; }

/* ─── Mobile heatmap — rows become accordions, hide below-fold by default ─── */
@media (max-width: 720px) {
  .species-heatmap-row {
    grid-template-columns: minmax(110px, 1.4fr) repeat(12, 1fr);
  }
  .species-heatmap-row .species-heatmap-cell.species-heatmap-loc {
    font-size: 12px;
    padding: 10px 10px;
  }
  .species-heatmap-row .species-heatmap-loc-country { display: none; }
  .species-heatmap-cell { font-size: 10px; padding: 8px 1px; }
  .species-heatmap-row.species-heatmap-head { font-size: 9.5px; }
}