/* ============================================================
   /suunto page components.

   Only what public/site-shell.css has no answer for: the split-bleed
   hero and the step card that straddles its seam, the step schematics,
   the three-frame loop row, and the device band. Everything else on the
   page (header, section rhythm, eyebrow, badges, FAQ, closing CTA,
   footer) comes from the shell.

   Linked rather than inlined because designSystemTokenHygiene.spec.ts
   extracts <style> blocks from pages but reads linked stylesheets by
   path: an inline block on a third page would be a third source for
   rules the shell already owns, and this file is on that spec's list.

   Composes design-system tokens only (--rs-*). No raw hex, font or
   pixel colour values.
   ============================================================ */

/* ---------- Hero: copy on our own ground, photograph bleeding right ----------
   Nothing is set OVER the photograph. A scrim plus a headline is the generic
   treatment and it fights the picture's own light, which here runs from a dark
   ridge on the left to a bright horizon on the right. Splitting instead keeps
   the type on a controlled ground and lets the frame stay a photograph. The
   runner stands near the image's left edge, so she faces the words. */
.rs-suunto-hero { border-bottom: 1px solid var(--rs-ink-5); }
.rs-suunto-hero-grid { display: grid; }

/* Narrow screens lead with the photograph, not the headline. The page argues by
   showing, and with the copy first the picture sat entirely below the fold on a
   phone: the athlete met a wall of type where the whole point is a watch on a
   wrist. Capped so the headline still lands on the first screen behind it. */
.rs-suunto-hero-media { order: -1; }
@media (min-width: 900px) {
  .rs-suunto-hero-grid { grid-template-columns: 1fr 1.2fr; align-items: stretch; min-height: 560px; }
  .rs-suunto-hero-media { order: 0; }
}

/* A bleed gutter, NOT the centred content column. Tracking the 1200px column
   here was tried and reverted (operator, 2026-08-19): at 1920 it resolves to
   384px of left padding, which strands the headline in the middle of a black
   field and squeezes the text measure to ~410px. A gutter that grows gently
   with the viewport keeps the copy anchored to the left edge, which is what a
   full-bleed hero is for. */
.rs-suunto-hero-copy { padding: 40px 24px 44px; align-self: center; }
@media (min-width: 900px) {
  .rs-suunto-hero-copy { padding: 72px 56px 72px clamp(40px, 4.5vw, 96px); }
}
.rs-suunto-hero-copy h1 {
  font-size: 34px; line-height: 1.08; letter-spacing: -0.022em; font-weight: 600;
  margin: 0 0 18px; color: var(--rs-ink-1); text-wrap: balance;
}
@media (min-width: 900px) { .rs-suunto-hero-copy h1 { font-size: 46px; } }
.rs-suunto-lede { font-size: 17px; line-height: 1.6; color: var(--rs-ink-2); margin: 0 0 28px; max-width: 30em; }
@media (min-width: 900px) { .rs-suunto-lede { font-size: 19px; } }

/* The "Works with SUUNTO" lockup. The word is set in our own typeface at
   Suunto's own tracking, matching the homepage's mark row: we hold no
   permission for their logo, and none is needed to name them. */
.rs-suunto-eyebrow { display: flex; align-items: baseline; gap: 9px; margin: 0 0 14px; }
.rs-suunto-eyebrow-label {
  font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rs-secondary-ink);
}
.rs-suunto-mark { font-size: 15px; font-weight: 400; letter-spacing: 0.32em; margin-right: -0.32em; color: var(--rs-secondary-ink); }

/* The photograph. object-position favours the runner over the empty sky, so
   every crop the grid produces still holds her; one asset serves all widths. */
.rs-suunto-hero-media { position: relative; }
.rs-suunto-hero-media img {
  display: block; width: 100%; height: 46vh; min-height: 260px; max-height: 400px;
  object-fit: cover; object-position: 42% center;
}
@media (min-width: 900px) {
  .rs-suunto-hero-media img { height: 100%; min-height: 560px; max-height: none; }
}

/* On desktop the card straddles the seam between the copy and the photograph.
   Moving it fully inside the picture was tried and reverted (operator,
   2026-08-19). On narrow screens it tucks up under the photo instead. */
.rs-suunto-seam-card { display: flex; justify-content: center; margin: -52px 0 0; position: relative; z-index: 2; }
@media (min-width: 900px) {
  .rs-suunto-seam-card { position: absolute; left: -78px; bottom: 64px; margin: 0; }
}

/* ---------- Step schematics ----------
   A round face in our own type on our own ground, deliberately NOT a photoreal
   watch: the photography on this page shows a real Suunto, and a drawn lookalike
   beside it would read as a mock-up of Suunto's interface, which it is not. */
/* Smaller on a phone, where the card sits between the photograph and the
   headline and every pixel it takes pushes the headline off the fold. */
.rs-step { display: block; width: 128px; height: 128px; }
@media (min-width: 900px) { .rs-step { width: 172px; height: 172px; } }
/* margin auto matters: the figure is capped at 168px but the grid cell is
   wider, so without it the figure sits left while its label centres on the
   full cell, and the pair looks progressively skewed across the row. */
.rs-step-lg { width: 100%; max-width: 168px; height: auto; margin: 0 auto; }
.rs-step-bezel { fill: var(--rs-bg-sunken); stroke: var(--rs-ink-5); stroke-width: 6; }
.rs-step-track { fill: none; stroke: var(--rs-ink-5); stroke-width: 6; }
.rs-step-arc { fill: none; stroke: var(--rs-primary); stroke-width: 6; stroke-linecap: round; }
.rs-step-arc-soft { stroke: var(--rs-secondary); }
.rs-step-face { fill: var(--rs-bg); }
.rs-step-role { fill: var(--rs-secondary-ink); font-size: 11px; letter-spacing: 0.14em; font-weight: 500; }
.rs-step-value { fill: var(--rs-ink-1); font-family: var(--rs-font-numeric); font-size: 30px; }
.rs-step-value-sm { font-size: 24px; }
.rs-step-cue { fill: var(--rs-ink-2); font-size: 12px; }
.rs-step-pill { fill: var(--rs-primary); }
.rs-step-pill-text { fill: var(--rs-on-primary); font-size: 11px; font-weight: 500; }
.rs-step-card-wrap {
  background: var(--rs-bg); border: 1px solid var(--rs-ink-5); border-radius: var(--rs-radius-lg);
  padding: 14px; box-shadow: var(--rs-shadow-lg);
}

/* ---------- The loop, three frames ----------
   Glyphs are Lucide (link-2, watch, history) at stroke-width 1.5 in
   currentColor, per design-system/README.md: the brand ships zero custom icons
   and Lucide is the named set. A first pass hand-drew all three and the link
   read as a squiggle, which is the failure that rule exists to prevent. */
.rs-suunto-loop { display: grid; gap: 30px; }
@media (min-width: 760px) { .rs-suunto-loop { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.rs-suunto-loop-glyph { color: var(--rs-primary); margin-bottom: 16px; }
.rs-suunto-loop-glyph svg { display: block; }
.rs-suunto-loop h3 { font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--rs-ink-1); }
.rs-suunto-loop p { font-size: 15px; line-height: 1.6; color: var(--rs-ink-3); margin: 0; }

/* ---------- The session, up close ---------- */
.rs-suunto-session { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .rs-suunto-session { grid-template-columns: 5fr 7fr; gap: 52px; } }
.rs-suunto-session-shot { margin: 0; }
.rs-suunto-session-shot img {
  display: block; width: 100%; height: auto; border-radius: var(--rs-radius-lg);
  border: 1px solid var(--rs-ink-5);
}
.rs-suunto-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rs-suunto-step-label { font-size: 13px; line-height: 1.45; color: var(--rs-ink-3); text-align: center; margin: 10px 0 0; }

/* ---------- Device band ---------- */
.rs-suunto-devices { max-width: 700px; }
.rs-suunto-devices p { font-size: 17px; line-height: 1.65; color: var(--rs-ink-2); margin: 0 0 14px; }
.rs-suunto-devices p:last-child { margin-bottom: 0; }
.rs-suunto-devices em { font-style: normal; font-weight: 500; color: var(--rs-ink-1); }
.rs-suunto-source { font-size: 13px; line-height: 1.6; color: var(--rs-ink-3); }
.rs-suunto-source a { color: var(--rs-primary); text-decoration: underline; }

/* ---------- Credit + trademark ---------- */
.rs-suunto-credit {
  max-width: var(--rs-content-wide); margin: 0 auto; padding: 0 24px 28px;
  font-size: 12px; line-height: 1.6; color: var(--rs-ink-3);
}