/* ==========================================================
   OLB CARDS v1.0.2 — DS-04 (2026-10-04)
   v1.0.2: ny komponent .olb-badge (+ --cheapest, --recommended) til
   Checkout Masters "Billigst"/"Anbefales" (§7.1, §29). Kun eksisterende tokens.
   Ingen eksisterende regel ændret.
   ---
   v1.0.1 — REPAIR RC1
   v1.0.1: X-09 kategorilabel brydes ikke midt i ord; G-06 kategori-ikonalias
   ejes nu alene af Iconography (Cards §4.2 forudså det); G-11 stale referencer.
   Requires authoritative stack (repair RC1):
   - OLB_FARVESYSTEM_v1.0.5.css
   - OLB_TYPOGRAFISYSTEM_v0.9.8.css
   - OLB_LAYOUT_SPACING_v1.0_LOCKED.css
   - OLB_FORM_OG_DYBDE_v1.0.css
   - OLB_ICONS_v1.0.1.css   (ejer --card-category-icon-size)
   - OLB_BUTTONS_v1.0.2.css
   - OLB_FORMS_v1.0.1.css

   IMPORTANT:
   Do NOT load earlier proposal CSS such as OLB_CARDS_v1.0.css
   or Manus' olb-cards.css together with this file.
   ========================================================== */

:root {
  /* Category media well. Glyph-størrelsen --card-category-icon-size ejes af
     Iconography (= var(--icon-size-md), 24 px) — G-06, Cards §4.2. */
  --card-category-media-size: var(--space-8); /* 40 */
}

/* Abstract base shell.
   Never used alone: combine with an approved variant.
   IMPORTANT: no box-shadow here. .olb-card can itself be an <a> focus target,
   and a component box-shadow would override the global inverse focus ring. */
.olb-card {
  min-inline-size: 0;
  background: var(--color-surface);
  border: var(--border-card);
  border-radius: var(--radius-card);
}

/* Shared optional slots. Variants reuse these names. */
.olb-card__media,
.olb-card__body,
.olb-card__meta,
.olb-card__actions {
  min-inline-size: 0;
}

.olb-card__body {
  overflow-wrap: anywhere;
}

/* Category card.
   Use markup: <a class="olb-card olb-category-card">...</a>
   Base owns surface/border/radius. Variant owns layout/padding only. */
.olb-category-card {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--gap-inline);
  color: var(--color-text-primary);
  text-decoration: none;
}

.olb-category-card > .olb-card__media {
  flex: 0 0 var(--card-category-media-size);
  display: grid;
  place-items: center;
  inline-size: var(--card-category-media-size);
  block-size: var(--card-category-media-size);
  border-radius: var(--radius-image);
  color: var(--cat-accent);
  background: var(--cat-tint);
}

.olb-category-card > .olb-card__media > :is(svg, img) {
  inline-size: var(--card-category-icon-size);
  block-size: var(--card-category-icon-size);
}

/* X-09 (v1.0.1): kategoriord brydes ikke midt i (Cards §21).
   Base-slottet .olb-card__body bruger overflow-wrap:anywhere, hvilket gjorde
   min-content = ét tegn. Labelen bruger nu normal ordbrydning; basis = længste
   ord (min-content). flex-wrap lader mediet stå over labelen, NÅR ikon + gap +
   længste ord ikke kan stå på én linje (målt ved 320/360 med Navigation §2's
   labels). break-word er kun sidste udvej, når et ord er bredere end hele
   kortet (fx 320 @ 200 %). Ingen breakpoint, ingen ny værdi. */
.olb-category-card {
  flex-wrap: wrap;
}

.olb-category-card > .olb-card__body {
  flex: 1 1 0;
  flex-basis: min-content;
  min-inline-size: 0;
  overflow-wrap: break-word;
}

@media (hover: hover) and (pointer: fine) {
  .olb-category-card:hover {
    border-color: var(--color-border-strong);
  }
}

/* Info card: bounded content unit only.
   Combine .olb-card + .olb-info-card. No local shadow/focus rule. */
.olb-info-card {
  padding: var(--gap-component);
  overflow-wrap: anywhere;
}

/* Plain info alternative: explicitly not a card. */
.olb-info-block {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--gap-inline);
  row-gap: var(--gap-hairline);
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

/* Row alternative: explicitly not a card. */
.olb-row {
  min-inline-size: 0;
  padding-block: var(--gap-inline);
  border-bottom: var(--border-divider);
}

.olb-row:last-child {
  border-bottom: 0;
}

/* Category component grid.
   Uses only global breakpoints; stays at 4 columns on wide desktop in v1.0. */
.olb-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--grid-gap-x);
  row-gap: var(--grid-gap-y);
  min-inline-size: 0;
}

.olb-category-grid > li {
  display: grid;
  min-inline-size: 0;
}

@media (min-width: 768px) {
  .olb-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .olb-category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* No local focus rules by design.
   No component box-shadow on card focus targets.
   Global focus remains owned by OLB_FARVESYSTEM_v1.0.4.css. */

/* =====================================================================
   BADGE (DS-04, v1.0.2)
   Kort tekstmærke ved en titel (fx leveringskort). Betydningen ejes af
   den funktionelle master; Design Systemet ejer kun udseendet.
   Teksten bærer altid betydningen (aldrig kun farve).
   --cheapest    = pris      (info-semantik)
   --recommended = kvalitet  (success-semantik)
   ===================================================================== */
.olb-badge {
  display: inline-block;
  padding: var(--gap-hairline) var(--gap-tight);
  border-radius: var(--radius-badge);
  background-color: var(--color-surface-warm);
  color: var(--color-text-primary);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-badge);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-ui);
  white-space: nowrap;
  vertical-align: baseline;
}

.olb-badge--cheapest {
  background-color: var(--color-info-soft);
  color: var(--color-info);
}

.olb-badge--recommended {
  background-color: var(--color-success-soft);
  color: var(--color-success);
}