/* Startsidan i den nya designen (src/lib/design.ts): hjälten i Legoras anda, en helskärmsfilm med vitt
   sidhuvud och vit text ovanpå. Gäller body.hel. Dator och surfplatta får en bred film, mobilen en stående.
   Menyn öppnas av core.js, som sätter .menu-open på body; då är sidhuvudet inte längre genomskinligt. */
.hel-intro { display: none; }
.bar__owners { display: none; }

/* ---------- Gemensamt för alla bredder ---------- */
/* Filmen slutar en bit ovanför skärmens nederkant, som hos Legora, så att man ser att sidan fortsätter.
   --peek är hur mycket av sidan under som syns. svh är höjden med webbläsarens verktygsfält utfällda,
   så det som står nederst i filmen hamnar inte bakom dem. */
body.hel { padding-top: 0; }
.hel { --peek: 116px; }
.hel .hero { height: calc(100svh - var(--peek)); }

/* Sidhuvudet: loggan i mitten. Genomskinligt och vitt så länge filmen syns, sedan som vanligt (.is-solid). */
.hel .bar { transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1), background-color 240ms ease, box-shadow 240ms ease; }
.hel .bar__in { position: relative; }
.hel .bar__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.hel:not(.menu-open) .bar:not(.is-solid) {
  background: transparent;
  box-shadow: none;
  color: var(--white);
}
.hel:not(.menu-open) .bar:not(.is-solid) .bar__logo svg { fill: var(--white); }
.hel:not(.menu-open) .bar:not(.is-solid) .bar__nav a,
.hel:not(.menu-open) .bar:not(.is-solid) .bar__owners,
.hel:not(.menu-open) .bar:not(.is-solid) .bar__tel { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }
.hel:not(.menu-open) .bar:not(.is-solid) .bar__burger,
.hel:not(.menu-open) .bar:not(.is-solid) .bar__burger::before,
.hel:not(.menu-open) .bar:not(.is-solid) .bar__burger::after { background: var(--white); }

/* Den svarta knappen i sidhuvudet blir vit mot filmen; pilen blir svart med vit pil */
.hel:not(.menu-open) .bar:not(.is-solid) .btn--ink { background: var(--white); color: var(--ink); }
.hel:not(.menu-open) .bar:not(.is-solid) .btn--ink::after {
  background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4 11h12.6l-5.3-5.3 1.4-1.4L20.4 12l-7.7 7.7-1.4-1.4 5.3-5.3H4z'/%3E%3C/svg%3E");
}
@media (hover: hover) {
  .hel:not(.menu-open) .bar:not(.is-solid) .btn--ink:hover { background: var(--paper); }
}

/* Filmen fyller hjälten; en liten, diskret pausknapp. Hjälten är mörk under filmen, så den vita texten aldrig står på ljus grund. */
.hel .hero { background: #1c2026; }
.hel .hero__photo { background: #1c2026; }
.hel .hero__photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.hel .hero__pause {
  z-index: 2;
  width: 34px; height: 34px; background-size: 13px;
  background-color: rgba(255, 255, 255, 0.22);
  filter: invert(1);
}
/* Raden under ingressen: korta fraser och länken till Vem betalar?, som bryts mellan fraserna, aldrig inne i dem */
.hel .hero__note { font-weight: 500; letter-spacing: 0.005em; text-wrap: balance; }
.hel .hero__note span,
.hel .hero__note .textlink { white-space: nowrap; }
.hel .hero h1 {
  font-weight: 330;
  letter-spacing: -0.012em;
  text-wrap: balance;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.28);
}

/* ---------- Dator och surfplatta ---------- */
@media (min-width: 861px) {
  .hel .bar__in { width: calc(100% - 2 * clamp(24px, 5vw, 120px)); }
  .hel .bar__logo svg { width: 124px; }
  /* Menyn till vänster blir kortare, som hos Legora; "För fastighetsägare" står till höger */
  .hel .bar__nav a[href="#vem-betalar"],
  .hel .bar__nav a[href="#fastighetsagare"] { display: none; }
  .hel .bar__owners { display: inline; font-size: 15px; font-weight: 400; white-space: nowrap; }
  .hel .hero { min-height: 560px; margin: 0; }
  .hel .hero__photo {
    --shape: none;
    left: 0; right: 0;
    clip-path: none !important;
    border-radius: 0;
  }
  /* Filmen är graderad mörk och varm (28 oktober 2026), så toningen är neutralt svart och bara där texten står: ingen grå slöja över hela bilden */
  .hel .hero__photo::after {
    background:
      linear-gradient(180deg, rgba(10, 9, 8, 0.58) 0%, rgba(10, 9, 8, 0.26) 9%, rgba(10, 9, 8, 0) 20%),
      linear-gradient(0deg, rgba(10, 9, 8, 0.84) 0%, rgba(10, 9, 8, 0.7) 28%, rgba(10, 9, 8, 0.36) 50%, rgba(10, 9, 8, 0) 70%);
  }
  .hel .hero__pause { right: clamp(24px, 5vw, 120px); bottom: clamp(24px, 4vh, 40px); }

  /* Rubrik, ingress, de tre fraserna och knapparna centrerade på filmens nedre del, 60 px högre än filmens
     nederkant än förut (28 oktober 2026), så att textgruppen inte hamnar längst ned */
  .hel .hero__field {
    --shape: none;
    left: 0; right: 0; width: auto;
    z-index: 1;
    background: none;
    clip-path: none !important;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(18px, 2.6vh, 28px);
    padding: 0 var(--pad) clamp(100px, 6.5vh + 60px, 140px);
    text-align: center;
    color: var(--white);
  }
  .hel .hero h1 {
    max-width: 17em;
    padding-right: 0;
    font-size: clamp(40px, 2.4vw + 18px, 66px);
    line-height: 1.08;
  }
  .hel .hero__foot { flex: none; align-items: center; max-width: 50em; gap: 18px; }
  .hel .hero__lead { max-width: 40em; font-size: 20px; line-height: 1.55; color: var(--white); text-wrap: balance; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
  .hel .hero__note { margin-top: 8px; font-size: 17px; color: var(--white); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
  .hel .hero__note .textlink { color: var(--white); }
  .hel .hero .actions { justify-content: center; margin-top: 16px; }
  .hel .hero .btn { min-height: 48px; padding-inline: 26px; }
}

/* Mellan 861 och 1240 px ryms inte loggan i mitten bredvid menyn, Sök lokal (ny.css, .has-search) och
   "För fastighetsägare": då står den till vänster som på undersidorna. Upp till 1240 px ryms inte heller
   "För fastighetsägare" bredvid Sök lokal, så den döljs medan knappen syns (den står kvar i mobilmenyn). */
@media (min-width: 861px) and (max-width: 1240px) {
  .hel .bar__logo { position: static; transform: none; }
}
@media (min-width: 961px) and (max-width: 1240px) {
  .hel .bar.has-search .bar__owners { display: none; }
}

/* ---------- Mobil ---------- */
@media (max-width: 860px) {
  /* Menyknappen till vänster */
  .hel .bar__end { order: -1; margin-left: 0; }
  .hel .bar__end .btn--small { display: none; }
  .hel .bar__menu { margin-left: -10px; margin-right: 0; background: transparent; }
  .hel .bar__logo svg { width: 110px; }

  /* Hjälten är filmen med rubriken och de två knapparna, nästan över hela skärmen */
  .hel { --peek: 88px; }
  .hel .hero {
    min-height: 520px;
    grid-template-rows: minmax(0, 1fr);
  }
  .hel .hero__photo,
  .hel .hero__field { grid-area: 1 / 1; }
  .hel .hero__photo { height: auto; }
  .hel .hero__photo::after {
    background:
      linear-gradient(180deg, rgba(12, 14, 18, 0.5) 0%, rgba(12, 14, 18, 0.18) 12%, rgba(12, 14, 18, 0) 22%),
      linear-gradient(0deg, rgba(12, 14, 18, 0.72) 0%, rgba(12, 14, 18, 0.5) 22%, rgba(12, 14, 18, 0.18) 40%, rgba(12, 14, 18, 0) 56%);
  }
  .hel .hero__pause { right: 14px; bottom: 18px; }

  /* Knapparna slutar ovanför pausknappen, som sitter i filmens nedre hörn */
  .hel .hero__field {
    z-index: 1;
    align-self: end;
    gap: 22px;
    background: none;
    padding: 0 var(--pad) 66px;
    color: var(--white);
    pointer-events: none;
  }
  .hel .hero h1 {
    max-width: 11.5em;
    margin-inline: auto;
    text-align: center;
    font-size: clamp(28px, 7.4vw, 40px);
    line-height: 1.1;
  }
  /* Av foten syns bara knapparna på filmen; ingressen och raden om kostnad står under den */
  .hel .hero__foot > .hero__lead,
  .hel .hero__foot > .hero__note { display: none; }
  .hel .hero .actions { justify-content: center; width: 100%; gap: 10px; pointer-events: auto; }

  /* Under kundloggorna: första meningen som en kort ingress i rubrikernas typsnitt, den andra som
     brödtext under och raden om kostnad sist. Ingressen är tydligt mindre än rubriken som följer. */
  .hel-intro {
    display: grid;
    justify-items: start;
    gap: 14px;
    padding: 40px var(--pad) 0;
  }
  .hel-intro__lead {
    max-width: 17em;
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 380;
    line-height: 1.3;
    letter-spacing: -0.008em;
    color: var(--text);
    text-wrap: balance;
  }
  .hel-intro .hero__note { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--text); }
}

/* De glidande kundraderna står direkt under filmen och är lägre och luftigare än på startsidan */
/* Rubriken och den första raden ryms i --peek under filmen */
.hel .marquee {
  --k: 0.62;
  gap: clamp(14px, 1.6vw, 22px);
  padding-top: 28px;
}
.hel .marquee__label { margin-bottom: 2px; text-align: center; }
.hel .marquee__track { gap: clamp(40px, 5vw, 80px); }
.hel .marquee__track li { opacity: 0.85; }
/* På mobilen ska de fyra första loggorna (main.js) rymmas hela i bredd under filmen */
@media (max-width: 860px) {
  .hel .marquee { --k: 0.5; padding-top: 20px; gap: 12px; }
  .hel .marquee__row {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
  .hel .marquee__track { gap: 22px; padding-inline: 16px; }
}
@media (max-width: 419px) { .hel .marquee { --k: 0.45; } }
@media (max-width: 379px) { .hel .marquee { --k: 0.42; } }


@media (prefers-reduced-motion: reduce) {
  .hel .bar { transition: none; }
}

/* Kontaktformuläret på startsidan: kortet mitt i avsnittet. Formulärets stil står i ny-sidor.css. */
.contact .brief { align-self: center; }