/**
 * HAVEN Child — Homepage section styles (Track B production sprint).
 *
 * Builds on the tokens in style.css. Nothing here introduces a new colour,
 * font or radius: every value resolves to an existing HAVEN token so the
 * design system stays single-sourced.
 *
 * The goal is rhythm. The Homepage previously alternated card grid / image /
 * card grid, which reads as a template no matter how good the cards are. These
 * sections deliberately vary the shape: an asymmetric editorial statement, a
 * dark technical panel with a drawing, a horizontal process rail, and a
 * full-bleed conversion band.
 */

/* ---------------------------------------------------------------- display */

.hvn-display {
  font-size: var(--hvn-fs-display);
  line-height: var(--hvn-lh-tight);
  letter-spacing: var(--hvn-tr-display);
  font-weight: 600;
  margin: 0 0 var(--hvn-s5);
  max-width: 19ch;
}

.hvn-display em {
  display: block;
  font-style: normal;
  font-weight: 400;
  color: var(--hvn-text-secondary);
  max-width: 20ch;
}

/* ------------------------------------------------------- positioning beat */

.hvn-pos__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  grid-template-columns: 1fr;
  align-items: start;
}

.hvn-pos__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.hvn-pos__points li {
  padding: var(--hvn-s5) 0;
  border-top: 1px solid var(--hvn-border);
}

.hvn-pos__points li:last-child { border-bottom: 1px solid var(--hvn-border); }

.hvn-pos__points h3 {
  font-size: var(--hvn-fs-h3);
  line-height: var(--hvn-lh-heading);
  margin: 0 0 var(--hvn-s2);
  font-weight: 600;
}

.hvn-pos__points p {
  margin: 0;
  color: var(--hvn-text-secondary);
  max-width: 42ch;
}

@media (min-width: 900px) {
  .hvn-pos__grid { grid-template-columns: 1.35fr 1fr; }
  /* The rail sits slightly lower than the statement so the two columns read
     as related rather than as a two-up layout. */
  .hvn-pos__points { margin-top: calc(var(--hvn-s7) + var(--hvn-s2)); }
}

/* --------------------------------------------------------- measured body */

.hvn-load__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}

.hvn-load__note {
  color: var(--hvn-text-invert-soft);
  border-left: 2px solid var(--hvn-tan);
  padding-left: var(--hvn-s4);
  margin: var(--hvn-s5) 0 var(--hvn-s6);
  max-width: 46ch;
}

.hvn-load strong { font-weight: 600; }

.hvn-facts--tight {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hvn-s4) var(--hvn-s6);
  margin: 0;
}

.hvn-facts--tight dt {
  font-size: var(--hvn-fs-label);
  letter-spacing: var(--hvn-tr-label);
  text-transform: uppercase;
  color: var(--hvn-text-invert-soft);
  margin: 0 0 var(--hvn-s1);
}

.hvn-facts--tight dd {
  margin: 0;
  font-size: var(--hvn-fs-h3);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* nowrap belongs ONLY to the measured figures ("4,32 m", "1.035 kg"). Applied
   globally it made "Wien und Umgebung" overflow its column in the service-area
   section and collide with its neighbour. */
.hvn-load .hvn-facts--tight dd { white-space: nowrap; }

.hvn-load__fig { margin: 0; }

.hvn-load__svg {
  width: 100%;
  height: auto;
  color: var(--hvn-text-invert-soft);
  display: block;
}

.hvn-load__dim {
  fill: currentColor;
  font-family: var(--hvn-font);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

.hvn-load__fig figcaption {
  margin-top: var(--hvn-s4);
  font-size: var(--hvn-fs-small);
  color: var(--hvn-text-invert-soft);
  max-width: 44ch;
}

@media (min-width: 900px) {
  .hvn-load__grid { grid-template-columns: 1fr 1.05fr; }
  .hvn-facts--tight { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ process rail */

.hvn-proc__head {
  display: grid;
  gap: var(--hvn-s5);
  grid-template-columns: 1fr;
  align-items: end;
  margin-bottom: var(--hvn-s8);
}

.hvn-proc__head .hvn-lede { margin: 0; max-width: 38ch; }

.hvn-proc__rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--hvn-s6);
  grid-template-columns: 1fr;
  counter-reset: hvnstep;
}

.hvn-proc__step {
  position: relative;
  padding-top: var(--hvn-s5);
  border-top: 2px solid var(--hvn-primary);
}

/* Steps after the first carry a lighter rule, so the eye starts at 01. */
.hvn-proc__step + .hvn-proc__step { border-top-color: var(--hvn-border); }

.hvn-proc__num {
  display: block;
  font-size: var(--hvn-fs-h2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--hvn-navy-40);
  line-height: 1;
  margin-bottom: var(--hvn-s4);
  transition: color var(--hvn-dur) ease;
}

.hvn-proc__step:hover .hvn-proc__num { color: var(--hvn-tan); }

.hvn-proc__step h3 {
  font-size: var(--hvn-fs-h3);
  line-height: var(--hvn-lh-heading);
  margin: 0 0 var(--hvn-s3);
  font-weight: 600;
}

.hvn-proc__step p {
  margin: 0;
  color: var(--hvn-text-secondary);
}

/* Step titles wrap to one or two lines depending on the string; without a
   floor the body copy in adjacent columns starts at different heights. */
@media (min-width: 700px) {
  .hvn-proc__step h3 { min-height: calc(var(--hvn-fs-h3) * 2 * var(--hvn-lh-heading)); }
}

@media (min-width: 700px) {
  .hvn-proc__head { grid-template-columns: 1.4fr 1fr; }
  .hvn-proc__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hvn-s7) var(--hvn-s6); }
}

@media (min-width: 1040px) {
  .hvn-proc__rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* -------------------------------------------------------- conversion band */

.hvn-band {
  background: var(--hvn-primary-deep);
  color: var(--hvn-text-invert);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.hvn-band__grid {
  display: grid;
  gap: var(--hvn-s6);
  grid-template-columns: 1fr;
  align-items: center;
}

.hvn-band h2 {
  /* The global h2 rule paints navy; on a navy band that is invisible. The
     inverted colour has to be stated explicitly, not inherited. */
  color: var(--hvn-text-invert);
  font-size: var(--hvn-fs-h2);
  line-height: var(--hvn-lh-heading);
  letter-spacing: var(--hvn-tr-h2);
  margin: 0 0 var(--hvn-s3);
  font-weight: 600;
  max-width: 18ch;
}

.hvn-band p {
  margin: 0;
  color: var(--hvn-text-invert-soft);
  max-width: 40ch;
}

.hvn-band__actions {
  display: grid;
  gap: var(--hvn-s3);
  grid-template-columns: 1fr;
}

.hvn-band__link {
  display: flex;
  flex-direction: column;
  gap: var(--hvn-s1);
  min-height: var(--hvn-tap);
  justify-content: center;
  padding: var(--hvn-s4) var(--hvn-s5);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--hvn-radius-lg);
  color: var(--hvn-text-invert);
  text-decoration: none;
  transition: background var(--hvn-dur) ease, border-color var(--hvn-dur) ease, transform var(--hvn-dur) ease;
}

.hvn-band__link:hover,
.hvn-band__link:focus-visible {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .55);
  transform: translateY(-2px);
}

.hvn-band__link--tel { background: rgba(255, 255, 255, .06); }

.hvn-band__kind {
  font-size: var(--hvn-fs-label);
  letter-spacing: var(--hvn-tr-label);
  text-transform: uppercase;
  color: var(--hvn-text-invert-soft);
}

.hvn-band__val {
  font-size: var(--hvn-fs-lede);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 800px) {
  .hvn-band__grid { grid-template-columns: 1fr 1.2fr; gap: var(--hvn-s8); }
  .hvn-band__actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ card polish */

/* The service cards previously sat flat on the alt surface. A hairline plus a
   restrained hover lift gives the grid some depth without turning it into a
   shadowed card template. */
.hvn-card {
  transition: transform var(--hvn-dur) ease, border-color var(--hvn-dur) ease;
}

.hvn-card--link:hover,
.hvn-card--link:focus-within {
  transform: translateY(-3px);
  border-color: var(--hvn-border-strong);
}

@media (prefers-reduced-motion: reduce) {
  .hvn-card,
  .hvn-band__link,
  .hvn-proc__num { transition: none; }
  .hvn-card--link:hover,
  .hvn-card--link:focus-within,
  .hvn-band__link:hover,
  .hvn-band__link:focus-visible { transform: none; }
}

/* ----------------------------------------------------- hero overflow guard */

/* The Hero stage sizes itself to 100vw and its parallax layers are drawn at
   2x stage width so they have travel. With a visible scrollbar, 100vw exceeds
   the document's client width and the unclipped layers add ~8px of horizontal
   page scroll at desktop widths. Both are corrected here rather than in the
   Hero's own stylesheet, because the Hero is under separate creative
   development and its design must not be touched by this migration.
   .hvn-h3__pin carries the sticky positioning, so the clip is applied to the
   stage inside it — clipping the pin itself would break the pinning. */
.hvn-h3 { max-width: 100%; }
.hvn-h3__stage { overflow: hidden; }