/* ──────────────────────────────────────────────────────────────────────
 * SurfCheck region + nation hubs — shared stylesheet
 * Loaded by every tools/generate_region_hubs.py page (/uk/{nation} and
 * /uk/{nation}/{region}) after brand.css (tokens, both themes) and
 * tides.css (the page chrome: .page .crumb h1 .sub .bar .lh .links .attn —
 * reused verbatim, the same borrowing webcams.css does, D-024). This file
 * holds only the hub-specific rules. No hex, no radius (brand.css --radius
 * is 0; tides.css's reset pins every element to 0).
 *
 * ONE COMPONENT FOR BOTH TIERS. A nation hub lists region hubs, a region hub
 * lists spots, and both render as a `.lh`-headed bordered block of
 * `.hub-row`s — the shape .cam-tier and the tide tables already use. The
 * alternative was a card grid, which is what a first draft had: with
 * `auto-fill, minmax(240px, 1fr)` a hub holding ONE spot renders one card
 * stretched across 1100px, and /uk/wales/gower, /uk/wales/porthcawl and
 * /uk/scotland/scottish-borders all hold exactly one. Rows read the same at
 * one as at fourteen, which is the requirement these pages actually have.
 * ────────────────────────────────────────────────────────────────────── */

/* The hub is a wide page like the cam wall, not the 900px tide column. */
.hub-page{max-width:1100px}

.hub-intro{font-family:var(--fb);font-size:14px;line-height:1.6;color:var(--foam);max-width:760px;margin:0}

/* ── the list block ── */
.hub-block{margin-top:18px;border:1px solid var(--border);background:var(--surface)}
.hub-block .lh{font-size:11px}
.hub-list{list-style:none;margin:0;padding:0}

.hub-row{display:flex;align-items:baseline;gap:6px 16px;flex-wrap:wrap;
         padding:11px 14px;border-bottom:1px solid var(--border-dim)}
.hub-row:last-child{border-bottom:0}
.hub-row:hover{background:var(--tidal-glow)}

/* The name is the row's link and carries the row's weight. flex-basis keeps
   a long break name on its own line before the facts wrap under it. */
.hub-name{font-family:var(--fd);font-size:15px;font-weight:700;color:var(--white);
          line-height:1.2;flex:1 1 200px;min-width:0}
.hub-row:hover .hub-name{color:var(--tidal)}
.hub-facts{font-family:var(--fm);font-size:11px;color:var(--mist);flex:1 1 220px;min-width:0}
.hub-tide{font-family:var(--fm);font-size:11px;white-space:nowrap;margin-left:auto}
.hub-tide a{color:var(--tidal)}
.hub-tide a:hover{text-decoration:underline}
.hub-modelled{font-family:var(--fd);font-size:9px;font-weight:700;letter-spacing:.11em;
              text-transform:uppercase;color:var(--fog);margin-left:5px}
.hub-notide{color:var(--fog)}

/* A region row on a NATION hub: the count sits where the tide cell does, and
   a thin hub says so in the open rather than only in a meta tag. */
.hub-count{font-family:var(--fm);font-size:11px;color:var(--mist);white-space:nowrap;margin-left:auto}
.hub-thin{font-family:var(--fd);font-size:9px;font-weight:700;letter-spacing:.11em;
          text-transform:uppercase;color:var(--amber);margin-left:8px}

/* ── a hub whose spots are canonical in another country's tree ── */
.hub-row.hub-elsewhere .hub-name::after{content:"↗";font-size:11px;color:var(--fog);margin-left:6px}

/* ── the standing note (two-coast regions, cross-link hubs) ── */
.hub-note{font-family:var(--fb);font-size:12px;line-height:1.55;color:var(--mist);
          margin:14px 0 0;padding:9px 12px;background:var(--surface);
          border:1px solid var(--border-dim);border-left:3px solid var(--amber);max-width:760px}

/* ── phone: the block goes edge to edge and every row stacks ──
   The same -16px reclaim .cam-block uses against .page's 16px padding, so a
   row's name is not indented twice on a 390px screen. */
@media(max-width:640px){
  .hub-block{border-left:0;border-right:0;margin-left:-16px;margin-right:-16px}
  .hub-block .lh,.hub-row{padding-left:16px;padding-right:16px}
  .hub-row{flex-direction:column;align-items:flex-start;gap:4px}
  .hub-name,.hub-facts{flex:0 1 auto}
  .hub-tide,.hub-count{margin-left:0}
  .hub-note{margin-left:-16px;margin-right:-16px;max-width:none}
}