/* ==========================================================
   OLB TILES ADAPTER v0.1  (runtime 0.11.0)
   Klassifikation: component adapter – fælles flisefamilie
   Requires: OLB Design System v1.0 LOCKED
   Functional master: OLB_Forside_Besluttet_Laast.md (§5 genveje)
   Build mode: A ([olb_home_shortcuts] renderer markuppen)
   Owns: .olb-tiles (gitter) og .olb-tile (flise: billede øverst, label under, hele flisen klikbar)
         + forsidens genvejssektion (.olb-home-shortcuts)
   Does NOT own: farver, typografi, spacing-skala, radius, skygger, fokus-tokens
   Udtryk: samme kortfamilie som underkategori-fliserne på kategorisiderne
           (1 px kortkant, kortradius, lys flade, link-farvet kant ved hover).
   Layout: mobil + tablet 4 kolonner · desktop (≥1024) alle fliser på én række. Ingen karrusel.
   ========================================================== */

.olb-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1024px) {
  .olb-tiles {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
}

.olb-tile { margin: 0; min-width: 0; }

.olb-tile__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  box-sizing: border-box;
  block-size: 100%;
  padding: var(--space-1) var(--space-1) var(--space-2);
  border: var(--border-card);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-none);
  color: var(--color-text-primary);
  text-align: center;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .olb-tile__link:hover { border-color: var(--color-link); }
}
.olb-tile__link:focus-visible {
  outline: var(--border-width-strong) solid var(--color-link);
  outline-offset: var(--gap-hairline);
}

.olb-tile__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-image);
  background: var(--color-surface);
}
.olb-tile__media:empty { background: var(--color-hover-bg); }
.olb-tile__img,
.olb-tile__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: contain;
}

.olb-tile__label {
  min-width: 0;
  min-block-size: 2lh;
  color: var(--color-text-primary);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-ui);
  overflow-wrap: anywhere;
  hyphens: auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ---------- Forside: genvejssektionen */
.olb-home-shortcuts {
  display: grid;
  gap: var(--space-3);
  scroll-margin-block-start: var(--olb-sticky-offset, var(--space-8, var(--space-6)));
}
.olb-home-shortcuts__heading { margin: 0; }
.olb-home-shortcuts__more { margin: 0; }
.olb-home-shortcuts__all {
  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);
}

/* ---------- v0.1.1 (runtime 0.11.2): fliser bygget direkte i Bricks
   Struktur: Div .olb-tiles > Div (HTML-tag a, link) .olb-tile__link > Image .olb-tile__img + Basic text .olb-tile__label
   (ingen <li>/media-wrapper). Billedet får selv 4:3-fladen. Indhold (billede, tekst, link) redigeres i Bricks. */
.olb-tiles > .olb-tile__link { min-width: 0; }
.olb-tile__link > img.olb-tile__img,
.olb-tile__link > .olb-tile__img {
  aspect-ratio: 4 / 3;
  block-size: auto;
  inline-size: 100%;
  border-radius: var(--radius-image);
  background: var(--color-surface);
  object-fit: contain;
}
.olb-tile__link > .olb-tile__label { display: -webkit-box; }

/* ---------- v0.1.2 (runtime 0.11.3): lavere fliser – samme billedhøjde som underkategori-fliserne
   (fast billedhøjde i stedet for 4:3, så høje pakninger ikke gør flisen høj). */
.olb-tile__media,
.olb-tile__link > img.olb-tile__img,
.olb-tile__link > .olb-tile__img {
  aspect-ratio: auto;
  block-size: 3.25rem;
}
@media (min-width: 768px) {
  .olb-tile__media,
  .olb-tile__link > img.olb-tile__img,
  .olb-tile__link > .olb-tile__img { block-size: 3.75rem; }
}
@media (min-width: 1024px) {
  .olb-tile__media,
  .olb-tile__link > img.olb-tile__img,
  .olb-tile__link > .olb-tile__img { block-size: 4.5rem; }
}
.olb-tile__label { min-block-size: 0; }

/* ---------- v0.1.3 (runtime 0.12.0)
   - Fuld bredde: Bricks-containere krymper børn til indholdsbredde – gitteret skal fylde rækken.
   - 9 genveje: mobil + tablet 3 kolonner (3 × 3), desktop alle på én række. */
.olb-tiles { inline-size: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1024px) {
  .olb-tiles { grid-template-columns: none; }
}