/* recenze.css - stranky jednotlivych dilu komiksu (obsahy/a_NN.htm).
   Spolecny zaklad je v zaklad.css, ten se nacita PRED timto souborem. */

/* ---------- hlavicka: nazev, obalka, udaje o vydani ---------- */
header {
	text-align: left;
	margin-bottom: 0.8em;         /* obalka (float) zamerne presahuje pod hlavicku, text clanku ji obtéká */
}
header h1 {
	font-size: 1.75em;
	margin: 0 0 0.4em 0;
}
header img.titulka {
	float: right;
	max-width: 38%;
	height: auto;
	margin: 0 2px 0.5em 1em;
	box-shadow: 5px 3px 4px #888;
}
.vydani { margin: 0 0 0.35em 0; }

/* ---------- nadpisy a texty v clanku ---------- */
.clanek h2 {
	font-size: 1.3em;
	line-height: 1.3;
	margin: 1.2em 0 0.4em 0;
}
.clanek h3 {
	font-size: 1.15em;
	line-height: 1.3;
	margin: 1em 0 0.3em 0;
}
.clanek h4 {
	font-size: 1.05em;
	line-height: 1.3;
	margin: 0.8em 0 0.3em 0;
}
.clanek article > h2:first-child { margin-top: 0.2em; }
.clanek { border-bottom: 0px; }

.clanek ul,
.clanek ol {
	margin: 0.4em 0 0.8em 0;
	padding-left: 1.5em;
}
.clanek li { margin-bottom: 0.45em; }
.clanek li > ul,
.clanek li > ol { margin-top: 0.3em; margin-bottom: 0.3em; }

/* kratky uvod pro vsechny ctenare (bez hnidopichani) */
.uvod {
	font-size: 1.1em;
	padding-left: 0.8em !important;
	border-left: 0.3em solid #d9a441;
}

/* ---------- dil pro zvidave a hnidopichy ---------- */
.pro-zvidave {
	display: flow-root;           /* ramecek se nikdy nepodsune pod obalku */
	margin: 1.6em 0 1em 0;
	padding: 0.7em 1em 0.8em 1em;
	background: #f4efe3;
	border: 1px solid #d8cfb8;
	border-radius: 0.4em;
}
.pro-zvidave h2 { margin-top: 0; }
.pro-zvidave p { margin-bottom: 0.4em; }
ul.na-strance {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 1.2em;
	margin: 0.3em 0 0 0;
	padding: 0;
}
ul.na-strance li { margin: 0; padding: 0; }

.clanek aside { margin-top: 1.2em; }
.clanek aside > h2:first-child {
	margin-top: 0.4em;
	padding-top: 0.8em;
	/* border-top: 1px solid #999;  --- odstranuji nektere oddelovaci cary */
}

/* ---------- hodnoceni / recenze autora: znamka (obrazek Asterixe 1-5) vlevo ---------- */
section.hodnoceni {
	margin: 1em 0;                /* bez flow-root: text se pod obalku (float vpravo) zalamuje jako u ostatniho clanku */
}
section.hodnoceni::after {
	content: "";
	display: block;
	clear: left;                  /* znamka (float vlevo) nepretece pod konec oddilu; obalku vpravo to neovlivni */
}
section.hodnoceni > h2 { margin-top: 0.8em; }
figure.znamka {
	position: relative;           /* kvuli klikaci plose celeho ramecku (viz a::after nize) */
	float: left;
	box-sizing: border-box;
	margin: 0.2em 1em 0.4em 0;
	padding: 0.3em;
	max-width: calc(180px + 0.6em + 2px);   /* 180 px obrazku + padding + ramecek */
	background: #fff;
	border: 1px solid #d8cfb8;    /* stejny ramecek jako karty dilu na komiksy.html */
	border-radius: 0.4em;
}
figure.znamka img {
	display: block;
	max-width: 100%;
	height: auto;
	border: none;
}
/* kratke hodnoceni: znamka je o neco mensi (class="kratke"; jde zmenit i rucne) */
section.hodnoceni.kratke figure.znamka { max-width: calc(130px + 0.6em + 2px); }

/* popisek pod znamkou: kdo hodnotil (odkaz na legendu v komiksy.html); jeden, nejvyse dva radky.
   Odkaz vypada jako obycejny text; kliknout jde na cely ramecek (a::after pokryje figure). */
figure.znamka figcaption {
	margin-top: 0.2em;
	font-size: 0.85em;
	line-height: 1.25;
	text-align: center;
}
figure.znamka figcaption a,
figure.znamka figcaption a:visited {
	color: inherit;
	text-decoration: none;
}
figure.znamka figcaption a::after {
	content: "";
	position: absolute;
	inset: 0;
}
figure.znamka:hover { border-color: #ff0000; }
figure.znamka:hover figcaption a { text-decoration: underline; }
figure.znamka figcaption a:focus-visible { outline: none; }
figure.znamka figcaption a:focus-visible::after {
	outline: 2px solid #ff0000;
	border-radius: 0.4em;
}

/* ---------- obrazky s popiskem ---------- */
figure.obrazek {
	margin: 0.2em 0 0.7em 0;
	padding: 2px;
	border: 1px solid gray;
	max-width: 55%;
	background: white;
	text-align: center;
}
figure.obrazek.vpravo { float: right; margin-left: 1em; }
figure.obrazek.vlevo  { float: left;  margin-right: 1em; }
figure.obrazek img { max-width: 100%; height: auto; border: none; }
figure.obrazek figcaption {
	font-size: 0.875em;
	font-style: italic;
	line-height: 1.3;
	text-align: center;
}

/* srovnani vydani (preklady, barvy): kazde vydani je samostatny blok */
section.rozdily-prekladu {
	display: flow-root;
	margin: 1em 0;
	padding-top: 0.6em;
	border-top: 1px dotted #999;
}
section.rozdily-prekladu h4 { margin-top: 0.2em; }
section.rozdily-prekladu ol { margin-top: 0.2em; }

/* ---------- tabulky ---------- */
.tabulka {
	overflow-x: auto;           /* siroka tabulka se posouva uvnitr, stranka ne */
	margin: 0.4em 0 1em 0;
}
table.jmena {
	border-collapse: collapse;
	width: auto;
	max-width: 100%;
}
table.jmena th,
table.jmena td {
	text-align: left;
	vertical-align: top;
	padding: 0.25em 1.2em 0.25em 0;
	border-bottom: 1px solid #ddd;
}
table.jmena th { border-bottom: 2px solid #999; }

/* ---------- zvyrazneni a spoilery ---------- */
.cervene { color: #c00000; font-weight: bold; }

/* spoiler v textu: odkryje se klepnutim/najetim/fokusem (funguje i na dotykovem displeji) */
span.spoiler {
	background: #222;
	color: #222;
	cursor: pointer;
}
span.spoiler:hover,
span.spoiler:focus,
span.spoiler:active { color: #fff; }

/* spoiler jako samostatny blok: <details class="spoiler"><summary>Spoiler</summary>...</details> */
details.spoiler {
	margin: 0.4em 0 0.8em 0;
	padding: 0.3em 0.8em;
	border: 1px dashed #888;
	border-radius: 0.3em;
}
details.spoiler summary { cursor: pointer; font-weight: bold; }

/* ---------- patička: predchozi / dalsi dil ---------- */
ul.listovani {
	list-style: none;
	display: flex;
	gap: 0.6em;
	margin: 0 0 0.8em 0;
	padding: 0;
}
ul.listovani li { flex: 1; margin: 0; padding: 0; }

/* odkaz "Ostatni komiksove pribehy" pod recenzi, nad rameckem "Pro zvidave" (vycentrovany jako odkazy v paticce) */
.clanek p.ostatni-komiksy {
	text-align: center;
	margin: 1em 0;
}

/* kratka stranka: paticka zacne az pod obalkou */
div.paticka { clear: both; }
ul.listovani a {
	display: block;
	height: 100%;
	box-sizing: border-box;
	padding: 0.5em 0.8em;
	background-color: #fff;
	border: 1px solid #d8cfb8;
	border-radius: 0.3em;
	text-align: left;
	text-decoration: none;
}
ul.listovani li.dalsi a { text-align: right; }
ul.listovani a:hover,
ul.listovani a:focus-visible {
	background-color: #fff3c4;
	border-color: #dd1010;
}
ul.listovani small {
	display: block;
	font-size: 0.8em;
	color: #555;
}

/* ---------- uzke displeje ---------- */
@media screen and (max-width: 34em) {
	header img.titulka { max-width: 40%; }
	figure.obrazek.vpravo,
	figure.obrazek.vlevo {
		float: none;
		max-width: 100%;
		margin: 0.5em auto 0.8em auto;
	}
	ul.na-strance { flex-direction: column; }
	figure.znamka,
	section.hodnoceni.kratke figure.znamka {
		max-width: calc(110px + 0.6em + 2px);
		margin-right: 0.7em;
	}
}
@media screen and (max-width: 24em) {
	ul.listovani { flex-direction: column; }
	figure.znamka,
	section.hodnoceni.kratke figure.znamka { max-width: calc(90px + 0.6em + 2px); }
}