/* KINETIC catalogue (index.html): the list of tests on the Zarpa ink surface.
   It builds on style.css (header, labels, tokens); cards are ruled cells with a paper thumbnail of the 3D stage. */
.catalog{display:block;max-width:1920px;margin:auto;padding:0 32px 36px}
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 48px;align-items:end;padding:56px 0 44px}
.hero .eyebrow{grid-column:1 / -1}
.hero h1{font-size:clamp(34px,5.6vw,96px)}
.hero-lead{max-width:60ch;color:var(--soft);font-size:17px;line-height:1.6}
.hero-count{grid-column:2;grid-row:2 / 4;display:flex;align-items:flex-end;gap:14px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.1em;line-height:1.4;text-transform:uppercase}
.hero-count strong{color:var(--aqua);font-family:var(--font-display);font-size:clamp(64px,8.4vw,150px);font-weight:750;letter-spacing:-.08em;line-height:.76}
.hero-count span{max-width:9em;padding-bottom:2px}

/* Tabs «Тести» / «3D-уроки»: a square segmented control, aqua for the chosen list. */
.catalog-tabs{display:flex;width:max-content;max-width:100%;margin:0 0 24px;border:1px solid var(--rule)}
.catalog-tabs button{display:flex;align-items:center;gap:12px;min-height:var(--tap-min);padding:0 22px;border:0;background:transparent;color:var(--fg);font-family:var(--font-display);font-size:12px;font-weight:780;letter-spacing:var(--tracking-button);line-height:1.2;text-transform:uppercase;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.catalog-tabs button+button{border-left:1px solid var(--rule)}
.catalog-tabs button span{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.catalog-tabs button:hover{background:var(--tint)}
.catalog-tabs button[aria-selected="true"]{background:var(--aqua);color:var(--ink)}
.catalog-tabs button[aria-selected="true"] span{color:rgb(10 12 12 / 60%)}
.tests[hidden]{display:none}

.tests{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));padding:1px 0 0 1px}
.test-card{position:relative;display:flex;flex-direction:column;min-width:0;margin:-1px 0 0 -1px;border:1px solid var(--rule);color:var(--fg);transition:background var(--dur-fast) var(--ease)}
.test-card:hover{background:var(--tint);color:var(--fg)}
.test-card:focus-visible{z-index:1}
.card-media{position:relative;aspect-ratio:16 / 10;overflow:hidden;border-bottom:1px solid var(--rule);background:var(--paper)}
.card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-media) var(--ease)}
.test-card:hover .card-media img{transform:scale(1.035)}
.card-code{position:absolute;top:16px;left:16px;padding:8px 10px;background:var(--ink);color:var(--white);font-family:var(--font-display);font-size:11px;font-weight:780;letter-spacing:var(--tracking-button);line-height:1.2;text-transform:uppercase}
.card-body{position:relative;display:flex;flex:1;flex-direction:column;padding:26px 24px 20px;overflow:hidden}
.card-body>*{position:relative}
.card-body .card-ghost{position:absolute;top:-22px;right:-6px;font-family:var(--font-display);font-size:150px;font-weight:750;letter-spacing:-.08em;line-height:1;opacity:.09;pointer-events:none}
.test-card h2{margin:14px 0 10px;font-family:var(--font-display);font-size:clamp(22px,2.3vw,36px);font-weight:730;letter-spacing:var(--tracking-heading);line-height:.98;text-transform:uppercase;word-spacing:.16em}
.card-aka{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.1em;line-height:1.4;text-transform:uppercase}
.card-summary{max-width:58ch;margin-top:16px;color:var(--soft);font-size:15px;line-height:1.6}
.card-facts{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 24px;padding:0;list-style:none}
.card-facts li{padding:6px 9px;border:1px solid var(--rule);font-size:11px;font-weight:700;letter-spacing:.1em;line-height:1.4;text-transform:uppercase}
.card-cta{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:auto;padding-top:18px;border-top:1px solid var(--rule);font-family:var(--font-display);font-size:11px;font-weight:780;letter-spacing:var(--tracking-button);line-height:1.2;text-transform:uppercase;transition:color var(--dur-fast) var(--ease)}
.card-cta .icon{width:20px;height:20px;color:var(--aqua);transition:transform var(--dur-fast) var(--ease)}
.test-card:hover .card-cta{color:var(--aqua)}
.test-card:hover .card-cta .icon{transform:translateX(5px)}
.tests-fallback{padding:24px 0;font-size:17px}
.catalog-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:22px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.1em;line-height:1.4;text-transform:uppercase}

@media(max-width:1150px){
.catalog{padding:0 20px 28px}
.hero{padding:44px 0 36px}
}
@media(max-width:850px){
.catalog-tabs{width:100%}
.catalog-tabs button{flex:1;justify-content:center;padding:0 12px}
.catalog{padding:0 16px 24px}
.hero{grid-template-columns:minmax(0,1fr);gap:16px;padding:36px 0 28px}
.hero-count{grid-column:1;grid-row:auto;margin-top:8px}
.hero-count strong{font-size:64px}
.card-body{padding:22px 18px 18px}
.card-body .card-ghost{font-size:120px}
}
@media(prefers-reduced-motion:reduce){
.test-card:hover .card-media img,.test-card:hover .card-cta .icon{transform:none}
}