/* Forsidens hero, redesignet 26/09/2026 efter designet i Claude Design.
   Rolig todelt komposition på varm off-white: tekst til venstre, fotoet i én
   ren, afrundet ramme til højre. Ingen glasflade, ingen ikoner. Fra tablet og
   ned står fotoet mellem prislinjen og tallene, på mobil øverst.
   Heroen skal kunne ses i første skærm: på desktop det hele, på mobil
   overskriften og den første knap. Skrift og knapper er sitets egne: Manrope
   og .button primary/secondary. */

.forside-hero {
  background: var(--bg-main);
  padding: 40px 0 64px;
}

/* Store skærme: hero fylder første skærm under bånd og header, som
   script.js måler i --hero-offset. */
@media (min-width: 1025px) {
  .forside-hero {
    min-height: calc(100svh - var(--hero-offset, 107px));
    display: flex;
    align-items: center;
    padding: clamp(20px, 4svh, 32px) 0 clamp(28px, 6svh, 56px);
  }
  /* Hero må være bredere end sitets 1200 px, ellers kan "vægttab med
     Ozempic," ikke stå på én linje i overskriften. */
  .forside-hero > .container {
    width: 100%;
    max-width: 1320px;
  }
}

.forside-hero__gitter {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(40px, 4.5vw, 72px);
  align-items: center;
}

.forside-hero__tekst {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.forside-hero__overlinje {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.forside-hero__overlinje::before {
  content: "";
  flex-shrink: 0;
  width: 32px;
  height: 1.5px;
  background: #C9A227;
}

/* Heroens overskrift er sidens display-tekst: Manrope som resten af sitet,
   men i 800, så den står tydeligt over intro, knapper og tal. */
.forside-hero__titel {
  margin: 0 0 22px;
  color: var(--text-dark);
  font-size: clamp(2rem, 1.1rem + 3.2vw, 3.75rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-align: left;
  text-wrap: balance;
}

/* Præparatnavnene står i de samme farver som deres kort under "De 3
   lægemidler", så de kan skelnes fra hinanden allerede i overskriften. */
.forside-hero__navn--ozempic {
  color: #1976D2;
}

.forside-hero__navn--wegovy {
  color: var(--primary);
}

.forside-hero__navn--mounjaro {
  color: #7B1FA2;
}

.forside-hero__intro {
  max-width: 34em;
  margin: 0 0 30px;
  color: #4F5E55;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.19rem);
  line-height: 1.6;
  text-align: left;
  text-wrap: pretty;
}

/* To knapper i samme størrelse: kolonnerne er lige brede, så den korte
   "Se priser" bliver lige så bred som "Tjek om du er egnet". */
.forside-hero__knapper {
  display: inline-grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 14px;
  margin-bottom: 16px;
}

/* Udseendet kommer fra sitets .button primary/secondary; her sættes kun
   heroens størrelse. */
.forside-hero__knap {
  min-height: 56px;
  padding: 0 32px;
  font-size: 1.06rem;
  text-decoration: none;
}

.forside-hero__knap:focus-visible {
  outline: 3px solid rgba(32, 90, 69, 0.45);
  outline-offset: 3px;
}

.forside-hero__pris {
  margin: 0 0 32px;
  color: #6B7A71;
  font-size: 0.9rem;
  text-align: left;
  text-wrap: balance;
}

.forside-hero__tal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  max-width: 600px;
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid #E4E0D6;
  list-style: none;
}

.forside-hero__tal li {
  padding: 0 20px;
  border-left: 1px solid #E4E0D6;
}

.forside-hero__tal li:first-child {
  padding-left: 0;
  border-left: 0;
}

.forside-hero__tal strong {
  display: block;
  color: var(--primary);
  font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.forside-hero__tal span {
  display: block;
  margin-top: 4px;
  color: #6B7A71;
  font-size: 0.85rem;
  line-height: 1.45;
}

.forside-hero__foto {
  align-self: stretch;
}

.forside-hero__foto img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  box-shadow: 0 30px 70px rgba(26, 46, 34, 0.14);
  object-fit: cover;
  object-position: 78% 40%;
}

@media (min-width: 1025px) {
  /* Overskrift og afstande følger også skærmens højde, så heroen står helt i
     første skærm på en bærbar. Fotoet følger tekstens højde. */
  .forside-hero__overlinje {
    margin-bottom: clamp(12px, 2.4svh, 20px);
  }
  .forside-hero__titel {
    margin-bottom: clamp(14px, 2.6svh, 22px);
    font-size: clamp(2rem, min(1.1rem + 3.2vw, 7.2svh), 3.75rem);
  }
  .forside-hero__intro {
    margin-bottom: clamp(18px, 3.6svh, 30px);
  }
  .forside-hero__pris {
    margin-bottom: clamp(18px, 3.8svh, 32px);
  }
  .forside-hero__tal {
    padding-top: clamp(14px, 2.4svh, 20px);
  }
}

/* Store skærme: heroen og det løbende bånd fylder tilsammen første skærm, så
   båndet står i folden. Kun hvor heroen har plads til hele sit luftige design;
   på lavere skærme står båndet lige under folden som før (Tranen 15/10/2026:
   båndet i folden kun, hvis det giver mening, fx på store skærme). Grænserne er
   målt med mærkatet om Wegovy piller i heroen. Tablets har ingen mindstehøjde:
   tom plads over og under heroen er værre end et halvt synligt bånd (Tranen
   15/10/2026: "Båndet må gerne være halvt synligt"). */
@media (min-width: 1280px) and (min-height: 980px) {
  .forside-hero {
    min-height: calc(100svh - var(--hero-offset-desktop, 216px));
  }
}

/* Lave bærbare (1366 x 768 og lignende): strammere, så også fotoets bund og
   tallene står over folden. */
@media (min-width: 1025px) and (max-height: 720px) {
  .forside-hero {
    padding: 18px 0 24px;
  }
  .forside-hero__overlinje {
    margin-bottom: 12px;
  }
  .forside-hero__titel {
    margin-bottom: 12px;
    font-size: clamp(2.25rem, 6.2svh, 3rem);
  }
  .forside-hero__intro {
    margin-bottom: 18px;
    font-size: 1.06rem;
  }
  .forside-hero__knapper {
    margin-bottom: 12px;
  }
  .forside-hero__pris {
    margin-bottom: 16px;
  }
  .forside-hero__tal {
    padding-top: 14px;
  }
}

/* Tablet og derunder: én kolonne. Tekstblokkens børn bliver gitterets egne,
   så fotoet kan stå mellem prislinjen og tallene. */
@media (max-width: 1024px) {
  /* Samme sidemargen som headeren, så logo og tekst flugter. */
  .forside-hero > .container {
    padding: 0 32px;
  }
  .forside-hero__gitter {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .forside-hero__tekst {
    display: contents;
  }
  .forside-hero__tekst > * {
    justify-self: start;
  }
  .forside-hero__foto {
    order: 1;
    height: clamp(230px, 38vw, 340px);
    margin-bottom: 30px;
  }
  .forside-hero__foto img {
    border-radius: 28px;
    object-position: 70% 40%;
  }
  .forside-hero__tal {
    order: 2;
    max-width: none;
  }
}

/* Mobil (efter gennemsyn 26/09/2026): fotoet står først som heroens motiv,
   begge knapper er rigtige knapper, prislinjen er en adskilt note, tallene er
   rækker, og afstandene følger et fast system med mere luft. Sidemargenen er
   den samme som headerens, så logo og tekst står på én lodret linje. */
@media (max-width: 560px) {
  .forside-hero {
    padding: 16px 0 48px;
  }
  .forside-hero > .container {
    padding: 0 24px;
  }
  /* Et bredt, lavt foto, så overskriften og den første knap når op i
     første skærm på en almindelig telefon. */
  .forside-hero__foto {
    order: -1;
    height: clamp(150px, 43vw, 180px);
    margin-bottom: 24px;
  }
  .forside-hero__foto img {
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(26, 46, 34, 0.12);
    object-position: 72% 35%;
  }
  .forside-hero__overlinje {
    gap: 10px;
    margin-bottom: 14px;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
  }
  .forside-hero__overlinje::before {
    width: 22px;
  }
  .forside-hero__titel {
    margin-bottom: 14px;
    font-size: clamp(1.75rem, 7.6vw, 2rem);
  }
  .forside-hero__intro {
    margin-bottom: 24px;
  }
  .forside-hero__knapper {
    display: flex;
    justify-self: stretch;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 0;
  }
  .forside-hero__pris {
    justify-self: stretch;
    margin: 16px 0 36px;
    font-size: 0.82rem;
    text-align: center;
  }
  .forside-hero__tal {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 0;
  }
  .forside-hero__tal li,
  .forside-hero__tal li:first-child {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-left: 0;
    border-bottom: 1px solid #E4E0D6;
  }
  .forside-hero__tal strong {
    font-size: 1.45rem;
  }
  .forside-hero__tal span {
    margin-top: 0;
    font-size: 0.85rem;
    line-height: 1.4;
  }
}

/* Korte telefoner (iPhone 13 mini og lignende): fotoet bliver lavere, så
   knappen stadig når op i første skærm. */
@media (max-width: 560px) and (max-height: 640px) {
  .forside-hero {
    padding-top: 12px;
  }
  .forside-hero__foto {
    height: 140px;
    margin-bottom: 20px;
  }
}

/* Smalle telefoner: overlinjen strammes, så den står på én linje, og
   "LÆGEKLINIK" aldrig står alene med guldstregen midt imellem linjerne. */
@media (max-width: 400px) {
  .forside-hero__overlinje {
    gap: 8px;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
  }
  .forside-hero__overlinje::before {
    width: 16px;
  }
}

/* De mindste telefoner: overskriften holder sine 3 linjer. */
@media (max-width: 374px) {
  .forside-hero__titel {
    font-size: 1.7rem;
  }
}

/* Så lave skærme, at fotoet ellers skubber knappen under folden: teksten
   først, fotoet efter prislinjen som på tablet. */
@media (max-width: 340px) {
  .forside-hero > .container {
    padding: 0 20px;
  }
  .forside-hero__overlinje {
    gap: 6px;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
  }
  .forside-hero__overlinje::before {
    width: 12px;
  }
  .forside-hero__titel {
    font-size: 1.6rem;
  }
  .forside-hero__foto {
    order: 1;
    margin-top: 0;
  }
}