/* Home page «Каталог по сериям»: one list of horizontal media cards (photo left, text right), filter chips above it.
   The chips show only when <html> has the `js` class (one inline line in <head>), so they are there from the first paint
   with no layout shift, and without JS the list is complete and there are no dead controls.
   Two columns from xl (at lg the text column is too narrow for the facts line), one below. Below md: each chip group is one sideways scrolling row.
   Phones: photo and title side by side, description full width under them. */

/* Filter bar: three chip rows (regime, maintenance, vendor), then the count and the reset. */
.fam-filter { display:none; margin:0 0 1.5rem; }
.js .fam-filter { display:block; }
.fam-group { display:flex; align-items:flex-start; gap:.5rem 1rem; padding:.375rem 0; }
.fam-glabel { flex:0 0 8.25rem; padding-top:.6rem; color:#5c636a; font-size:.875rem; }
.fam-chips { display:flex; flex-wrap:wrap; gap:.5rem; min-width:0; }
.fam-chip { display:inline-flex; align-items:center; gap:.5rem; min-height:2.5rem; padding:.375rem 1rem; border:1px solid #dee2e6;
  border-radius:2rem; background:#fff; color:#212529; font-size:.9375rem; line-height:1.2; white-space:nowrap; }
.fam-chip:has(.fam-reg) { padding-left:.4rem; }
.fam-chip .n { color:#6c757d; font-size:.8125rem; font-variant-numeric:tabular-nums; }
.fam-chip:hover { border-color:#adb5bd; }
.fam-chip[aria-pressed="true"] { background:#0d6efd; border-color:#0d6efd; color:#fff; }
.fam-chip[aria-pressed="true"] .n { color:#fff; }
.fam-chip:disabled { background:transparent; border-style:dashed; color:#5c636a; cursor:default; }
.fam-chip:disabled .n { color:#5c636a; }
.fam-chip:disabled .fam-reg { opacity:.45; }
.fam-chip:focus-visible, .fam-reset:focus-visible, .fam:focus-visible { outline:2px solid #0d6efd; outline-offset:2px; }

.fam-status { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:2.75rem;
  margin-top:.5rem; padding-top:.5rem; border-top:1px solid #dee2e6; }
.fam-count { margin:0; color:#495057; font-size:.9375rem; }
.fam-reset { display:inline-flex; align-items:center; gap:.4rem; min-height:2.75rem; padding:0 .25rem; border:0; background:none;
  color:#0a58ca; font-size:.9375rem; }
.fam-reset:hover { text-decoration:underline; }
.fam-reset .bi { font-size:.8em; }

/* What the active regime chip means: one plain line under the bar. */
.fam-note { margin:.25rem 0 0; color:#495057; font-size:.9375rem; }
.fam-note b { color:#212529; font-weight:600; }

/* Regime mark: the letter of the discharge class, the same in the chips and on the photos,
   so a filter and its cards read as one thing and SBH/SBLE/SBM with a shared photo differ at a glance. */
.fam-reg { display:inline-flex; align-items:center; justify-content:center; flex:none; width:1.625rem; height:1.625rem;
  border:1px solid #b6d4fe; border-radius:.4rem; background:#e7f1ff; color:#0a58ca; font-weight:700; font-size:.8125rem; line-height:1; }
.fam-chip[aria-pressed="true"] .fam-reg { border-color:#fff; background:#fff; }

/* The list */
.fam-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; }
.fam-item { display:flex; }
.fam { flex:1 1 auto; min-width:0; display:grid; grid-template-columns:10.5rem minmax(0,1fr); grid-template-rows:auto 1fr auto;
  grid-template-areas:"img head" "img desc" "img facts"; column-gap:1.25rem;
  padding:1rem 1.25rem 1rem 1rem; background:#fff; border:1px solid #e9ecef; border-radius:1rem;
  box-shadow:0 .125rem .25rem rgba(0,0,0,.075); color:#212529; text-decoration:none; transition:border-color .15s, box-shadow .15s; }
.fam:hover { border-color:#9ec5fe; box-shadow:0 .375rem 1rem rgba(13,110,253,.1); }

/* Light well + multiply: transparent cut-outs and the few photos on an opaque white ground look the same. */
.fam-photo { grid-area:img; position:relative; align-self:start; aspect-ratio:4/3; border-radius:.75rem; background:#f1f3f5; overflow:hidden; }
.fam-photo img { display:block; width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.fam-photo .fam-reg { position:absolute; top:.4rem; left:.4rem; width:1.75rem; height:1.75rem; font-size:.875rem; background:#fff; }

/* Title, then the discontinued label on the same line while it fits, so those cards are no taller than the rest. */
.fam-head { grid-area:head; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:.25rem .625rem; margin-bottom:.375rem; }
.fam-title { margin:0; font-size:1.125rem; font-weight:600; line-height:1.3; color:#0d6efd; }
.fam-vendor { font-weight:400; }
.fam:hover .fam-title { color:#0a58ca; text-decoration:underline; text-underline-offset:.2em; }
.fam-desc { grid-area:desc; margin:0 0 .625rem; color:#495057; font-size:.9375rem; line-height:1.5; }
.fam-facts { grid-area:facts; display:flex; flex-wrap:wrap; margin:0; color:#495057; font-size:.875rem; font-variant-numeric:tabular-nums; }
.fam-facts b { color:#212529; font-weight:600; }
.fam-facts > span + span::before { content:""; display:inline-block; width:1px; height:.85em; margin:0 .625rem; background:#ced4da; vertical-align:-.05em; }

/* Discontinued: words first (the amber label), the faded photo only repeats it. */
.fam-off { display:inline-flex; align-items:center; gap:.375rem; padding:.0625rem .5rem; border:1px solid #ffe69c;
  border-radius:.375rem; background:#fff3cd; color:#664d03; font-size:.8125rem; font-weight:500; }
.is-off .fam-photo img { filter:grayscale(1); opacity:.6; }

@media (min-width:1200px) {
  .fam-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem 1.5rem; }
}

/* Phones and small tablets: the filter bar turns into sideways scrolling rows (wrapped rows with a label column
   would be about 500 px tall at 576-767 px, more than a landscape phone screen). */
@media (max-width:767.98px) {
  /* Each group: a small label, then one chip row that scrolls sideways to the screen edge, with a fade as the cue. */
  .fam-filter { margin-bottom:1rem; }
  .fam-group { position:relative; flex-direction:column; gap:.125rem; padding:0; }
  .fam-group + .fam-group { padding-top:.375rem; } /* more space above a label than below it, so it reads as the caption of its own row */
  .fam-glabel { flex:none; padding:0; font-size:.75rem; line-height:1; }
  /* The row bleeds to both screen edges; the 4px padding above and below (taken back by the margins) keeps the focus ring whole. */
  .fam-chips { flex-wrap:nowrap; align-self:stretch; gap:.375rem; margin:-4px -.75rem; padding:4px 2rem 4px .75rem; scroll-padding-left:.75rem;
    overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .fam-chips::-webkit-scrollbar { display:none; }
  .fam-group::after { content:""; position:absolute; right:-.75rem; bottom:0; width:2rem; height:2.75rem;
    background:linear-gradient(to right, rgba(248,249,250,0), #f8f9fa); pointer-events:none; }
  .fam-chip { flex:none; scroll-snap-align:start; min-height:2.75rem; padding:.375rem .75rem; font-size:.8125rem; gap:.3rem; }
  .fam-chip:has(.fam-reg) { padding-left:.375rem; }
  .fam-chip .fam-reg { width:1.5rem; height:1.5rem; font-size:.75rem; }
  .fam-chip .n { font-size:.75rem; }
  .fam-status { min-height:0; margin-top:.25rem; padding-top:.25rem; }
  .fam-count, .fam-reset, .fam-note { font-size:.875rem; }
  .fam-count { line-height:1.25; }
}

@media (max-width:575.98px) {
  .fam { grid-template-columns:8rem minmax(0,1fr); grid-template-rows:auto 1fr; grid-template-areas:"img head" "img facts" "desc desc";
    column-gap:.875rem; padding:.75rem; border-radius:.75rem; }
  .fam-photo { border-radius:.5rem; }
  .fam-photo .fam-reg { top:.3rem; left:.3rem; width:1.5rem; height:1.5rem; font-size:.75rem; }
  .fam-head { margin-bottom:.25rem; }
  .fam-title { font-size:1.0625rem; }
  .fam-facts { flex-direction:column; align-self:end; font-size:.8125rem; line-height:1.45; }
  .fam-facts > span + span::before { display:none; }
  .fam-desc { margin:.625rem 0 0; font-size:.875rem; }
}