/* Filtered listing (T34). A category's products with its filters, a result count, a sort and an accessories row.
   Mobile first, tokens only. Prototype (listing section): heading 28px/400, a hairline row with the count and
   "Sort by", 14px pill chips, square tiles with a 20px radius, title 18px/500, line 14px; 3 per row on desktop
   and tablet, 2 on phones (B10).
   Without script everything shows: the filter groups, then the count, sort and "Show results" button.
   With script (html.js): no submit button (S2-FL1); on phones the groups move into a panel behind "Filters (n)". */

.fl { display: flex; flex-direction: column; gap: var(--space-6); }

.fl__head { display: flex; flex-direction: column; gap: var(--space-2); }
.fl__heading {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.fl__intro { margin: 0; max-width: var(--container-text); font-size: var(--fs-body-md); color: var(--color-text); }

.fl__form { display: flex; flex-direction: column; gap: var(--space-5); }

/* ── Filter groups: fieldsets with legends; inputs sit inside chip labels and wrap ── */
.fl__panel { display: flex; flex-direction: column; gap: var(--space-5); }
.fl__panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.fl__filters-heading {
  margin: 0;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  color: var(--color-eyebrow);
}
.fl__groups { display: flex; flex-direction: column; gap: var(--space-5); }
.fl__group { min-width: 0; margin: 0; padding: 0; border: 0; }
.fl__legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
}
.fl__options { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.fl__option {
  position: relative;
  gap: var(--space-2);
  cursor: pointer;
  color: var(--c-grey-900);
}
.fl__choice {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.fl__option:has(.fl__choice:checked) {
  border-color: var(--c-grey-900);
  background: var(--c-grey-900);
  color: var(--c-white);
}
.fl__option:has(.fl__choice:focus-visible) {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}
.fl__option-count { font-weight: var(--fw-regular); }
.fl__swatch {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 var(--border-width) var(--c-ink-a18);
  object-fit: cover;
}

/* Only the phone panel (with script) uses these. */
.fl__open, .fl__close, .fl__panel-actions { display: none; }

/* ── Count, sort and the no-script submit button ── */
.fl__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-hairline);
}
.fl__count { margin: 0; font-size: var(--fs-body); color: var(--color-text); }
.fl__count:focus-visible { outline-offset: var(--space-1); }
.fl__sort { display: flex; align-items: center; gap: var(--space-2); }
.fl__sort-label { font-size: var(--fs-body-sm); color: var(--color-text); }
.fl__sort-select {
  min-height: var(--tap-min);
  padding: 0 var(--space-8) 0 var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--c-white);
  color: var(--c-deep-blue);
  font: inherit;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  appearance: none;
  cursor: pointer;
}
.fl__select-wrap { position: relative; display: inline-flex; color: var(--c-deep-blue); }
.fl__select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-4);
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.fl__submit { flex: 1 1 100%; }
.js .fl__submit { display: none; }

/* ── Selected filters as chips ── */
.fl__results { display: flex; flex-direction: column; gap: var(--space-8); }
.fl__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.fl__chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.fl__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 10px var(--space-4) 10px 18px;
  border: var(--border-width) solid var(--c-deep-blue);
  border-radius: var(--radius-pill);
  background: var(--color-selection);
  color: var(--c-deep-blue);
  font: inherit;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: var(--transition-control);
}
.fl__chip:hover { background: var(--c-deep-blue); color: var(--c-white); }
.fl__chip-icon, .fl__chip svg { flex: none; }
.fl__clear-all {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--fs-body-sm);
  text-decoration: underline;
}

/* ── Tiles: 2 per row on phones, 3 from 600 px (tablet and desktop) ── */
.fl__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fl__tile { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.fl__tile-media {
  aspect-ratio: 1;
  border-radius: var(--radius-media);
  background: var(--color-surface-quiet);
  overflow: hidden;
}
.fl__tile-media picture, .fl__tile-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.fl__tile-title {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  overflow-wrap: anywhere;
}
.fl__tile-link { color: var(--color-heading); text-decoration: none; }
.fl__tile-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-media); }
.fl__tile-link:hover { color: var(--color-link-hover); text-decoration: none; }
.fl__tile-link:focus-visible { outline: none; }
.fl__tile:has(.fl__tile-link:focus-visible) {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--space-2);
  border-radius: var(--radius-media);
}
.fl__tile:hover .fl__tile-link { color: var(--color-link-hover); }
.fl__tile-text { margin: 0; font-size: var(--fs-body-sm); line-height: var(--lh-body-tight); color: var(--color-text); }

/* ── Empty state and accessories row ── */
.fl__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-media);
  background: var(--color-surface-quiet);
}
.fl__empty-text { margin: 0; max-width: var(--container-text); font-size: var(--fs-body-md); color: var(--color-heading); }
.fl__empty-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); margin: 0; }
.fl__empty-links a { display: inline-flex; align-items: center; min-height: var(--tap-min); font-weight: var(--fw-medium); }

.fl__accessories {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-8);
  border-top: var(--border-width) solid var(--color-hairline);
}
.fl__accessories-heading {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
}

/* ── Phones with script: "Filters (n)" opens the groups as a full-screen panel with Apply and Clear ── */
@media (max-width: 767.98px) {
  .js .fl__open {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
    min-height: var(--tap-min);
    padding: 10px 20px;
    border: var(--border-width) solid var(--c-deep-blue);
    border-radius: var(--radius-pill);
    background: var(--c-white);
    color: var(--c-deep-blue);
    font: inherit;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
  }
  .js .fl__panel { display: none; }
  .js .fl__panel.is-open {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    padding: var(--space-5) var(--page-gutter) 0;
    background: var(--c-white);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .js .fl__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-min);
    height: var(--tap-min);
    padding: 0;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--c-white);
    color: var(--c-deep-blue);
    cursor: pointer;
  }
  .js .fl__filters-heading { font-size: var(--fs-h4); font-weight: var(--fw-medium); letter-spacing: var(--ls-heading); color: var(--color-heading); }
  .js .fl__groups { flex: 1 0 auto; }
  .js .fl__panel-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: var(--space-3);
    margin: 0 calc(-1 * var(--page-gutter));
    padding: var(--space-4) var(--page-gutter);
    border-top: var(--border-width) solid var(--color-hairline);
    background: var(--c-white);
  }
  .js .fl__panel-actions .btn { flex: 1 1 0; }
}
.fl-panel-open { overflow: hidden; }

@media (min-width: 600px) {
  .fl__heading { font-size: calc(var(--fs-h3) + var(--space-1) + var(--space-1) / 2); } /* prototype 28px */
  .fl__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-10) var(--gutter); }
  .fl__tile-title { font-size: var(--fs-h4); }
  .fl__submit { flex: 0 0 auto; }
}
@media (min-width: 1024px) {
  .fl__groups { flex-flow: row wrap; gap: var(--space-5) var(--space-10); }
}

/* ── Projects (T43): case-study tiles 1 per row on phones, 2 on tablet, 3 on desktop; page links ── */
.fl__grid--projects { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) {
  .fl__grid--projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .fl__grid--projects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.fl__pages { padding-top: var(--space-6); border-top: var(--border-width) solid var(--color-hairline); }
.fl__page-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fl__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--c-grey-600);
  border-radius: var(--radius-pill);
  background: var(--c-white);
  color: var(--c-deep-blue);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: var(--transition-control);
}
.fl__page--step { padding: 0 var(--space-4); }
a.fl__page:hover { border-color: var(--c-deep-blue); text-decoration: none; }
.fl__page[aria-current="page"] { border-color: var(--c-deep-blue); background: var(--c-deep-blue); color: var(--c-white); }
.fl__page[aria-disabled="true"] { border-color: var(--color-hairline); color: var(--c-grey-600); }
.fl__page-gap { padding: 0 var(--space-1); color: var(--color-text); }