/* OE Filter Results (oe/filter-results). Cards use the global oe-card classes;
   this file only lays out the grid, the bar above it and the chips. */

.oe-block-filter-results {
  --oe-filter-cols: 3;
  display: flex;
  flex-direction: column;
  gap: var(--oe-spacing-medium);
  scroll-margin-top: var(--oe-filter-scroll-offset, 120px);
}

.oe-block-filter-results--d2 { --oe-filter-cols: 2; }
.oe-block-filter-results--d4 { --oe-filter-cols: 4; }

@media (max-width: 1024px) {
  .oe-block-filter-results--t1 { --oe-filter-cols: 1; }
  .oe-block-filter-results--t2 { --oe-filter-cols: 2; }
  .oe-block-filter-results--t3 { --oe-filter-cols: 3; }
}

@media (max-width: 767px) {
  .oe-block-filter-results--m1 { --oe-filter-cols: 1; }
  .oe-block-filter-results--m2 { --oe-filter-cols: 2; }
}

/* Count + sort */
.oe-block-filter-results__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--oe-spacing-small) var(--oe-spacing-medium);
}

.oe-block-filter-results .oe-block-filter-results__count {
  margin: 0;
}

.oe-block-filter-results__count:focus {
  outline: none;
}

.oe-block-filter-results__count:focus-visible {
  outline: 2px solid var(--oe-color-primary);
  outline-offset: 2px;
}

.oe-block-filter-results__sort {
  display: flex;
  align-items: center;
  gap: var(--oe-spacing-xsmall);
}

.oe-block-filter-results__sort-select {
  min-height: var(--oe-sizing-large);
  padding: var(--oe-spacing-2xsmall) var(--oe-spacing-large) var(--oe-spacing-2xsmall) var(--oe-spacing-xsmall);
  border: 1px solid var(--oe-color-trans-dark-10);
  border-radius: var(--oe-border-radius-small);
  background-color: var(--oe-color-primary-4, #fff);
  color: var(--oe-color-secondary);
  font: inherit;
  font-size: var(--oe-font-size-small);
}

/* Active filter chips */
.oe-block-filter-results__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oe-spacing-xsmall);
}

.oe-block-filter-results__chips[hidden] {
  display: none;
}

.oe-block-filter-results .oe-block-filter-results__chip-list {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oe-block-filter-results .oe-block-filter-results__chip-list li {
  margin: 0;
}

/* Chips are the framework's .oe-badge (colour, size, shape, type). This only
   adds what a <button> needs. The theme's button:hover/:focus beat .oe-badge,
   so those states are set here with extra classes. */
.oe-block-filter-results .oe-block-filter-results__chip.oe-badge {
  position: relative;
  gap: var(--oe-spacing-2xsmall);
  margin: 0;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.oe-block-filter-results .oe-block-filter-results__chip.oe-badge:focus {
  background-color: var(--oe-color-primary);
  color: var(--oe-color-primary-4, #fff);
}

.oe-block-filter-results .oe-block-filter-results__chip.oe-badge:hover,
.oe-block-filter-results .oe-block-filter-results__chip.oe-badge:focus-visible {
  background-color: var(--oe-color-secondary);
  color: var(--oe-color-primary-4, #fff);
}

.oe-block-filter-results .oe-block-filter-results__chip.oe-badge:focus-visible {
  outline: 2px solid var(--oe-color-secondary);
  outline-offset: 2px;
}

/* The badge is 18px tall; this invisible area makes it a 26px touch target. */
.oe-block-filter-results__chip::after {
  content: "";
  position: absolute;
  inset: -4px -2px;
}

.oe-block-filter-results__chip-x {
  font-size: 1.15em;
  line-height: 0;
}

/* Two classes: the theme's button background otherwise wins. */
.oe-block-filter-results .oe-block-filter-results__clear,
.oe-block-filter-results .oe-block-filter-results__clear:hover,
.oe-block-filter-results .oe-block-filter-results__clear:focus {
  min-height: var(--oe-sizing-medium);
  border: 0;
  background: transparent;
  color: var(--oe-color-secondary);
  font-size: var(--oe-font-size-small);
  text-decoration: underline;
  cursor: pointer;
}

/* Update fade + spinner (view.js adds .is-loading for SWAP_DELAY on each
   filter change). The cards fade out, not the grid, so the spinner on the
   grid's ::before shows where the new cards will appear. */
.oe-block-filter-results.is-ready .oe-block-filter-results__item,
.oe-block-filter-results.is-ready .oe-block-filter-results__empty {
  transition: opacity 0.3s cubic-bezier(0.2, 0.6, 0.35, 1);
}

.oe-block-filter-results.is-loading .oe-block-filter-results__item,
.oe-block-filter-results.is-loading .oe-block-filter-results__empty {
  opacity: 0;
  transition-duration: 0.18s;
  transition-timing-function: ease-in;
}

.oe-block-filter-results .oe-block-filter-results__grid::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: var(--oe-spacing-xlarge);
  left: 50%;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  border: 3px solid var(--oe-color-trans-dark-10);
  border-top-color: var(--oe-color-primary);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
  animation: oe-filter-spin 0.7s linear infinite;
  pointer-events: none;
}

.oe-block-filter-results.is-loading .oe-block-filter-results__grid::before {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s ease 0.08s, visibility 0s;
}

@keyframes oe-filter-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .oe-block-filter-results .oe-block-filter-results__item,
  .oe-block-filter-results .oe-block-filter-results__empty,
  .oe-block-filter-results .oe-block-filter-results__grid::before {
    transition: none;
  }
}

/* Grid */
.oe-block-filter-results .oe-block-filter-results__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--oe-filter-cols), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.oe-block-filter-results .oe-block-filter-results__item {
  display: flex;
  margin: 0;
}

.oe-block-filter-results__item[hidden] {
  display: none;
}

.oe-block-filter-results__card {
  flex: 1 1 auto;
}

.oe-block-filter-results .oe-block-filter-results__title {
  margin: 0;
  font-size: var(--oe-font-size-base);
  line-height: var(--oe-line-height-large);
}

.oe-block-filter-results__title a {
  text-decoration: none;
}

.oe-block-filter-results__title a:hover,
.oe-block-filter-results__title a:focus-visible {
  text-decoration: underline;
}

/* Empty + load more */
.oe-block-filter-results .oe-block-filter-results__empty {
  margin: 0;
  padding: var(--oe-spacing-large);
  border: 1px dashed var(--oe-color-trans-dark-10);
  border-radius: var(--oe-border-radius-base);
  text-align: center;
}

.oe-block-filter-results__more {
  display: flex;
  justify-content: center;
}

.oe-block-filter-results__more-button[hidden],
.oe-block-filter-results__empty[hidden] {
  display: none;
}