/**
 * @file
 * Card grid for the label search block.
 */

.kans-label-search__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.kans-label-search__input {
  flex: 1 1 18rem;
  min-width: 0;
}

.kans-label-search__filter {
  flex: 0 1 16rem;
}

.kans-label-search__count {
  margin: 0 0 1.5rem;
  font-weight: 700;
}

.kans-label-search__body {
  display: grid;
  /* 16rem, not 15: "verwarmingstoestellen" needs 226px and 15rem left 220,
     so the longest category broke mid-word. */
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

/*
 * The search field, the count and the comparison-table notice sit in this
 * column rather than spanning the page, so they line up with the grid they
 * act on instead of stretching across the category sidebar too.
 */
.kans-label-search__main {
  min-width: 0;
}

@media (max-width: 60rem) {
  .kans-label-search__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
}

/* --- category sidebar ---------------------------------------------------- */

.kans-label-search__nav-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.kans-label-search__nav-item {
  display: block;
  width: 100%;
  /*
   * Dutch compounds run long and offer no break opportunity:
   * "VERWARMINGSTOESTELLEN" is one 21-character word and simply ran out past
   * the sidebar and its background. "TAPIJTEN EN VLOERBEKLEDING" wrapped fine
   * only because it has spaces.
   */
  overflow-wrap: break-word;
  word-break: break-word;
  padding: 0.6rem 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: uppercase;
}

.kans-label-search__nav-item:hover,
.kans-label-search__nav-item:focus-visible {
  color: #009d52;
}

.kans-label-search__nav-item.is-active {
  color: #009d52;
  font-weight: 700;
}

.kans-label-search__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1.5rem;
  /*
   * Separates the cards from the count and the comparison-table notice above.
   * This collapses against their 1.5rem bottom margin rather than adding to it,
   * so the value here IS the gap — 1.5rem would have changed nothing.
   */
  margin-top: 2.5rem;
}

.kans-label-card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: #f4f4f2;
  color: inherit;
  text-decoration: none;
}

.kans-label-card:hover,
.kans-label-card:focus-visible {
  background: #eceae5;
}

/*
 * Fixed-height box with the logo contained rather than cropped: the source
 * images range from 400x400 to 2320x2560 and are not a common aspect ratio, so
 * anything other than `contain` distorts or clips the wordmark.
 */
.kans-label-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 11rem;
  margin-bottom: 1rem;
  background: #fff;
}

.kans-label-card__logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.kans-label-card__title {
  margin-bottom: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
}

.kans-label-card__teaser {
  color: #5b5b5b;
  font-size: 0.9375rem;
  font-style: italic;
  line-height: 1.4;
}

.kans-label-search__empty {
  margin-top: 1.5rem;
}

/* --- per-category comparison table --------------------------------------- */

.kans-label-search__table-notice {
  padding: 0.85rem 1.25rem;
  margin: 0 0 1.5rem;
  background: #f0efec;
}

.kans-label-search__table-notice a {
  color: #00843d;
  font-weight: 700;
}

.kans-label-search__subnav {
  padding: 0.25rem 0 0.5rem;
  margin: 0;
  background: #f0efec;
  list-style: none;
}

.kans-label-search__nav-item--child {
  padding: 0.45rem 0 0.45rem 1.25rem;
  font-size: 0.9375rem;
}