/* ==========================================================================
   Catch Signal: fishing spot pages (public/css/pages-spots.css)

   Loaded after base.css and pages.css by the pages scripts/seo/pages/spots.mjs,
   gps-marks.mjs and boat-ramps.mjs generate: /fishing-spots, /fishing-spots/<area>,
   /fishing-spots/artificial-reefs, /fishing-spots/fads and /boat-ramps.
   Mobile first; no nesting, no container queries, colour-mix only inside
   @supports (Safari 15.4 floor, test/ui-compat.test.mjs). No inline styles:
   the markup carries classes only.

   Contents
     1. Spot sections and the labelled field block
     2. Coordinates
     3. Season cards
     4. Hub area list and links
     5. Downloads and GPS tables
     6. Print
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Spot sections: a numbered H2 with the same labelled fields every time
   -------------------------------------------------------------------------- */
.prose .spot { margin-top: var(--space-7); max-width: var(--measure); }
.prose .spot > h2 { margin-top: 0; }
.spot-no { color: var(--marker-text); font-family: var(--font-data); font-weight: 500; font-size: .85em; }
.spot h2 { scroll-margin-top: calc(var(--header-h) + var(--space-3)); }
.spot-warn p { margin: 0; }

.spot-fields {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.spot-fields > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
}
.spot-fields > div:last-child { border-bottom: 0; }
.prose .spot-fields dt { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.prose .spot-fields dd { margin: 0; }
.prose .spot-fields dd + dt { margin-top: 0; }

@media (min-width: 40rem) {
  .spot-fields > div { grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--space-3); }
  .prose .spot-fields dt { padding-top: 1px; }
}

.spot-safety { font-size: var(--fs-sm); color: var(--muted); }
.spot-forecast {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
}
.spot-forecast a { font-weight: 600; }


/* --------------------------------------------------------------------------
   2. Coordinates: tabular figures, never broken mid-number
   -------------------------------------------------------------------------- */
.coord { font-family: var(--font-data); font-size: .95em; white-space: nowrap; }
.coords .coord { display: block; }
.coords .coord + .coord { margin-top: 2px; color: var(--muted); }

/* Table cells size to whole words: base.css lets prose links break anywhere (long URLs), which squeezed narrow columns */
.prose td a, .prose th a { overflow-wrap: normal; }
/* "<Area> fishing spots · Open in the app" after each reef: may wrap on a phone (a nowrap line overflowed at 412 px) */
.mark-links { white-space: normal; }


/* --------------------------------------------------------------------------
   3. Season cards: a thumbnail, the species and its season
   -------------------------------------------------------------------------- */
.season-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
.season-card { gap: var(--space-1); padding: var(--space-2); }
.season-card picture img,
.season-noimg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-sm);
  background: var(--sunken);
}
.season-card .card-title { font-size: var(--fs-base); }
.season-card .card-title a { color: inherit; }
.season-card .card-title a:hover { color: var(--accent); }
.photo-note { font-size: var(--fs-sm); color: var(--muted); }


/* --------------------------------------------------------------------------
   4. Hub: areas by group, GPS and ramp links
   -------------------------------------------------------------------------- */
.area-list { margin: 0; padding: 0; list-style: none; }
.prose .area-list li + li { margin-top: var(--space-3); }
.area {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.prose .area h3 { margin: 0; font-size: var(--fs-md); }
.area-meta { margin-top: var(--space-1); font-size: var(--fs-sm); color: var(--muted); }
.hub-links { columns: 1; }


/* --------------------------------------------------------------------------
   5. Downloads and GPS tables
   -------------------------------------------------------------------------- */
.downloads { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.prose .downloads li + li { margin-top: 0; }
.download {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--surface);
  font-weight: 600;
  text-decoration: none;
}
.download:hover { border-color: var(--accent); }
.prose .gps-table td { white-space: normal; }
.prose .gps-table td .coord { white-space: nowrap; }

/* Wide tables keep readable columns on phones: they scroll sideways inside .table-wrap (never the page) instead of
   squeezing to one word per line. */
.prose .glance-table { min-width: 46rem; }
.prose .ramps-table { min-width: 40rem; }
.prose .gps-table { min-width: 52rem; }
.prose .gps-table th[scope="row"] { min-width: 9rem; }
.prose .glance-table th[scope="row"] { min-width: 11rem; }
/* "(ramp nearby)": a beach or jetty whose public ramp is beside it */
.ramp-nearby { color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }

/* /boat-ramps (69 rows in 13 tables). Columns are counted from the end: the Water column is there only when the areas'
   water categories differ. Wider screens: every column gets room to run, so no cell stretches its row to two or three
   times the height of the rest (a narrow "Reach from here" list wrapped to seven lines). */
@media (min-width: 37.5625rem) {
  .prose .ramp-list-table th[scope="row"] { min-width: 10rem; }
  .prose .ramp-list-table td:nth-last-child(5),
  .prose .ramp-list-table td:nth-last-child(4) { min-width: 8rem; }
  .prose .ramp-list-table td:nth-last-child(3) { min-width: 20rem; }
  .prose .ramp-list-table td:nth-last-child(2) { min-width: 13rem; }
  .prose .ramp-list-table td:last-child { white-space: nowrap; }
}
/* Phones: each ramp reads as a card, its name and then each field with the column's name, so nothing sits off to the
   right and no row is taller than what it shows. The header row stays for screen readers (hidden in place, inside the
   table so it never widens the page); the labels are the column names, read with each value. Overrides the pinned
   first column of pages.css. */
@media (max-width: 37.5rem) {
  .prose .ramp-list-table { display: block; position: relative; }
  .ramp-list-table thead { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ramp-list-table tbody { display: block; }
  /* the name and its Map link on the first line, then one line per field */
  .ramp-list-table tbody > tr { display: flex; flex-wrap: wrap; align-items: baseline; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
  .ramp-list-table tbody > tr:last-child { border-bottom: 0; }
  .prose .table-wrap > .ramp-list-table > tbody > tr > th[scope="row"],
  .prose .table-wrap > .ramp-list-table > tbody > tr > td {
    flex: 0 0 100%;
    order: 2;
    position: static;
    min-width: 0;
    padding: 2px var(--space-3);
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .prose .table-wrap > .ramp-list-table > tbody > tr > th[scope="row"] { flex: 1 1 0; order: 0; padding-bottom: var(--space-1); font-size: var(--fs-base); }
  .prose .table-wrap > .ramp-list-table > tbody > tr > td:last-child { flex: 0 0 auto; order: 1; padding-left: 0; }
  .ramp-list-table td::before { font-weight: 600; color: var(--muted); }
  .ramp-list-table td:nth-last-child(6)::before { content: "Water: "; }
  .ramp-list-table td:nth-last-child(5)::before { content: "Bar crossing: "; }
  .ramp-list-table td:nth-last-child(4)::before { content: "Tide place: "; }
  .ramp-list-table td:nth-last-child(3)::before { content: "Reach from here: "; }
  .ramp-list-table td:nth-last-child(2)::before { content: "Marine rescue: "; }
}


/* --------------------------------------------------------------------------
   6. Print: fields stay together, links stay readable
   -------------------------------------------------------------------------- */
@media print {
  .spot { break-inside: avoid; }
  .spot-fields { border: 0; }
  .download, .spot-forecast { border: 0; padding: 0; }
}