/***********************************************************
 * modern.css
 *
 * Vylepšení komponent recenze-kuchyne.cz.
 * Načítá se ZA style.css a PŘED responsive.css.
 *
 * Vizuální identita zůstává: stejná tyrkysová #48a79a, stejné
 * šedé odstíny, stejné písmo Merriweather Sans, stejné hvězdičky.
 * Mění se rytmus, hloubka a hierarchie - ne barevnost.
 *
 * Vodicí myšlenka: na recenzním webu je hodnocení to hlavní.
 * Dosud bylo nejméně výrazným prvkem stránky - drobný šedý text
 * vedle hvězdiček. Nově má všude stejnou, zřetelnou podobu
 * ("žeton" se skóre) a okolí je záměrně klidnější.
 ***********************************************************/

:root {
	/* Barvy - všechny už web používal, přibyly jen dva odstíny
	   odvozené z tyrkysové pro podklady. */
	--rk-teal:        #48a79a;
	--rk-teal-dark:   #34887d;
	--rk-teal-tint:   #eef6f5;
	--rk-teal-line:   #cfe6e2;

	--rk-ink:         #1a171b;
	--rk-body:        #656565;
	--rk-muted:       #878787;

	--rk-line:        #e9e8e9;
	--rk-line-soft:   #f2f0f1;
	--rk-surface:     #ffffff;

	/* Hloubka. Ve stylu webu byl jediný box-shadow - právě proto
	   působil plochý. Stíny jsou tónované do inkoustové, ne černé. */
	--rk-shadow-sm:   0 1px 2px rgba(26, 23, 27, .05);
	--rk-shadow:      0 2px 10px rgba(26, 23, 27, .07);
	--rk-shadow-lg:   0 8px 24px rgba(26, 23, 27, .10);

	/* Zaoblení - navazuje na 10px, které web používá u nadpisů. */
	--rk-r-sm:        6px;
	--rk-r:           10px;
	--rk-r-lg:        14px;

	--rk-ease:        .18s ease-in-out;
}


/***********************************************************
 * ZÁKLAD
 ***********************************************************/

body {
	/* Podkladová fotka se roztáhne přes celou plochu místo toho,
	   aby končila ve své původní velikosti. */
	background-size: cover;
}


/***********************************************************
 * HLAVNÍ MENU
 *
 * Menu mělo pevných max-width: 600 px, do kterých se vešly
 * čtyři položky. Na stránkách s podmenu (např. "Doporučená
 * studia") se pátá položka lámala na druhý řádek. Nově se
 * šířka řídí počtem položek a blok zůstává vystředěný.
 ***********************************************************/

.nav {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 100%;
}


/***********************************************************
 * PRUH S NADPISEM
 *
 * Zelená záložka dosud jen "dosedala" na spodní zelený border,
 * takže při jiném zvětšení nebo na displeji s neceločíselným
 * škálováním prosvítala mezi nimi vlásková mezera. Nově se
 * o 2 px překrývají, takže na sebe navazují vždy.
 *
 * Odkaz zpět býval šedé tlačítko vedle nadpisu; nově je vpravo
 * a bez podbarvení, aby nekonkuroval nadpisu.
 ***********************************************************/

.breadcrumb .wrapper {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.breadcrumb .wrapper .title {
	top: 0;
	margin-bottom: -2px;   /* přesah přes border - žádná mezera */
	padding-bottom: 2px;
	border-radius: var(--rk-r) var(--rk-r) 0 0;
	height: auto;
	min-height: 35px;
	font-size: 15px;
}

.breadcrumb .wrapper .title h1 {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .02em;
	padding: 9px 0 8px 0;
	height: auto;
}

.breadcrumb .wrapper .backlink {
	background-color: transparent;
	margin-left: 0;
	margin-bottom: 6px;
	height: auto;
	border-radius: 0;
	font-size: 12px;
}

.breadcrumb .wrapper .backlink a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0;
	color: var(--rk-muted);
	font-weight: 400;
	text-decoration: none;
	transition: color var(--rk-ease);
}

.breadcrumb .wrapper .backlink a:hover {
	color: var(--rk-teal);
}

.breadcrumb .wrapper .backlink i {
	padding-right: 0;
	font-size: 10px;
	transition: transform var(--rk-ease);
}

.breadcrumb .wrapper .backlink a:hover i {
	transform: translateX(-2px);
}


/***********************************************************
 * ŽETON SE SKÓRE - signature prvek
 ***********************************************************/

.review-footer .rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--rk-teal-tint);
	border: 1px solid var(--rk-teal-line);
	border-radius: 999px;
	padding: 5px 14px 5px 12px;
	line-height: 1;
	white-space: nowrap;
}

.review-footer .rating-label {
	font-size: 10px;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--rk-teal-dark);
}

.review-footer .rating .score {
	font-size: 17px;
	font-weight: 800;
	color: var(--rk-ink);
	letter-spacing: -.01em;
}

/* Hvězdičky uvnitř žetonu srovnat na účaří */
.review-footer .rating .rateit {
	position: static;
	top: auto;
	margin: 0;
}


/***********************************************************
 * RECENZE
 ***********************************************************/

.reviews .review {
	background: var(--rk-surface);
	border: 1px solid var(--rk-line);
	border-radius: var(--rk-r);
	box-shadow: var(--rk-shadow-sm);
	padding: 18px 20px 14px 20px;
	margin-bottom: 14px;
	/* Původně byl tučný celý blok, takže recenze "křičely".
	   Tučnost si nechává jen jméno a skóre. */
	font-weight: 400;
	color: var(--rk-body);
	transition: box-shadow var(--rk-ease), border-color var(--rk-ease);
}

.reviews .review:hover {
	box-shadow: var(--rk-shadow);
	border-color: var(--rk-teal-line);
}

/* Střídavý podklad už nepotřebujeme, karty se oddělují samy */
.reviews .review.even {
	background: var(--rk-surface);
}

.reviews .review .name {
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
}

.reviews .review .name a {
	color: var(--rk-teal);
	text-decoration: none;
	transition: color var(--rk-ease);
}

.reviews .review .name a:hover {
	color: var(--rk-teal-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.reviews .review .col-my-left p {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.65;
	color: var(--rk-body);
}

.reviews .review .review-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--rk-line-soft);
	font-size: 11px;
}

.reviews .review .review-footer .sign {
	padding-left: 0;
	font-weight: 300;
	color: var(--rk-muted);
}

.reviews .review .review-footer .sign strong {
	font-weight: 700;
	color: var(--rk-body);
}

.reviews .review .thumbnail {
	border: 1px solid var(--rk-line);
	border-radius: var(--rk-r-sm);
	box-shadow: var(--rk-shadow-sm);
	padding: 3px;
	background: var(--rk-surface);
}


/***********************************************************
 * VÝPIS PROVOZOVEN A STUDIÍ
 ***********************************************************/

.liststudios {
	padding-top: 4px;
}

/* Ve style.css má #double > li pevnou výšku 140 px, do které se
   hodnocení nevešlo a přetékalo pod kartu. Flex navíc srovná
   karty ve dvojici na stejnou výšku. */
ul.studios#double {
	display: flex;
	flex-wrap: wrap;
	/* Bez explicitní šířky se flex kontejner v tomto místě
	   smrskne na nulu (zdědil by smršťovací kontext). */
	width: 100%;
}

ul.studios#double > li {
	box-sizing: border-box;
	height: auto;
	float: none;
	padding-right: 18px;
	margin-bottom: 20px;
}

/* Vnitřní seznam = jedna provozovna. Dostává podobu karty
   se zřetelnou hierarchií název > adresa > web > hodnocení. */
ul.studios#double > li > ul {
	position: relative;   /* kotva pro štítek na hraně */
	height: 100%;
	margin: 0;
	padding: 14px 16px;
	background: var(--rk-surface);
	border: 1px solid var(--rk-line);
	border-radius: var(--rk-r);
	box-shadow: var(--rk-shadow-sm);
	transition: box-shadow var(--rk-ease), border-color var(--rk-ease);
}

ul.studios#double > li > ul:hover {
	box-shadow: var(--rk-shadow);
	border-color: var(--rk-teal-line);
}

.studios ul li {
	line-height: 1.5;
	padding: 1px 0;
}

/* 1. řádek - název provozovny */
.studios ul li:first-child {
	margin-bottom: 4px;
}

ul.studios a {
	font-size: 13px;
	font-weight: 700;
	color: var(--rk-ink);
}

ul.studios a:hover,
ul.studios a.active {
	color: var(--rk-teal);
}

/* Štítek u doporučené provozovny (nastavuje se v administraci).
   Sedí na horní hraně karty, aby nekonkuroval názvu. */
.studio-badge {
	position: absolute;
	top: -8px;
	left: 14px;
	z-index: 1;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--rk-teal);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: var(--rk-shadow-sm);
}

/* Varianta štítku v řádku (našeptávač studií) */
.studio-badge.is-inline {
	position: static;
	margin-left: 6px;
	vertical-align: middle;
	box-shadow: none;
}

.selectize-dropdown .option .studio-badge {
	font-size: 8px;
	padding: 2px 7px;
}

/* 2. řádek - adresa */
.studios ul li:nth-child(2) {
	font-size: 12px;
	font-weight: 400;
	color: var(--rk-muted);
	white-space: pre-line;   /* adresa má v datech vlastní řádky */
}

/* 3. řádek - web */
ul.studios a.blank {
	font-size: 12px;
	font-weight: 400;
	color: var(--rk-teal);
	word-break: break-all;
}

/* 4. řádek - hodnocení */
.studios ul li:last-child {
	display: flex;
	flex-wrap: wrap;      /* v úzké kartě se musí zalomit */
	align-items: center;
	gap: 4px 8px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--rk-line-soft);
}

/* Hvězdičky mají pevnou šířku (5 x 16 px) a nesmí se smrštit,
   zalamovat se má jen text s procenty. */
.studios ul li:last-child .rateit {
	flex: none;
}

.studios ul li:last-child .percents {
	min-width: 0;
}

.studios .percents {
	top: 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--rk-ink);
	border-bottom: 1px dotted var(--rk-teal-line);
}

.studios .percents:hover {
	color: var(--rk-teal-dark);
}

/* Kolečko bylo pozicované napevno (top: 45px; left: -30px) a
   viselo mimo obsah. Necháváme ho jako značku před názvem. */
ul.studios .circle {
	position: static;
	top: auto;
	left: auto;
	width: 8px;
	height: 8px;
	margin-right: 7px;
	border: 1px solid var(--rk-muted);
	vertical-align: middle;
}

/* Zalomení za kolečkem už není potřeba */
ul.studios li > a > br {
	display: none;
}


/***********************************************************
 * DETAIL RECENZE
 *
 * Tady je hodnocení hlavní obsah stránky, takže dostává
 * nejsilnější podobu - stejný žeton jako u výpisu recenzí.
 ***********************************************************/

table.detail tr.rating th {
	font-size: 12px;
	font-weight: 400;
	color: var(--rk-muted);
}

table.detail tr.rating td i {
	margin-left: 14px;
	top: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--rk-ink);
}

/* Řádek "Celkové hodnocení" - jediný <strong> v tabulce */
table.detail td strong {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--rk-teal-tint);
	border: 1px solid var(--rk-teal-line);
	border-radius: 999px;
	padding: 6px 16px 6px 12px;
	line-height: 1;
}

table.detail td strong i {
	margin-left: 0;
	top: 0;
	font-size: 18px;
	font-weight: 800;
	color: var(--rk-ink);
}

table.detail .rating-small {
	margin-left: 12px;
	top: 0;
	font-size: 11px;
	font-weight: 300;
	color: var(--rk-muted);
}

table.detail tr.content th {
	font-size: 12px;
	font-weight: 400;
	color: var(--rk-muted);
}

table.detail .content-wrapper {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--rk-body);
}

/* Název dodavatele byl jediné modré místo na tyrkysovém webu -
   sjednoceno do firemní barvy. */
table.detail h4,
table.studio-detail h4 {
	color: var(--rk-teal);
	font-size: 14px;
	font-weight: 700;
}

/* Postranní panel s údaji o firmě */
table.studio-detail th {
	font-size: 12px;
	font-weight: 400;
	color: var(--rk-muted);
	vertical-align: top;
}

table.studio-detail td {
	font-size: 13px;
	color: var(--rk-body);
}

table.studio-detail .percents {
	top: 0;
	margin-left: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--rk-ink);
}


/***********************************************************
 * DLAŽDICE FIREM
 ***********************************************************/

ul.companies li a {
	border-radius: var(--rk-r);
	box-shadow: var(--rk-shadow-sm);
	transition: transform var(--rk-ease), box-shadow var(--rk-ease),
	            background-color var(--rk-ease);
}

ul.companies li a:hover {
	transform: translateY(-2px);
	box-shadow: var(--rk-shadow-lg);
}

.eval {
	font-weight: 400;
}


/***********************************************************
 * DOPORUČENÁ STUDIA (obsah vkládaný přes administraci)
 *
 * Vodorovná karta: fotka vlevo, údaje vpravo, dole tlačítko.
 * Na úzkých displejích se skládá pod sebe.
 ***********************************************************/

.partner-intro {
	text-align: center;
	margin: 4px 0 30px 0;
}

.partner-logo {
	display: inline-block;
	transition: opacity var(--rk-ease);
}

.partner-logo:hover {
	opacity: .75;
}

.partner-logo img {
	max-width: 230px;
	height: auto;
}

.studio-cards {
	display: grid;
	/* min() zajistí, že se sloupec na úzkém displeji smrskne */
	grid-template-columns: repeat(auto-fill, minmax(min(430px, 100%), 1fr));
	gap: 18px;
	margin-bottom: 10px;
}

.studio-card {
	display: flex;
	gap: 18px;
	padding: 12px;
	background: var(--rk-surface);
	border: 1px solid var(--rk-line);
	border-radius: var(--rk-r-lg);
	box-shadow: var(--rk-shadow-sm);
	transition: box-shadow var(--rk-ease), border-color var(--rk-ease);
}

.studio-card:hover {
	box-shadow: var(--rk-shadow);
	border-color: var(--rk-teal-line);
}

.studio-card-media {
	flex: 0 0 40%;
	max-width: 220px;
	align-self: stretch;
	border-radius: var(--rk-r);
	overflow: hidden;
	background: var(--rk-line-soft);
}

.studio-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 170px;
	object-fit: cover;
}

.studio-card-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 6px 6px 6px 0;
}

.studio-card-name {
	margin: 0 0 3px 0;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--rk-ink);
}

.studio-card-site {
	font-size: 12px;
	color: var(--rk-muted);
}

.studio-card-note {
	margin: 10px 0 0 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--rk-body);
}

.studio-card-place {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin-top: 10px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--rk-body);
}

.studio-card-place .fa {
	margin-top: 2px;
	font-size: 13px;
	color: var(--rk-teal);
}

.studio-card-rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* Hodnocení i tlačítko se drží u spodní hrany karty, takže mají
	   ve všech kartách stejný odstup bez ohledu na délku adresy. */
	margin-top: auto;
	padding-top: 14px;
	font-size: 13px;
	text-decoration: none;
	color: var(--rk-body);
	transition: color var(--rk-ease);
}

a.studio-card-rating:hover {
	color: var(--rk-teal-dark);
}

a.studio-card-rating:hover .studio-card-count {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.studio-card-score {
	font-size: 15px;
	font-weight: 800;
	color: var(--rk-ink);
	line-height: 1;
}

.studio-card-count {
	font-size: 12px;
	font-weight: 400;
	color: var(--rk-muted);
}

.studio-card-rating.is-empty {
	font-size: 12px;
	color: var(--rk-muted);
}

.studio-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 12px;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 700;
	color: var(--rk-teal-dark);
	text-decoration: none;
	background: var(--rk-surface);
	border: 1px solid var(--rk-teal-line);
	border-radius: var(--rk-r-sm);
	transition: background-color var(--rk-ease), color var(--rk-ease),
	            border-color var(--rk-ease), box-shadow var(--rk-ease);
}

/* Karta bez hodnocení (neznámý slug) - tlačítko drží dole samo */
.studio-card-place + .studio-card-cta,
.studio-card-note + .studio-card-cta {
	margin-top: auto;
}

.studio-card-cta:hover {
	background: var(--rk-teal);
	border-color: var(--rk-teal);
	color: #fff;
	box-shadow: var(--rk-shadow-sm);
}

.studio-card-cta .fa {
	font-size: 12px;
}

@media (max-width: 600px) {
	.studio-card {
		flex-direction: column;
		gap: 12px;
	}

	.studio-card-media {
		flex: 0 0 auto;
		max-width: none;
	}

	.studio-card-media img {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	.studio-card-body {
		padding: 0 6px 6px 6px;
	}

	.studio-card-cta {
		width: 100%;
		justify-content: center;
	}
}


/***********************************************************
 * FORMULÁŘOVÁ POLE
 ***********************************************************/

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
	font-family: inherit;
	font-size: 13px;
	color: var(--rk-ink);
	background-color: var(--rk-surface);
	border: 1px solid var(--rk-line);
	border-radius: var(--rk-r-sm);
	padding: 9px 12px;
	transition: border-color var(--rk-ease), box-shadow var(--rk-ease),
	            background-color var(--rk-ease);
}

textarea {
	line-height: 1.6;
	resize: vertical;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover {
	border-color: #d8d6d8;
}

/* Web dosud neměl žádný stav zaměření - klávesnicí se v něm
   nedalo orientovat. */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
	outline: 0;
	border-color: var(--rk-teal);
	box-shadow: 0 0 0 3px rgba(72, 167, 154, .18);
	background-color: var(--rk-surface);
}

::placeholder {
	color: #b4b2b4;
	opacity: 1;
}

/* Chybová pole z Nette Forms */
input.error,
textarea.error,
select.error {
	border-color: #d97b6c;
	box-shadow: 0 0 0 3px rgba(217, 123, 108, .15);
}

/* Popisky */
.review-form-container th,
.verification-form th,
.form-contact th,
.code-form th,
.search th {
	font-size: 12px;
	font-weight: 700;
	color: var(--rk-body);
	letter-spacing: .01em;
}

.review-form-container small,
.verification-form small,
.form-contact small {
	font-size: 11px;
	color: var(--rk-muted);
}

/* Orámovaný blok formuláře */
.review-form-container {
	border: 1px solid var(--rk-line);
	border-radius: var(--rk-r-lg);
	box-shadow: var(--rk-shadow-sm);
	background: var(--rk-surface);
	padding: 24px;
}

.verification-form .activated,
.activated {
	border: 1px solid var(--rk-teal) !important;
	border-radius: var(--rk-r-lg);
	box-shadow: 0 0 0 3px rgba(72, 167, 154, .12);
}


/***********************************************************
 * TLAČÍTKA
 ***********************************************************/

input[type="submit"],
button[type="submit"],
.review-form-container input[type=submit],
.verification-form input[type=submit],
.form-contact input[type=submit],
.code-form input[type=submit] {
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .01em;
	color: #fff;
	background-color: var(--rk-teal);
	border: 0;
	border-radius: var(--rk-r-sm);
	padding: 11px 22px;
	width: auto;
	min-height: 40px;
	cursor: pointer;
	box-shadow: var(--rk-shadow-sm);
	transition: background-color var(--rk-ease), box-shadow var(--rk-ease),
	            transform var(--rk-ease);
}

input[type="submit"]:hover,
button[type="submit"]:hover {
	background-color: var(--rk-teal-dark);
	box-shadow: var(--rk-shadow);
}

input[type="submit"]:active,
button[type="submit"]:active {
	transform: translateY(1px);
	box-shadow: var(--rk-shadow-sm);
}

input[type=submit].disabled,
input[type="submit"]:disabled {
	background-color: #c6c5c6;
	box-shadow: none;
	cursor: not-allowed;
}


/***********************************************************
 * ŘAZENÍ A STRÁNKOVÁNÍ
 ***********************************************************/

.selectbox,
.paging {
	border: 1px solid var(--rk-line);
	border-radius: var(--rk-r-sm);
	background-color: var(--rk-surface);
	transition: border-color var(--rk-ease), box-shadow var(--rk-ease);
}

.selectbox:hover,
.paging:hover {
	border-color: #d8d6d8;
}

.selectbox:focus-within,
.paging:focus-within {
	border-color: var(--rk-teal);
	box-shadow: 0 0 0 3px rgba(72, 167, 154, .18);
}

/* Vlastní šipka zůstává na podkladu obalu, select je průhledný */
.selectbox select,
.paging select {
	border: 0;
	border-radius: 0;
	background: transparent;
	padding: 8px 24px 8px 10px;
	font-size: 12px;
	width: 100%;
}

.selectbox select:focus,
.paging select:focus {
	box-shadow: none;
	border: 0;
}

.paginator a,
.sortstudios a {
	border-radius: var(--rk-r-sm);
	transition: background-color var(--rk-ease), color var(--rk-ease);
}


/***********************************************************
 * PŘÍSTUPNOST
 ***********************************************************/

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--rk-teal-dark);
	outline-offset: 2px;
	border-radius: var(--rk-r-sm);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	ul.companies li a:hover {
		transform: none;
	}
}