/*
 * Full-bleed carousel wrapper – extends edge-to-edge within .layout-content.
 *
 * Uses container query units (cqw) relative to .layout-content
 * (container-type: inline-size), NOT viewport units (vw).
 *
 * NEVER use `width: 100vw; margin-inline: calc(50% - 50vw)` here:
 * vw includes the scrollbar width whereas 50% does not, so the element
 * overflows by ~15 px on any page with a vertical scrollbar and creates
 * an unwanted horizontal scrollbar that breaks the whole-page layout.
 */
.blog-carousel-wrapper {
  width: 100cqw;
  margin-inline: calc(50% - 50cqw);
}

/* Rotate the "previous" Splide arrow so it points left. */
.blog-carousel-splide .splide__arrow--prev {
  transform: scaleX(-1);
}

/* -----------------------------------------------------------------------
   Aktuelle Nachrichten – exposed sort selects
   ----------------------------------------------------------------------- */

/* Style the Drupal-generated <select> elements inside the news filter bar
   to match the design's dropdown look. */
.news-overview__filters select,
.news-overview__bar select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border, #d1d5db);
  background-color: var(--color-background, #ffffff);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-foreground, #111827);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: border-color 0.15s ease;
  appearance: auto;
}

.news-overview__filters select:hover,
.news-overview__bar select:hover {
  border-color: color-mix(in srgb, var(--color-primary, #003d69) 60%, transparent);
}

.news-overview__filters select:focus,
.news-overview__bar select:focus {
  border-color: var(--color-primary, #003d69);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #003d69) 20%, transparent);
}

.news-filter-label {
  flex: none;
  width: 100%;
}

/*@media (min-width: 40rem) {*/
/*  .news-filter-label { width: calc(50% - 0.75rem); }*/
/*}*/

/* Remove the default Drupal form-item wrapper margin inside the filter bar */
.news-overview__filters .form-item,
.news-overview__bar .form-item {
  margin: 0;
}

.news-overview__bar > form.views-exposed-form {
  width: 100%;
}

/* Hide Drupal's auto-generated form-item labels – we provide our own via
   the <span> wrappers in views-exposed-form--blog--all.html.twig. */
.news-overview__filters .form-item > label,
.news-overview__bar .form-item > label {
  display: none;
}

/* -----------------------------------------------------------------------
   Aktuelle Nachrichten – equal-height cards
   ----------------------------------------------------------------------- */

/* Splide sets inline height on slides for loop mode – override so all slides
   stretch to the height of the tallest card in the visible row. */
.blog-carousel-news .splide__list {
  align-items: stretch;
}

.blog-carousel-news .splide__slide {
  height: auto !important;
  display: flex;
  flex-direction: column;
}

/* The direct child is the Drupal-rendered node wrapper – make it fill the
   slide so the card stretches to full height. */
.blog-carousel-news .splide__slide > * {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* -----------------------------------------------------------------------
   Navigation arrows – minimal chevron style (no border, no background)
   ----------------------------------------------------------------------- */

.news-carousel-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  transition: color 0.15s ease;
  line-height: 1;
}

.news-carousel-arrow:hover {
  color: var(--color-primary, #83bb26);
}

.news-carousel-arrow:focus-visible {
  outline: 2px solid var(--color-primary, #003d69);
  outline-offset: 2px;
  border-radius: 2px;
}