/* ============================================================
   Goodwood Marine — products

   The Raymarine range. Fifteen categories is a lot to put in
   front of someone on marina wifi, so they are grouped into four
   blocks and each block is scanned, not read. The page never
   quotes a price and never claims an authorisation.
   ============================================================ */

/* The range opens straight after the page head — no preamble, and no full
   section gap on top of the head's own padding. */
.page-head + .section { padding-top: var(--sp-8); }

/* Four groups. The rule under each heading is what does the
   dividing — the tiles themselves stay quiet. */
.range-group + .range-group { margin-top: var(--sp-9); }
/* Heading left, its own line right — the same two-column head the home
   services block uses. Four identical heading-rule-grid blocks is what makes
   a page read as generated; a written line per group is information. */
.range-group__head {
  display: grid; gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-light);
}
.range-group__head h2 { font-size: var(--fs-xl); }

.range-group__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }

/* The ordering steps reuse .principles from base.css. Only the
   heading block above them is page-local. */
.steps-head { margin-bottom: var(--sp-8); }
.steps-head h2 { max-width: 16ch; }

@media (min-width: 600px) {
  .range-group__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}

@media (min-width: 900px) {
  .range-group + .range-group { margin-top: var(--sp-10); }
  .range-group__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── CATEGORY HUBS ───────────────────────────────────────────
   /products/<category>.html — the persuasion layer between the
   range landing and the enquiry. One template: crumbs, a
   problem-first head, a directive heading, the family grid, an
   ecosystem close. */

.crumbs {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-sm); color: var(--muted-dark);
  margin-bottom: var(--sp-5);
}
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--bone); }
.crumbs .sep { opacity: .5; }
.crumbs [aria-current] { color: var(--bone); }

/* "Choose your radar." — the directive heading over the family grid. */
.hub-choose { margin-bottom: var(--sp-7); }
.hub-choose h2 { max-width: 18ch; }

/* The enquiry row on a family card. The card itself goes nowhere,
   so only this row may look interactive. */
.range-card__ask {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 46px; margin-top: var(--sp-1);
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--ink-text); text-decoration: none;
}
.range-card__ask svg { width: 14px; height: 14px; color: var(--amber); transition: transform var(--t-fast) var(--ease-out); }
.range-card__ask:hover svg { transform: translateX(3px); }
.range-card__ask:hover { color: var(--amber-ink); }

/* Landing tiles that lead to a hub get a go-row; the rest stay quiet. */
.range-card__go {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 46px; margin-top: var(--sp-1);
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-text);
}
.range-card__go svg { width: 14px; height: 14px; color: var(--amber); transition: transform var(--t-fast) var(--ease-out); }
a.range-card:hover .range-card__go svg { transform: translateX(3px); }

/* Ecosystem close — the dark statement band, without a photograph. */
.band--flat { background: var(--ink); }
.band--flat .band__inner { max-width: 52ch; }

/* A landing tile that leads to a hub. The <li> stays the grid child (valid
   inside the <ul>), and the go-row's ::after stretches its hit area over
   the whole card. Only tiles with somewhere to go get the hover border. */
.range-card--link { position: relative; }
@media (hover: hover) and (pointer: fine) {
  .range-card--link:hover { border-color: var(--amber); }
}
.range-card--link:active { border-color: var(--amber); transition-duration: 80ms; }
.range-card__go::after { content: ""; position: absolute; inset: 0; }