/* Seite: Blog (/blog/) – Präfix bl-
   Neuester Artikel im Seitenkopf; alle Artikel als Kacheln (.post-card aus style.css) mit Suche,
   Themenfilter und Seiten (Katalog-Bausteine aus style.css, Logik in js/blog.js). Mobile first. */

/* ---------- Neuester Artikel im Seitenkopf ---------- */

.bl-feature { display: grid; gap: .85rem; }
.bl-feature__label {
  display: flex; align-items: center; gap: .65rem;
  color: var(--primary); font-size: .8125rem; font-weight: 900; letter-spacing: .12em; line-height: 1.4;
  text-transform: uppercase;
}
.bl-feature__label::before { content: ""; width: 32px; height: 5px; flex: none; border-radius: 99px; background: var(--gradient); }
.bl-feature__card { box-shadow: var(--shadow-l); }
.bl-feature__card:hover { box-shadow: var(--shadow-l); }
.bl-feature__card .post-card__body { padding: 1.4rem 1.4rem 1.6rem; }
.bl-feature__card h3 { margin-top: .6rem; font-size: clamp(1.3125rem, 1.1rem + .9vw, 1.75rem); line-height: 1.22; }
.bl-feature__card .post-card__excerpt { margin-top: .7rem; font-size: 1rem; line-height: 1.6; }

/* Headerbild mit abweichendem Seitenverhältnis: ganz zeigen statt beschneiden */
.bl-media--fit img { object-fit: contain; }

/* Artikel ohne Headerbild auf www: Verlaufsfläche mit Symbol */
.bl-media--leer { display: grid; place-items: center; background: var(--gradient); color: rgba(255, 255, 255, .85); }
.bl-media--leer .icon { width: 2.5rem; height: 2.5rem; }

/* ---------- Alle Artikel (Andrea Tissen, 2026-10-14: Kacheln mit Seiten statt Archivliste) ---------- */

.bl-grid .post-card h3 { overflow-wrap: break-word; }
/* Einblenden (main.js) setzt transform: none mit hoher Spezifität; Anheben beim Hover wiederherstellen */
.js .bl-grid .post-card.is-visible { transition: opacity .7s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.js .bl-grid .post-card.is-visible:hover { transform: translateY(-4px); }
/* Ab 640 px: Kacheln einer Reihe teilen sich die Zeilenhöhen, Titel und „Artikel lesen“ stehen auf einer Linie */
@media (min-width: 640px) {
  @supports (grid-template-rows: subgrid) {
    .bl-grid .post-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    .bl-grid .post-card__body { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
    .bl-grid .post-card .card-more { align-self: end; }
    /* Thema und Datum hängen direkt am Titel; Höhenunterschiede (Autorin, zwei Themen) gehen nach oben */
    .bl-grid .post-card__meta { align-self: end; }
  }
}
/* Seiten: Lücke zwischen weit entfernten Seitenzahlen */
.pager__gap { display: grid; place-items: center; min-width: 1.5rem; color: var(--muted); font-weight: 700; }

.bl-articles .newsletter-box { margin-top: clamp(3rem, 7vw, 4.5rem); }

/* ---------- Breakpoints ---------- */

@media (min-width: 1024px) {
  .bl-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bl-feature__card .post-card__body { padding: 1.5rem 1.75rem 1.75rem; }
}