/* ==========================================================
   OLB HOME ADAPTER v0.1  (runtime 0.12.0)
   Klassifikation: component adapter (forside) + fælles produktkarrusel
   Requires: OLB Design System v1.0 LOCKED
   Functional master: OLB_Forside_Besluttet_Laast.md (§7 Populære lige nu)
   Owns: .olb-home-section__head (overskrift + "Se alle"-link)
         .olb-carousel (vandret produktrække) + pile fra olb-carousel.js
   Does NOT own: produktkortet (Cards + OLB_PRODUCT_CARD_ADAPTER), farver, typografi, knapper
   Layout: mobil 2,2 kort synlige (næste kort ses) · tablet 3 · desktop 5. Ingen autoplay/dots.
   ========================================================== */

/* ---------- Sektionshoved: H2 til venstre, tekstlink til højre */
.olb-home-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}
.olb-home-section__head > * { margin: 0; min-width: 0; }
.olb-home-section__more {
  flex: none;
  color: var(--color-link);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
  white-space: nowrap;
}

/* ---------- Karrusel */
.olb-carousel-wrap { position: relative; }

.olb-carousel {
  --olb-carousel-gap: var(--space-3);
  --olb-carousel-n: 2.2;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--olb-carousel-n) - 1) * var(--olb-carousel-gap)) / var(--olb-carousel-n));
  gap: var(--olb-carousel-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  padding-block-end: var(--space-1);
  scrollbar-width: none;
}
.olb-carousel::-webkit-scrollbar { display: none; }
.olb-carousel > * { scroll-snap-align: start; min-width: 0; }
.olb-carousel:focus-visible { outline: var(--border-width-strong) solid var(--color-link); outline-offset: var(--gap-hairline); }

@media (min-width: 768px)  { .olb-carousel { --olb-carousel-n: 3; } }
@media (min-width: 1024px) { .olb-carousel { --olb-carousel-n: 5; } }
@media (min-width: 1280px) { .olb-carousel { --olb-carousel-n: 6; } }

/* Pile: skjult på mobil (swipe), altid synlige fra 768 px (ikke kun ved hover). */
.olb-carousel__nav { display: none; }
@media (min-width: 768px) {
  .olb-carousel__nav {
    position: absolute;
    inset-block-start: 35%;
    z-index: var(--z-raised);
    display: inline-grid;
    place-items: center;
    inline-size: var(--button-height);
    block-size: var(--button-height);
    padding: 0;
    border: var(--border-control);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-primary);
    cursor: pointer;
    transform: translateY(-50%);
  }
  .olb-carousel__nav--prev { inset-inline-start: calc(-1 * var(--space-3)); }
  .olb-carousel__nav--next { inset-inline-end: calc(-1 * var(--space-3)); }
  .olb-carousel__nav:hover:not(:disabled) { border-color: var(--color-link); }
  .olb-carousel__nav:focus-visible { outline: var(--border-width-strong) solid var(--color-link); outline-offset: var(--gap-hairline); }
  .olb-carousel__nav:disabled { opacity: .35; cursor: default; }
  .olb-carousel-wrap.is-static .olb-carousel__nav { display: none; }
}
.olb-carousel__chevron {
  inline-size: var(--space-2);
  block-size: var(--space-2);
  border-right: var(--border-width-strong) solid currentColor;
  border-bottom: var(--border-width-strong) solid currentColor;
}
.olb-carousel__nav--prev .olb-carousel__chevron { transform: translateX(15%) rotate(135deg); }
.olb-carousel__nav--next .olb-carousel__chevron { transform: translateX(-15%) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) { .olb-carousel { scroll-behavior: auto; } }

/* ---------- Fuld bredde i Bricks-containere (de krymper ellers børn til indholdsbredde) */
.olb-home-section__head,
.olb-carousel-wrap,
.olb-carousel { inline-size: 100%; }

/* ---------- Forsidens hero: lavere (låst spec: desktop maks. ca. 340 px, tablet ca. 280 px).
   Højden var styret af billedets format (1672 × 941). Billedet får nu en fast højde og beskæres
   (object-fit: cover, centreret), så heroen ikke vokser med billedet. Mobil: billedet er skjult. */
@media (min-width: 768px) {
  .olb-hero__media img,
  .olb-hero__media .brxe-image {
    display: block;
    inline-size: 100%;
    block-size: 16rem;
    max-inline-size: none;
    object-fit: cover;
    object-position: center;
  }
}
@media (min-width: 1024px) {
  .olb-hero__media img,
  .olb-hero__media .brxe-image { block-size: 19rem; }
}

/* ---------- v0.1.1 (runtime 0.12.2)
   - Karrusel: 6 kort på desktop – samme kortstørrelse som produktgitteret på kategorisiderne.
   - Hero: fylder containerens fulde bredde (flugter med genveje og produkter). Billedfeltet
     strækker sig til højre kant i stedet for at krympe til billedets egen bredde. */
.olb-section--hero .olb-hero {
  inline-size: 100%;
  max-inline-size: none;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .olb-section--hero .olb-hero__media {
    flex: 1 1 auto;
    min-inline-size: 0;
    inline-size: 100%;
    align-self: stretch;
  }
}

/* ---------- v0.1.2 (runtime 0.12.3): lavere kort i karrusellen – billedfladen 4:3 i stedet for 1:1.
   Hele pakningen vises stadig (object-fit: contain fra OLB_PRODUCT_CARD_ADAPTER). */
.olb-carousel .olb-product-card .olb-product-card__media { aspect-ratio: 4 / 3; }

/* ---------- v0.1.6 (runtime 0.12.7): sektionsluft kun i toppen (space-3), 0 i bunden/hero.
   v0.1.5 (runtime 0.12.6): stram lodret rytme på forsiden
   Meget lidt luft over overskrifterne, lidt mindre under. `html body` vinder over sektionens
   standard-padding fra Design System/Bricks. Gælder kun sektioner med forsidens komponenter. */
html body .olb-section--hero:has(.olb-hero) { padding-block-end: 0; }
html body .olb-section:has(.olb-tiles),
html body .olb-section:has(.olb-carousel),
html body .olb-section:has(.olb-trust) {
  padding-block-start: var(--space-3);
  padding-block-end: 0;
}
html body .olb-section:has(.olb-tiles) > .brxe-container,
html body .olb-section:has(.olb-carousel) > .brxe-container,
html body .olb-section:has(.olb-trust) > .brxe-container { row-gap: var(--space-2); }
html body .olb-section:has(.olb-tiles) .olb-section__heading,
html body .olb-home-section__head .olb-section__heading,
html body .olb-home-section__head h2 { margin-block: 0; }
html body .olb-section:has(.olb-tiles) .olb-section__heading { margin-block-end: var(--space-2); }
html body .olb-home-section__head { margin-block: 0 var(--space-2); }

/* ---------- v0.1.6 (runtime 0.12.7): Trust-bånd (.olb-trust) – kraftigere kort
   Bricks: div.olb-trust > 4 × div.olb-trust__item > [olb_icon] + text-basic.olb-trust__text
   Tekst: "Titel<small>Underlinje</small>" – titlen fed, underlinjen normal. */
.olb-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  inline-size: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1024px) {
  .olb-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
}
.olb-trust__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface, #fff);
  border: var(--border-card);
  border-radius: var(--radius-card);
  min-inline-size: 0;
}
.olb-trust__item .brxe-shortcode { display: contents; }
.olb-trust__item .olb-icon {
  flex: 0 0 auto;
  box-sizing: content-box;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  padding: 0.625rem;
  border-radius: 50%;
  color: var(--color-link);
  background: color-mix(in srgb, var(--color-link) 12%, transparent);
}
.olb-trust__text {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  min-inline-size: 0;
}
.olb-trust__text a { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.15em; }
.olb-trust__text small {
  display: block;
  margin-block-start: 0.125rem;
  font-size: 0.875rem;
  font-weight: 400;
  opacity: 0.8;
}
@media (max-width: 767px) {
  .olb-trust__item { gap: var(--space-2); padding: var(--space-2); }
  .olb-trust__item .olb-icon { inline-size: 1.25rem; block-size: 1.25rem; padding: 0.5rem; }
  .olb-trust__text { font-size: 0.9375rem; }
}

/* ---------- v0.1.7 (runtime 0.12.8): hero-sektionen må ikke have fast minimumshøjde.
   Trust ligger nu i hero-sektionen under hero-kortet. Sektionens min-højde fra Design System
   gav tom luft under Trust. Højden følger nu indholdet; afstand hero → trust er space-2. */
html body .olb-section--hero:has(.olb-hero),
html body .olb-section--hero:has(.olb-hero) > .brxe-container,
html body .olb-section:has(.olb-tiles),
html body .olb-section:has(.olb-carousel),
html body .olb-section:has(.olb-trust) {
  min-block-size: 0;
  block-size: auto;
}
html body .olb-section--hero:has(.olb-hero) > .brxe-container {
  justify-content: flex-start;
  row-gap: var(--space-2);
}
html body .olb-section--hero:has(.olb-hero) .olb-trust { margin-block-start: 0; }

/* ---------- v0.1.8 (runtime 0.12.9): forsidens lodrette afstand låses.
   Afstand sat direkte på et Bricks-element (Style → padding/margin) skrives som #brxe-id og
   vandt over reglerne ovenfor. Her gælder forsidens rytme altid:
   hero → trust: space-2 · trust/fliser/karrusel → næste overskrift: space-4 · overskrift → indhold: space-2. */
html body .olb-section--hero:has(.olb-hero) {
  padding-block-end: 0 !important;
  margin-block-end: 0 !important;
  min-block-size: 0 !important;
}
html body .olb-section:has(.olb-tiles),
html body .olb-section:has(.olb-carousel),
html body .olb-section:has(.olb-trust):not(:has(.olb-hero)) {
  padding-block: var(--space-4) 0 !important;
  margin-block: 0 !important;
  min-block-size: 0 !important;
}
html body .olb-section:has(.olb-trust):not(:has(.olb-hero)) { padding-block-start: var(--space-2) !important; }
html body .olb-section:has(.olb-tiles) > .brxe-container,
html body .olb-section:has(.olb-carousel) > .brxe-container,
html body .olb-section:has(.olb-trust) > .brxe-container {
  padding-block: 0 !important;
  margin-block: 0 !important;
  min-block-size: 0 !important;
  row-gap: var(--space-2) !important;
}
html body .olb-section:has(.olb-tiles) .olb-section__heading,
html body .olb-home-section__head,
html body .olb-home-section__head h2 { margin-block-start: 0 !important; }
html body .olb-section:has(.olb-tiles) .olb-section__heading,
html body .olb-home-section__head { margin-block-end: var(--space-2) !important; }
html body .olb-home-section__head h2 { margin-block-end: 0 !important; }
html body .olb-tiles,
html body .olb-trust { margin-block: 0 !important; }

/* ---------- v0.1.10 (runtime 0.12.11): Bland Selv-banner på forsiden (.olb-home-feature)
   Bricks: div.olb-home-feature > __media (billede) + __content (H2, tekst, __actions med knap).
   Billedet ligger som baggrund (beskåret), teksten står på en lys toning i venstre side
   – samme udtryk som Bland Selv-siden. Lav og stram: højden følger teksten. */
html body .olb-section:has(.olb-home-feature) {
  padding-block: var(--space-4) 0 !important;
  margin-block: 0 !important;
  min-block-size: 0 !important;
}
.olb-home-feature {
  position: relative;
  display: flex;
  align-items: center;
  inline-size: 100%;
  min-block-size: 11rem;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-card);
  border: var(--border-card);
  background: var(--color-surface, #fff);
}
.olb-home-feature__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.olb-home-feature__media img,
.olb-home-feature__img,
.olb-home-feature__media .brxe-image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: center;
}
.olb-home-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--color-surface, #fff) 86%, transparent);
}
.olb-home-feature__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1, 0.25rem);
  padding: var(--space-3) var(--space-4);
  max-inline-size: 36rem;
  min-inline-size: 0;
}
html body .olb-home-feature__heading { margin: 0 !important; }
.olb-home-feature__text { margin: 0; }
.olb-home-feature__actions { margin-block-start: var(--space-2); }
@media (min-width: 768px) {
  .olb-home-feature { min-block-size: 12rem; }
  .olb-home-feature::after {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--color-surface, #fff) 94%, transparent) 0%,
      color-mix(in srgb, var(--color-surface, #fff) 88%, transparent) 40%,
      color-mix(in srgb, var(--color-surface, #fff) 0%, transparent) 75%);
  }
  .olb-home-feature__content { padding: var(--space-4) var(--space-5, var(--space-4)); }
}

/* ---------- v0.1.11 (runtime 0.12.12): temakort (.olb-themes) + luft i bunden af forsiden
   Bricks: section > container > H2.olb-section__heading + div.olb-themes >
           3 × div(a).olb-theme-card > image.olb-theme-card__img + div.olb-theme-card__body
           (H3 __title, text-basic __text, text-basic __cta). Hele kortet er ét link.
   Mobil: kortene under hinanden (billede til venstre). Fra 768: 3 kolonner (billede øverst). */
html body .olb-section:has(.olb-themes) {
  padding-block: var(--space-4) 0 !important;
  margin-block: 0 !important;
  min-block-size: 0 !important;
}
html body .olb-section:has(.olb-themes) > .brxe-container { row-gap: var(--space-2) !important; }
html body .olb-section:has(.olb-themes) .olb-section__heading { margin-block: 0 var(--space-2) !important; }
/* Sidste forsidesektion får luft ned mod footeren – uanset rækkefølge. */
html body .olb-section:is(:has(.olb-tiles), :has(.olb-carousel), :has(.olb-trust), :has(.olb-home-feature), :has(.olb-themes)):last-child {
  padding-block-end: var(--space-5, var(--space-4)) !important;
}
.olb-themes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  inline-size: 100%;
  margin: 0;
}
.olb-theme-card {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: var(--border-card);
  border-radius: var(--radius-card);
  background: var(--color-surface, #fff);
  color: inherit;
  text-decoration: none;
  transition: box-shadow .15s ease, transform .15s ease;
}
.olb-theme-card:hover { box-shadow: 0 4px 14px rgb(0 0 0 / .08); transform: translateY(-1px); }
.olb-theme-card:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }
.olb-theme-card__img,
.olb-theme-card img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 6rem;
  max-inline-size: none;
  object-fit: cover;
}
.olb-theme-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--space-2) var(--space-3);
  min-inline-size: 0;
}
html body .olb-theme-card__title { margin: 0 !important; font-size: 1.125rem; line-height: 1.25; }
.olb-theme-card__text { margin: 0; font-size: 0.9375rem; line-height: 1.4; }
.olb-theme-card__cta {
  margin-block-start: 0.25rem;
  font-weight: 700;
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
@media (min-width: 768px) {
  .olb-themes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .olb-theme-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: stretch; }
  .olb-theme-card__img,
  .olb-theme-card img { block-size: 9rem; min-block-size: 0; }
  .olb-theme-card__body { padding: var(--space-3); }
}
@media (min-width: 1024px) {
  .olb-theme-card__img,
  .olb-theme-card img { block-size: 11rem; }
}

/* ---------- v0.1.12 (runtime 0.13.4): hero-billedet fylder hele bredden under 768 px
   (på mobil/tablet stod billedet i venstre side med en tom beige stribe til højre). */
@media (max-width: 767px) {
  .olb-section--hero .olb-hero__media { inline-size: 100%; align-self: stretch; }
  .olb-section--hero .olb-hero__media .brxe-image,
  .olb-section--hero .olb-hero__media img {
    display: block;
    inline-size: 100%;
    max-inline-size: none;
    block-size: 12rem;
    object-fit: cover;
    object-position: center;
  }
}

/* ---------- v0.1.14 (runtime 0.13.6): karrusel på mobil – hele kort, intet halvt kort
   Under 768 px vises præcis 2 hele kort inden for sidens kanter (ingen afskåret kort i højre side).
   Pilene vises nu også på mobil – små og inden for kortene – så det er tydeligt, at der er flere. */
@media (max-width: 767px) {
  .olb-carousel { --olb-carousel-n: 2; --olb-carousel-gap: var(--space-2); }
  .olb-carousel__nav {
    display: grid;
    place-items: center;
    position: absolute;
    inset-block-start: 35%;
    z-index: 2;
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
    border: var(--border-card);
    border-radius: 50%;
    background: rgb(255 255 255 / 0.92);
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.15);
    color: var(--color-text-primary, #1f2a2e);
    cursor: pointer;
    transform: translateY(-50%);
  }
  .olb-carousel__nav .olb-carousel__chevron { inline-size: 0.5rem; block-size: 0.5rem; }
  .olb-carousel__nav--prev { inset-inline-start: 0.25rem; }
  .olb-carousel__nav--next { inset-inline-end: 0.25rem; }
  .olb-carousel__nav:disabled { display: none; }
  .olb-carousel-wrap.is-static .olb-carousel__nav { display: none; }
}

/* ---------- v0.1.15 (runtime 0.13.8): ingen vandret scroll på tablet/desktop
   Karrusellens pile sad uden for containeren (−space-3). På skærme, hvor sidens kant-luft er
   mindre end det, stak pilene ud over skærmen, så hele siden blev bredere og kunne rulle sidelæns.
   - 768–1279 px: pilene ligger inden for kortene (som på mobil).
   - Fra 1280 px: pilene må stadig sidde lidt udenfor (der er kant-luft nok).
   - Sikkerhedsnet: siden kan aldrig rulle vandret (overflow-x: clip påvirker ikke sticky header). */
html, body { overflow-x: clip; }
@media (min-width: 768px) and (max-width: 1279px) {
  .olb-carousel__nav--prev { inset-inline-start: 0.25rem; }
  .olb-carousel__nav--next { inset-inline-end: 0.25rem; }
  .olb-carousel__nav { box-shadow: 0 2px 6px rgb(0 0 0 / 0.15); }
}