/* Globale zoekpagina (/zoekresultaten), Views/Partials/blockgrid/Components/searchResults.cshtml.
   Gewone CSS in plaats van een stuk in bribus-refresh.scss: alleen deze pagina laadt dit bestand.
   De kaarten zelf zijn de gewone .grid--item-kaarten van de site; hier staat alleen wat de zoekpagina
   extra nodig heeft. Kleuren, rondingen en schaduwen komen uit de tokens van bribus-refresh (:root). */

/* Zoekveld en statusregel staan in de header van de pagina en dus buiten .global-search; ze hebben
   dezelfde tokens nodig. */
.global-search,
.global-search--form,
.global-search--meta {
  --gs-navy: var(--br-navy, #001539);
  --gs-cyan: var(--br-cyan, #009FDA);
  --gs-line: var(--br-line, rgba(0, 21, 57, .10));
  --gs-muted: rgba(0, 21, 57, .62);
  --gs-licht: #F4F8FC;
  --gs-radius: var(--br-r-lg, 26px);
  --gs-ease: var(--br-ease, cubic-bezier(.22, .61, .36, 1));
}

.global-search {
  color: var(--gs-navy);
  transition: opacity .2s var(--gs-ease);
}

/* Tijdens het ophalen van nieuwe resultaten (bribus-search.js). */
.global-search.is-loading,
.global-search--section.is-loading {
  opacity: .45;
  pointer-events: none;
}


.global-search--visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Zoekveld ---- */

.global-search--form {
  max-width: 760px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 6px 24px;
  background: #fff;
  border: 1px solid var(--gs-line);
  border-radius: 999px;
  box-shadow: var(--br-shadow-sm);
  transition: border-color .2s var(--gs-ease), box-shadow .2s var(--gs-ease);
}

.global-search--form:focus-within {
  border-color: var(--gs-cyan);
  box-shadow: 0 0 0 4px rgba(0, 159, 218, .14), var(--br-shadow-sm);
}

.global-search--form input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--gs-navy);
  font: inherit;
  font-size: 17px;
}

/* Het wiskruisje van type="search" (Chrome, Edge, Safari) in de huisstijl in plaats van het standaard
   blauwe kruis: een rond licht knopje met een dun donkerblauw kruis. Firefox toont geen kruisje. */
.global-search--form input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  margin: 0 6px 0 10px;
  border-radius: 999px;
  background: var(--gs-licht) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 2.5l7 7M9.5 2.5l-7 7' stroke='%23001539' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 11px no-repeat;
  cursor: pointer;
  transition: background-color .2s var(--gs-ease);
}

.global-search--form input::-webkit-search-cancel-button:hover {
  background-color: #E3EBF4;
}

.global-search--form button {
  flex: none;
  padding: 13px 26px;
  border: 1px solid var(--br-cyan-btn, #009FDA);
  border-radius: 999px;
  background: var(--br-cyan-btn, #009FDA);
  box-shadow: 0 6px 18px rgba(0, 159, 218, .28);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s var(--gs-ease), border-color .2s var(--gs-ease);
}

.global-search--form button:hover,
.global-search--form button:focus-visible {
  background: var(--br-cyan-btn-hover, #002664);
  border-color: var(--br-cyan-btn-hover, #002664);
}

/* In de header: onder de titel, over de volle breedte van de tekstkolom. Die kolom is zo breed als
   de titel, en het thema zet de tekst in de header wit. */
.header .wrapper--content:has(> .global-search--form) {
  width: 100%;
  max-width: 760px;
}

.header .wrapper--content > .global-search--form {
  width: 100%;
  margin-top: clamp(20px, 2vw, 32px);
  border-color: transparent;
  box-shadow: 0 18px 40px rgba(0, 21, 57, .28);
}

.header .global-search--form input {
  color: var(--gs-navy) !important;
}

.header .global-search--form input::placeholder {
  color: var(--gs-muted);
  opacity: 1;
}

/* ---- Regel onder het zoekveld ---- */

.global-search--meta {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

/* Een lange zoekterm zonder spaties ("ABCDEFGHIJKL...") breekt anders niet af en loopt buiten het
   scherm; min-width omdat de regel in de flex-rij van .global-search--meta staat. */
.global-search--status,
.global-search--empty {
  min-width: 0;
  overflow-wrap: anywhere;
}

.global-search--status {
  margin: 20px 0 0;
  color: var(--gs-muted);
}

.global-search--meta .global-search--status {
  margin: 0;
}

.global-search--status strong {
  color: var(--gs-navy);
}

.global-search--jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.global-search--jump a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--gs-line);
  border-radius: 999px;
  color: var(--gs-navy);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s var(--gs-ease), color .2s var(--gs-ease);
}

.global-search--jump a span,
.global-search--filters .btn-filter span {
  min-width: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--gs-licht);
  color: var(--gs-navy);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

.global-search--jump a:hover {
  border-color: var(--gs-cyan);
  color: var(--gs-cyan);
}

/* In de header, op de donkere foto: witte tekst en doorzichtige pillen, zoals de schets. */
/* Even breed als het zoekveld, zodat de snelkoppelingen rechts gelijk eindigen met het veld. De
   tekstkolom zelf wordt op brede schermen breder dan 760px (max(620px, 50%) uit het thema). */
.header .wrapper--content > .global-search--meta {
  width: 100%;
  max-width: 760px;
  margin-top: 18px;
}

.header .global-search--meta .global-search--status {
  margin: 0 !important;
  color: rgba(255, 255, 255, .78) !important;
}

.header .global-search--meta .global-search--status strong {
  color: #fff !important;
}

.header .global-search--jump a {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .06);
  color: #fff !important;
  transition: background-color .2s var(--gs-ease), border-color .2s var(--gs-ease);
}

.header .global-search--jump a:hover {
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .14);
  color: #fff !important;
}

.header .global-search--jump a span {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

/* De eerste kop onder de header heeft geen extra ruimte nodig: de rij zelf heeft al een bovenmarge. */
.global-search > .global-search--section:first-child,
.global-search > .global-search--empty:first-child {
  margin-top: 0;
}

.global-search--empty {
  margin-top: 32px;
  padding: var(--br-pad, 40px);
  border-radius: var(--gs-radius);
  background: var(--gs-licht);
}

.global-search--empty p {
  margin: 0;
}

.global-search--empty p + p {
  margin-top: 8px;
  color: var(--gs-muted);
}

/* ---- Koppen ---- */

.global-search--section {
  margin-top: clamp(48px, 5vw, 72px);
  scroll-margin-top: 140px;
}

.global-search--heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gs-line);
}

.global-search--heading h2 {
  margin: 0 !important;
}

.global-search--count {
  color: var(--gs-muted);
  font-size: 14px;
}

.global-search--more {
  color: var(--gs-cyan);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* "Bekijk alle" klapt de kop open: het pijltje wijst omlaag, en bij "Minder tonen" omhoog. */
.global-search--more::after {
  content: "›";
  display: inline-block;
  margin-left: 10px;
  font-size: 20px;
  line-height: 0;
  transform: rotate(90deg);
  transition: transform .2s var(--gs-ease);
}

.global-search--more:hover::after {
  transform: translateY(3px) rotate(90deg);
}

.global-search--more.is-expanded::after {
  transform: rotate(-90deg);
}

.global-search--more.is-expanded:hover::after {
  transform: translateY(-3px) rotate(-90deg);
}

/* ---- Toon meer, onder een opengeklapte kop ---- */

.global-search .global-search--show-more {
  display: flex;
  justify-content: center;
  margin: 32px 0 0 !important;
}

/* ---- Slotfilter ---- */

.global-search--filters {
  margin-top: 20px;
  display: block;
}

.global-search--filters .filter--buttons {
  gap: 8px !important;
}

/* Even compact als de snelkoppelingen in de header. De selectors zijn bewust zwaar: de filterknoppen
   van /referenties (bribus-refresh.scss, 11px 22px padding) en het label "Kies categorie:" uit het
   thema (.filter--buttons span, line-height 48px) gelden anders ook hier. */
.global-search .global-search--filters.filters .filter .filter--buttons .btn-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 7px 6px 15px !important;
  font-size: 14px;
  line-height: 22px;
  text-decoration: none;
}

/* Rechts staat normaal het aantal in een bolletje; zonder aantal (de merken op de lege zoekpagina)
   evenveel ruimte aan beide kanten. */
.global-search .global-search--filters.filters .filter .filter--buttons .btn-filter:not(:has(span)) {
  padding: 6px 15px !important;
}

.global-search .global-search--filters.filters .filter .filter--buttons .btn-filter span {
  flex-basis: auto;
  line-height: 20px !important;
}

.global-search--filters .btn-filter.active span,
.global-search--filters .btn-filter:hover span {
  background: rgba(255, 255, 255, .22) !important;
  color: #fff !important;
}

/* ---- Kaarten ---- */

.global-search .global-search--grid {
  margin-top: 28px;
  gap: 32px 24px;
}

.global-search .global-search--grid .grid--item {
  position: relative;
  pointer-events: auto;
}

/* Het thema dimt de andere kaarten zodra je er een aanwijst (.placeholder--grid:hover .grid--item),
   maar het raster zelf vangt de muis niet op (pointer-events: none). In de ruimte tussen twee kaarten
   sprongen ze daardoor allemaal terug naar vol. Hier vangt het raster de muis wel op, zodat de kaarten
   gedimd blijven tot de muis het raster verlaat. Het dimmen loopt vloeiend en voor alle kaarten
   tegelijk; de !important gaat voor de vertraging per kolom die bribus-refresh.js (br-reveal) in het
   style-attribuut zet. */
.global-search .global-search--section .global-search--grid {
  pointer-events: auto;
}

.global-search .global-search--section .global-search--grid .grid--item {
  transition: opacity .2s var(--gs-ease), transform .35s var(--gs-ease);
  transition-delay: 0s, 0s !important;
}

.global-search .global-search--grid .grid--item.has-link > a {
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* De afbeeldingen hieronder hebben de volledige keten .grid--item .item--placeholder nodig: het thema
   maakt elke kaartafbeelding 16:9 met object-fit: cover (.placeholder--grid .grid--item
   .item--placeholder .placeholder--image img), en dat kapt productfoto's af. */
.global-search .global-search--grid .grid--item .item--placeholder .global-search--image {
  position: relative;
  aspect-ratio: 4 / 3;
  padding-top: 0;
  background: var(--gs-licht);
}

.global-search .global-search--grid .grid--item .item--placeholder .global-search--image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Productfoto's zijn vrijstaande apparaten op wit: helemaal in beeld. */
.global-search .global-search--grid .grid--item .item--placeholder .global-search--product-image {
  background: #fff;
  border: 1px solid var(--gs-line);
}

/* scale-down: wel kleiner maken, maar een kleine afbeelding niet oprekken tot het hele vak. */
.global-search .global-search--grid .grid--item .item--placeholder .global-search--product-image img {
  object-fit: scale-down;
}

/* Fronten en werkbladen: het decor (img) uitgeknipt met het masker van de front of het werkblad, met
   de overlay erover, zoals in het assortiment (theme.css, .inner-front .front en
   .image-overlay-masking-placeholder). Masker en overlay zijn even groot en worden allebei passend
   ingeschaald, zodat ze precies op elkaar vallen. De hoverzoom gaat over het geheel: zou alleen het
   decor inzoomen, dan schuift het onder masker en overlay. */
.global-search .global-search--layers {
  position: absolute;
  inset: 0;
  transition: transform .35s var(--gs-ease);
}

.global-search .global-search--masked {
  position: absolute;
  inset: 0;
  -webkit-mask: var(--gs-mask) center / contain no-repeat;
  mask: var(--gs-mask) center / contain no-repeat;
}

.global-search .global-search--grid .grid--item .item--placeholder .global-search--product-image .global-search--layers img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none !important;
}

.global-search .global-search--grid .grid--item .item--placeholder .global-search--product-image .global-search--masked img {
  object-fit: cover;
}

.global-search .global-search--grid .grid--item .item--placeholder .global-search--product-image .global-search--layers .global-search--overlay {
  object-fit: contain;
  pointer-events: none;
}

.global-search .grid--item.has-link:hover .global-search--layers {
  transform: scale(1.045);
}

.global-search--tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--br-shadow-sm);
  color: var(--gs-navy);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.global-search .placeholder--content .global-search--label {
  margin: 0 0 4px !important;
  color: var(--gs-cyan);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.global-search .placeholder--content .heading-5 {
  margin-top: 0 !important;
  overflow-wrap: anywhere;
}

.global-search .global-search--text {
  margin: 6px 0 0 !important;
  color: var(--gs-muted);
  font-size: 14px;
  line-height: 22px !important;
}

.global-search .global-search--text strong {
  color: var(--gs-navy);
}

/* Referenties: de kaart uit referencesGridBlock, met een korte intro onder de titel. */
/* Vacatures: de kaart uit vacanciesBlock (foto met de locatie als label).
   Contactpersonen: de kaart uit contactPersonsBlock (tekst met de foto ernaast).
   De koppen dragen .wrapper--references, .wrapper--vacancies en .wrapper--contact-persons voor de kaartstijl; eventuele
   binnenruimte die het thema die wrappers geeft hoort hier niet: de kop staat in lijn met de andere. */
.global-search .global-search--section.wrapper--references,
.global-search .global-search--section.wrapper--vacancies,
.global-search .global-search--section.wrapper--contact-persons {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Referenties en vacatures gebruiken slimsy-picture: een <img> zonder src die lazysizes pas invult als
   hij bijna in beeld komt. Tot dan toonde de browser het icoon van een ontbrekende afbeelding (vooral na
   "Bekijk alle", met veel nieuwe kaarten tegelijk). Onzichtbaar tot hij geladen is, dan infaden. */
.global-search .placeholder--image img.lazyload,
.global-search .placeholder--image img.lazyloading {
  opacity: 0;
}

/* Ook de transform-overgang van de hoverzoom (bribus-refresh) laten staan, anders springt de zoom. */
.global-search .placeholder--image img.lazyloaded {
  opacity: 1;
  transition: opacity .3s var(--gs-ease), transform .35s var(--gs-ease);
}

/* Het logo op een referentiekaart zoomt niet mee met de foto. */
.global-search .grid--item .placeholder--image .image--logo img {
  transform: none !important;
}

.global-search .wrapper--references .grid--item .placeholder--content p.global-search--text,
.global-search .wrapper--vacancies .grid--item .placeholder--content p.global-search--text {
  color: var(--gs-muted) !important;
}

/* ---- Pagina's ---- */

.global-search--pages {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.global-search--page {
  margin: 0;
  padding: 0;
}

.global-search--page::before {
  display: none !important;
}

.global-search--page a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 64px 20px 24px;
  position: relative;
  border: 1px solid var(--gs-line);
  border-radius: var(--br-r, 18px);
  background: #fff;
  color: var(--gs-navy);
  text-decoration: none;
  transition: border-color .2s var(--gs-ease), box-shadow .25s var(--gs-ease), transform .25s var(--gs-ease);
}

.global-search--page a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28px;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
  transition: right .25s var(--gs-ease);
}

.global-search--page a:hover {
  border-color: var(--gs-cyan);
  box-shadow: var(--br-shadow-sm);
}

.global-search--page a:hover::after {
  right: 22px;
  color: var(--gs-cyan);
}

.global-search--page a:hover .heading-5 {
  color: var(--gs-cyan);
}

.global-search--page .heading-5 {
  margin: 0 !important;
  transition: color .2s var(--gs-ease);
}

.global-search--breadcrumb {
  color: var(--gs-muted);
  font-size: 13px;
}

.global-search--breadcrumb span {
  margin: 0 6px;
}

/* ---- Nog niets gezocht: merken en ingangen ---- */

.global-search .global-search--start-label {
  margin: 28px 0 0 !important;
  color: var(--gs-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.global-search .global-search--start .global-search--filters {
  margin-top: 12px;
}

.global-search--shortcuts {
  margin-top: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---- Tablet en mobiel ---- */

@media (max-width: 1024px) {
  .global-search .global-search--grid.columns-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .global-search--shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .global-search .global-search--grid.columns-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }

  .global-search--section {
    scroll-margin-top: 100px;
  }
}

.global-search .global-search--mobile-only {
  display: none;
}

@media (max-width: 576px) {
  /* Link of aantal altijd onder de kop. Naast elkaar paste "Minder tonen" wel en "Bekijk alle 12
     referenties" niet, waardoor de link bij openklappen van plek wisselde. */
  .global-search .global-search--heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* Kaarten staan hier onder elkaar: per dichtgeklapte kop alleen de eerste paar, de rest via
     "Bekijk alle" (searchResults.cshtml, OverviewSizes). */
  .global-search .global-search--mobile-limit-2 > :nth-child(n+3),
  .global-search .global-search--mobile-limit-3 > :nth-child(n+4),
  .global-search .global-search--mobile-limit-4 > :nth-child(n+5),
  .global-search .global-search--desktop-only {
    display: none !important;
  }

  .global-search .global-search--mobile-only {
    display: inline;
  }

  .global-search--shortcuts {
    grid-template-columns: minmax(0, 1fr);
  }

  .global-search--form {
    padding-left: 18px;
  }

  .global-search--form button {
    padding: 11px 18px;
  }

  .global-search--page a {
    padding: 16px 48px 16px 18px;
  }

  .global-search--page a::after {
    right: 20px;
  }
}