/* =====================================================================
   style-page.css

   Shared stylesheet for the style and feature landing pages:
   /outdoor, /hiking, /cycling, /winter, /3d, /custom-map-style.

   Loaded after base.css, so it inherits the tokens, nav and footer and
   only adds what this page type needs. One stylesheet rather than six,
   because the pages differ in copy and demo location, not in layout.

   The hero deliberately ships a static poster image rather than a live
   MapLibre canvas. Three reasons, in order of weight:

     1. A canvas contributes no indexable text in the one place the page
        most needs it. The poster sits beside real copy instead.
     2. MapLibre plus a style plus the first tiles is a slow LCP, and LCP
        is a ranking signal. A preloaded WebP is a fast one.
     3. A poster can rank in Google Images for "ski piste map" or
        "hiking map style". A canvas is invisible to image search, and
        for cartography terms that is real traffic to leave behind.

   The live map replaces the poster on click, or when the hero scrolls
   into view on a connection that can afford it. See style-page.js.
   ===================================================================== */

/* ---------- hero ---------------------------------------------------- */

.sp-hero {
  padding: 120px 0 64px;
  background:
    linear-gradient(180deg, var(--mtk-neutral-10) 0%, var(--mtk-white) 100%);
}

.sp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: center;
}

.sp-hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 14px 0 0;
  text-wrap: balance;
}

.sp-hero h1 .accent { color: var(--mtk-brand-red); }

.sp-lede {
  font-size: 1.12rem;
  line-height: 1.62;
  color: var(--mtk-fg-muted);
  margin: 20px 0 0;
  max-width: 34em;
}

/* The style URL, presented as the whole onboarding it is. */
.sp-url {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 0;
  padding: 12px 14px;
  background: var(--mtk-neutral-100);
  border-radius: 8px;
  overflow-x: auto;
}
.sp-url code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  color: #E8EAF2;
  white-space: nowrap;
}
.sp-url-copy {
  margin-left: auto;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.1);
  color: #E8EAF2;
  border: 0;
  border-radius: 5px;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
}
.sp-url-copy:hover { background: rgba(255, 255, 255, 0.18); }
.sp-url-copy:focus-visible { outline: 2px solid var(--mtk-primary-40); outline-offset: 2px; }

.sp-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }

/* ---------- poster and live map ------------------------------------- */

.sp-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--mtk-neutral-20);
  box-shadow: 0 1px 2px rgba(25, 31, 57, 0.06), 0 18px 40px -18px rgba(25, 31, 57, 0.3);
}

.sp-stage img.sp-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sp-stage .sp-map { position: absolute; inset: 0; }

/* Activation affordance. Hidden once the live map takes over, so the
   button never sits on top of an interactive canvas. */
.sp-activate {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 22px;
  background: linear-gradient(180deg, rgba(25, 31, 57, 0) 55%, rgba(25, 31, 57, 0.45) 100%);
  border: 0;
  width: 100%;
  cursor: pointer;
  font: inherit;
}
.sp-activate span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mtk-white);
  color: var(--mtk-fg-strong);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.86rem;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(25, 31, 57, 0.25);
}
.sp-activate:focus-visible { outline: 3px solid var(--mtk-primary-50); outline-offset: -3px; }
.sp-stage.is-live .sp-activate { display: none; }

/* ---------- generic section rhythm ---------------------------------- */

.sp-section { padding: 72px 0; }
.sp-section + .sp-section { border-top: 1px solid var(--mtk-neutral-20); }
.sp-section.is-subtle { background: var(--mtk-neutral-10); }

.sp-section h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 10px 0 0;
  text-wrap: balance;
}
.sp-section > .wrap > p,
.sp-body { font-size: 1.02rem; line-height: 1.68; color: var(--mtk-fg); max-width: 40em; }
.sp-section > .wrap > p { margin: 18px 0 0; }

/* ---------- feature cards ------------------------------------------- */

.sp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 36px 0 0;
}
.sp-card {
  background: var(--mtk-white);
  border: 1px solid var(--mtk-neutral-20);
  border-radius: 10px;
  padding: 22px 24px;
}
.sp-section.is-subtle .sp-card { box-shadow: 0 1px 2px rgba(25, 31, 57, 0.04); }
.sp-card h3 { font-size: 1.04rem; letter-spacing: -0.01em; margin: 0 0 8px; }
.sp-card p { font-size: 0.95rem; line-height: 1.6; color: var(--mtk-fg-muted); margin: 0; }
.sp-card p + p { margin-top: 10px; }

/* ---------- MapMaker call to action --------------------------------- */

.sp-mapmaker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  background: var(--mtk-primary-100);
  border-radius: 14px;
  padding: 36px 40px;
  margin: 40px 0 0;
  color: rgba(255, 255, 255, 0.82);
}
.sp-mapmaker h2 { color: var(--mtk-white); margin: 10px 0 0; }
.sp-mapmaker p { font-size: 1rem; line-height: 1.62; margin: 16px 0 0; max-width: 30em; }
.sp-mapmaker .eyebrow { color: var(--mtk-primary-30); }
.sp-mapmaker-shot {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: block;
}
.sp-mapmaker-shot img { width: 100%; height: auto; display: block; }

/* ---------- FAQ ----------------------------------------------------- */

.sp-faq { max-width: 46em; margin: 32px 0 0; }
.sp-faq details {
  border-bottom: 1px solid var(--mtk-neutral-20);
  padding: 4px 0;
}
.sp-faq details:first-of-type { border-top: 1px solid var(--mtk-neutral-20); }
.sp-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 34px 18px 0;
  position: relative;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--mtk-fg-strong);
}
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--mtk-neutral-50);
  border-bottom: 2px solid var(--mtk-neutral-50);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.18s ease;
}
.sp-faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.sp-faq summary:focus-visible { outline: 2px solid var(--mtk-primary-50); outline-offset: 2px; border-radius: 3px; }
.sp-faq .sp-answer {
  padding: 0 0 20px;
  font-size: 0.98rem;
  line-height: 1.66;
  color: var(--mtk-fg);
  max-width: 42em;
}
.sp-faq .sp-answer p { margin: 0 0 12px; }
.sp-faq .sp-answer p:last-child { margin-bottom: 0; }
.sp-faq .sp-answer code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--mtk-neutral-10);
  border: 1px solid var(--mtk-neutral-20);
  border-radius: 3px;
  padding: 0.06em 0.32em;
}

@media (prefers-reduced-motion: reduce) {
  .sp-faq summary::after { transition: none; }
}

/* ---------- code block ---------------------------------------------- */

.sp-code {
  background: var(--mtk-neutral-100);
  border-radius: 10px;
  padding: 20px 22px;
  overflow-x: auto;
  margin: 28px 0 0;
}
.sp-code pre { margin: 0; }
.sp-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  line-height: 1.68;
  color: #E8EAF2;
  white-space: pre;
}

/* ---------- attribution note, one line on every page ---------------- */

.sp-note {
  margin: 40px 0 0;
  padding: 16px 20px;
  background: var(--mtk-neutral-10);
  border-left: 3px solid var(--mtk-brand-red);
  border-radius: 0 6px 6px 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--mtk-fg);
  max-width: 44em;
}
.sp-note p { margin: 0; }

/* ---------- related pages ------------------------------------------- */

.sp-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 32px 0 0;
}
.sp-related a {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--mtk-neutral-20);
  border-radius: 10px;
  background: var(--mtk-white);
  text-decoration: none;
  color: var(--mtk-fg-strong);
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.sp-related a:hover { border-color: var(--mtk-primary-40); transform: translateY(-2px); }
.sp-related a strong { display: block; font-size: 1rem; letter-spacing: -0.01em; }
.sp-related a span { display: block; margin-top: 5px; font-size: 0.9rem; color: var(--mtk-fg-muted); }

@media (prefers-reduced-motion: reduce) {
  .sp-related a { transition: none; }
  .sp-related a:hover { transform: none; }
}

/* ---------- responsive ---------------------------------------------- */

@media (max-width: 980px) {
  .sp-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .sp-mapmaker { grid-template-columns: 1fr; padding: 28px 26px; gap: 26px; }
}

@media (max-width: 640px) {
  .sp-hero { padding: 96px 0 44px; }
  .sp-section { padding: 52px 0; }
  .sp-stage { aspect-ratio: 3 / 2; }
}

/* ---------- buttons -------------------------------------------------
   .btn-primary and .btn-ghost are defined in home.css, which these pages
   do not load: it is 41 KB of homepage-specific layout for two button
   rules. Copied here instead, byte-for-byte on the visual result, so the
   new pages match the homepage without carrying it.

   If the homepage buttons are ever restyled, these need the same edit.
   ------------------------------------------------------------------- */

.btn-primary {
  background: var(--mtk-primary-100);
  color: var(--mtk-white);
  border: none;
  padding: 13px 22px;
  border-radius: 10px;
  font-family: var(--mtk-font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: background var(--mtk-duration-fast) var(--mtk-ease), transform var(--mtk-duration-fast) var(--mtk-ease);
}
.btn-primary:hover { background: var(--mtk-primary-90); color: var(--mtk-white); text-decoration: none; }
.btn-primary:active { transform: scale(.99); }
.btn-primary svg { width: 16px; height: 16px; }

.btn-ghost {
  background: transparent;
  color: var(--mtk-fg-strong);
  border: 1px solid var(--mtk-border-strong);
  padding: 12px 20px;
  border-radius: 10px;
  font-family: var(--mtk-font-sans);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: background var(--mtk-duration-fast) var(--mtk-ease), border-color var(--mtk-duration-fast) var(--mtk-ease);
}
.btn-ghost:hover { background: var(--mtk-neutral-10); border-color: var(--mtk-neutral-40); color: var(--mtk-fg-strong); text-decoration: none; }

.btn-primary:focus-visible,
.btn-ghost:focus-visible { outline: 2px solid var(--mtk-primary-50); outline-offset: 2px; }