/*
Theme Name: Bazainflu
Theme URI: https://bazainflu.pl
Description: Motyw potomny GeneratePress dla bazainflu.pl — biel, złoto, granat. Typografia wersalikowa 800, karty-sceny, zero cieni.
Author: bazainflu.pl
Template: generatepress
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: bazainflu
*/

/* ==========================================================================
   1. Tokeny
   ========================================================================== */

:root {
	--bi-white: #f8f9fa;
	--bi-gold: #b88b58;
	--bi-gold-dark: #a67a49;
	--bi-gold-ink: #7a5a33;
	--bi-navy: #0b1026;
	--bi-navy-2: #10152e;
	--bi-navy-3: #0e1329;
	--bi-deep: #070b1c;
	--bi-cream: #f1e9df;
	--bi-text: #3c4260;
	--bi-muted: #6b7189;
	--bi-fog: #c4baae;
	--bi-line: #e0dad1;
	--bi-line-warm: #e2d6c6;
	--bi-line-gold: rgba(184, 139, 88, 0.22);

	--bi-r-btn: 12px;
	--bi-r-card: 16px;
	--bi-r-panel: 24px;
	--bi-r-stage: 32px;
	--bi-r-pill: 104px;

	--bi-gap: 112px;
	--bi-wrap: 1200px;

	--bi-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--bi-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ==========================================================================
   2. Baza
   ========================================================================== */

body {
	background: var(--bi-white);
	color: var(--bi-text);
	font-family: var(--bi-body);
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.013em;
	-webkit-font-smoothing: antialiased;
}

.entry-content > *:first-child { margin-top: 0; }

h1, h2, h3, h4 {
	font-family: var(--bi-display);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--bi-navy);
}

a { color: var(--bi-navy); }
a:hover { color: var(--bi-gold-ink); }

/* Pełna szerokość dla stron z układem full-width */
.full-width-content .site-content .content-area { padding: 0; }
.full-width-content .entry-content { margin: 0; }
.bi-page .site-main > article > .entry-content > * { margin-block: 0; }

/* ==========================================================================
   3. Belka menu
   ========================================================================== */

.site-header {
	background: rgba(248, 249, 250, 0.92);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--bi-line);
	position: sticky;
	top: 0;
	z-index: 500;
}

.site-header .inside-header {
	padding: 16px 24px;
	max-width: var(--bi-wrap);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* Logo: znak + sygnatura tekstowa */
.site-branding { display: flex; align-items: center; }

.site-title,
.site-title a {
	font-family: var(--bi-display);
	font-weight: 800;
	font-size: 17px;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--bi-navy);
	display: flex;
	align-items: center;
	gap: 12px;
}

.site-title a::before {
	content: "";
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Crect width='34' height='34' rx='10' fill='%230b1026'/%3E%3Ccircle cx='17' cy='13' r='4.5' fill='none' stroke='%23b88b58' stroke-width='2'/%3E%3Cpath d='M8.5 25.5c1.8-4 5-6 8.5-6s6.7 2 8.5 6' fill='none' stroke='%23b88b58' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

.site-description { display: none; }

.main-navigation { background: transparent; }
.main-navigation .inside-navigation { padding: 0; }

/* Poziomy układ menu dopiero od tabletu w górę. Poniżej GeneratePress
   chowa listę pod przyciskiem Menu, a nadpisanie display zostawiało ją
   rozwiniętą na stałe — nagłówek zjadał ponad połowę ekranu telefonu. */
@media (min-width: 769px) {
	.main-navigation .main-nav > ul {
		display: flex;
		align-items: center;
		gap: 8px;
	}
}

.main-navigation .main-nav ul li a {
	font-family: var(--bi-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.013em;
	color: var(--bi-navy);
	line-height: 1;
	padding: 12px 14px;
	position: relative;
}

.main-navigation .main-nav ul li a::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 4px;
	height: 2px;
	background: var(--bi-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.main-navigation .main-nav ul li a:hover::after,
.main-navigation .main-nav ul li.current-menu-item > a::after { transform: scaleX(1); }

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a { color: var(--bi-navy); background: transparent; }

/* Pozycja CTA w menu */
.main-navigation .main-nav ul li.bi-cta { margin-left: 10px; }

.main-navigation .main-nav ul li.bi-cta a {
	background: var(--bi-gold);
	color: var(--bi-navy);
	border-radius: 16px;
	padding: 12px 20px;
	font-weight: 700;
	letter-spacing: 0.016em;
	transition: background-color 0.25s ease, transform 0.2s ease;
}

.main-navigation .main-nav ul li.bi-cta a::after { display: none; }
.main-navigation .main-nav ul li.bi-cta a:hover { background: var(--bi-gold-dark); transform: translateY(-2px); }

/* Menu mobilne */
.main-navigation .menu-toggle {
	color: var(--bi-navy);
	font-family: var(--bi-body);
	font-weight: 600;
}

@media (max-width: 768px) {
	.site-header .inside-header { padding: 10px 16px; flex-wrap: nowrap; gap: 12px; }
	.main-title a { max-width: 190px; font-size: 14px; gap: 9px; }
	.main-title a::before { width: 28px; height: 28px; }
	.main-navigation { flex-shrink: 0; }
	.main-navigation .main-nav ul li.bi-cta { margin: 8px 0; }
	.main-navigation .main-nav ul li.bi-cta a { display: inline-block; }
}

/* ==========================================================================
   4. Sceny sekcji
   ========================================================================== */

.bi-stage {
	border-radius: var(--bi-r-stage);
	margin: var(--bi-gap) 24px 0;
	padding: 80px 72px;
	box-sizing: border-box;
}

.bi-stage--navy { background: var(--bi-navy); }
.bi-stage--deep { background: var(--bi-deep); }
.bi-stage--cream { background: var(--bi-cream); }
.bi-stage--plain { background: transparent; margin-inline: 0; padding: 0 24px; }

.bi-stage--navy h1, .bi-stage--navy h2, .bi-stage--navy h3, .bi-stage--navy h4,
.bi-stage--deep h1, .bi-stage--deep h2, .bi-stage--deep h3, .bi-stage--deep h4 { color: var(--bi-white); }
.bi-stage--navy p, .bi-stage--deep p { color: var(--bi-fog); }

/* Pola dotykowe w nawigacji — minimum 44 px wysokości */
.main-navigation .main-nav ul li a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 14px;
}

/* Stopka: kolumny linków */
.bi-footer {
	max-width: var(--bi-wrap);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 32px;
	text-align: left;
}

.bi-footer__logo {
	font-family: var(--bi-display);
	font-weight: 800;
	font-size: 17px;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--bi-white);
	display: block;
}

.bi-footer__brand p {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--bi-fog);
}

.bi-footer__head {
	font-family: var(--bi-body);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.013em;
	text-transform: none;
	color: var(--bi-white);
	margin: 0 0 10px;
}

.bi-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bi-footer__col a {
	display: inline-block;
	padding: 7px 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--bi-fog);
}

.bi-footer__col a:hover { color: var(--bi-gold); }

.bi-footer__legal {
	max-width: var(--bi-wrap);
	margin: 0 auto;
	padding-top: 24px;
	border-top: 1px solid var(--bi-line-gold);
	font-size: 14px;
	color: var(--bi-fog);
	text-align: left;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
}

.bi-footer__legal a {
	color: var(--bi-fog);
	padding: 4px 0;
}

.bi-footer__legal a:hover { color: var(--bi-gold); }

.bi-footer__credit a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
	.bi-footer { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 560px) {
	.bi-footer { grid-template-columns: 1fr; }
}

.bi-wrap {
	max-width: var(--bi-wrap);
	margin-inline: auto;
}

.bi-section { margin-top: var(--bi-gap); }

/* ==========================================================================
   5. Typografia treści
   ========================================================================== */

.bi-eyebrow {
	display: block;
	font-family: var(--bi-body);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--bi-gold-ink);
	margin-bottom: 18px;
}

.bi-stage--navy .bi-eyebrow,
.bi-stage--deep .bi-eyebrow { color: var(--bi-gold); }

/* Dolna granica liczona tak, by najdłuższy wyraz ("INFLUENCERÓW")
   mieścił się w szerokości sceny na ekranie 320 px — nagłówki nie łamią
   się w środku wyrazu, więc za duża wartość powodowała ucinanie tekstu. */
.bi-display {
	font-size: clamp(29px, 8.2vw, 61px);
	line-height: 0.9;
	text-transform: uppercase;
	margin: 0 0 24px;
}

.bi-h2 {
	font-size: clamp(25px, 5.6vw, 48px);
	line-height: 0.98;
	text-transform: uppercase;
	margin: 0 0 22px;
}

.bi-h3 { font-size: 20px; line-height: 1.22; margin: 0 0 12px; }

.bi-gold { color: var(--bi-gold); }

.bi-lead { font-size: 17px; line-height: 1.62; }

.bi-stage--navy .bi-lead, .bi-stage--deep .bi-lead { color: var(--bi-fog); }

/* ==========================================================================
   6. Przyciski
   ========================================================================== */

.bi-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 8px; }

.bi-btn,
.wp-block-button.bi-btn .wp-block-button__link {
	display: inline-block;
	border: none;
	border-radius: var(--bi-r-btn);
	font-family: var(--bi-body);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.016em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.2s ease;
}

.bi-btn--gold,
.wp-block-button.bi-btn--gold .wp-block-button__link {
	background: var(--bi-gold);
	color: var(--bi-navy);
	padding: 19px 28px;
}

.bi-btn--gold:hover,
.wp-block-button.bi-btn--gold .wp-block-button__link:hover {
	background: var(--bi-gold-dark);
	color: var(--bi-navy);
	transform: translateY(-2px);
}

.bi-btn--light,
.wp-block-button.bi-btn--light .wp-block-button__link {
	background: var(--bi-white);
	color: var(--bi-navy);
	padding: 15px 28px;
	font-weight: 600;
}

.bi-btn--light:hover,
.wp-block-button.bi-btn--light .wp-block-button__link:hover { transform: translateY(-2px); color: var(--bi-navy); }

.bi-btn--outline,
.wp-block-button.bi-btn--outline .wp-block-button__link {
	background: transparent;
	color: var(--bi-navy);
	border: 1px solid var(--bi-navy);
	padding: 14px 26px;
	font-weight: 600;
}

/* ==========================================================================
   7. Hero
   ========================================================================== */

.bi-hero {
	display: flex;
	align-items: center;
	gap: 56px;
	position: relative;
	overflow: hidden;
}

.bi-hero__text { flex: 0 0 52%; max-width: 560px; }
.bi-hero__media { flex: 1 1 auto; min-width: 0; }

.bi-hero__media img {
	width: 100%;
	height: auto;
	border-radius: var(--bi-r-panel);
	display: block;
	animation: bi-float 9s ease-in-out infinite;
}

.bi-badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--bi-navy-2);
	border: 1px solid rgba(184, 139, 88, 0.35);
	border-radius: var(--bi-r-card);
	padding: 14px 20px;
	margin-top: 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--bi-white);
}

.bi-badge::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--bi-gold);
	animation: bi-pulse 2.6s ease-in-out infinite;
}

@media (max-width: 900px) {
	.bi-hero { flex-direction: column; align-items: stretch; gap: 32px; }
	.bi-hero__text { flex: 1 1 auto; max-width: none; }
}

/* ==========================================================================
   8. Siatki i karty
   ========================================================================== */

.bi-grid { display: grid; gap: 24px; margin-top: 44px; }
.bi-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bi-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.bi-split { display: flex; gap: 56px; align-items: center; }
.bi-split > * { flex: 1 1 0; min-width: 0; }
.bi-split img { width: 100%; height: auto; border-radius: var(--bi-r-panel); display: block; }

.bi-card {
	background: var(--bi-white);
	border: 1px solid var(--bi-line);
	border-radius: var(--bi-r-panel);
	padding: 30px;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.35s ease;
}

.bi-card:hover { transform: translateY(-6px); border-color: var(--bi-gold); }

.bi-card p { margin: 0; font-size: 15px; line-height: 1.6; }
.bi-card h3 { margin: 0 0 12px; font-size: 19px; }

.bi-stage--cream .bi-card { border-color: var(--bi-line-warm); }

.bi-stage--navy .bi-card { background: var(--bi-navy-2); border-color: var(--bi-line-gold); }
.bi-stage--deep .bi-card { background: var(--bi-navy-3); border-color: var(--bi-line-gold); }

/* Numer: na jasnym tle granatowy kafelek (złoto na bieli ma 2,9:1) */
.bi-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: var(--bi-r-btn);
	background: var(--bi-navy);
	color: var(--bi-gold);
	font-family: var(--bi-display);
	font-weight: 800;
	font-size: 19px;
	margin-bottom: 16px;
}

.bi-stage--navy .bi-num,
.bi-stage--deep .bi-num { background: var(--bi-gold); color: var(--bi-navy); }

/* Chipy nisz */
.bi-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; padding: 0; list-style: none; }

.bi-chips li {
	border: 1px solid var(--bi-navy);
	border-radius: var(--bi-r-pill);
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--bi-navy);
}

@media (max-width: 1100px) {
	.bi-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bi-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 782px) {
	.bi-stage { margin: 56px 12px 0; padding: 32px 24px; border-radius: var(--bi-r-panel); }
	.bi-section { margin-top: 56px; }
	.bi-grid, .bi-grid--2, .bi-grid--3, .bi-grid--4 { grid-template-columns: 1fr; margin-top: 28px; }
	.bi-split { flex-direction: column; gap: 28px; }
	:root { --bi-gap: 56px; }
}

/* ==========================================================================
   9. FAQ
   ========================================================================== */

.bi-faq { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }

.bi-faq details {
	background: var(--bi-white);
	border: 1px solid var(--bi-line);
	border-radius: var(--bi-r-card);
	padding: 20px 24px;
}

.bi-faq summary {
	font-family: var(--bi-display);
	font-weight: 800;
	font-size: 18px;
	color: var(--bi-navy);
	cursor: pointer;
	list-style: none;
}

.bi-faq summary::-webkit-details-marker { display: none; }
.bi-faq summary::after { content: "+"; float: right; color: var(--bi-gold-ink); font-size: 22px; line-height: 1; }
.bi-faq details[open] summary::after { content: "–"; }
.bi-faq details p { margin: 14px 0 0; font-size: 15px; }

/* ==========================================================================
   10. Stopka
   ========================================================================== */

.site-footer { margin-top: var(--bi-gap); }

.site-footer .inside-site-info,
.site-info {
	background: var(--bi-deep);
	color: var(--bi-fog);
}

.site-info {
	padding: 32px 24px;
	font-size: 14px;
}

.site-info .inside-site-info {
	max-width: var(--bi-wrap);
	margin-inline: auto;
	padding: 0;
}

.site-info a { color: var(--bi-fog); }
.site-info a:hover { color: var(--bi-gold); }

/* ==========================================================================
   11. Ruch
   ========================================================================== */

@keyframes bi-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-14px); }
}

@keyframes bi-pulse {
	0%, 100% { opacity: 0.35; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.25); }
}

@keyframes bi-rise {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: translateY(0); }
}

.bi-rise { animation: bi-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.bi-rise--2 { animation-delay: 0.14s; }
.bi-rise--3 { animation-delay: 0.28s; }
.bi-rise--4 { animation-delay: 0.42s; }

@media (prefers-reduced-motion: reduce) {
	.bi-rise,
	.bi-hero__media img,
	.bi-badge::before { animation: none; }
	.bi-card:hover { transform: none; }
}

/* ==========================================================================
   12. Dostępność
   ========================================================================== */

.bi-skip:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 9999;
	background: var(--bi-navy);
	color: var(--bi-white);
	padding: 12px 18px;
	border-radius: var(--bi-r-btn);
}

:focus-visible {
	outline: 3px solid var(--bi-gold);
	outline-offset: 2px;
}

/* ==========================================================================
   13. Zgodność z opakowaniem bloku grupy
   WordPress owija dzieci grupy w .wp-block-group__inner-container,
   więc układ musi siedzieć na kontenerze wewnętrznym, nie na grupie.
   ========================================================================== */

.bi-hero,
.bi-split,
.bi-grid { display: block; }

.bi-hero > .wp-block-group__inner-container,
.bi-split > .wp-block-group__inner-container {
	display: flex;
	gap: 56px;
	align-items: center;
}

.bi-hero > .wp-block-group__inner-container > .bi-hero__text {
	flex: 0 0 52%;
	max-width: 560px;
}

.bi-hero > .wp-block-group__inner-container > .bi-hero__media {
	flex: 1 1 auto;
	min-width: 0;
}

.bi-split > .wp-block-group__inner-container > * {
	flex: 1 1 0;
	min-width: 0;
}

.bi-grid > .wp-block-group__inner-container {
	display: grid;
	gap: 24px;
	margin-top: 44px;
}

.bi-grid--2 > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bi-grid--3 > .wp-block-group__inner-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bi-grid--4 > .wp-block-group__inner-container { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.bi-grid > .wp-block-group__inner-container > * { margin: 0; }

/* Kontener wewnętrzny grupy dostaje domyślny padding — na tych stronach zbędny */
.bi-page .wp-block-group__inner-container { padding: 0; }

/* GeneratePress renderuje tytuł witryny jako .main-title, nie .site-title */
.main-title,
.main-title a {
	font-family: var(--bi-display);
	font-weight: 800;
	font-size: 17px;
	line-height: 1.12;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--bi-navy);
	margin: 0;
}

.main-title a {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 280px;
}

.main-title a::before {
	content: "";
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Crect width='34' height='34' rx='10' fill='%230b1026'/%3E%3Ccircle cx='17' cy='13' r='4.5' fill='none' stroke='%23b88b58' stroke-width='2'/%3E%3Cpath d='M8.5 25.5c1.8-4 5-6 8.5-6s6.7 2 8.5 6' fill='none' stroke='%23b88b58' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

/* Linki w treści muszą być rozpoznawalne bez polegania na samym kolorze
   (WCAG 1.4.1). Na ciemnych scenach granatowy link był dodatkowo
   niewidoczny na granatowym tle — tam kolorem linku jest złoto. */
.entry-content a:not(.wp-block-button__link) {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.bi-stage--navy a:not(.wp-block-button__link),
.bi-stage--deep a:not(.wp-block-button__link) {
	color: var(--bi-gold);
}

.bi-stage--navy a:not(.wp-block-button__link):hover,
.bi-stage--deep a:not(.wp-block-button__link):hover {
	color: #d7b78d;
}

/* Grafiki na ciemnych scenach mają granatowe tło i zlewają się z nimi —
   włosowa złota krawędź je odcina, bez sięgania po cień */
.bi-stage--navy .wp-block-image img,
.bi-stage--deep .wp-block-image img {
	border: 1px solid var(--bi-line-gold);
}

/* Etykiety w nawigacji zostają w jednej linii */
.main-navigation .main-nav ul li a { white-space: nowrap; }

@media (max-width: 1100px) {
	.main-navigation .main-nav ul li a { white-space: normal; }
}

/* Numer sekcji: reguła .bi-card p (0,1,1) przebijała .bi-num (0,1,0),
   przez co kafel gubił rozmiar cyfr i dolny odstęp. Podnosimy specyficzność. */
p.bi-num,
.bi-card p.bi-num,
.bi-stage p.bi-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	min-width: 46px;
	box-sizing: border-box;
	flex-shrink: 0;
	margin: 0 0 18px;
	border-radius: var(--bi-r-btn);
	background: var(--bi-navy);
	color: var(--bi-gold);
	font-family: var(--bi-display);
	font-weight: 800;
	font-size: 19px;
	line-height: 1;
	letter-spacing: -0.01em;
}

.bi-stage--navy .bi-card p.bi-num,
.bi-stage--deep .bi-card p.bi-num {
	background: var(--bi-gold);
	color: var(--bi-navy);
}

/* Nagłówek karty nie może się kleić do numeru ani do treści */
.bi-card h3.bi-h3 { margin: 0 0 12px; font-size: 19px; line-height: 1.25; }

/* Nagłówki nie mogą być łamane w środku wyrazu */
.bi-display,
.bi-h2,
.bi-h3 { overflow-wrap: normal; }

/* Opakowanie przycisku blokowego nie może nosić stylu samego przycisku */
.wp-block-button.bi-btn,
.wp-block-button.bi-btn--gold,
.wp-block-button.bi-btn--light,
.wp-block-button.bi-btn--outline {
	background: none;
	padding: 0;
	border: none;
	border-radius: 0;
}

.bi-card > .wp-block-group__inner-container > *:last-child { margin-bottom: 0; }

@media (max-width: 1100px) {
	.bi-grid--4 > .wp-block-group__inner-container,
	.bi-grid--3 > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.bi-hero > .wp-block-group__inner-container {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}

	.bi-hero > .wp-block-group__inner-container > .bi-hero__text {
		flex: 1 1 auto;
		max-width: none;
	}
}

@media (max-width: 782px) {
	.bi-grid > .wp-block-group__inner-container,
	.bi-grid--2 > .wp-block-group__inner-container,
	.bi-grid--3 > .wp-block-group__inner-container,
	.bi-grid--4 > .wp-block-group__inner-container { grid-template-columns: 1fr; margin-top: 28px; }

	.bi-split > .wp-block-group__inner-container { flex-direction: column; gap: 28px; }
}