/* ──────────────────────────────────────────────────────────────────────
 * SurfCheck guides — hub + article stylesheet (D-047)
 * Loaded by every tools/build_guides.py page, after brand.css (colour
 * tokens, both themes) and tides.css (the site's shared editorial chrome:
 * the reset, body, .page, .crumb, h1, .sub, .bar, .lh, .links).
 *
 * This file is ONLY what the guides add. Nothing here restyles a shared
 * class, so a guides change can never move a tide or webcam page — which
 * is also why GUIDES_VER is its own token in asset_versions.py and a
 * guides restyle needs no site-wide sweep.
 *
 * Dark-first: every colour is a brand token, so the page follows the
 * visitor's theme and SCPrefs' toggle with no rules of its own.
 * Sharp corners throughout — brand.css pins --radius to 0 and tides.css's
 * reset pins every element to 0; nothing here reintroduces one.
 * ────────────────────────────────────────────────────────────────────── */

/* ── reading measure ────────────────────────────────────────────────────
   tides.css's .page is 900px, which is right for a data page and too wide
   for prose. The article column is 720px — a comfortable 70-80 characters
   at 17px — and the hub is wider because it is a grid of cards, not text. */
.gd-article { max-width: 720px; }
.gd-hub { max-width: 1040px; }

/* ── header stack ── */
.gd-dek {
  font-family: var(--fb);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--mist);
  margin-top: 10px;
  max-width: 62ch;
}
.gd-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: 12px;
  font-family: var(--fm);
  font-size: 11px;
  color: var(--fog);
}
.gd-by { color: var(--foam); }
/* The review date is deliberately prominent rather than a footnote: on a
   safety page it is part of the content, not metadata about it. */
.gd-rev { color: var(--mist); }
.gd-rev time { color: var(--foam); }
.gd-safety {
  font-family: var(--fd);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid var(--amber);
  padding: 2px 6px;
}

/* ── body prose ─────────────────────────────────────────────────────────
   One rhythm: every block gets its top margin from this list and nothing
   sets a bottom margin, so two adjacent blocks never add two gaps. */
.gd-body {
  font-family: var(--fb);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.62;
  color: var(--foam);
}
.gd-body > * + * { margin-top: 18px; }
.gd-body h2 {
  font-family: var(--fd);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
  letter-spacing: -.005em;
  margin-top: 36px;
  padding-top: 14px;
  border-top: 1px solid var(--border-dim);
}
.gd-body h3 {
  font-family: var(--fd);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--white);
  margin-top: 26px;
}
.gd-body strong { font-weight: 500; color: var(--white); }
.gd-body em { font-style: italic; }
.gd-body a {
  color: var(--tidal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.gd-body a:hover { background: var(--tidal-glow); }
.gd-body code {
  font-family: var(--fm);
  font-size: .86em;
  color: var(--mist);
  background: var(--surface);
  border: 1px solid var(--border-dim);
  padding: 1px 5px;
}
.gd-body ul, .gd-body ol { padding-left: 22px; }
.gd-body li + li { margin-top: 7px; }
.gd-body ul { list-style: none; padding-left: 18px; }
.gd-body ul > li { position: relative; }
.gd-body ul > li::before {
  content: "";
  position: absolute;
  left: -14px;
  top: .62em;
  width: 6px;
  height: 1px;
  background: var(--tidal);
}
.gd-body ol { list-style: decimal; }
.gd-body ol > li::marker { font-family: var(--fm); font-size: .8em; color: var(--fog); }
.gd-quote {
  border-left: 3px solid var(--tidal);
  background: var(--surface);
  padding: 12px 16px;
  color: var(--white);
}
.gd-quote p { font-size: 16px; }
.gd-rule { border: 0; border-top: 1px solid var(--border-dim); }

/* ── figures ────────────────────────────────────────────────────────────
   The diagrams are built for FULL-WIDTH placement (handover brief §3) and
   carry their own viewBox with no width/height, so they scale to this box.
   The panel is the card; the SVG is block so no inline baseline gap
   appears beneath it. */
.gd-figure {
  margin-top: 28px;
  background: var(--surface);
  border: 1px solid var(--border-dim);
  padding: 14px;
}
.gd-figure svg {
  display: block;
  width: 100%;
  height: auto;
}
.gd-figcap {
  font-family: var(--fb);
  font-size: 13px;
  line-height: 1.45;
  color: var(--mist);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-dim);
}

/* ── sources (visible, and mandatory on a safety page) ── */
.gd-sources {
  margin-top: 34px;
  background: var(--surface);
  border: 1px solid var(--border-dim);
}
.gd-sources ul {
  list-style: none;
  padding: 12px 14px;
  font-family: var(--fb);
  font-size: 14px;
  line-height: 1.5;
}
.gd-sources li + li { margin-top: 8px; }
.gd-sources a { color: var(--tidal); }
.gd-sources a:hover { text-decoration: underline; }

/* ── read next ── */
.gd-related { margin-top: 30px; }
.gd-rel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border: 1px solid var(--border-dim);
  border-top: 0;
}
.gd-rel-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 15px;
  border-right: 1px solid var(--border-dim);
}
.gd-rel-card:last-child { border-right: 0; }
.gd-rel-card:hover { background: var(--raised); }
.gd-rel-g {
  font-family: var(--fd);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--fog);
}
.gd-rel-t { font-family: var(--fd); font-size: 15px; font-weight: 700; color: var(--white); line-height: 1.25; }
.gd-rel-card:hover .gd-rel-t { color: var(--tidal); }
.gd-rel-d { font-family: var(--fb); font-size: 13px; font-weight: 300; line-height: 1.45; color: var(--mist); }

/* ── check the forecast: the guide linking OUT into live data ── */
.gd-live { margin-top: 26px; border: 1px solid var(--tidal); }
.gd-live .lh { background: var(--tidal); color: var(--on-accent); }
.gd-live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.gd-live-grid a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 14px;
  border-right: 1px solid var(--border-dim);
  border-top: 1px solid var(--border-dim);
  font-family: var(--fd);
  font-size: 14px;
  font-weight: 700;
  color: var(--foam);
}
.gd-live-grid a:hover { background: var(--raised); color: var(--tidal); }
.gd-live-m {
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fog);
}

/* ── hub ────────────────────────────────────────────────────────────── */
.gd-group { margin-top: 26px; }
/* The band runs the full width so its border meets the card grid's; the
   TEXT inside keeps a reading measure. Capping the band itself left its
   border stopping mid-row. */
.gd-group-sub {
  padding: 11px 14px;
  border: 1px solid var(--border-dim);
  border-top: 0;
}
.gd-group-sub span {
  display: block;
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--mist);
  max-width: 68ch;
}
.gd-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  border: 1px solid var(--border-dim);
  border-top: 0;
}
.gd-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 15px 16px 16px;
  border-right: 1px solid var(--border-dim);
  border-top: 1px solid var(--border-dim);
}
.gd-card:hover { background: var(--raised); }
.gd-card-t {
  font-family: var(--fd);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.22;
  color: var(--white);
}
.gd-card:hover .gd-card-t { color: var(--tidal); }
.gd-card-d {
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--mist);
  flex: 1 1 auto;
}
.gd-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--fog);
}
.gd-card-safety {
  font-family: var(--fd);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid var(--amber);
  padding: 1px 5px;
}

/* ── MOBILE ─────────────────────────────────────────────────────────────
   D-039's edge reclaim and D-040's two rhythm tokens, applied to this
   template's cards. The four token VALUES are the page rule's, declared in
   spot-page.css's 640px block; a guide page does not load that sheet, so
   they are redeclared here with the same values rather than invented.
   `--mobile-bleed` MUST equal .page's horizontal padding (tides.css: 16px)
   — that equality is what lands a card exactly on the viewport edge.

   Horizontal bleed on the full-width cards only. The article's PROSE keeps
   the page gutter: text running to the glass is the one thing the reclaim
   must not do, so .gd-body is untouched and the figures and the three
   closing blocks are what bleed. */
@media (max-width: 640px) {
  :root {
    --mobile-bleed: 16px;
    --mobile-card-pad: 12px;
    --mobile-card-gap: 14px;
    --mobile-card-pad-y: 10px;
  }
  .page { padding-top: 12px; }

  .gd-figure,
  .gd-sources,
  .gd-related,
  .gd-live,
  .gd-group {
    margin-left: calc(-1 * var(--mobile-bleed));
    margin-right: calc(-1 * var(--mobile-bleed));
    border-left: 0;
    border-right: 0;
  }
  /* The figure is the one card that keeps a real inner padding: the diagram
     needs a margin against the bezel or its own border reads as the
     viewport edge. The others carry their padding on their rows. */
  .gd-figure {
    padding-left: var(--mobile-card-pad);
    padding-right: var(--mobile-card-pad);
    padding-top: var(--mobile-card-pad-y);
    padding-bottom: var(--mobile-card-pad-y);
    margin-top: var(--mobile-card-gap);
  }
  .gd-sources, .gd-related, .gd-live { margin-top: var(--mobile-card-gap); }
  .gd-sources ul,
  .gd-group-sub { padding: var(--mobile-card-pad-y) var(--mobile-card-pad); }
  .gd-rel-grid, .gd-card-grid { border-left: 0; border-right: 0; }

  /* One column, one divider: a 2-up grid of cards at 390 gives 170px of
     measure, which is three words a line. */
  .gd-rel-grid, .gd-card-grid, .gd-live-grid { grid-template-columns: 1fr; }
  .gd-rel-card, .gd-card, .gd-live-grid a { border-right: 0; }
  .gd-rel-card, .gd-card { padding: var(--mobile-card-pad-y) var(--mobile-card-pad); }

  /* Prose at 390: 16px body, and the h2 rule tightens because the border
     above it is already doing the separating. */
  .gd-body { font-size: 16px; }
  .gd-dek { font-size: 16px; }
  .gd-body > * + * { margin-top: 15px; }
  .gd-body h2 { font-size: 1.2rem; margin-top: 26px; padding-top: 12px; }
  .gd-body h3 { font-size: 1rem; margin-top: 20px; }
  /* h1 at 2rem uppercase overruns 390 on a long title; 1.55 keeps the
     longest of them (Travelling with surfboards) on two lines. */
  h1 { font-size: 1.55rem; }
}

/* ── tables (D-053) ─────────────────────────────────────────────────────
   The written guides carry real tables — 39 rows of Irish swimming spots
   in one of them. A four-column table is never going to fit 390px, so it
   scrolls inside its OWN container: the page body must never scroll
   sideways to accommodate content, which is the rule the whole mobile
   treatment rests on. */
.gd-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-dim);
  background: var(--surface);
}
.gd-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;          /* below this the cells stop being readable */
  font-family: var(--fb);
  font-size: 14px;
  line-height: 1.45;
}
.gd-table th {
  text-align: left;
  font-family: var(--fd);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fog);
  background: var(--abyss);
  padding: 9px 12px;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.gd-table td {
  padding: 10px 12px;
  border-top: 1px solid var(--border-dim);
  color: var(--foam);
  vertical-align: top;
}
.gd-table tr:hover td { background: var(--raised); }
.gd-table strong { color: var(--white); font-weight: 500; }
.gd-table a { color: var(--tidal); }

/* ── photography (D-053) ────────────────────────────────────────────────
   Drop-in slots, field-presence: nothing here renders until an image is in
   content/guides/images/. The hero sits between the byline and the section
   bar; inline figures land after the Nth section. */
.gd-hero { margin-top: 16px; }
.gd-photo { margin-top: 28px; }
.gd-hero img, .gd-photo img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface);
}
.gd-hero figcaption, .gd-photo figcaption {
  font-family: var(--fb);
  font-size: 13px;
  line-height: 1.45;
  color: var(--mist);
  margin-top: 8px;
}
/* Credit is a condition of use on most of this photography, so it is part
   of the figure, not an optional extra. */
.gd-credit {
  font-family: var(--fm);
  font-size: 11px;
  color: var(--fog);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .gd-table-wrap {
    margin-left: calc(-1 * var(--mobile-bleed));
    margin-right: calc(-1 * var(--mobile-bleed));
    border-left: 0;
    border-right: 0;
    margin-top: var(--mobile-card-gap);
  }
  .gd-table { font-size: 13px; }
  .gd-table th, .gd-table td { padding: 8px var(--mobile-card-pad); }
  .gd-hero, .gd-photo {
    margin-left: calc(-1 * var(--mobile-bleed));
    margin-right: calc(-1 * var(--mobile-bleed));
    margin-top: var(--mobile-card-gap);
  }
  .gd-hero figcaption, .gd-photo figcaption {
    padding-left: var(--mobile-card-pad);
    padding-right: var(--mobile-card-pad);
  }
}