<h2>Resource filters</h2>
<p>Use the native controls to collect filtering criteria; connect them to the project’s search or listing behavior.</p>

<form class="filters" aria-label="Filter resources">
  <div class="filters__search search">
    <svg class="search__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z"></path></svg>
    <input class="search__input input" type="search" name="keyword" placeholder="Search resources" aria-label="Search resources" />
  </div>
  <label class="filters__field select">
    <span class="srOnly">Topic</span>
    <select class="select__input" name="topic">
      <option value="">All topics</option>
      <option>Strategy</option>
      <option>Design</option>
      <option>Development</option>
    </select>
  </label>
  <label class="filters__field select">
    <span class="srOnly">Resource type</span>
    <select class="select__input" name="type">
      <option value="">All resource types</option>
      <option>Article</option>
      <option>Case study</option>
      <option>Guide</option>
    </select>
  </label>
  <label class="filters__field select">
    <span class="srOnly">Industry</span>
    <select class="select__input" name="industry">
      <option value="">All industries</option>
      <option>Healthcare</option>
      <option>Higher education</option>
      <option>Technology</option>
    </select>
  </label>
</form>

<section aria-label="Resource results" style="margin-top: 2rem">
  <ul class="cards -columns-3 filtersResults">
    <li>
      <article class="card">
        <div class="card__content">
          <h3 class="card__title">Planning a successful redesign</h3>
          <p class="card__description">A practical guide to aligning your team around a shared vision.</p>
          <a href="#" class="card__cta link -wide" aria-label="Read article: Planning a successful redesign"
            >Read article <svg class="card__ctaIcon link__icon"><use href="/main-icons-sprite.svg#arrow-right" /></svg
          ></a>
        </div>
      </article>
    </li>
    <li>
      <article class="card">
        <div class="card__content">
          <h3 class="card__title">A better content model</h3>
          <p class="card__description">How structured content makes publishing more flexible and durable.</p>
          <a href="#" class="card__cta link -wide" aria-label="Read guide: A better content model"
            >Read guide <svg class="card__ctaIcon link__icon"><use href="/main-icons-sprite.svg#arrow-right" /></svg
          ></a>
        </div>
      </article>
    </li>
    <li>
      <article class="card">
        <div class="card__content">
          <h3 class="card__title">Designing for complex systems</h3>
          <p class="card__description">Lessons from building a scalable design system.</p>
          <a href="#" class="card__cta link -wide" aria-label="Read article: Designing for complex systems"
            >Read article <svg class="card__ctaIcon link__icon"><use href="/main-icons-sprite.svg#arrow-right" /></svg
          ></a>
        </div>
      </article>
    </li>
  </ul>
</section>

@use '@/core' as *;

.filters {
  --filters-gap: 1rem;

  background-color: var(--color-gray-50);
  display: grid;
  gap: var(--filters-gap);
  padding: 1.5rem;

  &__search,
  &__field,
  .select,
  .select__input {
    min-width: 0;
    width: 100%;
  }

  .search {
    display: grid;
  }

  .select {
    margin: 0;
  }

  .select__input {
    margin: 0;
  }

  @include at(md) {
    grid-template-columns: minmax(14rem, 2fr) repeat(3, minmax(0, 1fr));
  }

  &.-aside {
    align-content: start;
    grid-template-columns: 1fr;

    @include at(md) {
      position: sticky;
      top: 1rem;
    }
  }
}

.filtersLayout {
  display: grid;
  gap: 2rem;

  @include at(md) {
    align-items: start;
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  }
}

.filtersResults {
  list-style: none;
  margin: 0;
  padding: 0;
}