/**
 * @file
 * Presse-Seite — Ergebnisraster und Pager.
 *
 * Figma: fVGTGASNYw7QftFKLgfZZj, node 141:20370
 *
 * Verwendet das bosch:teaser-card-press Komponenten-Template.
 * Die Karten-Styles selbst (Hintergrund, Labels, Titel, Link) kommen aus
 * teaser-card-press.css; hier wird nur das Grid-Layout und der Abstand
 * zum Hero definiert.
 *
 * DOM:
 *   .view-display-id-page_2
 *     .content-hub__content.view-content--content-hub
 *       div                              ← von views-view-unformatted
 *         .views-row                    ← je eine Pressemeldung
 *           article.node--view-mode-teaser-content-hub
 *             article.teaser-card-press ← Karte (teaser-card-press.css)
 *     .content-hub__pager               ← Pager
 */

/* ═══════════════════════════════════════════════════════
   GRID-WRAPPER
   ═══════════════════════════════════════════════════════ */

/* Abstand Hero → Grid */
.view-display-id-page_2 .content-hub__content {
  margin-block-start: 0;
  margin-block-end: var(--spacing-2000, 160px);
  padding-inline: var(--spacing-600, 48px);1
}

/* 4-Spalten-Grid auf Desktop — ergänzt / konkretisiert content-hub.css */
.view-display-id-page_2 .content-hub__content.view-content--content-hub > div,
.view-display-id-page_2 .view-content--content-hub > div {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-300, 24px);
  max-width: var(--hub-max-width, 1720px);
  margin-inline: auto;
}

/* ── Jede Zeile (views-row) füllt die Karte aus ──────── */

.view-display-id-page_2 .views-row {
  display: flex;
  flex-direction: column;
}

.view-display-id-page_2 .views-row .node,
.view-display-id-page_2 .views-row article {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* teaser-card-press wächst auf volle Kartenhöhe */
.view-display-id-page_2 .teaser-card-press {
  flex: 1;
}

/* ═══════════════════════════════════════════════════════
   PAGER
   ═══════════════════════════════════════════════════════ */

.view-display-id-page_2 .content-hub__pager {
  padding-block: var(--spacing-1000, 80px);
}

.view-display-id-page_2 .pager__items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-050, 4px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.view-display-id-page_2 .pager__item {
  display: inline-flex;
  padding: 0;
}

.view-display-id-page_2 .pager__item a,
.view-display-id-page_2 .pager__item--current .pager__link,
.view-display-id-page_2 .pager__item--current span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding-inline: var(--spacing-050, 4px);
  border-radius: var(--border-radius-s, 2px);
  font-family: var(--font-bosch-sans, 'Bosch Sans'), sans-serif;
  font-size: var(--text-label-s);
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.1;
  letter-spacing: -0.16px;
  color: var(--trust, #550a2d);
  text-decoration: none;
  transition: background 0.2s ease;
}

.view-display-id-page_2 .pager__item a:hover {
  background: var(--ambience, #ebe6e1);
}

.view-display-id-page_2 .pager__item--current .pager__link,
.view-display-id-page_2 .pager__item--current span {
  font-weight: var(--font-weight-bold, 700);
  background: var(--trust, #550a2d);
  color: var(--white, #ffffff);
  pointer-events: none;
}

.view-display-id-page_2 .pager__item--previous a,
.view-display-id-page_2 .pager__item--next a {
  font-size: var(--text-label-s);
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */

@media (max-width: 1199px) {
  .view-display-id-page_2 .content-hub__content.view-content--content-hub > div,
  .view-display-id-page_2 .view-content--content-hub > div {
    grid-template-columns: repeat(3, 1fr);
  }

  .view-display-id-page_2 .content-hub__content {
    margin-block-start: var(--spacing-800, 64px);
    padding-inline: var(--spacing-400, 32px);
  }
}

@media (max-width: 767px) {
  .view-display-id-page_2 .content-hub__content.view-content--content-hub > div,
  .view-display-id-page_2 .view-content--content-hub > div {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-200, 16px);
  }

  .view-display-id-page_2 .content-hub__content {
    margin-block-start: var(--spacing-600, 48px);
    margin-block-end: var(--spacing-1000, 80px);
    padding-inline: var(--spacing-300, 24px);
  }
}

@media (max-width: 479px) {
  .view-display-id-page_2 .content-hub__content.view-content--content-hub > div,
  .view-display-id-page_2 .view-content--content-hub > div {
    grid-template-columns: 1fr;
  }
}