/*
 * Styly vlastních bloků Nestyďse.
 *
 * Načítá se na webu i v editoru (style i editor_style v nst-bloky.php), aby
 * náhled v editoru vypadal jako výsledek.
 *
 * Pozor na názvy: callout „Tip:“ v popisech kategorií katalogu má třídy
 * nst-tip a nst-tip__stitek (kategorie.css). Blok používá nst-tipbox, aby si
 * ty dva nelezly do zelí — vzhled je ale schválně stejný, ať web drží jeden
 * tvar sdělení „tohle si přečti“.
 */

/* --- Tip s odkazem (blok nst/tip) ------------------------------------ */

.nst-tipbox {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
	margin: 28px 0;
	padding: 16px 18px;
	background: #fff7fb;
	border: 1px solid #ffd0e3;
	border-left: 4px solid #FF49AA;
	border-radius: 4px 12px 12px 4px;
}

.nst-tipbox__obsah {
	flex: 1 1 280px;
}

.nst-tipbox__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #5b6472;
}

/*
 * Růžová pilulka, tvarem shodná s calloutem „Tip:“ v kategoriích. Tam stojí
 * v jednom řádku s textem, tady je nad ním — rámeček bloku je širší a text
 * bývá delší, takže odsazený první řádek působil rozbitě.
 */
.nst-tipbox__stitek {
	display: inline-block;
	margin-bottom: 9px;
	padding: 2px 10px;
	background: #FF49AA;
	border-radius: 999px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	line-height: 1.5;
	text-transform: uppercase;
	vertical-align: 1px;
}

/*
 * Tlačítko je opsané z CTA v tabulce TOP produktů (style.css, selektor
 * .entry-content table.top-produkty td.cta a.wp-block-button__link). Opsané
 * proto, že tamní pravidlo je svázané s tabulkou a mimo ni neplatí — samotná
 * třída .wp-block-button__link dá jen tmavý obdélník od Astry.
 *
 * Kdyby se měnila barva tlačítek, musí se změnit na obou místech.
 */
/*
 * Selektory jsou tři, protože prostředí jsou dvě: na webu obaluje obsah
 * .entry-content, v editoru .editor-styles-wrapper. Bez té druhé varianty
 * mělo tlačítko v editoru jen barvu textu a žádné pozadí — vypadalo jinak
 * než na webu, což je přesně to, čemu se má náhled vyhnout.
 */
.entry-content aside.nst-tipbox a.nst-tipbox__cta,
.editor-styles-wrapper aside.nst-tipbox a.nst-tipbox__cta,
aside.nst-tipbox a.nst-tipbox__cta {
	flex: 0 0 auto;
	display: inline-block;
	padding: 12px 20px;
	font-size: 15px;
	font-weight: 700;
	border-radius: 8px;
	background: #FF49AA;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 6px 16px -7px rgba(255,73,170,.85);
	transition: transform .12s ease, background .12s ease;
}

.entry-content aside.nst-tipbox a.nst-tipbox__cta:hover,
.entry-content aside.nst-tipbox a.nst-tipbox__cta:focus,
.editor-styles-wrapper aside.nst-tipbox a.nst-tipbox__cta:hover,
aside.nst-tipbox a.nst-tipbox__cta:hover,
aside.nst-tipbox a.nst-tipbox__cta:focus {
	background: #ec2f95;
	color: #fff;
	transform: translateY(-1px);
	text-decoration: none;
}

@media (max-width: 600px) {
	.nst-tipbox {
		flex-direction: column;
		align-items: stretch;
	}

	.nst-tipbox__cta {
		text-align: center;
		white-space: normal;
	}
}

/* --- Společné pro editor --------------------------------------------- */

/*
 * Výzva u bloku, který ještě nemá obsah. Vidí ji jen redakce v editoru,
 * na web se prázdný blok nevypisuje vůbec.
 */
.nst-blok-vyzva {
	margin: 0;
	padding: 14px 18px;
	background: #f2eff1;
	color: #5b6472;
	border-radius: 6px;
	font-style: italic;
}

/*
 * V editoru se na odkaz nedá kliknout — jinak by kliknutí do bloku odvedlo
 * redaktora z rozepsaného článku pryč do e-shopu.
 */
.editor-styles-wrapper .nst-tipbox a,
.editor-styles-wrapper .nst-produkty a {
	pointer-events: none;
}

/* --- Produkty (blok nst/produkty) ------------------------------------ */

/*
 * Karty jsou schválně stejné jako produktové karty ve výpisu katalogu
 * (vypis-produktu.css): bílý podklad, rámeček #e7e2e6, rádius 14 px a týž
 * dvojitý stín. Tlačítko odpovídá tlačítku „Do obchodu“ na těch kartách
 * i CTA v tabulce TOP produktů. Web tak má jeden tvar produktu, ať stojí
 * kdekoli.
 *
 * Kdyby se ta podoba měnila, jsou to tři místa: tady, vypis-produktu.css
 * a style.css (tabulka TOP produktů).
 */

/* Podklad celé sekce. Bez rámečku — ohraničení nesou karty, dvě čáry přes
   sebe by dělaly z pruhu krabici v krabici. */
.nst-produkty {
	margin: 32px 0;
	padding: 18px 16px 18px;
	background: #faf8f9;
	border-radius: 14px;
}

/*
 * U jediné karty se podklad zúží na obsah. Karta si drží třetinovou šířku,
 * takže roztažený podklad by vedle ní nechal dvě třetiny prázdné plochy
 * a vypadal jako nedodělaná sekce.
 */
.entry-content .nst-produkty--1,
.editor-styles-wrapper .nst-produkty--1,
.nst-produkty--1 {
	width: fit-content;
	max-width: 100%;
	/* Astra zúžené bloky v obsahu centruje, tenhle má stát u textu vlevo. */
	margin-right: auto;
	margin-left: 0;
}

/* Mřížka by i v zúženém podkladu držela tři sloupce a roztáhla ho zpátky,
   proto má jediná karta vlastní jednosloupcovou mřížku se stejnou šířkou,
   jakou by měla třetina. */
.entry-content .nst-produkty--1 .nst-produkty__seznam,
.editor-styles-wrapper .nst-produkty--1 .nst-produkty__seznam,
.nst-produkty--1 .nst-produkty__seznam {
	grid-template-columns: minmax(0, 280px);
}

/*
 * Selektory s .entry-content a .editor-styles-wrapper ze stejného důvodu jako
 * u tlačítka tipu: Astra má na nadpisy a texty v obou prostředích silnější
 * pravidla a holá třída by prohrála.
 */
.entry-content .nst-produkty__nadpis,
.editor-styles-wrapper .nst-produkty__nadpis,
.nst-produkty__nadpis {
	margin: 0 0 4px;
	font-size: 19px;
	font-weight: 700;
	color: #1e293b;
}

.entry-content .nst-produkty__popisek,
.editor-styles-wrapper .nst-produkty__popisek,
.nst-produkty__popisek {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: #7b8794;
}

.nst-produkty__nadpis:last-child,
.nst-produkty__popisek:last-child {
	margin-bottom: 0;
}

/*
 * Selektory s .entry-content a .editor-styles-wrapper kvůli tomu, že Astra
 * dává seznamům v obsahu padding-left 40 px pro odrážky. Bez toho by karty
 * začínaly o čtyřicet pixelů vpravo od nadpisu nad nimi.
 */
.entry-content .nst-produkty__seznam,
.editor-styles-wrapper .nst-produkty__seznam,
.nst-produkty__seznam {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.entry-content .nst-produkty__seznam > li,
.editor-styles-wrapper .nst-produkty__seznam > li {
	margin: 0;
}

/*
 * Mřížka je pevná, ne auto-fit: jeden produkt by se jinak roztáhl přes celou
 * šířku článku a vypadal jako banner. Takhle si karta drží třetinu, ať jsou
 * v pruhu jedna nebo tři. Čtyři dostanou vlastní mřížku po čtvrtinách, jinak
 * by čtvrtá zůstala sama na druhém řádku.
 */
.entry-content .nst-produkty__seznam--4,
.editor-styles-wrapper .nst-produkty__seznam--4,
.nst-produkty__seznam--4 {
	grid-template-columns: repeat(4, 1fr);
}

.nst-produkty__polozka {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 16px 16px 18px;
	background: #fff;
	border: 1px solid #e7e2e6;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.10);
	transition: transform .12s ease, box-shadow .12s ease;
}

.nst-produkty__polozka:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 14px 30px -14px rgba(16,24,40,.18);
}

/* Pevná výška rámečku srovná karty v řádku bez ohledu na poměr stran fotky —
   stejné řešení jako u karet v katalogu. */
.nst-produkty__foto {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 150px;
	margin: 0 0 14px;
	padding: 8px;
	background: #faf8f9;
	border-radius: 10px;
	overflow: hidden;
}

/* mix-blend-mode zahodí bílé pozadí fotky, takže produkt sedí na podkladu
   stejně jako na kartě v katalogu. */
.nst-produkty__foto img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	mix-blend-mode: multiply;
}

.nst-produkty__telo {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.entry-content .nst-produkty__nazev,
.editor-styles-wrapper .nst-produkty__nazev,
.nst-produkty__nazev {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: #1e293b;
}

/* Název je odkaz, ale nemá vypadat jako odkaz v textu — podtržení a barva
   až při najetí, jinak by pruh vypadal jako seznam odkazů. */
.entry-content .nst-produkty a.nst-produkty__nazev-odkaz,
.editor-styles-wrapper .nst-produkty a.nst-produkty__nazev-odkaz,
a.nst-produkty__nazev-odkaz {
	color: inherit;
	text-decoration: none;
}

.entry-content .nst-produkty a.nst-produkty__nazev-odkaz:hover,
.entry-content .nst-produkty a.nst-produkty__nazev-odkaz:focus,
a.nst-produkty__nazev-odkaz:hover,
a.nst-produkty__nazev-odkaz:focus {
	color: #c2186f;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.entry-content .nst-produkty__veta,
.editor-styles-wrapper .nst-produkty__veta,
.nst-produkty__veta {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.5;
	color: #7b8794;
}

/* Tlačítko se drží u dolní hrany, takže tlačítka v řadě lícují i při různě
   dlouhých názvech a větách. */
.entry-content .nst-produkty a.nst-produkty__cta,
.editor-styles-wrapper .nst-produkty a.nst-produkty__cta,
a.nst-produkty__cta {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: auto 0 0;
	padding: 12px 16px;
	border: 0;
	border-radius: 8px;
	background: #FF49AA;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 6px 16px -7px rgba(255,73,170,.85);
	transition: transform .12s ease, background .12s ease;
}

.entry-content .nst-produkty a.nst-produkty__cta:hover,
.entry-content .nst-produkty a.nst-produkty__cta:focus,
.editor-styles-wrapper .nst-produkty a.nst-produkty__cta:hover,
a.nst-produkty__cta:hover,
a.nst-produkty__cta:focus {
	background: #ec2f95;
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

@media (max-width: 900px) {
	.entry-content .nst-produkty__seznam,
	.entry-content .nst-produkty__seznam--4,
	.editor-styles-wrapper .nst-produkty__seznam,
	.editor-styles-wrapper .nst-produkty__seznam--4,
	.nst-produkty__seznam,
	.nst-produkty__seznam--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.nst-produkty {
		padding: 16px 12px 16px;
	}

	.entry-content .nst-produkty__seznam,
	.entry-content .nst-produkty__seznam--4,
	.nst-produkty__seznam,
	.nst-produkty__seznam--4 {
		gap: 12px;
	}

	.nst-produkty__foto {
		height: 120px;
	}
}

/* --- Rozcestník (blok nst/rozcestnik) -------------------------------- */

/*
 * Dlaždice navazují na podkategorie v katalogu (kategorie.css, ul.subcategories):
 * plocha, ne karta — vlasový rámeček, žádný stín, šipka vpravo. Produkt má
 * na webu tvar karty se stínem, „tudy se jde dál“ tenhle. Ty dva se nemají
 * plést, proto tu záměrně není stín ani nadzvednutí.
 */

.nst-rozcestnik {
	margin: 32px 0;
}

.entry-content .nst-rozcestnik__nadpis,
.editor-styles-wrapper .nst-rozcestnik__nadpis,
.nst-rozcestnik__nadpis {
	margin: 0 0 4px;
	font-size: 19px;
	font-weight: 700;
	color: #1e293b;
}

.entry-content .nst-rozcestnik__popisek,
.editor-styles-wrapper .nst-rozcestnik__popisek,
.nst-rozcestnik__popisek {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: #7b8794;
}

/* Selektory se jménem obalu kvůli tomu, že Astra dává seznamům v obsahu
   padding-left 40 px pro odrážky — stejný důvod jako u pruhu produktů. */
.entry-content .nst-rozcestnik__seznam,
.editor-styles-wrapper .nst-rozcestnik__seznam,
.nst-rozcestnik__seznam {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.entry-content .nst-rozcestnik__seznam > li,
.editor-styles-wrapper .nst-rozcestnik__seznam > li,
.nst-rozcestnik__polozka {
	display: flex;
	margin: 0;
	padding: 0;
	background: #fff7fb;
	border: 1px solid #ffd0e3;
	border-radius: 12px;
	transition: background-color .12s ease, border-color .12s ease;
}

.nst-rozcestnik__polozka:hover {
	background: #ffeef6;
	border-color: #ff9dcb;
}

.entry-content .nst-rozcestnik a.nst-rozcestnik__odkaz,
.editor-styles-wrapper .nst-rozcestnik a.nst-rozcestnik__odkaz,
a.nst-rozcestnik__odkaz {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	padding: 12px 16px;
	color: #1e293b;
	text-decoration: none;
	transition: color .12s ease;
}

.nst-rozcestnik__polozka:hover a.nst-rozcestnik__odkaz {
	color: #c2186f;
}

.nst-rozcestnik__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.nst-rozcestnik__nazev {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

/* Věta zůstává šedá i při najetí — barvu mění jen název a šipka, jinak by
   se celá dlaždice rozsvítila a přebila text článku okolo. */
.nst-rozcestnik__veta {
	color: #7b8794;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
}

/* Šipka odlišuje dlaždici od calloutu Tip: mají stejný podklad, ale tohle je
   odkaz, ne text. Při najetí popojede. */
.nst-rozcestnik__odkaz::after {
	content: "\203A";
	margin-left: auto;
	padding-left: 10px;
	color: #ffa8d0;
	font-size: 18px;
	line-height: 1;
	transition: transform .12s ease, color .12s ease;
}

.nst-rozcestnik__polozka:hover .nst-rozcestnik__odkaz::after {
	color: #c2186f;
	transform: translateX(3px);
}

/*
 * Mřížka je pevná na tři sloupce, ne auto-fit. Jedna nebo dvě dlaždice by se
 * jinak roztáhly přes celou šířku článku a vypadaly jako banner — takhle si
 * drží šířku třetiny a rozcestník vypadá stejně, ať jsou dlaždice dvě nebo šest.
 */
@media (max-width: 900px) {
	.entry-content .nst-rozcestnik__seznam,
	.editor-styles-wrapper .nst-rozcestnik__seznam,
	.nst-rozcestnik__seznam {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.entry-content .nst-rozcestnik__seznam,
	.editor-styles-wrapper .nst-rozcestnik__seznam,
	.nst-rozcestnik__seznam {
		grid-template-columns: 1fr;
		gap: 10px;
	}
}