/* ==========================================================================
   OLB_CAMPAIGN_PAGE v0.4 (runtime 0.13.24) – kampagnesider (/kampagne/<navn>/)
   Landingssider til annoncer. Indholdet (tekster, billeder, varevalg) ligger i
   Bricks-komponenterne; kopiér siden og skift indhold for en ny kampagne.

   Genbruger: hero (OLB_HERO), .olb-trust + .olb-carousel + .olb-home-feature
   (OLB_HOME_ADAPTER), .olb-home-section__copy (OLB_THEME_PAGE), produktkort.
   Ejer:
     .olb-lp-steps / .olb-lp-step      "Sådan handler du hos os" – 4 kort
     .olb-lp-steps__action             knap under trinene (fragt-popup)
     .olb-lp-duo / .olb-lp-card        to kort: levering (EU-kort) + butik (foto)
     .olb-lp-checklist                 tjekliste i leveringskortet
     .olb-faq                          spørgsmål og svar (åbne, ingen klap-ud)
     .olb-lp-end                       afsluttende billedbanner (v0.2)
   v0.2: billedfelterne vises altid (også før billedet er valgt), billedet står
         til venstre i begge kort fra 768, og afslutningen er en egen komponent.
   v0.4: billede og tekst 50/50 i begge kort; overlay-forsøget fra v0.3 er fjernet.
   v0.3: kampagne-hero med fragt-popup som knap 2 (shortcode-wrapperen
         forsvinder i .olb-hero__actions), knappen under trinene er fjernet,
         butikskortet fylder hele blokken med fotoet bag teksten.
   Kun Design System-tokens. Ingen hex, ingen z-index-tal ud over lokal
   stabling af pile (samme løsning som OLB_THEME_PAGE v0.2.1).
   ========================================================================== */

/* ---------- Lodret rytme (samme som temasider/forside) */
html body .olb-section:has(.olb-lp-steps),
html body .olb-section:has(.olb-lp-duo),
html body .olb-section:has(.olb-faq),
html body .olb-section:has(.olb-lp-end) {
  padding-block: var(--space-6) 0 !important;
  margin-block: 0 !important;
  min-block-size: 0 !important;
}
html body .olb-section:has(.olb-lp-steps) > .brxe-container,
html body .olb-section:has(.olb-lp-duo) > .brxe-container,
html body .olb-section:has(.olb-faq) > .brxe-container,
html body .olb-section:has(.olb-lp-end) > .brxe-container {
  padding-block: 0 !important;
  row-gap: var(--space-3) !important;
}
html body .olb-section:is(:has(.olb-lp-steps), :has(.olb-lp-duo), :has(.olb-faq), :has(.olb-lp-end)):last-child {
  padding-block-end: var(--space-8) !important;
}

/* ==========================================================================
   1. Sådan handler du – 4 kort
   Bricks: div.olb-lp-steps > 4 × div.olb-lp-step >
             div.olb-lp-step__top (span.__num + div.__icon > [olb_icon])
             + H3.__title + p.__text
           div.olb-lp-steps__action > [olb_delivery_check]
   Mobil 1 kolonne · 768: 2 · 1024: 4 med pil imellem.
   ========================================================================== */
.olb-lp-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  inline-size: 100%;
}
@media (min-width: 768px) {
  .olb-lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .olb-lp-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
}

.olb-lp-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  min-inline-size: 0;
  background: var(--color-surface);
  border: var(--border-card);
  border-radius: var(--radius-card);
}
.olb-lp-step__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-1);
}
html body .olb-lp-step__num {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}
.olb-lp-step__icon {
  display: inline-grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-brand-soft);
  color: var(--color-brand-primary);
}
.olb-lp-step__icon .brxe-shortcode { display: contents; }
.olb-lp-step__icon .olb-icon { --icon-size: var(--icon-size-md); --icon-stroke: 2; }
html body .olb-lp-step__title {
  margin: 0 !important;
  font-family: var(--font-family-body);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-card);
  color: var(--color-text-primary);
}
.olb-lp-step__text {
  margin: 0;
  font-size: var(--font-size-small);
  line-height: var(--line-height-help);
  color: var(--color-text-secondary);
}

/* Pil mellem trinene (kun på én række, fra 1024). Tidligere kort ligger øverst. */
@media (min-width: 1024px) {
  .olb-lp-step:nth-child(1) { z-index: 4; }
  .olb-lp-step:nth-child(2) { z-index: 3; }
  .olb-lp-step:nth-child(3) { z-index: 2; }
  .olb-lp-step:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-end: calc(-1 * var(--space-6) / 2);
    inset-block-start: 50%;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    transform: translate(50%, -50%);
    border-radius: var(--radius-pill);
    background: var(--color-brand-soft);
    border: var(--border-card);
  }
  .olb-lp-step:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-inline-end: calc(-1 * var(--space-6) / 2);
    inset-block-start: 50%;
    z-index: 1;
    inline-size: 0.45rem;
    block-size: 0.45rem;
    border-block-start: var(--border-width-strong) solid var(--color-brand-primary);
    border-inline-end: var(--border-width-strong) solid var(--color-brand-primary);
    transform: translate(0.12rem, -50%) rotate(45deg);
  }
}

.olb-lp-steps__action {
  display: flex;
  justify-content: center;
  inline-size: 100%;
}
.olb-lp-steps__action .brxe-shortcode { display: contents; }
@media (max-width: 767.98px) {
  .olb-lp-steps__action .olb-button { inline-size: 100%; }
}

/* ==========================================================================
   2. Levering + butik – to kort
   Bricks: div.olb-lp-duo >
     div.olb-lp-card.olb-lp-card--delivery > div.__body (p.__eyebrow, H3.__title,
       p.__text, div.olb-lp-checklist, div.__actions > [olb_delivery_check])
       + div.__media > image (EU-kort)
     div.olb-lp-card.olb-lp-card--store > div.__media > image (butiksfoto)
       + div.__body (p.__eyebrow, H3.__title, p.__text, div.__meta, div.__actions > a.olb-button)
   Mobil: under hinanden · 1024: side om side.
   ========================================================================== */
.olb-lp-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  inline-size: 100%;
}
@media (min-width: 1024px) {
  .olb-lp-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
}

.olb-lp-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  min-inline-size: 0;
  background: var(--color-surface);
  border: var(--border-card);
  border-radius: var(--radius-card);
}
/* Billedfeltet står der altid – også før billedet er valgt – så det er tydeligt i Bricks. */
.olb-lp-card__media {
  position: relative;
  min-inline-size: 0;
  min-block-size: 12rem;
  background: var(--color-surface-soft);
}
.olb-lp-card__media img,
.olb-lp-card__img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
}
@media (min-width: 768px) {
  .olb-lp-card { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* v0.4: 50/50 */
  .olb-lp-card__media { min-block-size: 100%; }
  .olb-lp-card__media img,
  .olb-lp-card__img { position: absolute; inset: 0; }
}
.olb-lp-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  min-inline-size: 0;
}
@media (min-width: 768px) {
  .olb-lp-card__body { padding: var(--space-5) var(--space-5); }
}
html body .olb-lp-card__eyebrow {
  margin: 0 !important;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-overline);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-overline);
  letter-spacing: var(--tracking-badge);
  color: var(--color-brand-primary);
}
html body .olb-lp-card__title {
  margin: 0 !important;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-text-primary);
}
.olb-lp-card__text {
  margin: 0;
  max-inline-size: var(--measure-info);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}
.olb-lp-card__meta {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-small);
  line-height: var(--line-height-ui);
  color: var(--color-text-primary);
}
.olb-lp-card__meta .brxe-shortcode { display: contents; }
.olb-lp-card__meta .olb-icon { --icon-size: var(--icon-size-sm); --icon-stroke: 2.4; color: var(--color-brand-primary); }
.olb-lp-card__meta p { margin: 0; }
.olb-lp-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: auto;
  padding-block-start: var(--space-2);
}
.olb-lp-card__actions .brxe-shortcode { display: contents; }
@media (max-width: 767.98px) {
  .olb-lp-card__actions .olb-button { inline-size: 100%; }
}

/* Leveringskortet: kølig flade; EU-kortet vises helt (contain) */
.olb-lp-card--delivery { background: var(--color-surface-cool); }
.olb-lp-card--delivery .olb-lp-card__media { background: var(--color-surface-cool); }
.olb-lp-card--delivery .olb-lp-card__media img { object-fit: contain; padding: var(--space-3); }

/* Tjekliste */
.olb-lp-checklist {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  padding: 0;
}
.olb-lp-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-inline-size: 0;
}
.olb-lp-checklist__item .brxe-shortcode { display: contents; }
.olb-lp-checklist__item .olb-icon {
  --icon-size: var(--icon-size-sm);
  --icon-stroke: 2.4;
  margin-block-start: 0.15rem;
  color: var(--color-success);
}
html body .olb-lp-checklist__text {
  margin: 0;
  font-size: var(--font-size-body);
  line-height: var(--line-height-ui);
  color: var(--color-text-primary);
}

/* ==========================================================================
   3. FAQ – åbne spørgsmål og svar (ingen klap-ud, Behavior §11.2)
   Bricks: div.olb-faq > 6 × div.olb-faq__item > H3.__question + p.__answer
   Mobil 1 kolonne · 1024: 2 kolonner.
   ========================================================================== */
.olb-faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-8);
  inline-size: 100%;
}
@media (min-width: 1024px) {
  .olb-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.olb-faq__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-block-start: var(--border-divider);
  min-inline-size: 0;
}
html body .olb-faq__question {
  margin: 0 !important;
  font-family: var(--font-family-body);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-card);
  color: var(--color-text-primary);
}
.olb-faq__answer {
  margin: 0;
  max-inline-size: var(--measure-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   4. Afslutning – billedbanner (v0.2)
   Bricks: div.olb-lp-end > div.__media > image + div.__content (H2.__title, p.__text, div.__actions > a.olb-button)
   Teksten står på en lys flade til venstre; billedet toner ind fra højre.
   ========================================================================== */
.olb-lp-end {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  inline-size: 100%;
  min-block-size: 14rem;
  overflow: hidden;
  border: var(--border-card);
  border-radius: var(--radius-card);
  background: var(--color-surface-warm);
}
.olb-lp-end__media { position: absolute; inset: 0; z-index: -2; }
.olb-lp-end__media img,
.olb-lp-end__img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: center right;
}
.olb-lp-end::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--color-surface-warm) 88%, transparent);
}
@media (min-width: 768px) {
  .olb-lp-end { min-block-size: 16rem; }
  .olb-lp-end::after {
    background: linear-gradient(90deg,
      var(--color-surface-warm) 0%,
      color-mix(in srgb, var(--color-surface-warm) 90%, transparent) 38%,
      color-mix(in srgb, var(--color-surface-warm) 0%, transparent) 70%);
  }
}
.olb-lp-end__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  max-inline-size: 34rem;
}
@media (min-width: 768px) {
  .olb-lp-end__content { padding: var(--space-6) var(--space-7); }
}
html body .olb-lp-end__title {
  margin: 0 !important;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-text-primary);
}
.olb-lp-end__text { margin: 0; font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); color: var(--color-text-secondary); }
.olb-lp-end__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-block-start: var(--space-2); }

/* Ankre (#saadan, #levering, #spoergsmaal) lander under den faste header. */
.olb-section[id] { scroll-margin-block-start: 7rem; }

/* ---------- v0.3: kampagne-hero – [olb_delivery_check] står som almindelig knap */
.olb-hero__actions .brxe-shortcode { display: contents; }