/* ==========================================================================
   GSW Transport — pages.css
   Page-specific blocks: hero, page headers, network map, fleet, tracking,
   careers, contact, legal, 404.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Home hero — centred, typographic, no form
   -------------------------------------------------------------------------- */
.hero {
  padding-block: var(--sp-10) var(--sp-9);
  text-align: center;
}
@media (max-width: 700px) { .hero { padding-block: var(--sp-8) var(--sp-7); } }

.hero__inner { max-width: 860px; margin-inline: auto; }
.hero h1 { margin-bottom: var(--sp-5); }
.hero h1 em { font-style: normal; color: var(--c-accent-text); }
.hero .lead { max-width: 620px; margin: 0 auto var(--sp-6); }
.hero .btn-row { justify-content: center; }

.hero__note {
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

/* Full-bleed image band under the hero */
.hero-band {
  background: var(--c-surface-alt);
  padding-block: var(--sp-8);
}
.hero-band img, .hero-band svg { margin-inline: auto; max-width: 520px; width: 100%; }

/* --------------------------------------------------------------------------
   2. Interior page header
   -------------------------------------------------------------------------- */
.page-head {
  padding-block: var(--sp-7) var(--sp-6);
  border-bottom: 1px solid var(--c-line-soft);
}
.page-head__inner { max-width: 760px; }
.page-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.25rem); margin-bottom: var(--sp-4); }
.page-head p { margin: 0; }
.page-head--center .page-head__inner { margin-inline: auto; text-align: center; }
.page-head--center .breadcrumb ol { justify-content: center; }

/* --------------------------------------------------------------------------
   3. Network map
   -------------------------------------------------------------------------- */
.map-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--sp-8);
  align-items: center;
}
@media (max-width: 900px) { .map-block { grid-template-columns: minmax(0, 1fr); } }

.map-figure { margin: 0; }
.map-figure svg { width: 100%; height: auto; }
.map-figure figcaption {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--c-muted);
  text-align: center;
}
.wa-map__land { fill: #e9ebef; stroke: none; }
.wa-map__route { stroke: var(--c-accent); stroke-width: 2; stroke-dasharray: 6 6; fill: none; opacity: 0.75; }
.wa-map__hub { fill: var(--c-accent); stroke: #fff; stroke-width: 3; }
.wa-map__node { fill: #8e8e93; stroke: #fff; stroke-width: 2.5; }
.wa-map__label { font-family: var(--font); font-size: 18px; fill: var(--c-body); }
.wa-map__label--hub { font-size: 21px; font-weight: 600; fill: var(--c-ink); }

.legend { list-style: none; margin: var(--sp-5) 0 0; padding: 0; }
.legend li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-muted);
  margin-bottom: var(--sp-3);
}
.legend .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #8e8e93;
  flex: none;
  transform: translateY(-1px);
}
.legend .dot--hub { background: var(--c-accent); }
.legend strong { color: var(--c-ink); }

/* --------------------------------------------------------------------------
   4. Service + detail sections
   -------------------------------------------------------------------------- */
.detail {
  scroll-margin-top: calc(var(--header-h) + var(--sp-6));
  padding-block: var(--sp-8);
  border-top: 1px solid var(--c-line-soft);
}
.detail:first-of-type { border-top: 0; padding-top: var(--sp-6); }
.detail h2 { margin-bottom: var(--sp-4); }

.detail__art {
  background: var(--c-surface-alt);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.detail__art img { width: 100%; }

/* --------------------------------------------------------------------------
   5. Fleet
   -------------------------------------------------------------------------- */
.fleet-card__art {
  background: var(--c-surface);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.section--alt .fleet-card__art { background: var(--c-surface-alt); }
.fleet-card[hidden] { display: none; }

/* --------------------------------------------------------------------------
   6. Tracking
   -------------------------------------------------------------------------- */
.track-form { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end; }
.track-form .field { flex: 1 1 260px; }

.track-result[hidden] { display: none; }

.track-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--c-surface-alt);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-6);
}
@media (max-width: 760px) { .track-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.track-summary dt { font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: 0.15rem; }
.track-summary dd { margin: 0; color: var(--c-ink); }

/* --------------------------------------------------------------------------
   7. Careers
   -------------------------------------------------------------------------- */
.job {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--c-line-soft);
}
.job:first-child { border-top: 1px solid var(--c-line-soft); }
@media (max-width: 600px) { .job { grid-template-columns: minmax(0, 1fr); } }
.job h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.job p { font-size: var(--fs-sm); color: var(--c-muted); margin: 0; }
.job__meta { font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: var(--sp-2); }
.job[hidden] { display: none; }

/* --------------------------------------------------------------------------
   8. Contact
   -------------------------------------------------------------------------- */
.map-embed {
  border-radius: var(--r-lg);
  background: var(--c-surface-3);
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-6);
  color: var(--c-muted);
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   9. CTA band
   -------------------------------------------------------------------------- */
.cta {
  text-align: center;
  padding-block: var(--sp-9);
  background: var(--c-dark);
  color: rgba(255, 255, 255, 0.72);
}
.cta h2 { color: #fff; margin-bottom: var(--sp-4); }
.cta p { max-width: 540px; margin: 0 auto var(--sp-6); }
.cta .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   10. Prose + legal
   -------------------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--sp-7); letter-spacing: -0.015em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--sp-5); }
.prose p, .prose li { color: var(--c-body); }

.toc { font-size: var(--fs-sm); }
.toc ol { margin: 0; padding-left: 1.1rem; }
.toc li { margin-bottom: var(--sp-2); color: var(--c-muted); }

.article + .article { margin-top: var(--sp-7); padding-top: var(--sp-7); border-top: 1px solid var(--c-line-soft); }
.article__date { font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: var(--sp-2); }
.article h2 { font-size: var(--fs-xl); }

/* --------------------------------------------------------------------------
   11. 404 + sitemap
   -------------------------------------------------------------------------- */
.error-page { text-align: center; padding-block: var(--sp-10); }
.error-page__code {
  font-size: clamp(3.5rem, 12vw, 6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #8e8e93;
  margin-bottom: var(--sp-4);
}

.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-7);
}
@media (max-width: 800px) { .sitemap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sitemap-grid { grid-template-columns: minmax(0, 1fr); } }
.sitemap-grid h2 { font-size: var(--fs-base); margin-bottom: var(--sp-4); }
.sitemap-grid ul { list-style: none; padding: 0; margin: 0; }
.sitemap-grid li { margin-bottom: var(--sp-2); font-size: var(--fs-sm); }
.sitemap-grid a { display: inline-block; padding-block: 0.3rem; color: var(--c-muted); }
.sitemap-grid a:hover { color: var(--c-ink); }