/*
 * Style bloku "Hero sfery".
 * Zakres wyłącznie: .wp-block-gg-konsulting-theme-hero-sfery
 * Kolor akcentu (--gg-accent) pochodzi automatycznie ze sfery strony
 * (inc/sphere.php) - blok go tylko czyta, nigdy sam nie wybiera.
 *
 * Układ: zdjęcie wypełnia lewą połowę do samej krawędzi ekranu
 * (bez marginesu i bez zaokrągleń), tekst po prawej.
 */

.wp-block-gg-konsulting-theme-hero-sfery {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	align-items: stretch;
	background-color: var( --wp--preset--color--base );
	overflow: hidden;

	/*
	 * Hero ZAWSZE zajmuje 100% szerokości okna - zdjęcie jest tłem całej
	 * sekcji i musi sięgać obu krawędzi ekranu.
	 *
	 * !important jest tu konieczne: układ "constrained" WordPressa
	 * (theme.json -> layout.contentSize) narzuca na każdy blok
	 * "margin-left: auto !important" i "margin-right: auto !important",
	 * czego nie da się nadpisać samą specyficznością selektora.
	 * Bez tego sekcja zostaje wyśrodkowana i zwężona do contentSize.
	 */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw ) !important;
	margin-right: calc( 50% - 50vw ) !important;
}


/*
 * Zdjęcie jako TŁO całej sekcji - wypełnia ją w całości i leży pod
 * tekstem. Użyty jest prawdziwy <img> (a nie background-image w stylu
 * inline), bo render.php nie może zawierać stylów inline, a <img>
 * jest przy okazji lepszy dla wydajności i dostępności.
 */
.wp-block-gg-konsulting-theme-hero-sfery .hero-sfery__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.wp-block-gg-konsulting-theme-hero-sfery .hero-sfery__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Laptopy i mniejsze monitory (13"-24"). */
@media ( min-width: 782px ) {
	.wp-block-gg-konsulting-theme-hero-sfery {
		--hero-h: 85vh;
		min-height: calc( var( --hero-h ) * var( --hero-zoom, 1 ) );
	}
}

/* Monitory 24"-27" (QHD, ok. 1440-2559px). */
@media ( min-width: 1440px ) {
	.wp-block-gg-konsulting-theme-hero-sfery {
		--hero-h: 90vh;
	}
	
	.wp-block-gg-konsulting-theme-hero-sfery .hero-sfery__media img {
		object-position: 50% 20%;
	}
}

/* Monitory 27" (2560px) - wysokość 90vh + inne kadrowanie zdjęcia. */
@media ( min-width: 2560px ) {
	.wp-block-gg-konsulting-theme-hero-sfery {
		--hero-h: 90vh;
	}

	.wp-block-gg-konsulting-theme-hero-sfery .hero-sfery__media img {
		object-position: 50% 20%;
	}
}

/* Monitory 4K (3840px i szersze). */
@media ( min-width: 3840px ) {
	.wp-block-gg-konsulting-theme-hero-sfery {
		--hero-h: 80vh;
	}
}

/*
 * Tekst nad zdjęciem. Na desktopie zajmuje PRAWĄ połowę sekcji
 * (lewa zostaje na sylwetkę ze zdjęcia), na mobile - całą szerokość.
 */
.wp-block-gg-konsulting-theme-hero-sfery .hero-sfery__text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 320px;
	padding-block: var( --wp--preset--spacing--xl );
	padding-inline: clamp( 1.5rem, 4vw, 3.5rem );
}

@media ( min-width: 782px ) {
	.wp-block-gg-konsulting-theme-hero-sfery .hero-sfery__text {
		width: 50%;
		margin-left: auto;
		padding-left: 0;
		/* Prawy margines wyrównany do siatki treści (max 1400px). */
		padding-right: max( 2rem, calc( ( 100vw - 1400px ) / 2 ) );
		/*
		 * Sekcja "Karty usług" podnosi się na hero o --gg-karty-overlap
		 * (patrz global.css). Ten pas jest dla treści hero martwy - karty
		 * mają wyższy z-index i zasłaniają wszystko, co w niego wejdzie.
		 * Rezerwujemy go, żeby przyciski nigdy tam nie trafiły. Tekst jest
		 * centrowany w pionie, więc rezerwa przesuwa go w górę, a nie
		 * wydłuża sekcji.
		 */
		padding-bottom: calc( var( --wp--preset--spacing--xl ) + var( --gg-karty-overlap, 120px ) );
	}
}

.wp-block-gg-konsulting-theme-hero-sfery .hero-sfery__kicker {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	font-family: var( --wp--preset--font-family--raleway );
	/* 18px na desktopie, płynnie mniej na węższych ekranach. */
	font-size: clamp( 14px, 1.4vw, 18px );
	font-weight: 700;
	color: var( --wp--preset--color--primary );
	margin-top: 0;
	margin-bottom: 0.75rem;
}

.wp-block-gg-konsulting-theme-hero-sfery .hero-sfery__kicker-item {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
}

/* Ukośniki oddzielające - własny kolor, niezależny od tekstu etykiet. */
.wp-block-gg-konsulting-theme-hero-sfery .hero-sfery__kicker-sep {
	color: #a67c52;
}

.wp-block-gg-konsulting-theme-hero-sfery h1 {
	font-size: clamp( 2.25rem, 3.6vw, 3.5rem );
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--primary );
	/* Zerujemy domyślny górny margines h1 (0.67em = ~37px przy tym rozmiarze). */
	margin-top: 0;
	margin-bottom: var( --wp--preset--spacing--md );
}

/* Środkowa część nagłówka - w kolorze akcentu bieżącej sfery. */
.wp-block-gg-konsulting-theme-hero-sfery .hero-sfery__heading-accent {
	color: var( --gg-accent );
}

.wp-block-gg-konsulting-theme-hero-sfery .hero-sfery__subtitle {
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 500;
	line-height: 1.6;
	max-width: 52ch;
	margin-bottom: var( --wp--preset--spacing--md );
}

.wp-block-gg-konsulting-theme-hero-sfery .hero-sfery__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--sm );
}

.wp-block-gg-konsulting-theme-hero-sfery .hero-sfery__cta {
	display: inline-block;
	padding: 0.9rem 2rem;
	border-radius: 10px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.4;
}

/* Główne CTA - ciemne, mocne. */
.wp-block-gg-konsulting-theme-hero-sfery .hero-sfery__cta--primary {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
	transition: 0.3s;
}

.wp-block-gg-konsulting-theme-hero-sfery .hero-sfery__cta--primary:hover {
	background-color: #492D63;
}

/* Drugie CTA - w kolorze akcentu sfery, jasny tekst. */
.wp-block-gg-konsulting-theme-hero-sfery .hero-sfery__cta--secondary {
	background-color: var( --gg-accent );
	color: var( --wp--preset--color--base );
	transition: 0.3s
}

.wp-block-gg-konsulting-theme-hero-sfery .hero-sfery__cta--secondary:hover {
	background-color: #b17dd3;
}

/*
 * MOBILE (< 782px)
 * Tekst leży wtedy na całym zdjęciu, a nie obok sylwetki, więc
 * przyciemniamy tło pod tekstem - inaczej nagłówek bywa nieczytelny
 * na jasnych fragmentach fotografii. Przyciski dostają pełną szerokość,
 * żeby były wygodne do kliknięcia kciukiem.
 */
@media ( max-width: 781px ) {
	.wp-block-gg-konsulting-theme-hero-sfery .hero-sfery__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background-color: rgba( 245, 239, 230, 0.82 );
	}

	.wp-block-gg-konsulting-theme-hero-sfery .hero-sfery__text {
		padding-block: var( --wp--preset--spacing--lg );
	}

	.wp-block-gg-konsulting-theme-hero-sfery .hero-sfery__ctas {
		flex-direction: column;
		align-items: stretch;
	}

	.wp-block-gg-konsulting-theme-hero-sfery .hero-sfery__cta {
		text-align: center;
	}
}

/*
 * KADR ZDJĘCIA - suwak "Oddalenie zdjęcia" w panelu bloku.
 *
 * Zdjęcie jest ustawione na "object-fit: cover", więc jego skala wynika
 * z ROZMIARU obszaru, który wypełnia - nie da się go pomniejszyć samym
 * transformem (przeskalowanie kontenera i zdjęcia wzajemnie się znoszą).
 * Żeby postać zmalała, musi zmaleć cały obszar zdjęcia: zwężamy go od
 * prawej I proporcjonalnie obniżamy sekcję o ten sam współczynnik.
 * Proporcje obszaru zostają wtedy takie same jak przy 100%, czyli
 * kadrowanie się nie zmienia - całość jest po prostu mniejsza.
 *
 * Odsłonięty pas po prawej zostaje kremowy (i tak leży pod kolumną
 * z tekstem), a krawędź zdjęcia wygaszamy gradientem, żeby nie było
 * widać pionowego szwu. Kolor #f5efe6 to preset "base" z theme.json -
 * wpisany wprost, bo gradient potrzebuje wariantu z przezroczystością
 * (rgba), którego preset nie udostępnia.
 *
 * Klasy generuje render.php: hero-sfery--zoomed + hero-sfery--zoom-{70..95}.
 * Zmienna --hero-zoom wchodzi też do min-height sekcji (wyżej).
 */
@media ( min-width: 782px ) {
	.wp-block-gg-konsulting-theme-hero-sfery.hero-sfery--zoomed .hero-sfery__media {
		inset: auto auto 0 0;
		width: calc( var( --hero-zoom, 1 ) * 100% );
		height: calc( var( --hero-zoom, 1 ) * 100% );
	}

	/*
	 * Wygaszenie krawędzi zdjęcia: w prawo (pas obok sylwetki) i w górę
	 * (pas nad zdjęciem). Bez tego widać ostry szew między fotografią
	 * a kremowym tłem sekcji.
	 */
	.wp-block-gg-konsulting-theme-hero-sfery.hero-sfery--zoomed .hero-sfery__media::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background-image:
			linear-gradient(
				to right,
				rgba( 245, 239, 230, 0 ) 52%,
				rgba( 245, 239, 230, 0.7 ) 84%,
				rgba( 245, 239, 230, 1 ) 100%
			),
			linear-gradient(
				to bottom,
				rgba( 245, 239, 230, 1 ) 0%,
				rgba( 245, 239, 230, 0 ) 22%
			);
	}
}

.wp-block-gg-konsulting-theme-hero-sfery.hero-sfery--zoom-95 { --hero-zoom: 0.95; }
.wp-block-gg-konsulting-theme-hero-sfery.hero-sfery--zoom-90 { --hero-zoom: 0.9; }
.wp-block-gg-konsulting-theme-hero-sfery.hero-sfery--zoom-85 { --hero-zoom: 0.85; }
.wp-block-gg-konsulting-theme-hero-sfery.hero-sfery--zoom-80 { --hero-zoom: 0.8; }
.wp-block-gg-konsulting-theme-hero-sfery.hero-sfery--zoom-75 { --hero-zoom: 0.75; }
.wp-block-gg-konsulting-theme-hero-sfery.hero-sfery--zoom-70 { --hero-zoom: 0.7; }