/**
 * @file
 * Presse-Seite — Hero, Topic-Chips und sekundäre Filterleiste.
 *
 * Figma: fVGTGASNYw7QftFKLgfZZj, node 141:20370
 *
 * DOM (views-exposed-form--contenthub--page-2.html.twig):
 *
 *   section.presse-hero                      ← Hero (ganze Breite)
 *     .presse-hero__content                  ← linke Spalte (Content)
 *       .presse-page__title                  ← <h1> "Pressemeldungen"
 *       p.presse-hero__subtitle              ← Subzeile
 *       .presse-hero__chips                  ← Topic-Chips (facet_topics)
 *     .presse-hero__image                    ← rechte Spalte (Bild)
 *   .presse-filter                           ← Sekundäre Leiste
 *     .presse-filter__bar
 *       .presse-filter__bar-inner
 *         .form-item-facets-semantic-year    ← Jahr-Filter (links)
 *         .presse-result-count               ← "X Ergebnisse" (mittig)
 *         .form-item-sort-by                 ← Sortierung (rechts)
 */

/* ═══════════════════════════════════════════════════════
   HERO — vollbreite 2-spaltige Sektion
   ═══════════════════════════════════════════════════════ */

.presse-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 440px;
  width: 100%;
}

/* Linke Spalte — Content auf Trust-Hintergrund (Weinrot) */
.presse-hero__content {
  background-color: var(--trust, #550a2d);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-400, 32px);
  padding-block: var(--spacing-800, 64px);
  padding-inline-start: max(100px, env(safe-area-inset-left, 0px));
  padding-inline-end: var(--spacing-800, 64px);
}

/* Rechte Spalte — Bild füllt vollständig */
.presse-hero__image {
  overflow: hidden;
}

.presse-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ═══════════════════════════════════════════════════════
   TITEL + SUBZEILE
   ═══════════════════════════════════════════════════════ */

.presse-page__title {
  margin: 0;
  font-family: var(--font-bosch-sans, 'Bosch Sans'), sans-serif;
  font-size: 48px;
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--white, #ffffff);
}

.presse-hero__subtitle {
  margin: 0;
  font-family: var(--font-bosch-sans, 'Bosch Sans'), sans-serif;
  font-size: var(--text-paragraph-s, 18px);
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5;
  color: var(--white, #ffffff);
}

/* ═══════════════════════════════════════════════════════
   TOPIC-CHIPS — flex-wrap, linksbündig
   ═══════════════════════════════════════════════════════ */

.presse-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-100, 8px);
}

/* Linksbündige Chips im Hero — BEF rendert eine <ul>, reset + flex-wrap */
.presse-hero .form-item-facet-topics div[data-drupal-selector] ul {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-300, 24px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.presse-hero .form-item-facet-topics div[data-drupal-selector] li {
  list-style: none;
}

/* ═══════════════════════════════════════════════════════
   SEKUNDÄRE FILTERLEISTE — Jahr / Ergebnisse / Sortierung
   ═══════════════════════════════════════════════════════ */

.presse-filter {
  max-width: var(--hub-max-width, 1720px);
  margin-inline: auto;
  border-top: 0;
  border-bottom: 0;
  margin-top: 3em;
}

/* Dreispaltige Leiste: Jahr links — Count mitte — Sort rechts */
.presse-filter__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-200, 16px);
  padding-block-start: var(--spacing-1500, 120px);
  padding-block-end: var(--spacing-500, 40px);
  min-height: 64px;
}

/* ── Jahr-Filter (links) ─────────────────────────────── */

.presse-filter__bar-inner .form-item > label {
  display: none;
}

.presse-filter .form-item-facets-semantic-year {
  flex: 0 0 auto;
}

.presse-filter__bar-inner select {
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23550a2d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  border-radius: var(--border-radius-s, 2px);
  border: var(--border-width-regular, 2px) solid var(--trust-trust, #550A2D);
  opacity: var(--opacity-visible, 1);
  display: inline-flex;
  height: 41px;
  padding: 2px var(--spacing-500, 40px) 3px var(--spacing-400, 32px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-150, 12px);
  font-family: var(--font-bosch-sans, 'Bosch Sans'), sans-serif;
  font-size: var(--text-paragraph-s, 18px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--trust, #550a2d);
  cursor: pointer;
}

/* ── Ergebniszahl (mittig) ───────────────────────────── */

.presse-filter .presse-result-count {
  flex-grow: 1;
  text-align: center;
  font-family: var(--font-bosch-sans, 'Bosch Sans'), sans-serif;
  font-size: var(--text-paragraph-s, 18px);
  font-weight: var(--font-weight-medium, 400);
  font-variant-numeric: slashed-zero;
  color: var(--trust, #550a2d);
}

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

/* Bis 1819px: linke Spalte bekommt seitliches Padding statt 100px-Margin */
@media (max-width: 1819px) {
  .presse-hero__content {
    padding-inline-start: var(--spacing-600, 48px);
  }

  .presse-filter__bar-inner {
    padding-inline: var(--spacing-600, 48px);
  }
}

@media (max-width: 1199px) {
  .presse-page__title {
    font-size: 36px;
  }

  .presse-hero__content {
    padding-inline-start: var(--spacing-400, 32px);
    padding-inline-end: var(--spacing-400, 32px);
  }

  .presse-filter__bar-inner {
    padding-inline: var(--spacing-400, 32px);
    padding-block-start: var(--spacing-800, 64px);
    padding-block-end: var(--spacing-400, 32px);
  }
}

/* Unter 768px: Hero stapelt, Bild entfällt */
@media (max-width: 767px) {
  .presse-hero {
    grid-template-columns: 1fr;
  }

  .presse-hero__image {
    display: none;
  }

  .presse-hero__content {
    padding-inline: var(--spacing-300, 24px);
    padding-block: var(--spacing-600, 48px);
  }

  .presse-page__title {
    font-size: 30px;
  }

  .presse-filter__bar-inner {
    padding-inline: var(--spacing-300, 24px);
    padding-block-start: var(--spacing-600, 48px);
    padding-block-end: var(--spacing-300, 24px);
    flex-wrap: wrap;
    gap: var(--spacing-100, 8px);
  }

  .presse-filter .presse-result-count {
    order: -1;
    flex-basis: 100%;
    text-align: left;
  }
}