/* Search/Index.cshtml — the query, the chips, the results. */

@layer components {

  /* The query row. A field that grows and a button that does not, which is the one
     layout that survives both a phone and a wide desk without a breakpoint. */
  .one-search {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-3);
    max-inline-size: var(--measure);
    margin-block-end: var(--sp-5);
  }

  .one-search__field { flex: 1; }

  .one-search__go { flex: none; }

  /* -------------------------------------------------------------------------
     Filters. Three rows, each one dimension, each labelled.

     Labelled on purpose: a bare row of chips reading "Everything / Articles /
     News / Any level / C1+ …" is a puzzle. The label is what makes it obvious
     that the rows are independent and that picking one does not undo another.
     ------------------------------------------------------------------------- */
  .one-filters {
    display: grid;
    gap: var(--sp-4);
    padding-block: var(--sp-4);
    border-block: 1px solid var(--bh-hairline);
    margin-block-end: var(--sp-5);
  }

  .one-filters__row {
    display: grid;
    gap: var(--sp-2);
  }

  .one-filters__label {
    margin: 0;
    color: var(--bh-titanium);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* On a wide screen the label sits beside its chips instead of above them, which
     halves the vertical cost of the whole block. */
  @media (min-width: 48rem) {
    .one-filters__row {
      grid-template-columns: 7rem 1fr;
      align-items: baseline;
      gap: var(--sp-4);
    }
  }

  /* -------------------------------------------------------------------------
     Results.
     ------------------------------------------------------------------------- */
  .one-results__count {
    margin: 0 0 var(--sp-4);
    color: var(--bh-titanium);
    font-family: var(--ff-evidence);
    font-size: var(--fs-caption);
    font-variant-numeric: tabular-nums;
  }

  .one-results {
    display: grid;
    gap: var(--sp-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .one-result {
    display: grid;
    gap: var(--sp-2);
    padding-block-end: var(--sp-5);
    border-block-end: 1px solid var(--bh-hairline);
  }

  .one-result__kicker {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    color: var(--bh-titanium);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .one-result__kicker .bh-icon { --bh-icon-size: 14px; }

  .one-result__title {
    margin: 0;
    font-family: var(--ff-editorial);
    font-size: var(--fs-h3);
    text-wrap: balance;
  }

  .one-result__title a {
    color: var(--bh-chrome);
    text-decoration: none;
  }

  .one-result__title a:hover { color: var(--bh-ion); }

  .one-result__sum {
    max-inline-size: var(--measure);
    margin: 0;
    color: var(--bh-titanium);
  }

  .one-result__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    margin: 0;
    color: var(--bh-titanium);
    font-size: var(--fs-caption);
  }

  .one-result__who {
    color: inherit;
    font-family: var(--ff-evidence);
    text-decoration: none;
  }

  .one-result__who:hover { color: var(--bh-chrome); }

  /* -------------------------------------------------------------------------
     The busy swap. The skeleton is a sibling of the region, so replacing the
     results cannot destroy the placeholder standing in for them.
     ------------------------------------------------------------------------- */
  .one-results-region[aria-busy="true"] { display: none; }

  .one-results-skeleton { display: none; }

  .one-results-region[aria-busy="true"] + .one-results-skeleton {
    display: grid;
    gap: var(--sp-6);
  }

  .one-results-skeleton__row {
    display: grid;
    gap: var(--sp-2);
  }
}