/*
 * skolatohome – pás realizací vedle slideru na HP (9. 10. 2026, Jirkův návrh B5; náhled SEO sitemap/HP/slider-pas/).
 * Slider (homeslider) vlevo v původních 1 200 px, vpravo pás náhodných realizací, který pomalu jede nahoru
 * (najetí myší / fokus = stop). Při užším obsahu se slider zmenší (celý slide vidět), pás drží aspoň 260 px.
 * Od 1 200 px okna a jen s podporou :has(); jinak pás skrytý a slider přes celou šířku jako dřív.
 * Brand manuál SKOLATO v2.1: purpurová #D30056, navy #39434D, šedá #828793 (místo realizace), Montserrat
 * + Architects Daughter na podmazu, velký rádius, pilulka, štítek = purpurový obdélník verzálkami vlevo nahoře.
 * Načítá se MIMO balíček CCC (hookDisplayHeader → pasHead), úpravy bez clearcache.
 */

.sk-pas { display: none; }

/* Slider na HP ve všech šířkách (i bez pásu): před spuštěním bxSlideru vyhradit výšku jednoho slidu (poměr 1 200 : 548)
   a bez 5px okraje pod obrázkem (jinak je slide po spuštění vyšší) → obsah pod sliderem neposkočí.
   Na živém webu před touto úpravou CLS 0,58–0,73 (slider začínal na 9 px, změřeno 9. 10. 2026). */
html body #homepage-slider > #homeslider { aspect-ratio: 1200 / 548; overflow: hidden; }
html body #homepage-slider #homeslider li img { margin-bottom: 0; }

@supports selector(:has(*)) {
	@media (min-width: 1200px) {
		/* pás je stejně vysoký jako slider (stretch) → spodní okraj slideru přesunout na celý řádek.
		   Pás je v HTML PŘED sliderem (modul je v hooku dřív) → ukázat ho, až když je ve stránce i seznam slidů (ten má od začátku výšku přes aspect-ratio):
		   při postupném načítání HTML by se jinak vykreslil vlevo a pak skočil doprava (CLS 0,1 na 1 366 px, 9. 10. 2026);
		   bez slideru (vypnutý homeslider) se pás neukáže vůbec. */
		html body #top_column:has(> .sk-pas):has(> #homepage-slider #homeslider) { display: flex; align-items: stretch; gap: 20px; float: none; margin-bottom: 14px; }
		html body #top_column:has(> .sk-pas):has(> #homepage-slider #homeslider) > #homepage-slider { order: 1; flex: 0 1 1200px; min-width: 0; width: auto; float: none; padding-left: 0; padding-right: 0; margin-bottom: 0; }
		html body #top_column:has(> #homepage-slider #homeslider) > .sk-pas { order: 2; flex: 1 0 260px; display: block; }
	}
}

.sk-pas { --sk-pas-top: 92px; position: relative; overflow: hidden; border-radius: 18px; isolation: isolate;
	background: #F3F5F7; color: #39434D; font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; }
.sk-pas *, .sk-pas *::before, .sk-pas *::after { box-sizing: border-box; }

/* záhlaví: purpurový podmaz s ručně psaným slovem (jako „Školy objednávají“ na HP) + nadpis s purpurovým klíčovým slovem */
.sk-pas__hd { position: absolute; left: 0; right: 0; top: 0; z-index: 2; padding: 16px 16px 0; }
.sk-pas__kick { display: inline-block; padding: 3px 18px 5px; color: #fff; font: 400 17px/1.3 "Architects Daughter", cursive;
	background: url(../img/skolato_podmaz_purpurovy.png) center / 100% 100% no-repeat; transform: rotate(-2deg); }
.sk-pas__h { display: block; margin-top: 8px; font: 700 18px/1.25 Montserrat, Arial, sans-serif; color: #39434D; }
.sk-pas__h .sk-acc { color: #D30056; }

/* jedoucí karty */
.sk-pas__view { position: absolute; left: 0; right: 0; bottom: 0; top: var(--sk-pas-top); overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 80px), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 80px), transparent 100%); }
.sk-pas__track { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; gap: 12px; padding: 4px 12px 0; will-change: transform; }
.sk-pas.is-run .sk-pas__track { animation: skPasJed var(--sk-pas-t, 60s) linear infinite; }
.sk-pas:hover .sk-pas__track, .sk-pas:focus-within .sk-pas__track { animation-play-state: paused; }
@keyframes skPasJed { from { transform: translateY(0); } to { transform: translateY(-50%); } }

.sk-pas__it { position: relative; display: block; flex: none; overflow: hidden; border-radius: 14px; background: #fff;
	box-shadow: 0 2px 10px rgba(57, 67, 77, .1); color: #39434D !important; text-decoration: none !important; }
.sk-pas__ph { position: relative; display: block; overflow: hidden; background: #E9EAEC; }
.sk-pas__ph img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin: 0; max-width: none;
	opacity: 0; transition: opacity .5s, transform .4s; }
.sk-pas__ph img.is-ok { opacity: 1; }
.sk-pas__it:hover .sk-pas__ph img { transform: scale(1.04); }
.sk-pas__tag { position: absolute; left: 10px; top: 10px; padding: 4px 7px 3px; border-radius: 2px; background: #D30056; color: #fff;
	font: 600 10px/1.2 Montserrat, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.sk-pas__tag:empty, .sk-pas__geo:empty { display: none; }
.sk-pas__txt { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px 11px; }
.sk-pas__sch { font: 600 13px/1.3 Montserrat, Arial, sans-serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sk-pas__geo { font: 600 10.5px/1.3 Montserrat, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #828793; }
.sk-pas__it:hover .sk-pas__sch { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* pilulka dole: všechny realizace */
.sk-pas__vse { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; display: flex; align-items: center; justify-content: center;
	height: 40px; border-radius: 999px; background: #D30056; color: #fff !important; font: 700 13.5px/1 Montserrat, Arial, sans-serif;
	text-decoration: none !important; box-shadow: 0 4px 14px rgba(57, 67, 77, .28); transition: background .15s; }
.sk-pas__vse:hover, .sk-pas__vse:focus { background: #B0004A; color: #fff !important; }

@media (prefers-reduced-motion: reduce) {
	.sk-pas.is-run .sk-pas__track { animation: none; }
	.sk-pas__view { overflow-y: auto; }
	.sk-pas__it[aria-hidden="true"] { display: none; }
}