/**
 * @file
 * Search results page — node--search-result view mode.
 * Matches Figma: fVGTGASNYw7QftFKLgfZZj, node 373-11325.
 *
 * Key values from Figma:
 *   - Outer content column gap between sections: 33px
 *   - Results list gap-y between items:          30px  → --search-result-gap
 *   - Item internal gap between elements:         4px  (node 373:11329)
 */

/* ── Result list wrapper ── */
.search-results {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ── Results list container ── */
/* views-view-unformatted renders rows directly into .view-content (no wrapper div) */
.view-id-search .view-content {
  --search-result-gap: 30px;
  display: flex;
  flex-direction: column;
  gap: var(--search-result-gap);
  max-width: 990px;
  width: 100%;
  margin-inline: auto;
  margin-block-start: var(--spacing-400, 32px);
}

/* ── Each row: full width + separator line below ── */
.view-id-search .view-content .views-row {
  width: 100%;
  padding-bottom: var(--search-result-gap);
  border-bottom: var(--border-width-regular, 2px) solid var(--ambience, #ebe6e1);
}

.view-id-search .view-content .views-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* No pager: add large bottom gap */
.view-id-search .view-content:last-child {
  margin-block-end: var(--spacing-2000, 160px);
}

/* ── Individual result: full width, 4px inner gap ── */
.node--view-mode-search-result {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-050, 4px);
  width: 100%;
}

/* ── Title ── */
.node--view-mode-search-result .node__title {
  margin: 0;
  font-family: var(--font-bosch-sans, 'Bosch Sans'), sans-serif;
  font-size: var(--text-size-button-button-text-m, 26px);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.3;
  letter-spacing: -0.312px;
  width: 100%;
}

.node--view-mode-search-result .node__title a {
  color: var(--trust, #550a2d);
  text-decoration: none;
}

.node--view-mode-search-result .node__title a:hover {
  text-decoration: underline;
  color: var(--trust, #550a2d);
}

/* ── Teaser ── */
.node--view-mode-search-result .node__teaser {
  font-size: var(--text-paragraph-s, 18px);
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5;
  letter-spacing: -0.18px;
  color: var(--trust, #550a2d);
  margin: 0;
  width: 100%;
}

/* ── Excerpt ── */
.node--view-mode-search-result .node__excerpt {
  font-size: var(--text-paragraph-s, 18px);
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5;
  letter-spacing: -0.18px;
  color: #808080;
  margin: 0;
  width: 100%;
}

/* Solr highlights matched terms with <strong> */
.node--view-mode-search-result .node__excerpt strong {
  font-weight: var(--font-weight-bold, 700);
}

/* ── Meta row (type · date · score) ── */
.node--view-mode-search-result .node__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-200, 16px);
  margin-top: var(--spacing-100, 8px);
}

/* ── Score (% badge + label text side by side) ── */
.node__meta-score {
  display: flex;
  align-items: center;
  gap: var(--spacing-100, 8px);
}

.node__meta-score-raw {
  opacity: 0.5;
}

.node__meta-score-text {
  font-family: var(--font-bosch-sans, 'Bosch Sans'), sans-serif;
  font-size: var(--text-label-s);
  font-weight: var(--font-weight-regular, 400);
  color: var(--trust, #550a2d);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   SEARCH PAGE HEADER — 2-column grid

   DOM:
     .search-exposed-form              ← grid container
       h1.search-page__title           ← col 1, row 1
       <form> [display:contents]
         .search-exposed-form__bar-wrapper ← col 2, row 1
           span.search-exposed-form__bar-label
           div.search-exposed-form__bar (pill)
         .search-exposed-form__filters ← row 2, full width
   ═══════════════════════════════════════════════════════ */

.search-exposed-form {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--spacing-400, 32px);
  row-gap: var(--spacing-1000,80px);
  max-width: 1136px;
  width: 100%;
  margin-inline: auto;
  margin-block-start: 100px;
}

/* Form transparent to grid — its two container divs become direct grid items */
.view-id-search .views-exposed-form,
.view-id-publikationen .views-exposed-form {
  display: contents;
}

/* H1 — col 1, row 1 */
.search-page__title {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-bosch-sans, 'Bosch Sans'), sans-serif;
  font-size: var(--text-h1, 36px);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--trust, #550a2d);
  margin: 0;
}

/* Search bar wrapper (label + pill) — col 2, row 1 */
.search-exposed-form__bar-wrapper {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-200, 16px);
}

.search-exposed-form__bar-label {
  color: var(--trust, #550a2d);
  font-variant-numeric: slashed-zero;
  font-family: var(--font-bosch-sans, 'Bosch Sans'), sans-serif;
  font-size: var(--text-size-Paragraph-paragraph-m, 22px);
  font-style: normal;
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.5;
  letter-spacing: -0.22px;
  white-space: nowrap;
}

/* Filters — full width, children side by side (row auto-placed after sort bar) */
.search-exposed-form__filters {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--spacing-300, 24px);
  position: relative;
  padding-block: var(--spacing-150, 12px);
}

/* Full-viewport-width top and bottom borders */
.search-exposed-form__filters::before,
.search-exposed-form__filters::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: var(--border-width-regular, 2px);
  background: var(--ambience, #ebe6e1);
}

.search-exposed-form__filters::before {
  top: 0;
}

.search-exposed-form__filters::after {
  bottom: 0;
}

.search-exposed-form__filters .js-form-item,
.search-exposed-form__filters .form-item {
  margin: 0;
}

.search-exposed-form__filters .js-form-item-field-topics {
  margin-inline-start: auto;
  text-align: right;
}

/* ═══════════════════════════════════════════════════════
   EXPOSED FORM — pill input + submit button
   ═══════════════════════════════════════════════════════ */

/* ── Pill wrapper ── */
.search-exposed-form__bar {
  display: flex;
  align-items: center;
  height: 60px;
  background: var(--white, #ffffff);
  border-radius: var(--border-radius-round, 1000px);
  box-shadow: inset 0 0 0 2px var(--ambience, #ebe6e1);
  padding-inline-end: 10px;
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
  overflow: hidden;
  max-width: 480px;
}

.search-exposed-form__bar:focus-within {
  box-shadow: inset 0 0 0 4px var(--accent, #fa263a);
}

/* ── Input form-item (flex child: stretches to fill) ── */
.search-exposed-form__bar .js-form-item,
.search-exposed-form__bar .form-item {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* Hide the Drupal label — accessible but invisible */
.search-exposed-form__bar label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Text input ── */
.search-exposed-form__bar input[type="text"],
.search-exposed-form__bar input[type="search"],
.search-exposed-form__bar .form-text {
  display: block;
  width: 100%;
  height: 60px;
  border: none;
  outline: none;
  background: transparent;
  padding-inline-start: var(--spacing-300, 24px);
  font-family: var(--font-bosch-sans, 'Bosch Sans'), sans-serif;
  font-size: var(--text-paragraph-s, 18px);
  font-weight: var(--font-weight-regular, 400);
  letter-spacing: -0.01em;
  color: var(--trust, #550a2d);
  appearance: none;
  -webkit-appearance: none;
}

.search-exposed-form__bar input::placeholder {
  color: var(--ambience-700, #998c80);
}

/* ── Actions wrapper (flex child: fixed size) ── */
.search-exposed-form__bar .form-actions {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

/* ── Submit button styled as pink circle ── */
.search-exposed-form__bar .form-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--border-radius-round, 1000px);
  background-color: var(--attitude, #ffa0fa);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6.5' cy='6.5' r='4' stroke='%23550a2d' stroke-width='1.5'/%3E%3Cpath d='M9.5 9.5L13 13' stroke='%23550a2d' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  color: transparent;
  font-size: 0;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.3s ease;
  appearance: none;
}

.search-exposed-form__bar .form-submit:hover {
  opacity: 0.85;
}

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

.view-id-search .pager {
  padding: var(--spacing-1000, 80px) var(--spacing-300, 24px);
}

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

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

/* ── Page number links ── */
.view-id-search .pager__item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 1000px;
  background: transparent;
  color: var(--trust, #550a2d);
  font-family: var(--font-bosch-sans, 'Bosch Sans'), sans-serif;
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--text-size-label-s, 16px);
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

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

/* ── Active page ── */
.view-id-search .pager__item.is-active a {
  background: var(--trust, #550a2d);
  color: var(--white, #ffffff);
  pointer-events: none;
}

/* ── Ellipsis ── */
.view-id-search .pager__item--ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--trust, #550a2d);
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--text-size-label-s, 16px);
}

/* ── Prev / Next — round ambience button with SVG arrow ── */
.view-id-search .pager__item--previous a,
.view-id-search .pager__item--next a {
  background-color: var(--ambience, #ebe6e1);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

.view-id-search .pager__item--previous a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23550a2d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}

.view-id-search .pager__item--next a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23550a2d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

.view-id-search .pager__item--previous a:hover,
.view-id-search .pager__item--next a:hover {
  background-color: var(--ambience-500, #dbd4ce);
}

/* Hide text inside prev/next/first/last — arrow via background-image */
.view-id-search .pager__item--previous a span,
.view-id-search .pager__item--next a span,
.view-id-search .pager__item--first a span,
.view-id-search .pager__item--last a span {
  display: none;
}

/* ── First / Last — round ambience button with double SVG arrow ── */
.view-id-search .pager__item--first a,
.view-id-search .pager__item--last a {
  background-color: var(--ambience, #ebe6e1);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

.view-id-search .pager__item--first a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23550a2d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='11 18 5 12 11 6'/%3E%3Cpolyline points='19 18 13 12 19 6'/%3E%3C/svg%3E");
}

.view-id-search .pager__item--last a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23550a2d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='13 18 19 12 13 6'/%3E%3Cpolyline points='5 18 11 12 5 6'/%3E%3C/svg%3E");
}

.view-id-search .pager__item--first a:hover,
.view-id-search .pager__item--last a:hover {
  background-color: var(--ambience-500, #dbd4ce);
}

/* ═══════════════════════════════════════════════════════
   AUTOCOMPLETE LOADING PULSE
   ═══════════════════════════════════════════════════════ */

/* Suppress the default Drupal throbber background on the input */
.js .search-exposed-form__bar input.form-autocomplete,
.js .search-exposed-form__bar input.form-autocomplete.ui-autocomplete-loading {
  background-image: none;
}

@keyframes search-bar-loading-pulse {
  0%, 100% { background-color: var(--white, #ffffff); }
  50%       { background-color: var(--attitude, #ffa0fa); }
}

.search-exposed-form__bar:has(input.ui-autocomplete-loading) {
  animation: search-bar-loading-pulse 1.4s ease-in-out infinite;
  transition: box-shadow 0.3s ease;
}