/* Daylight theme — heroes. Split from daylight.css (see docs/adr/0002). */

/* ---------- Hero (homepage): type-led split, no scrim ---------- */

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.hero-copy h1 {
  font-size: clamp(2.7rem, 5.6vw, 4.4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.hero-copy .sub {
  margin-top: 20px;
  max-width: 46ch;
  font-size: 1.13rem;
  color: var(--tx-muted);
}

.hero-copy .btn-row {
  margin-top: 30px;
}

/* ---------- Latitude rail: the hero's brand device ----------
   Anchor cities as ticks at their true relative latitude between Kiruna
   and Malmö — a horizontal echo of the Sweden strip further down. */

/* Orchestrated load: kicker → headline → sub → actions rise in sequence,
   then the photo fades in. Gated on html.js; disabled under reduced motion. */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes hero-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

html.js .hero-copy > * {
  animation: hero-rise 0.6s var(--ease) backwards;
}

html.js .hero-copy > :nth-child(1) { animation-delay: 0.05s; }
html.js .hero-copy > :nth-child(2) { animation-delay: 0.14s; }
html.js .hero-copy > :nth-child(3) { animation-delay: 0.26s; }
html.js .hero-copy > :nth-child(4) { animation-delay: 0.38s; }
html.js .hero-copy > :nth-child(5) { animation-delay: 0.5s; }

html.js .hero-photo,
html.js .hero-form-card {
  animation: hero-fade 0.9s var(--ease) 0.45s backwards;
}

@media (prefers-reduced-motion: reduce) {
  html.js .hero-copy > *,
  html.js .hero-photo,
  html.js .hero-form-card {
    animation: none;
  }
}

.hero-photo img {
  aspect-ratio: 4 / 5;
}

/* ---------- Hero (homepage 1b): photo-led split ----------
   Both columns sit inside .container, so the hero shares every band's
   symmetric page margins; the photo fills its cell (640px+) and the copy
   centers against it. */

/* Wide screens: the photo overhangs the container edge into the right page
   margin (capped, so it never reaches the viewport edge — margins are ≥80px
   once the viewport passes 1400px) */

/* Factual caption chip pinned to the photo's bottom-left corner */
.hero-chip {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--c-dagsljus);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--c-ink-muted);
  padding: 10px 18px 10px 16px;
}

/* ---------- Hero (subpages v2): copy left, photo full-bleed right ----------
   The photo runs to the viewport edge; the copy column's inner padding
   approximates the container's left margin (desktop spec from the v2
   mockups; mobile stacks). */
.hero-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.hero-duo .hero-copy {
  padding: clamp(48px, 6vw, 88px) clamp(28px, 4vw, 64px) clamp(48px, 6vw, 88px) clamp(32px, 6.5vw, 100px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-duo h1 {
  font-size: clamp(2.125rem, 4.5vw, 3.375rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  max-width: 16ch;
}

.hero-duo .sub {
  margin-top: 20px;
  max-width: 46ch;
  font-size: 1.12rem;
  color: var(--tx-muted);
}

.hero-duo .btn-row {
  margin-top: 30px;
  align-items: center;
  gap: 18px;
}

.hero-duo .hero-photo {
  position: relative;
  min-height: 520px;
}

.hero-duo .hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .hero-duo {
    grid-template-columns: 1fr;
  }

  .hero-duo .hero-photo {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .hero-duo .hero-photo img {
    position: static;
    height: 100%;
  }
}

/* ---------- Cards overlapping the hero seam (om-oss, fastighetsagare) ----
   A .container.seam-cards strip right after the hero pulls up over the seam;
   the cards sit on mist with a soft shadow so they read above both surfaces.
   The hero takes --seam so its caption chip clears the overlap. */
.seam-cards {
  position: relative;
  z-index: 1;
  margin-top: -52px;
}

.seam-cards .card-grid {
  --gap: 14px;
}

.seam-cards .card {
  background: var(--c-dis);
  border-color: var(--c-line-soft);
  box-shadow: var(--shadow-soft);
}

.hero-duo--seam .hero-chip {
  bottom: 88px;
}

/* ---------- Hero (content pages): compact split ---------- */
.hero-page {
  padding-block: clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--c-line-soft);
}

.hero-page .hero-grid {
  align-items: center;
}

.hero-page h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  font-weight: 700;
}

.hero-page .sub {
  margin-top: 16px;
  max-width: 52ch;
  color: var(--tx-muted);
}

.hero-page .btn-row {
  margin-top: 26px;
}

.hero-page .hero-photo img {
  aspect-ratio: 3 / 2;
}