/* ══════════════════════════════════════════════════════════════════════════
   /reference — mřížka projektů s filtrem. Načítá se přes $extra_css.

   Vzor: stránka projektů novozélandské agentury (Alexandr 11. 8. 2026) —
   velký nadpis na střed, řada přepínačů oborů a pod tím mřížka karet, kde je
   napřed screenshot a teprve pod ním název.

   ⚠️ FILTR JE ČISTĚ CSS, bez JavaScriptu. Radio přepínače leží v DOM PŘED
   mřížkou a schovávání jede přes `:checked ~ .projgrid`. Důvod: bez JS musí
   stránka ukázat všechno (§8), a to se tímhle stane samo — když skripty
   nejedou, přepínače pořád fungují, protože je obsluhuje prohlížeč.
   ⚠️ Barvy VÝHRADNĚ z proměnných base.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Přepínače oborů ─────────────────────────────────────────────────────── */
.projfilter{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:0 0 34px}
.projfilter input{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.projfilter label{display:inline-flex;align-items:center;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);border-radius:999px;
  padding:9px 17px;font-size:.94rem;font-weight:500;color:var(--navy);
  transition:background .15s,border-color .15s,color .15s}
.projfilter label:hover{border-color:var(--navy)}
/* Zaostření musí být vidět — přepínač se ovládá i klávesnicí. */
.projfilter input:focus-visible + label{outline:2px solid var(--orange);outline-offset:2px}
.projfilter input:checked + label{background:var(--navy);border-color:var(--navy);color:#fff}

/* ── Mřížka karet ────────────────────────────────────────────────────────── */
.projgrid{display:grid;grid-template-columns:1fr;gap:34px 26px}
@media(min-width:720px){ .projgrid{grid-template-columns:1fr 1fr;gap:44px 30px} }

.proj{display:flex;flex-direction:column}
/* Karta je cíl kotvy z reklamní LP (`/reference#ref-sweetfamily`). Lepivá
   hlavička je 76 px vysoká a bez odsazení by po skoku seděla přes horní hranu
   snímku — stejná hodnota jako u `.qsec` ve faq.css. */
.proj{scroll-margin-top:88px}
/* Okno prohlížeče s posouvatelným obsahem. Lišta i posouvání jsou ze
   sdíleného `.site-window` v base.css — tady se jen dodává rám a stín. */
.proj-shot{border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);background:var(--surface);
  box-shadow:0 10px 30px rgba(26,37,71,.10)}
/* Vyšší výřez než u karet na homepage — na /reference je průchod webem hlavní
   obsah stránky, ne doplněk. */
.proj-shot .site-window-view{max-height:380px}
@media(max-width:719px){ .proj-shot .site-window-view{max-height:300px} }
/* Karta s videem (Aapni Fleet, 17. 9. 2026): stejná výška jako posouvatelné
   snímky vedle, video výřez vyplní. */
.proj-shot .site-window-view--video{height:380px;overflow:hidden;background:#000}
.proj-shot .site-window-view--video .videowin-v{height:100%;aspect-ratio:auto}
@media(max-width:719px){ .proj-shot .site-window-view--video{height:300px} }
.proj-meta{padding:16px 2px 0}
.proj-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.proj-name{font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:clamp(1.15rem,3vw,1.42rem);letter-spacing:-.02em;margin:0 0 .28em;line-height:1.2}
.proj-desc{color:var(--muted);font-size:.97rem;line-height:1.5;margin:0}

.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Adresa je od 16. 9. 2026 KLIKACI odkaz ven (Alexandr, po externim auditu).
   Do te doby to byl <span> podle puvodniho §16. Vypada porad jako stitek,
   jen reaguje na najeti, aby bylo poznat, ze se da otevrit. */
.proj-url{display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-size:.88rem;color:var(--muted);text-decoration:none;
  background:var(--navy-tint);border-radius:999px;padding:4px 11px;
  transition:background .15s,color .15s}
.proj-url:hover,.proj-url:focus-visible{background:var(--navy);color:#fff}
.proj-url-ic{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Filtrování ──────────────────────────────────────────────────────────
   Každá karta nese třídu oboru. Když je zaškrtnutý konkrétní obor, schovají se
   karty, které ji nemají. „Vše" nic neschovává, takže nepotřebuje pravidlo. */
#f-eshop:checked   ~ .projgrid .proj:not(.is-eshop),
#f-jidlo:checked   ~ .projgrid .proj:not(.is-jidlo),
#f-sluzby:checked  ~ .projgrid .proj:not(.is-sluzby){display:none}

/* ── Pás čísel případové studie ─────────────────────────────────────────── */
.caseband{display:grid;grid-template-columns:1fr;gap:26px;text-align:center}
@media(min-width:640px){ .caseband{grid-template-columns:repeat(3,1fr);gap:0} }
.caseband > div{padding:0 18px}
@media(min-width:640px){
  .caseband > div + div{border-left:1px solid var(--border)}
}
.caseband b{display:block;font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:clamp(2.1rem,7vw,3.1rem);line-height:1;letter-spacing:-.03em}
.caseband b sup{font-size:.5em;top:-.55em;position:relative;color:var(--orange)}
.caseband span{display:block;color:var(--navy);font-weight:600;margin-top:9px;font-size:1rem}
.caseband small{display:block;color:var(--muted);font-size:.9rem;margin-top:5px;line-height:1.45}