/* /search-site layout only. Visual components come from flat101 (custom-input,
   cta-primary, chipbar/chip, lf-panel, custom-select, group-title,
   section--listing); this file arranges them and must not add a separate
   palette, typography, card or button system. Colours are --sp-* tokens. */

/* ---------- search box ---------- */
.ss-search {
  display: flex;
  align-items: stretch;
  gap: 15px;
  margin-bottom: 15px;
}
.ss-query-shell { flex: 1; min-width: 0; }
.ss-query-shell input { width: 100%; }
.ss-search > button { flex: 0 0 auto; }

/* ---------- filter bar ---------- */
.ss-filterbar { margin-bottom: 10px; }
.ss-filterbar .chipbar { flex-wrap: wrap; }
.ss-filter[hidden] { display: none; }
/* the field's label heads its modal section; the dropdown starts below it */
.ss-filter .custom-select { clear: both; }
.ss-filter select { margin: 0; }

/* Desktop and tablet: the modal's contents become one row of chip-shaped
   dropdowns (chip sizes, border and active colours). */
@media (min-width: 768px) {
  .ss-filterbar .ss-filters-chips,
  .ss-filter-panel .lf-panel__header,
  .ss-filter-panel .lf-panel__footer { display: none; }
  .ss-filterbar .ss-filter-panel {
    position: static;
    display: block;
    z-index: auto;
    background: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .ss-filter-panel .lf-panel__dialog {
    display: block;
    width: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .ss-filter-panel .lf-panel__body {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow: visible;
  }
  .ss-filter-panel .lf-section { padding: 0; border: 0; }
  .ss-filter-panel .lf-section__title {
    position: absolute !important;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
  }
  .ss-filter-panel .custom-select { width: auto; color: var(--sp-heading); }
  .ss-filter-panel .custom-select.is-active { color: var(--sp-accent); }
  /* the chevron, drawn in the chip's text colour like the chip icons */
  .ss-filter-panel .custom-select::after {
    right: 14px;
    width: 10px;
    border: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .ss-filterbar .ss-filter-panel select {
    width: auto;
    max-width: 260px;
    /* as wide as the chosen option, not the longest one, where supported */
    field-sizing: content;
    height: 36px;
    padding: 0 34px 0 14px;
    border: 1px solid var(--sp-border-raised);
    border-radius: 18px;
    background: var(--sp-bg);
    color: inherit;
    font-family: inherit;
    font-size: 13px;
    line-height: 34px;
    text-overflow: ellipsis;
    cursor: pointer;
  }
  .ss-filterbar .ss-filter-panel .is-active select {
    border-color: var(--sp-accent);
    background: color-mix(in srgb, var(--sp-accent) 12%, transparent);
  }
  .no-touch .ss-filterbar .ss-filter-panel .custom-select:not(.is-active) select:hover { border-color: var(--sp-text-muted); }
  .ss-filterbar .ss-filter-panel select:focus-visible {
    outline: 2px solid var(--sp-focus);
    outline-offset: 2px;
  }
  .ss-filters-submit { color: var(--sp-heading); }
}

/* Phones: one Filters chip opening the existing filters modal. Without JS
   the chip's #ss-filter-panel link opens it through :target. */
@media (max-width: 767px) {
  .ss-filters-submit,
  .ss-summary .ss-summary__chip { display: none; }
  .ss-filterbar .chipbar { flex-wrap: nowrap; }
  .ss-filter-panel:target {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
  }
  .ss-filter-panel .lf-section__title { float: none; }
  .ss-filter-panel select { width: 100%; height: 42px; }
  .ss-filter-panel .lf-panel__footer .lf-show { text-align: center; }
  .ss-search { gap: 7.5px; }
  .ss-query-shell input { font-size: 16px; }
}

/* ---------- summary: count, active filters, Clear all ---------- */
.ss-summary {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding-top: 0;
  margin-bottom: 15px;
}
.ss-summary .chip, .ss-filters-chips .chip { text-decoration: none; }

/* ---------- messages and category shortcuts ---------- */
.ss-empty { margin: 15px 0 30px; }
.ss-empty p { margin-bottom: 15px; }
.ss-shortcuts .chip { text-decoration: none; }

/* ---------- results ---------- */
.ss-results-section, .ss-related { margin-top: 30px; }
.ss-results-section > p { margin-bottom: 15px; }
/* Keep long content within the same listing columns as existing cards. */
.ss-results-section .item { min-width: 0; overflow-wrap: anywhere; }
.ss-results-section .card-img img { height: auto; }
.ss-results-section .card-meta { display: block; color: var(--sp-text-muted); }