/* widgets/info-sektion/info-sektion.css
   Informations-/indholdssektion — media-and-text med valgbar placering.
   Kun var(--token); BEM med -graesmarken-suffix; 0 !important.
   Layout via delt .split (1→2 kolonner) — eneste breakpoint ejes af .split.
   Content-first DOM; medie ombyttes visuelt med `order`. */

/* ---- Indholdskolonne ---- */
.info-sektion-graesmarken__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--color-heading);
  text-wrap: balance;
  margin: 0;
}
.info-sektion-graesmarken__title em {
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--color-green-700);
}
.info-sektion-graesmarken__body {
  color: var(--color-text-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: var(--measure);
}
.info-sektion-graesmarken__body :where(p, ul, ol):first-child { margin-top: 0; }
.info-sektion-graesmarken__body :where(p, ul, ol):last-child  { margin-bottom: 0; }
.info-sektion-graesmarken__cta { margin-top: var(--space-sm); }

/* ---- Kun tekst (intet medie) ----
   Indholdet fylder hele widget-bredden: measure-loftet løftes BÅDE på __body og
   på afsnittene indeni — style.css' globale `p { max-width: var(--measure) }`
   holder ellers hvert afsnit på 65ch, selv om wrapperen er sluppet fri. Ønskes
   en smallere læsebredde, bruges kontraktens Maks. bredde (is-maxw-narrow) på roden. */
.info-sektion-graesmarken--no-media .info-sektion-graesmarken__body,
.info-sektion-graesmarken--no-media .info-sektion-graesmarken__body p {
  max-width: none;
}

/* ---- Medie ---- */
.info-sektion-graesmarken__media > img,
.info-sektion-graesmarken__media > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.info-sektion-graesmarken__media--ratio-card     { aspect-ratio: var(--aspect-card); }
.info-sektion-graesmarken__media--ratio-photo    { aspect-ratio: var(--aspect-photo); }
.info-sektion-graesmarken__media--ratio-portrait { aspect-ratio: var(--aspect-portrait); }
.info-sektion-graesmarken__media--ratio-square   { aspect-ratio: var(--aspect-square); }

/* ---- Placering: top (medie over teksten) ---- */
.info-sektion-graesmarken--media-top .info-sektion-graesmarken__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.info-sektion-graesmarken--media-top .info-sektion-graesmarken__media { order: -1; }

/* ---- Placering: venstre/højre (.split styrer 1→2 kolonner) ---- */
.info-sektion-graesmarken__inner.split { align-items: center; }
.info-sektion-graesmarken--media-venstre .info-sektion-graesmarken__media { order: -1; }

/* ---- Placering: baggrund (medie fuld-bleed bag indholdet + grønt slør) ---- */
.info-sektion-graesmarken--media-baggrund {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.info-sektion-graesmarken--media-baggrund .info-sektion-graesmarken__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.info-sektion-graesmarken--media-baggrund .info-sektion-graesmarken__media > img,
.info-sektion-graesmarken--media-baggrund .info-sektion-graesmarken__media > video {
  height: 100%;
  border-radius: 0;
}
.info-sektion-graesmarken__overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-green-900) var(--ov-opacity, 58%), transparent);
}
.info-sektion-graesmarken--media-baggrund .info-sektion-graesmarken__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--space-2xl);
}
.info-sektion-graesmarken--media-baggrund .info-sektion-graesmarken__title,
.info-sektion-graesmarken--media-baggrund .info-sektion-graesmarken__body,
.info-sektion-graesmarken--media-baggrund .info-sektion-graesmarken__eyebrow {
  color: var(--color-paper);
}
.info-sektion-graesmarken--media-baggrund .info-sektion-graesmarken__title {
  text-shadow: var(--shadow-text);
}
.info-sektion-graesmarken--media-baggrund .info-sektion-graesmarken__title em {
  color: var(--color-green-100);
}
.info-sektion-graesmarken--media-baggrund .info-sektion-graesmarken__eyebrow.eyebrow--with-rule::before {
  background-color: var(--color-green-300);
}