/*============================================================================
   15-vypisy.css — výpisové stránky /nejstahovanejsi/ a /nejnovejsi/
   (page-nejstahovanejsi.php, page-nejnovejsi.php, includes/vypisy.php)

   Komponenty (.detail-hero, .filter-bar, .rank-list, .ed-grid, .coloring-grid,
   .pagination) jsou sdílené s archivem a homepage. Tady je jen rozestupový
   rámec sekcí pod `.ok-vypis` — odsazení sekcí je v téhle šabloně scopované
   pod kořenovou třídu stránky (viz .ok-archive / .ok-cats v 09-sections.css),
   takže vlastní výpis musí ten svůj scope dodat.
============================================================================*/

/* Rozestup mezi sekcemi je všude 80 px. Sekce s mřížkou si ho nese ve svém
   spodním paddingu, protože po ní může přijít krémový pruh, jehož horní
   padding je vnitřní a mezeru nad pozadím neudělá (přesně tím se rozbíjelo
   stránkování na výpisu kategorie: tlačítka se opírala o pruh). Sekce, které
   po ní následují, si proto horní odsazení sníží na zbývajících 8 px. */
.ok-vypis .sec-top,
.ok-vypis .sec-vyber { padding: 56px 0 0; }
.ok-vypis .sec-grid { padding: 48px 0 72px; }
.ok-vypis .sec-seo { padding: 80px 0 0; }
.ok-vypis .sec-premium { padding: 80px 0 0; }
.ok-vypis .sec-newsletter { padding: 80px 0 96px; }
.ok-vypis .sec-related { padding: 80px 0; background: var(--cream); margin-top: 8px; }

.ok-vypis .sec-grid + .sec-seo,
.ok-vypis .sec-grid + .sec-premium { padding-top: 8px; }
.ok-vypis .sec-related + .sec-seo,
.ok-vypis .sec-related + .sec-newsletter { padding-top: 0; }

/* Nadpis sekce je grid 1fr auto; bez odkazu vpravo zbytečně drží 40px mezeru */
.ok-vypis .sec-head:not(:has(.link)) { grid-template-columns: 1fr; gap: 0; }

/* Chipy jsou tu odkazy (serverové filtrování bez JS), ne <button> jako
   v archivu — je potřeba srovnat je do stejné podoby. */
.ok-vypis a.filter-chip,
.ok-vypis .filter-reset { text-decoration: none; }
.ok-vypis .filter-bar { border-bottom: 1px solid var(--line); }
.ok-vypis .filter-bar .filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ok-vypis .filter-right { flex-wrap: wrap; gap: 12px; }

/* Vysvětlivka nad výpisem (např. „počítadla se teprve plní") */
.ok-vypis-note {
	margin: 0 0 28px;
	padding: 14px 18px;
	background: var(--cream);
	border: 1px solid var(--border-soft);
	border-radius: 14px;
	color: var(--ink-soft);
	font-size: .92rem;
	line-height: 1.5;
}

/* Žebříček na výpisu má osm položek jako na homepage, ale stojí na krémovém
   podkladu sekce — bez vlastního odsazení by se slil s mřížkou pod ním. */
.ok-vypis .rank-list { gap: 0 48px; }
.ok-vypis .rank-item { padding: 18px 0; }

@media (max-width: 1100px) {
	.ok-vypis .sec-related { padding: 56px 0; }
}

/* Na mobilu je rozestup 56 px, model zůstává stejný: spodek mřížky 48 px
   a následující sekce doplní zbývajících 8 px. */
@media (max-width: 780px) {
	.ok-vypis .sec-top,
	.ok-vypis .sec-vyber { padding: 40px 0 0; }
	.ok-vypis .sec-grid { padding: 32px 0 48px; }
	.ok-vypis .sec-seo,
	.ok-vypis .sec-premium { padding: 56px 0 0; }
	.ok-vypis .sec-newsletter { padding: 56px 0 64px; }
	.ok-vypis .filter-bar .filter-group-label { width: 100%; margin-bottom: 4px; }
}