/* =============================================================================
   kapsa-core.css — štítkový foundation
   Sdílený základ pro celý web: homepage (štítek přes hero), detail kroužku
   i plakáty. Načítá se všude, je záměrně lehký. Těžké skiny jednotlivých
   plakátů jsou v blocks/plakat/plakat.css a načtou se jen tam, kde je blok.

   Předloha: mockups/stitky/web.html (odsouhlaseno), gramatika z lineup.html.

   TŘI HLASITOSTI — jeden hlas (Teko, verzálky, hranaté), tři síly:
     1 · signál    .k-chip.sig    žlutý blok, jediný hlasitý (VOLNO)
     2 · chip      .k-chip        obrysový, rozhodovací atribut (věk, čas)
     3 · meta      .k-meta        holý řádek, tichá fakta (kde & za kolik)
   ============================================================================= */

/* =============================================================================
   FONTY MOTIVU — ořezané kopie vedle knihovny fontů

   Knihovna fontů ve WP umí z Google Fonts jen STATICKÉ řezy s PLNOU znakovou
   sadou. Stránka s nabídkou tím stahovala ~1,1 MB písma (samotné Gentium
   582 kB za dva řezy, protože veze i řečtinu a cyrilici). Motiv si proto vozí
   vlastní soubory: ořezané na češtinu, u variabilních rodin s osami, které
   plakáty opravdu používají. Vyrábí je `tools/fonty-subset.py` ze zdrojů
   v repozitáři google/fonts; soubory leží v assets/fonts a cestují s motivem,
   takže na produkci není co doinstalovávat.

   JMÉNA RODIN mají schválně sufix „ CZ" — kdyby se jmenovaly stejně jako
   rodiny z knihovny, slily by se v jednu a o vítězi by rozhodovalo pořadí
   deklarací nebo přesnost matche. Takhle jsou to dvě nezávislé rodiny
   a knihovna dál obsluhuje výběr fontů v editoru. Základní Manrope se
   neořezává, ten jede z knihovny jako dřív.

   Sufix je zároveň záchranná síť: proměnné níž mají za „ CZ" verzí uvedenou
   i tu z knihovny, takže znak mimo český ořez (nebo kurzíva, kterou ořezaný
   soubor nemá) spadne po jednotlivých znacích na ni.

   font-display: swap všude — text je vidět hned ve fallbacku a font se
   dolije, až dorazí. Knihovna používá `fallback`, což po ~3 s vzdá swap
   úplně; u plakátů, kde font NESE grafiku, je to špatně.
   ============================================================================= */
@font-face {
	font-family: "Archivo CZ";
	font-style: normal;
	font-weight: 600 900;   /* variabilní: 600 700 800 900 z jednoho souboru */
	font-display: swap;
	src: url("../fonts/Archivo-var.woff2") format("woff2");
}

@font-face {
	font-family: "Teko CZ";
	font-style: normal;
	font-weight: 600 700;   /* variabilní */
	font-display: swap;
	src: url("../fonts/Teko-var.woff2") format("woff2");
}

/* Fraunces: osu opsz NEZAPÉKAT — nese displejovou kresbu titulku Šikuly
   (nad opsz 18 si font sám nasadí rozevláté „k" a „l"). */
@font-face {
	font-family: "Fraunces CZ";
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url("../fonts/Fraunces-var-roman.woff2") format("woff2");
}

@font-face {
	font-family: "Fraunces CZ";
	font-style: italic;
	font-weight: 500 700;
	font-display: swap;
	src: url("../fonts/Fraunces-var-italic.woff2") format("woff2");
}

@font-face {
	font-family: "Space Mono CZ";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/SpaceMono-400.woff2") format("woff2");
}

@font-face {
	font-family: "Space Mono CZ";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/SpaceMono-700.woff2") format("woff2");
}

@font-face {
	font-family: "Space Mono CZ";
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/SpaceMono-700i.woff2") format("woff2");
}

@font-face {
	font-family: "Chakra Petch CZ";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/ChakraPetch-600.woff2") format("woff2");
}

@font-face {
	font-family: "Chakra Petch CZ";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/ChakraPetch-700.woff2") format("woff2");
}

/* „Kapsa Serif" = ořezané Gentium Book Plus, „Kapsa Pixel" = ořezaný
   Press Start 2P. Přejmenované schválně: obě rodiny mají v OFL Reserved
   Font Name, a ten modifikovaná verze (a ořez modifikace JE, viz SIL
   OFL-FAQ 2.6) nesmí nést. Copyright zůstává uvnitř souborů, licence
   v assets/fonts/LICENSE.txt. Gentium veze navíc znaky anglické fonetiky. */
@font-face {
	font-family: "Kapsa Serif CZ";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/KapsaSerif-400.woff2") format("woff2");
}

@font-face {
	font-family: "Kapsa Serif CZ";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/KapsaSerif-700.woff2") format("woff2");
}

@font-face {
	font-family: "Annie CZ";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/Annie-400.woff2") format("woff2");
}

@font-face {
	font-family: "Kapsa Pixel CZ";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/KapsaPixel-400.woff2") format("woff2");
}

@font-face {
	font-family: "Saira Stencil One CZ";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/SairaStencilOne-400.woff2") format("woff2");
}

:root {
	/* barvy vedeme přes paletu z theme.json, fallback = hodnoty z mockupu */
	--k-ink: var(--wp--preset--color--contrast, #111);
	--k-yellow: var(--wp--preset--color--accent-1, #ffee58);

	/* jeden hlas celého systému */
	--k-cond: "Teko CZ", "Teko", "Arial Narrow", "DejaVu Sans Condensed", sans-serif;

	/* velikosti — přepisovatelné lokálně (hero, karta, plakát) */
	--k-chip-fs: 20px;
	--k-meta-fs: 18px;
}

/* --- 2 · obrysový chip (základní tvar) -------------------------------------
   Padding 7/12/3 je autorovo optické vystředění Teko v rámečku — Teko sedí
   v accentu vysoko, takže spodní padding je menší než horní. Neměnit „na
   symetrický", opticky by to spadlo dolů. */
.k-chip {
	display: inline-block;
	white-space: nowrap;
	font: 700 var(--k-chip-fs) / 1 var(--k-cond);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, .72);
	padding: 7px 12px 3px;
	background: rgba(10, 10, 10, .34);
	backdrop-filter: blur(2px);
}

/* --- 1 · signál — jediný hlasitý prvek ------------------------------------ */
.k-chip.sig {
	background: var(--k-yellow);
	color: var(--k-ink);
	border-color: var(--k-yellow);
}

/* stav „poslední místa" — žlutý, ale s černým rámečkem (naléhavější) */
.k-chip.last {
	background: var(--k-yellow);
	color: var(--k-ink);
	border-color: var(--k-ink);
	box-shadow: inset 0 0 0 2px var(--k-ink);
}

/* stav „obsazeno" — ustupuje do pozadí, nekřičí */
.k-chip.full {
	opacity: .72;
	border-style: dashed;
	background: rgba(10, 10, 10, .25);
}

/* --- 3 · meta řádek — kde & za kolik --------------------------------------
   Holá typografie bez rámečku. Cena žlutě = rým s plakáty. */
.k-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: .55em;
	row-gap: 2px;
	font: 600 var(--k-meta-fs) / 1.25 var(--k-cond);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 7px rgba(0, 0, 0, .85);
	font-variant-numeric: tabular-nums;
}

.k-meta .dot {
	opacity: .55;
}

.k-meta .y {
	color: var(--k-yellow);
}

/* --- varianta na světlém podkladu (papír, mimo fotku) ---------------------
   Buď na rodiči (.k-light .k-chip), nebo přímo na prvku (.k-chip.k-light). */
.k-light .k-chip,
.k-chip.k-light {
	color: var(--k-ink);
	border-color: rgba(17, 17, 17, .32);
	background: transparent;
	backdrop-filter: none;
}

.k-light .k-meta,
.k-meta.k-light {
	color: var(--k-ink);
	text-shadow: none;
}

/* žlutý text na bílém papíře nečte → místo barvy písma zvýrazňovač */
.k-light .k-meta .y,
.k-meta.k-light .y {
	color: var(--k-ink);
	background: linear-gradient(transparent 55%, var(--k-yellow) 55%);
}

/* =============================================================================
   UMÍSTĚNÍ — homepage
   ========================================================================== */
/* Foundation výš řeší jen VZHLED tří hlasitostí. Tady je jejich usazení
   do konkrétních míst webu. Předloha: web.html, varianta V1 (odsouhlaseno).

   Nahrazuje legacy ribbony `.summary` / `.summary2` (clip-path šipka, fialová
   a olivová) — ty jdou ze site.css ven spolu s `.age` / `.free`, které
   v obsahu nebyly vůbec. */

/* --- hero: signál + tichý meta řádek --------------------------------------
   Obojí se pozicuje vůči obsahovému sloupci hera (alignwide skupina uvnitř
   coveru), ne vůči celému coveru — jinak by na širokém monitoru odplulo
   k okraji obrazovky, pryč od titulku a tlačítek. */
.kapsa-hero {
	position: relative;
}

/* SIGNÁL je sezónní: „Přihlášky otevřeny". Je to běžný blok — když se
   přihlášky zavřou, smaže se v editoru a nic dalšího není potřeba. */
/* ⚠ SELEKTORY PŘES POTOMKA (0,2,0), ne holá třída (0,1,0) — kvůli EDITORU.
   Gutenberg dává každému bloku `.block-editor-block-list__block{position:relative}`,
   což je taky (0,1,0), a editorové styly se načítají AŽ ZA styly motivu →
   při shodě vyhrají pořadím, absolutní pozice se ztratí a štítky spadnou do
   toku pod obsah. Na webu je přitom všechno v pořádku, takže se to pozná
   jen otevřením editoru. */
.kapsa-hero > .kapsa-hero__sig {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	margin: 0;
}

/* V1 = tichý řádek na spodní hraně vpravo (klubová fakta, ne štítky kroužku).
   `display:block` schválně: oddělovače „·" jsou přímo v textu, takže flex
   z .k-meta by tu jen přidal mezery navíc a rozhodil zalomení. */
.kapsa-hero > .kapsa-hero__meta {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	display: block;
	margin: 0;
	text-align: right;
}

/* --- detail kroužku (plakát KROUŽKU) --------------------------------------
   Provizorní žlutý pruh „od 12-13 let • Praha – Vršovice • 80 Kč/h" slil
   všechna tři patra do jednoho. Rozpadá se na dvě místa podle rolí:
   chipy (stav + věk + čas) nad slogan, tichá fakta (kde & za kolik) dolů
   na spodní hranu. Hodnoty = vstupní/nováčkovská skupina, pokročilosti
   řeší přehled níž na stránce.

   Kotva je LEVÝ SLOUPEC, ne cover — stejná úvaha jako na homepage (vůči
   coveru by to na širokém monitoru odplulo k okraji obrazovky). Sloupec je
   `is-vertically-aligned-stretch`, takže sahá po celé výšce řady a jeho
   spodek je přesně ta hrana, kam meta patří. */
/* ⚠ `align-items` a vynulované marginy potomků jsou tu POVINNÉ, ne kosmetika.
   Skupina je `is-layout-flow`, takže jí WP dává:
       :where(.is-layout-flow) > *            { margin-block-start: 1.2rem }
       :where(.is-layout-flow) > :first-child { margin-block-start: 0 }
   Ve flexu se marginy neslučují, takže druhý a třetí chip mají nad sebou
   1,2 rem — výška řádku je pak chip + 1,2 rem. A protože `align-items`
   je ve výchozím stavu `stretch`, PRVNÍ chip (ten bez marginu) se na tu
   výšku natáhne. Vypadá to, jako by „Volno" mělo dvojnásobný padding,
   ale roztahuje ho řádek. Stejně je ošetřená zóna na kartách typů. */
.kapsa-hero__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 20px;
}

.kapsa-hero__chips .k-chip {
	margin: 0;
}

/* ZÁKLAD je tok pod tlačítkem, ne absolutní pozice — přepisuje se tím
   homepage varianta (tatáž specificita 0,2,0, rozhoduje pořadí). Držet se
   toku jako výchozího stavu je tu bezpečnější: meta je poslední blok
   sloupce, takže i „nepřišpendlená" sedí tam, kam patří. */
.kapsa-hero--detail > .kapsa-hero__meta {
	position: static;
	margin: 22px 0 0;
	text-align: left;
}

/* Na spodní hranu se meta přišpendlí, JEN KDYŽ jsou splněné obě podmínky:
   · ≥782 px — pod tím `core/columns` skládá sloupce pod sebe
     (`@media (min-width:782px){.wp-block-columns{flex-wrap:nowrap!important}}`),
     takže levý sloupec končí hned za tlačítkem;
   · sloupec je opravdu roztažený po výšce řady. Záhlaví elektroniky má levý
     sloupec zarovnaný DOLŮ (`is-vertically-aligned-bottom`) — tam dole žádné
     volné místo není a meta by si lehla na tlačítko.
   Podmínka se čte přímo z třídy, kterou vypisuje WP, takže se to samo srovná,
   až někdo zarovnání v editoru změní. */
@media (min-width: 782px) {
	.kapsa-hero--detail.is-vertically-aligned-stretch > .kapsa-hero__meta {
		position: absolute;
		z-index: 2;
		left: 0;
		right: auto;
		bottom: 0;
		margin: 0;
	}
}

/* Mobil: štítky OPUSTÍ absolutní pozici a zařadí se do toku pod tlačítka —
   na úzkém displeji tak nikdy nic nepřekryjí (to je celá pointa V1 proti
   dnešnímu ribbonu, který na iPhonu ležel přes obsah).
   Hero je alignfull, takže jeho šířka = šířka okna a media query je tu
   poctivá míra (na rozdíl od plakátů ve zdi). Práh 620 je z web.html. */
@media (max-width: 620px) {
	.kapsa-hero {
		--k-chip-fs: 17px;
		--k-meta-fs: 16px;
	}

	.kapsa-hero > .kapsa-hero__sig {
		position: static;
		display: inline-block;
		margin-bottom: 18px;
	}

	.kapsa-hero > .kapsa-hero__meta {
		position: static;
		margin-top: 28px;
		text-align: left;
	}
}

/* --- karty typů kroužků ---------------------------------------------------
   Klíč k „tohle jsou témata, ne kroužky" je POČET: chip „5 kroužků" vlevo
   říká, že uvnitř je toho víc. Vpravo věkový rozsah. Žlutá rohová vlaječka
   jde ven — v novém systému by falešně křičela „volno" (žlutý blok je
   rezervovaný signálu).

   `.course-type` je skupina s fotkou; nadpis a popis jsou až za ní, takže
   zóna položená na její horní hranu leží přesně přes fotku. */
.course-type {
	position: relative;
}

/* ⚠ přes potomka (0,2,0) kvůli editoru — viz poznámka u .kapsa-hero__sig */
.course-type > .kapsa-typ-zone {
	--k-chip-fs: 17px;

	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	top: 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 14px 16px 34px;
	/* zálivka, aby bílé chipy četly i nad světlou fotkou */
	background: linear-gradient(180deg, rgba(0, 0, 0, .40), rgba(0, 0, 0, 0));
	/* fotka je odkaz → zálivka nesmí ukrást klik (chipy si ho berou zpátky níž) */
	pointer-events: none;
}

.kapsa-typ-zone .k-chip {
	/* zpátky klikatelné: jinak by v EDITORU nešly chipy vybrat a upravit
	   (pointer-events:none na zóně dědí i na ně). Na webu tím na dvou malých
	   plochách nefunguje odkaz fotky — přijatelná daň za editovatelnost. */
	pointer-events: auto;
	margin: 0;
	padding: 6px 10px 2px;
}