/* ═══════════════════════════════════════════════════
   CENÍKY — /cenik-snoubenci a /cenik-dodavatele

   Obě stránky měly vlastní <style> blok v šabloně a devět tříd v nich bylo shodných.
   Kopie se ale stihly rozejít (šířka podnadpisu 640 vs 600 px) a dvě komponenty
   existovaly dvakrát pod jiným jménem — .pricing-couples-free a .pricing-assurance
   se lišily jen pastelovou řadou, jinak byly totožné.

   Soubor si obě šablony přilinkují samy (vzor jako eshop.css), aby se ceníkové CSS
   nepřidávalo do globálního style.css, který jde do každé stránky webu.
   ═══════════════════════════════════════════════════ */

/* ── Stránka a hlavička ── */
.pricing-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--space-xl) var(--space-md) var(--space-2xl);
}

.pricing-header {
	text-align: center;
	margin-bottom: var(--space-2xl);
}

.pricing-header h1 {
	font-size: clamp(2.4rem, 2.1rem + 1.2vw, 3rem);
	font-weight: 600;
	margin-bottom: var(--space-sm);
}

.pricing-header p {
	font-size: var(--text-xl);
	color: var(--color-steel);
	max-width: 640px;
	margin: 0 auto;
}

/* Ceník pro dodavatele měl podnadpis o 40 px užší. Nechávám rozdíl scopovaný —
   sloučení nemá měnit zalomení textu, ne aby se řešilo, která hodnota byla záměr. */
.pricing-page--vendor .pricing-header p {
	max-width: 600px;
}

/* ── Mřížka karet ── */
.pricing-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-lg);
}

.pricing-page--couple .pricing-cards {
	max-width: 950px;
	margin: 0 auto;
}

@media (max-width: 700px) {
	.pricing-cards {
		grid-template-columns: 1fr;
		max-width: 420px;
		margin: 0 auto;
	}
}

/* ── Citace s podpisem ── */
.pricing-roi-author {
	max-width: 950px;
	margin: var(--space-4xl) auto 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
}

.pricing-roi-photo {
	width: 110px;
	height: 110px;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid var(--color-white);
	box-shadow: 0 6px 18px var(--color-silver);
}

.pricing-roi-signature {
	font-style: italic;
	font-size: var(--text-2xl);
	color: var(--color-teal);
}

.pricing-roi {
	max-width: 950px;
	margin: var(--space-md) auto var(--space-4xl);
	text-align: center;
	font-size: var(--text-3xl);
	font-style: italic;
	color: var(--color-teal);
	line-height: 1.6;
}

/* ── Zvýrazněný pruh s velkou nulou ──
   Jedna komponenta pro obě stránky; barvu nese modifikátor přes --ph-ink.
   Dřív dvě samostatné kopie: .pricing-couples-free (pink) a .pricing-assurance (yellow). */
.pricing-highlight {
	--ph-bg: var(--pastel-pink);
	--ph-ink: var(--pastel-pink-dark);
	max-width: 950px;
	margin: var(--space-2xl) auto var(--space-5xl);
	display: flex;
	gap: var(--space-lg);
	align-items: center;
	padding: var(--space-lg) var(--space-xl);
	background: var(--ph-bg);
	border-radius: var(--radius-md-plus);
}

.pricing-highlight--assurance {
	--ph-bg: var(--pastel-yellow);
	--ph-ink: var(--pastel-yellow-dark);
}

.pricing-highlight-zero {
	flex-shrink: 0;
	font-family: var(--font-heading);
	font-size: clamp(3rem, 2.2rem + 3.5vw, 5rem);
	line-height: 1;
	color: var(--ph-ink);
	letter-spacing: -0.03em;
	white-space: nowrap;
}

.pricing-highlight h2 {
	font-size: var(--text-3xl);
	margin: 0 0 var(--space-sm);
	color: var(--ph-ink);
}

.pricing-highlight p {
	margin: 0;
	color: var(--color-steel);
	line-height: 1.6;
}

.pricing-highlight a {
	color: var(--color-teal);
	font-weight: 600;
}

/* ── Nadpis sekce ──
   Dřív .pricing-fotoalbum-title/-sub na jedné stránce a .pricing-plans-title/-sub
   na druhé — se shodnými hodnotami. */
.pricing-section-title {
	text-align: center;
	margin: 0 0 var(--space-sm);
}

/* Druhá cenová sekce (Svatební web) potřebuje odsazení shora od fotoalba nad ní */
.pricing-section-title--gap {
	margin-top: var(--space-4xl);
}

.pricing-section-sub {
	text-align: center;
	color: var(--color-steel);
	max-width: 640px;
	margin: 0 auto var(--space-xl);
	line-height: 1.6;
}

/* ── Jen ceník pro snoubence ──
   Barevné akcenty sekcí dle náhledovek e-booků: fotoalbum = pink, svatební web = sky,
   rozesílka = lime. */
.pricing-cards--pink .pricing-card--featured { border-color: var(--pastel-pink-dark); box-shadow: 0 0 0 1px var(--pastel-pink-dark); }
.pricing-cards--pink .pricing-card--featured:hover { box-shadow: 0 0 0 1px var(--pastel-pink-dark), 0 8px 24px var(--shadow-sm); }
.pricing-cards--pink .pricing-ribbon span { background: var(--pastel-pink-dark); }
.pricing-cards--sky .pricing-card--featured { border-color: var(--pastel-sky-dark); box-shadow: 0 0 0 1px var(--pastel-sky-dark); }
.pricing-cards--sky .pricing-card--featured:hover { box-shadow: 0 0 0 1px var(--pastel-sky-dark), 0 8px 24px var(--shadow-sm); }
.pricing-cards--sky .pricing-ribbon span { background: var(--pastel-sky-dark); }
/* Gold karta = zlatá identita — přebíjí sky akcent sekce (vyšší specificita) */
.pricing-cards--sky .pricing-card--gold .pricing-ribbon span { background: var(--gradient-paid); color: var(--pastel-amber-dark); text-shadow: none; }
/* Rozesílka hostům: lime akcent — stejné chování jako sekce Svatební web (sky),
   jen s lime pastelem. Badge nesvítí; hover přidává pouze stín (border se nemění). */
.pricing-cards--lime .pricing-card--featured { border-color: var(--pastel-lime-dark); box-shadow: 0 0 0 1px var(--pastel-lime-dark); }
.pricing-cards--lime .pricing-card--featured:hover { box-shadow: 0 0 0 1px var(--pastel-lime-dark), 0 8px 24px var(--shadow-sm); }

/* ── Jen ceník pro dodavatele ── */
.pricing-title-teal {
	color: var(--color-teal);
}

.pricing-label-rocni {
	background: var(--color-teal-light);
	color: var(--color-teal);
}