/* Nyheden øverst i forsidens hero: Wegovy piller.
   Et hvidt mærkat med en langsomt glidende kant i sitets grønne og guld, et
   grønt NYHED-mærke med et lysglimt og en blød puls. Det skal kunne ses på
   alle skærme, men være i sitets egen stil. Når pillen ikke længere er en
   stor nyhed, tones det ned ved at fjerne animationerne nederst. */

/* Den nye hero (Sider/forside.css) er venstrestillet i alle bredder, så
   mærkatet følger venstrekanten og står først i tekstkolonnen. */
.nyhed {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 28px;
  padding: 7px 22px 7px 7px;
  border: 2px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    linear-gradient(110deg, #205A45 0%, #3A7A65 28%, #D4AF37 50%, #3A7A65 72%, #205A45 100%) border-box;
  background-size: 100% 100%, 250% 100%;
  background-position: 0 0, 0% 0;
  box-shadow: 0 12px 32px rgba(32, 90, 69, 0.22);
  color: var(--text-dark);
  text-decoration: none;
  text-align: left;
  transition: transform 0.2s ease;
  animation: nyhed-kant 7s linear infinite alternate, nyhed-puls 2.8s ease-out infinite;
}

.nyhed:hover {
  transform: translateY(-2px);
}

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

.nyhed__maerke {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  padding: 9px 15px;
  border-radius: 999px;
  background: linear-gradient(135deg, #205A45, #3A7A65);
  color: #FFFFFF;
  font-family: 'Manrope', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.nyhed__maerke::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.65) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: nyhed-glans 3.6s ease-in-out infinite;
}

/* Bryder teksten, deles den i to lige lange linjer, aldrig et ord alene. */
.nyhed__tekst {
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
}

/* "Wegovy piller" holdes samlet, så en ombrydning aldrig efterlader "piller"
   alene på linjen. */
.nyhed__tekst strong {
  color: var(--wegovy-pille);
  font-weight: 800;
  white-space: nowrap;
}

.nyhed__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  padding-left: 14px;
  border-left: 1px solid var(--border-subtle);
  color: var(--primary);
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
}

.nyhed__pil {
  transition: transform 0.2s ease;
}

.nyhed:hover .nyhed__pil {
  transform: translateX(3px);
}

@keyframes nyhed-kant {
  to { background-position: 0 0, 100% 0; }
}

@keyframes nyhed-puls {
  0% { box-shadow: 0 12px 32px rgba(32, 90, 69, 0.22), 0 0 0 0 rgba(58, 122, 101, 0.45); }
  70%, 100% { box-shadow: 0 12px 32px rgba(32, 90, 69, 0.22), 0 0 0 14px rgba(58, 122, 101, 0); }
}

@keyframes nyhed-glans {
  0%, 55% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}

/* Mærkatet lægger en linje til heroen. Den får lov at vokse i stedet for at
   blive strammet: luft frem for at presse alt op i første skærm (Tranen
   15/10/2026: "Behold det originale luftige design"). */

/* Tablet: fotoet lidt lavere, så tallene stadig når op på en iPad. */
@media (min-width: 561px) and (max-width: 1024px) {
  .forside-hero__foto {
    height: clamp(220px, 34vw, 300px);
  }
}

/* Mobil: en afrundet boks i fuld bredde, hvor teksten står på to
   afbalancerede linjer, og kun pilen står tilbage. */
@media (max-width: 560px) {
  /* Mærkatet er det første, man ser. */
  .nyhed {
    order: -2;
    justify-self: stretch;
    width: auto;
    gap: 10px;
    margin-bottom: 22px;
    padding: 6px 12px 6px 6px;
    border-radius: 18px;
  }
  .nyhed__maerke {
    padding: 8px 10px;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
  }
  .nyhed__tekst {
    flex-grow: 1;
    font-size: 0.88rem;
  }
  .nyhed__link {
    padding-left: 0.2rem;
    border-left: 0;
    font-size: 1.1rem;
  }
  .nyhed__link-tekst {
    display: none;
  }
  /* Mærkatet, overskriften og begge knapper kan ikke også stå under et foto
     i første skærm. Mens mærkatet står der, flytter fotoet derfor ned efter
     prislinjen, som på tablet. */
  .forside-hero__foto {
    order: 1;
    height: clamp(180px, 50vw, 220px);
    margin: 0 0 32px;
  }
}

/* De mindste telefoner: pilen går, så teksten kan stå på to linjer. Hele
   mærkatet er stadig et link. */
@media (max-width: 340px) {
  .nyhed {
    margin-bottom: 24px;
  }
  .nyhed__link {
    display: none;
  }
}

/* Wegovy-kortet i "De 3 lægemidler": pen og pille står hver med sin pris
   og sit link, så begge former er lige at finde. Pennens linje i HTML'en
   røres ikke, fordi prisopdateringen skriver i den; derfor kommer ordet
   "Pen" herfra. */
.middel-kort--wegovy .middel-kort__pris:not(.middel-kort__pris--pille) small::before {
  content: "Pen, ";
}

.middel-kort__pris--pille {
  margin-top: 1rem;
}

/* Pillen står i sin egen havgrønne (--wegovy-pille i styles.css), så den kan
   skelnes fra pennen: mærkatet "Nu også som pille", pillens prislinje og
   linket til /wegovy-pillen. Wegovy selv er sitets grønne. */
.middel-kort--wegovy .middel-kort__maerkat {
  background: var(--wegovy-pille);
  overflow: hidden;
  box-shadow: 0 0 0 3px rgba(31, 122, 115, 0.16), 0 6px 16px rgba(31, 122, 115, 0.3);
}
/* "Nu også som pille" glimter som nyheden øverst (Tranen 17/10/2026: "shine, så det fremstår
   nyt og som en nyhed"). Glansen kører tre gange, når kortet kommer frem på skærmen
   (script.js sætter .glans), og står så stille. */
.middel-kort--wegovy .middel-kort__maerkat::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.65) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}
.middel-kort--wegovy .middel-kort__maerkat.glans::after {
  animation: maerkat-glans 3.6s ease-in-out 3;
}
/* Striben går over med det samme og hviler så; nyhed-glans hviler først, og så gik der 2 s,
   før man så noget. */
@keyframes maerkat-glans {
  0% { transform: translateX(-120%); }
  30%, 100% { transform: translateX(120%); }
}
.middel-kort--wegovy .middel-kort__pris--pille {
  border-top-color: var(--wegovy-pille-kant);
}
.middel-kort--wegovy .middel-kort__pris--pille small,
.middel-kort--wegovy .middel-kort__pris--pille + .middel-kort__link {
  color: var(--wegovy-pille);
}

@media (prefers-reduced-motion: reduce) {
  .nyhed,
  .nyhed__maerke::after,
  .middel-kort--wegovy .middel-kort__maerkat.glans::after {
    animation: none;
  }
}