/*
 * Style bloku "Cennik pakietów".
 * Zakres wyłącznie: .wp-block-gg-konsulting-theme-cennik-pakietow
 *
 * Kolor akcentu (--gg-accent) pochodzi automatycznie ze sfery strony
 * (inc/sphere.php) - blok go tylko czyta.
 */

.wp-block-gg-konsulting-theme-cennik-pakietow {
	/*
	 * Pełna szerokość okna - identyczna zasada jak w pozostałych sekcjach.
	 * !important przebija "margin: auto !important" z układu constrained.
	 */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw ) !important;
	margin-right: calc( 50% - 50vw ) !important;
	margin-top: 0 !important;
	background-color: var( --wp--preset--color--base );
	padding-block: clamp( 3rem, 6vw, 6rem );
	padding-inline: clamp( 1rem, 2.5vw, 2.5rem );
}

/* --- Układ --- */

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp( 2rem, 4vw, 3.5rem );
	align-items: center;
	max-width: 1400px;
	margin-inline: auto;
}

@media ( min-width: 1000px ) {
	.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__inner {
		grid-template-columns: 2fr 1fr;
	}

	.wp-block-gg-konsulting-theme-cennik-pakietow.is-text-right .cennik__plans {
		order: 1;
	}

	.wp-block-gg-konsulting-theme-cennik-pakietow.is-text-right .cennik__text {
		order: 2;
	}

	.wp-block-gg-konsulting-theme-cennik-pakietow.is-text-left .cennik__plans {
		order: 2;
	}

	.wp-block-gg-konsulting-theme-cennik-pakietow.is-text-left .cennik__text {
		order: 1;
	}

	/*
	 * Jeden pakiet nie ma czym wypełnić dwóch trzecich szerokości - karta
	 * rozciąga się wtedy w pasek, a kolumna z opisem robi się nienaturalnie
	 * wąska. Przy pojedynczym pakiecie schodzimy na proporcję 40/60:
	 * karta zostaje wyraźnie węższa od opisu, ale nadal wypełnia swoją
	 * kolumnę, więc między nią a tekstem nie powstaje pusty pas.
	 *
	 * Kolumny są przypisane po stronie układu, a nie po kolejności w HTML,
	 * bo "order" przestawia elementy między kolumnami - stąd osobna reguła
	 * dla tekstu po prawej i po lewej.
	 */
	.wp-block-gg-konsulting-theme-cennik-pakietow.has-1-plans.is-text-right .cennik__inner {
		grid-template-columns: 1fr 1fr;
	}

	.wp-block-gg-konsulting-theme-cennik-pakietow.has-1-plans.is-text-left .cennik__inner {
		grid-template-columns: 3fr 2fr;
	}
}

/* --- Siatka pakietów --- */

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__plans {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp( 1.25rem, 2.5vw, 2rem );
	align-items: stretch;
}

@media ( min-width: 700px ) {
	.wp-block-gg-konsulting-theme-cennik-pakietow:not( .has-1-plans ) .cennik__plans {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 1300px ) {
	.wp-block-gg-konsulting-theme-cennik-pakietow.has-3-plans .cennik__plans {
		grid-template-columns: repeat( 3, 1fr );
	}
}

/* --- Karta pakietu --- */

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__plan {
	display: flex;
	flex-direction: column;
	padding: clamp( 1.75rem, 2.5vw, 2.5rem );
	background-color: #ffffff;
	border: 1px solid var( --wp--preset--color--muted );
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba( 43, 27, 58, 0.06 );
}

/* Pakiet wyróżniony - obwódka w kolorze akcentu, bez zmiany układu. */
.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__plan.is-featured {
	border-color: var( --gg-accent );
	box-shadow: 0 18px 40px rgba( 43, 27, 58, 0.12 );
}

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__plan-name {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: var( --wp--preset--color--primary );
	margin: 0 0 0.75rem;
}

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__plan-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var( --wp--preset--color--muted );
}

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__plan-amount {
	font-size: clamp( 2.25rem, 3.5vw, 3rem );
	font-weight: 800;
	line-height: 1.1;
	color: var( --wp--preset--color--primary );
}

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__plan-period {
	font-size: 1rem;
	font-weight: 500;
	color: #a67c56;
}

/* --- Zakres pakietu --- */

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__plan-list {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__plan-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__check {
	flex: 0 0 auto;
	color: #a67c56;
	margin-top: 0.15rem;
}

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__check svg {
	display: block;
	width: 20px;
	height: 20px;
}

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__plan-item-text {
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1.55;
	color: var( --wp--preset--color--primary );
}

/*
 * Przycisk i przypis trzymają się dołu karty - margin-top: auto wyrównuje
 * je między pakietami o różnej długości listy.
 */
.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__plan-cta {
	margin: auto 0 0;
}

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__plan-button {
	display: block;
	padding: 15px 30px;
	border-radius: 10px;
	background-color: var( --gg-accent );
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.3s;
}

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__plan-button:hover,
.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__plan-button:focus-visible {
	background-color: #a67c56;
}

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__plan-note {
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.5;
	color: var( --wp--preset--color--primary );
	text-align: center;
	margin: 1.25rem 0 0;
}

/* --- Kolumna tekstowa --- */

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__kicker {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	font-family: var( --wp--preset--font-family--raleway );
	font-size: clamp( 14px, 1.4vw, 18px );
	font-weight: 700;
	color: var( --wp--preset--color--primary );
	margin: 0 0 0.75rem;
}

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__kicker-sep {
	color: #a67c52;
}

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__heading {
	font-size: clamp( 1.9rem, 2.8vw, 2.75rem );
	font-weight: 800;
	line-height: 1.2;
	color: var( --wp--preset--color--primary );
	margin: 0 0 1.25rem;
}

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__accent {
	color: var( --gg-accent );
}

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__lead {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.65;
	color: var( --wp--preset--color--primary );
	max-width: 52ch;
	margin: 0;
}

/* --- Wyróżniki pod opisem --- */

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__features {
	list-style: none;
	margin: clamp( 1.75rem, 3vw, 2.5rem ) 0 0;
	padding: clamp( 1.5rem, 2.5vw, 2rem ) 0 0;
	border-top: 1px solid var( --wp--preset--color--muted );
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 1.5rem;
	text-align: center;
}

/* Trzy wyróżniki w jednym rzędzie - przy dwóch kolumnach ostatni zostawał sam. */
@media ( min-width: 600px ) {
	.wp-block-gg-konsulting-theme-cennik-pakietow.has-3-features .cennik__features {
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media ( max-width: 599px ) {
	.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__features {
		grid-template-columns: 1fr;
	}
}

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__feature-icon {
	color: var( --wp--preset--color--primary );
}

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__feature-icon svg {
	display: block;
	/*
	 * Wysokość stała, szerokość z proporcji rysunku. Sztywne width
	 * + height wciskało ikony o niekwadratowym rysunku w kwadrat,
	 * przez co wychodziły niższe od pozostałych.
	 */
	height: 34px;
	width: auto;
	max-width: 68px;
}

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__feature-label {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	color: var( --wp--preset--color--primary );
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__plan-button {
		transition: none;
	}
}

/*
 * Opis bywa kilkuakapitowy - odstęp między akapitami zamiast
 * domyślnych marginesów znacznika <p>.
 */
.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__lead p {
	margin: 0;
}

.wp-block-gg-konsulting-theme-cennik-pakietow .cennik__lead p + p {
	margin-top: 1rem;
}