/*
	Srovnavaci stranky /cs/srovnani a /cs/srovnani/eintranet-vs-*.

	Nacita se pres $css_load[] (inc/srovnani-kw.php, inc/content/srovnani.kw.cs.php),
	tedy MIMO spolecny bundle css/all.min.css - zbytek webu tyhle styly nepotrebuje
	a nemusi kvuli nim stahovat ani bajt navic.

	Utility .green / .red / span.note jsou v css/custom.css, neduplikovat je.
	Modra #3498db je stejna jako u table.PriceTable1 v css/style.css:111-149.
*/

.srovnani-drobecky { font-size: 13px; color: #888; margin: 15px 0 10px 0; }
.srovnani-drobecky a { color: #337ab7; }

.srovnani-perex { font-size: 18px; line-height: 1.55; color: #687074; margin-bottom: 25px; }

/* --- cenovy blok: nejsilnejsi argument, proto hned nahore ------------------- */

.srovnani-cena-box { display: flex; flex-wrap: wrap; margin-bottom: 15px; }
.srovnani-cena-box > div { width: 100%; padding: 18px; border: 1px solid #ddd; }
@media (min-width: 768px) { .srovnani-cena-box > div { width: 50%; } }
.srovnani-cena-nas { background-color: #eef6fc; border-color: #3498db; }
.srovnani-cena-nazev { font-size: 15px; font-weight: 600; color: #444; }
.srovnani-cena-cislo { font-size: 28px; font-weight: 600; color: #337ab7; line-height: 1.15; margin-top: 6px; }
.srovnani-cena-cislo.srovnani-cena-text { font-size: 19px; color: #444; }
.srovnani-cena-jednotka { display: block; font-size: 13px; font-weight: 400; color: #888; margin-top: 5px; line-height: 1.4; }
.srovnani-cena-pozn { font-size: 13px; color: #687074; line-height: 1.45; margin-top: 10px; }

/* Rozsah srovnani a zdroj. Bez nich neni srovnani overitelne - viz § 2980 obc. zak. */
.srovnani-zdroj { display: block; font-size: 12px; color: #999; margin-top: 8px; line-height: 1.45; }
.srovnani-zdroj a { color: #999; text-decoration: underline; }
.srovnani-rozsah { font-size: 13px; color: #687074; background-color: #f7f7f7; border-left: 3px solid #ccc; padding: 10px 14px; margin-bottom: 25px; }

/* Sazba prevzata jen ze sekundarniho zdroje. Vizualne odlisena zamerne -
   ctenar ma poznat, ktere cislo jsme cetli primo u dodavatele a ktere ne. */
.srovnani-zdroj-sekundarni { background-color: #fdf6e3; border-left: 3px solid #e0b654; padding: 10px 14px; font-size: 13px; color: #6b5a2a; margin-top: 10px; }

/* --- matice ---------------------------------------------------------------- */

table.SrovnaniTable { width: 100%; font-size: 15px; table-layout: fixed; margin-bottom: 25px; }
table.SrovnaniTable thead th { background-color: #3498db; color: #fff; padding: 10px; font-size: 16px; vertical-align: middle; text-align: left; }
table.SrovnaniTable thead th.srovnani-col-nas { background-color: #2c81ba; }
table.SrovnaniTable th[scope="row"] { font-weight: 600; color: #444; width: 34%; }
table.SrovnaniTable td,
table.SrovnaniTable th[scope="row"] { padding: 10px; vertical-align: top; color: #444; line-height: 1.45; }
table.SrovnaniTable tbody tr:nth-child(odd) td,
table.SrovnaniTable tbody tr:nth-child(odd) th[scope="row"] { background-color: #f2f2f2; }
table.SrovnaniTable .srovnani-pozn { display: block; font-size: 12px; color: #888; margin-top: 3px; }

.srovnani-stav { margin-right: 6px; }
.srovnani-stav-ano { color: #337ab7; }
.srovnani-stav-ne { color: #e7402f; }
.srovnani-stav-castecne { color: #e0a020; }

/*
	Mobil: kazdy radek se sklada do karty.

	Zamerne NE .table-responsive (ktery v bundlu Bootstrapu je, ale nikde na webu
	se nepouziva): vodorovny posuv by u trisloupcove matice odsunul sloupec
	konkurenta mimo obrazovku, takze by ctenar musel scrollovat do strany, aby
	uvidel jedinou vec, kvuli ktere na stranku prisel.

	display:block bere tabulce implicitni semantiku, proto sablona doplnuje
	role="table|row|columnheader|rowheader|cell" - explicitni ARIA role zmena
	display nepremaze.
*/
@media (max-width: 767px) {
	table.SrovnaniTable,
	table.SrovnaniTable tbody,
	table.SrovnaniTable tr,
	table.SrovnaniTable th,
	table.SrovnaniTable td { display: block; width: auto; }

	table.SrovnaniTable thead { display: none; }
	table.SrovnaniTable { table-layout: auto; }
	table.SrovnaniTable tbody tr { border: 1px solid #ddd; border-radius: 3px; margin-bottom: 12px; overflow: hidden; }
	table.SrovnaniTable tbody tr:nth-child(odd) td,
	table.SrovnaniTable tbody tr:nth-child(odd) th[scope="row"] { background-color: transparent; }
	table.SrovnaniTable th[scope="row"] { width: auto; background-color: #3498db; color: #fff; }
	table.SrovnaniTable td::before {
		content: attr(data-label);
		display: block;
		font-weight: 600;
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: .04em;
		color: #888;
		margin-bottom: 3px;
	}
	table.SrovnaniTable td + td { border-top: 1px solid #eee; }
}

/* --- povinna sekce "kde vyhrava konkurent" --------------------------------- */

.srovnani-vyhody { background-color: #fbf7ee; border-left: 4px solid #e0b654; padding: 16px 20px; margin-bottom: 25px; }
.srovnani-vyhody h3 { font-size: 17px; margin-top: 0; margin-bottom: 8px; color: #444; }
.srovnani-vyhody p { margin-bottom: 0; color: #5c5340; line-height: 1.55; }

.srovnani-overeno { font-size: 13px; color: #888; border-top: 1px solid #eee; padding-top: 14px; margin-top: 30px; line-height: 1.55; }

/* --- karty na rozcestniku -------------------------------------------------- */

.srovnani-karty { display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; }
.srovnani-karta { width: 100%; padding: 0 10px; margin-bottom: 20px; display: flex; }
@media (min-width: 768px) { .srovnani-karta { width: 50%; } }
@media (min-width: 992px) { .srovnani-karta { width: 33.3333%; } }
.srovnani-karta-inner { border: 1px solid #ddd; border-radius: 3px; padding: 18px; width: 100%; }
.srovnani-karta-inner h3 { font-size: 17px; margin-top: 0; margin-bottom: 8px; }
.srovnani-karta-inner h3 a { color: #337ab7; }
.srovnani-karta-inner p { font-size: 14px; color: #687074; line-height: 1.5; margin-bottom: 0; }
.srovnani-karta-cena { display: block; font-size: 13px; color: #888; margin-top: 10px; }

.srovnani-kat-popis { color: #687074; font-size: 15px; margin-bottom: 18px; }