/*
 * Suchformular und Ergebnisseite.
 *
 * Zurueckhaltend gehalten: Abstaende, Raster und die Dinge, die ohne Stil
 * unbenutzbar waeren. Farben, Schriften und Rundungen erbt die Seite vom
 * Theme. Ein Plugin, das dem Theme seine Gestaltung aufdraengt, sieht auf
 * genau einer Website gut aus - auf der, auf der es entwickelt wurde.
 *
 * Alle Groessen in relativen Einheiten, damit die Schriftgroesse des Themes
 * durchschlaegt.
 */

.ghb-search-form {
  display: grid;
  gap: 0.75rem;
  align-items: end;
}

.ghb-search-form--horizontal {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.ghb-search-form--vertical {
  grid-template-columns: 1fr;
}

.ghb-search-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9em;
}

.ghb-search-field > span {
  font-weight: 600;
}

.ghb-search-field input,
.ghb-search-field select {
  font: inherit;
  padding: 0.5em 0.6em;
  border: 1px solid currentColor;
  border-radius: 0.4em;
  background: transparent;
  color: inherit;
  /* Ohne min-width: 0 sprengt ein date-Feld in Safari die Rasterspalte. */
  min-width: 0;
}

.ghb-search-submit {
  font: inherit;
  font-weight: 700;
  padding: 0.6em 1.2em;
  border: 0;
  border-radius: 0.4em;
  cursor: pointer;
}

.ghb-search-filters {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid;
  border-color: color-mix(in srgb, currentColor 20%, transparent);
}

.ghb-search-filters__row {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  align-items: end;
}

.ghb-search-filters__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ghb-search-count {
  font-size: 0.95em;
  margin: 0 0 1rem;
}

.ghb-search-count__filtered {
  opacity: 0.7;
}

.ghb-result-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.ghb-card {
  display: grid;
  gap: 1rem;
  /* Bild, Text, Preis. Faellt unterhalb der Schwelle auf eine Spalte. */
  grid-template-columns: minmax(8rem, 14rem) 1fr minmax(9rem, 14rem);
  align-items: start;
  padding: 1rem;
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 0.6em;
}

@media (max-width: 48rem) {
  .ghb-card {
    grid-template-columns: 1fr;
  }
}

.ghb-card--unavailable {
  opacity: 0.75;
}

.ghb-card__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.4em;
}

.ghb-card__title {
  margin: 0 0 0.35rem;
  font-size: 1.15em;
}

.ghb-card__meta {
  margin: 0 0 0.5rem;
  font-size: 0.9em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  opacity: 0.85;
}

.ghb-card__excerpt {
  margin: 0 0 0.5rem;
}

.ghb-card__aside {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
}

.ghb-card__price-total {
  display: block;
  font-size: 1.3em;
  font-weight: 700;
}

.ghb-card__price-note {
  display: block;
  font-size: 0.85em;
  opacity: 0.8;
}

/*
 * Netto, enthaltene MwSt. und Brutto stehen untereinander und immer zusammen.
 * Sie sind eine Pflichtangabe und keine Fussnote - deshalb kein display:none
 * auf kleinen Bildschirmen.
 */
.ghb-tax-details {
  display: grid;
  gap: 0.1rem;
  font-size: 0.8em;
  opacity: 0.9;
}

.ghb-card__note {
  margin: 0;
  font-size: 0.85em;
}

.ghb-card__select {
  display: inline-block;
  font-weight: 700;
  padding: 0.55em 1.1em;
  border-radius: 0.4em;
  border: 1px solid currentColor;
  text-decoration: none;
}

.ghb-search-empty {
  padding: 1.5rem;
  border: 1px dashed;
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 0.6em;
}

.ghb-search-empty__lead {
  margin-top: 0;
  font-weight: 600;
}

.ghb-search-empty__action {
  display: inline-block;
  font-weight: 700;
  padding: 0.5em 1em;
  border: 1px solid currentColor;
  border-radius: 0.4em;
  text-decoration: none;
}

.ghb-search-busy {
  font-size: 0.9em;
  opacity: 0.8;
}

/* Waehrend des Nachladens bleibt die alte Liste stehen, nur gedaempft. Sie zu
   leeren waere ein Sprung im Seitenaufbau und ein Verlust der Leseposition. */
.ghb-search-list[aria-busy="true"] {
  opacity: 0.55;
}