/*
 * Style bloku "Siatka kart z listami" (Oferta współpracy).
 * Zakres wyłącznie: .wp-block-gg-konsulting-theme-oferta-wspolpracy
 *
 * Kolor akcentu (--gg-accent) pochodzi automatycznie ze sfery strony
 * (inc/sphere.php) - blok go tylko czyta.
 */

.wp-block-gg-konsulting-theme-oferta-wspolpracy {
	/*
	 * 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;
	padding-block: clamp( 3rem, 6vw, 6rem );
	background-color: var( --wp--preset--color--base );
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__inner {
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: clamp( 1rem, 2.5vw, 2.5rem );
}

/* --- Nagłówek sekcji --- */

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__header {
	text-align: center;
	max-width: 760px;
	margin-inline: auto;
	margin-bottom: clamp( 2rem, 4vw, 3.5rem );
}

/* Wariant z nagłówkiem przy lewej krawędzi siatki. */
.wp-block-gg-konsulting-theme-oferta-wspolpracy.is-header-left .oferta__header {
	text-align: left;
	max-width: 900px;
	margin-inline: 0;
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy.is-header-left .oferta__kicker {
	justify-content: flex-start;
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__kicker {
	display: flex;
	align-items: baseline;
	justify-content: center;
	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.5rem;
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__kicker-sep {
	color: #a67c52;
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__heading {
	font-size: clamp( 1.9rem, 3vw, 3rem );
	font-weight: 800;
	line-height: 1.2;
	color: var( --wp--preset--color--primary );
	margin: 0 0 1rem;
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__heading-accent {
	color: var( --gg-accent );
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__lead {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.65;
	color: var( --wp--preset--color--primary );
	margin: 0;
}

/* --- Siatka kart --- */

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp( 1.25rem, 2.5vw, 2.5rem );
}

@media ( min-width: 900px ) {
	.wp-block-gg-konsulting-theme-oferta-wspolpracy.has-2-columns .oferta__grid {
		grid-template-columns: repeat( 2, 1fr );
	}

	/*
	 * Sześć torów zamiast trzech: zwykła karta zajmuje dwa, dzięki czemu
	 * niepełny ostatni rząd da się wyśrodkować bez pustych luk po prawej.
	 */
	.wp-block-gg-konsulting-theme-oferta-wspolpracy.has-3-columns .oferta__grid {
		grid-template-columns: repeat( 6, 1fr );
	}

	.wp-block-gg-konsulting-theme-oferta-wspolpracy.has-3-columns .oferta__card {
		grid-column: span 2;
	}

	/* Dwie karty w ostatnim rzędzie - każda szersza, razem na całą szerokość. */
	.wp-block-gg-konsulting-theme-oferta-wspolpracy.has-3-columns .oferta__card:nth-last-child( 2 ):nth-child( 3n + 1 ),
	.wp-block-gg-konsulting-theme-oferta-wspolpracy.has-3-columns .oferta__card:nth-last-child( 2 ):nth-child( 3n + 1 ) + .oferta__card {
		grid-column: span 3;
	}

	/* Jedna karta w ostatnim rzędzie - na środku. */
	.wp-block-gg-konsulting-theme-oferta-wspolpracy.has-3-columns .oferta__card:last-child:nth-child( 3n + 1 ) {
		grid-column: 3 / span 2;
	}

	/*
	 * Nieparzysta ostatnia karta w układzie dwukolumnowym ustawia się
	 * na środku, zamiast zostawiać pustą lukę po prawej.
	 */
	.wp-block-gg-konsulting-theme-oferta-wspolpracy.has-2-columns .oferta__card:last-child:nth-child( odd ) {
		grid-column: 1 / -1;
		width: calc( 50% - clamp( 0.625rem, 1.25vw, 1.25rem ) );
		margin-inline: auto;
	}
}

/* --- Karta --- */

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__card {
	display: flex;
	flex-direction: column;
	padding: clamp( 1.75rem, 2.5vw, 2.5rem );
	border-radius: 10px;
}

/*
 * Górny rząd karty: ikona po lewej, plakietka po prawej.
 * Gdy karta ma tylko jedno z dwojga, element i tak trafia na swoją stronę.
 */
.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__card-top .oferta__icon {
	margin-bottom: 0;
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__badge {
	margin-left: auto;
	padding: 8px 18px;
	border-radius: 6px;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.3;
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__icon {
	display: block;
	margin-bottom: 1.5rem;
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__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: 40px;
	width: auto;
	max-width: 80px;
}

/* Etykieta ze slashem wewnątrz karty. */
.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__card-kicker {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	font-family: var( --wp--preset--font-family--raleway );
	font-size: 15px;
	font-weight: 700;
	color: inherit;
	margin: 0 0 0.75rem;
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__card-kicker-sep {
	color: #a67c56;
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__card-heading {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
	margin: 0 0 1rem;
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__card-text {
	font-size: 1.13rem;
	font-weight: 500;
	line-height: 1.65;
	color: inherit;
	margin: 0 0 1.5rem;
}

/* --- Podnagłówek w karcie --- */

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__subheading {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.13rem;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
	margin: 0 0 1rem;
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__subheading-icon {
	flex: 0 0 auto;
	display: flex;
	color: #a67c56;
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__subheading-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: 20px;
	width: auto;
	max-width: 40px;
}

/* --- Lista punktów --- */

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__list-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 1.13rem;
	font-weight: 500;
	line-height: 1.5;
	color: inherit;
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__check {
	flex: 0 0 auto;
	color: #a67c52;
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__check svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* --- Link --- */

/*
 * align-self: flex-start jest tu kluczowe - bez niego link (jako element
 * kolumny flex) rozciągałby się na całą szerokość karty, a podkreślenie
 * i obszar klikalny wychodziłyby daleko poza sam tekst.
 */
.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__link {
	align-self: flex-start;
	margin-top: auto;
	font-weight: 700;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: color 0.3s;
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__link:hover,
.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__link:focus-visible {
	color: #a67c56;
}

/* --- Warianty kolorystyczne kart --- */

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__card.is-dark {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__card.is-accent {
	background-color: var( --gg-accent );
	color: #ffffff;
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__card.is-light {
	background-color: #ffffff;
	color: var( --wp--preset--color--primary );
}

/*
 * Plakietka musi odcinać się od tła karty, dlatego kolory ma odwrotne
 * niż karta, na której leży.
 */
.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__card.is-dark .oferta__badge {
	background-color: #a67c56;
	color: #ffffff;
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__card.is-accent .oferta__badge,
.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__card.is-light .oferta__badge {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

/* Na ciemnej karcie brąz ikony podnagłówka byłby za ciemny. */
.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__card.is-dark .oferta__subheading-icon {
	color: #c9a37a;
}

/*
 * Akapit zamykający sekcję - domyka listę kart jednym zdaniem
 * zamiast osobnej wstawki tekstowej pod blokiem.
 */
.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__footnote {
	max-width: 72ch;
	margin: clamp( 2rem, 4vw, 3rem ) auto 0;
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.7;
	color: var( --wp--preset--color--primary );
}

/*
 * Wprowadzenie bywa kilkuakapitowe - odstęp między akapitami zamiast
 * domyślnych marginesów znacznika <p>.
 */
.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__lead p {
	margin: 0;
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__lead p + p {
	margin-top: 1.25rem;
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__lead strong {
	font-weight: 700;
}

.wp-block-gg-konsulting-theme-oferta-wspolpracy .oferta__lead a {
	color: var( --gg-accent );
	text-decoration: underline;
	text-underline-offset: 3px;
}