/*Returns a CSS clamp function which resolves to $size-at-min-width when page width is
below $min-width,
$size-at-max-width when page width is above $max-width,
and linearly scales between the two between $min-width and $max-width*/
/*
 * apache-solr-for-typo3/solr results page (Figma node 4337:29528). Page structure only: search
 * form row + sidebar/main split. Wired via <f:asset.css> in bgm_search's Layouts/Solr/Split.html.
 * Input and button come from the atoms (5-atoms/input.css, 5-atoms/button.css).
 * Results column (Figma node 4337:29565): hit count line + result cards. Sidebar (4337:29537):
 * facet box with checkbox-style option links. Sorting (4337:29567): outline chips + direction select. Pagination: square grey boxes (own design, no Figma).
 */
@layer extensions {
  .tx-solr-facets, .search-result {
    padding: var(--padding-m);
    border-radius: var(--border-radius-default);
    border: var(--border-default-width) solid var(--glass-grey-stroke, #f5f5f5);
    background: var(--glass-grey);
    /* glass-grey */
    box-shadow: 0 0 20px 0 rgba(162, 162, 165, 0.08);
    backdrop-filter: blur(30px);
  }
  /* Square grey box shared by pagination and results-per-page buttons. */
  .solr-per-page-item, .co-pagination .page-ellipsis, .co-pagination .page-link {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 2.5rem;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: var(--border-radius-inner);
    background: var(--shade-grey-100);
    color: var(--body-text-color);
    font: inherit;
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--motion-base) var(--motion-ease);
  }
  .solr-per-page-item:focus-visible, .co-pagination .page-ellipsis:focus-visible, .co-pagination .page-link:focus-visible {
    outline: var(--border-default-width) solid var(--color-primary-orange);
    outline-offset: 2px;
  }
  .solr-per-page-item:hover, .co-pagination .page-ellipsis:hover, .co-pagination .page-link:hover {
    background: var(--shade-grey-250);
  }
  .tx_solr {
    display: grid;
    gap: var(--gap-xxl);
  }
  .tx-solr-search-field {
    display: flex;
    gap: var(--button-gap-xs);
  }
  .tx-solr-search-field .input-block {
    flex: 1;
  }
  .tx-solr-search-results {
    display: grid;
    gap: var(--gap-l);
  }
  @media (min-width: 992px) {
    .tx-solr-search-results {
      grid-template-columns: 19.5rem 1fr;
    }
  }
  .tx-solr-search-main {
    min-width: 0;
  }
  @media (min-width: 992px) {
    .tx-solr-search-main {
      border-inline-start: var(--border-default-width) solid var(--shade-grey-100);
      padding-inline-start: var(--gap-l);
    }
  }
  /* minmax(0, 1fr): an unbreakable string in one teaser must not widen the whole column. */
  :where(.tx-solr-results, .tx-solr-hits, .tx-solr-hits-list, .results-list) {
    grid-template-columns: minmax(0, 1fr);
  }
  .tx-solr-results {
    display: grid;
    gap: var(--gap-l);
  }
  .tx-solr-results-head:not(:has(*)) {
    display: none;
  }
  .tx-solr-hits {
    display: grid;
    gap: var(--gap-s);
  }
  .tx-solr-hits-count {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--gap-m);
    margin: 0;
  }
  .tx-solr-hits-count .-h5Style {
    margin: 0;
  }
  .tx-solr-hits-filters {
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-bold);
  }
  .tx-solr-hits-list {
    display: grid;
    gap: var(--button-gap-s);
  }
  .results-list {
    display: grid;
    gap: var(--gap-s);
  }
  .search-result {
    display: grid;
    align-items: center;
    gap: var(--gap-l);
    overflow-wrap: anywhere;
  }
  .search-result p {
    margin: 0;
  }
  .search-result .results-highlight {
    font-weight: var(--font-weight-bold);
  }
  /* Product hits only (Document.html): image column on the right. */
  .search-result:has(.search-result__image) {
    grid-template-columns: minmax(0, 1fr) min(12rem, 30%);
  }
  .search-result__body {
    display: grid;
    gap: var(--gap-s);
  }
  .search-result__image img {
    display: block;
    width: 100%;
    height: auto;
  }
  .search-result__text {
    display: grid;
    gap: var(--gap-xs);
  }
  .search-result__kicker {
    color: var(--font-color-kicker);
    font-family: var(--font-family-accent, Adelle);
    font-size: var(--font-size-kicker, 19px);
    font-style: normal;
    font-weight: 600;
    line-height: 1.1;
    font-size: var(--font-size-s);
    color: var(--shade-grey-750);
  }
  .search-result__title {
    font-weight: var(--font-weight-bold);
    color: var(--body-text-color);
    text-decoration: none;
  }
  .search-result__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-m);
    font-size: var(--font-size-s);
  }
  .search-result__url {
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tx-solr-facets {
    display: grid;
    gap: var(--button-gap-s);
  }
  .tx-solr-facets__body {
    display: grid;
    gap: var(--gap-s);
  }
  .tx-solr-facets__title {
    margin: 0;
  }
  .facet-option-list {
    display: grid;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .facet-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-s);
    margin: 0;
  }
  .facet-option .facet {
    display: flex;
    align-items: center;
    gap: var(--gap-s);
    color: var(--body-text-color);
    text-decoration: none;
    /* Checkbox look (Figma 4337:29546/29552): the option is a link, not an <input>. */
  }
  .facet-option .facet::before {
    content: "";
    flex: none;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: var(--border-default-width) solid var(--color-primary-anthracite);
    border-radius: var(--border-radius-checkbox);
    font-family: "lucide";
    font-size: 18px;
    line-height: 1;
    color: var(--shade-white);
  }
  .facet-option .facet.is-selected::before {
    content: "\e06c";
    border-color: var(--color-primary-orange);
    background: var(--color-primary-orange);
  }
  .facet-option .facet:hover::before {
    border-color: var(--color-primary-orange);
  }
  .facet-result-count {
    font-size: var(--font-size-s);
  }
  .tx-solr-facets__reset {
    display: inline-flex;
    align-items: center;
    gap: var(--button-icon-gap);
    width: fit-content;
    font-weight: var(--font-weight-button);
    color: var(--font-color-secondary);
    text-decoration: none;
  }
  .tx-solr-facets__reset i {
    font-size: 24px;
  }
  /* Sorting row (Figma 4337:29567): label + outline chips on the left, direction select right. */
  .solr-sorting {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-m);
  }
  .solr-sorting__options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-m);
  }
  .solr-sorting__label {
    font-weight: var(--font-weight-bold);
  }
  .solr-sorting__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .solr-sorting__chip,
  .solr-start__chip {
    display: block;
    padding: 6px var(--button-icon-gap);
    border: var(--border-default-width) solid var(--color-primary-anthracite);
    border-radius: var(--border-radius-button);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--body-text-color);
    text-decoration: none;
    transition: all var(--motion-base) var(--motion-ease);
  }
  .solr-sorting__chip:hover, .solr-sorting__chip.-active,
  .solr-start__chip:hover,
  .solr-start__chip.-active {
    border-color: var(--color-primary-orange);
    color: var(--font-color-secondary);
  }
  .solr-sorting__chip:focus-visible,
  .solr-start__chip:focus-visible {
    outline: var(--border-default-width) solid var(--color-primary-orange);
    outline-offset: 2px;
  }
  .solr-sorting__direction {
    position: relative;
    width: min(100%, 21rem);
    margin-inline-start: auto;
    /* Lucide arrow icon in front of the label (Figma: arrow-down / rotated), select keeps its own chevron. */
  }
  .solr-sorting__direction::before {
    content: "\e042";
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--padding-button-l-r);
    display: grid;
    place-items: center;
    font-family: "lucide";
    font-size: 24px;
    line-height: 1;
    pointer-events: none;
  }
  .solr-sorting__direction.-asc::before {
    content: "\e04a";
  }
  .solr-sorting__direction select {
    padding-inline-start: calc(var(--padding-button-l-r) + 24px + var(--gap-s));
  }
  /* Start state (no search term): hint + popular-search chips, chip look shared with sorting. */
  .solr-start {
    display: grid;
    gap: var(--gap-m);
    justify-items: center;
    text-align: center;
  }
  .solr-start__hint {
    margin: 0;
  }
  .solr-start__popular {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--gap-m);
  }
  .solr-start__label {
    font-weight: var(--font-weight-bold);
  }
  .solr-start__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* Pagination: own design (no Figma) -- square grey boxes, rounded corners. */
  .co-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-xs);
    margin: var(--gap-l) 0 0;
    padding: 0;
    list-style: none;
  }
  .co-pagination .page-ellipsis {
    background: none;
    cursor: default;
  }
  .co-pagination .active .page-link {
    background: var(--color-primary-orange);
    color: var(--shade-white);
  }
  .co-pagination .page-ellipsis:hover {
    background: none;
  }
  /* Pagination left, results-per-page right; margins move to the row's own top gap. */
  .results-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-m);
    margin-top: var(--gap-l);
  }
  .results-nav .co-pagination,
  .results-nav #results-per-page form {
    margin-top: 0;
  }
  #results-per-page form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--gap-xs);
    margin-top: var(--gap-m);
  }
  .solr-per-page-label {
    margin-inline-end: var(--gap-xs);
    font-size: var(--font-size-s);
    color: var(--shade-grey-750);
  }
  .solr-per-page-active {
    background: var(--color-primary-orange);
    color: var(--shade-white);
  }
  .solr-per-page-active:hover {
    background: var(--color-primary-orange);
  }
}