/*
 * Media i treść (`flexisnap/media-text`): układ odmian z makiety
 * (`media-text--split`, `--even`). Arkusz bloku ustawia kolumny, wyrównanie
 * i `__body` wagą klasy, więc klucz `css` w styles/*.json ich nie przebije.
 */

/* Równe kolumny: od 64rem zdjęcie obok treści, obie kolumny kończą się na tej
   samej wysokości, a wyznacza ją kolumna z treścią. Zdjęcie wychodzi
   z przepływu i jest kadrowane do tej wysokości (`object-fit`), więc podmiana
   pliku niczego nie rusza. Niżej zdjęcie nad treścią, z dolną granicą
   wysokości. */
.wp-block-flexisnap-media-text:is(.is-style-media-rowne-kolumny, .is-style-media-obok-tytulu, .is-style-media-rowne-kolumny-sekcje) {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--8);
	align-items: normal;
}

.wp-block-flexisnap-media-text:is(.is-style-media-rowne-kolumny, .is-style-media-obok-tytulu, .is-style-media-rowne-kolumny-sekcje) .flexisnap-media-text__media {
	display: grid;
	min-block-size: clamp(15rem, 25vw, 30rem);
	border-radius: var(--wp--preset--border-radius--karta);
}

.wp-block-flexisnap-media-text:is(.is-style-media-rowne-kolumny, .is-style-media-obok-tytulu, .is-style-media-rowne-kolumny-sekcje) .flexisnap-media-text__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--6);
	min-inline-size: 0;
}

.wp-block-flexisnap-media-text:is(.is-style-media-rowne-kolumny, .is-style-media-obok-tytulu, .is-style-media-rowne-kolumny-sekcje) .flexisnap-media-text__body > * {
	margin: 0;
}

/* Siatka kart w kolumnie treści zajmuje całą jej szerokość. */
.wp-block-flexisnap-media-text:is(.is-style-media-rowne-kolumny, .is-style-media-obok-tytulu, .is-style-media-rowne-kolumny-sekcje) .flexisnap-media-text__body > .wp-block-flexisnap-card-grid {
	align-self: stretch;
}

@media (min-width: 64rem) {

	.wp-block-flexisnap-media-text:is(.is-style-media-rowne-kolumny, .is-style-media-obok-tytulu, .is-style-media-rowne-kolumny-sekcje) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: stretch;
	}

	.wp-block-flexisnap-media-text:is(.is-style-media-rowne-kolumny, .is-style-media-obok-tytulu, .is-style-media-rowne-kolumny-sekcje) .flexisnap-media-text__media {
		position: relative;
		min-block-size: 0;
		aspect-ratio: auto;
	}

	.wp-block-flexisnap-media-text:is(.is-style-media-rowne-kolumny, .is-style-media-obok-tytulu, .is-style-media-rowne-kolumny-sekcje) .flexisnap-media-text__media img {
		position: absolute;
		inset: 0;
	}
}

/* Zdjęcie obok treści (makieta `media-text--split --middle`): od 64rem dwie
   kolumny wyrównane do środka, niżej zdjęcie nad treścią. Kadr ma dolną
   granicę wysokości i wypełnia ją przez `object-fit`. Akapity jeden po drugim
   stoją w rytmie 16 px (makieta `__body--prose`), reszta treści co 32 px.
   Odmiana „luźne akapity” (makieta bez `__body--prose`, Mission & Values):
   akapity w rytmie reszty treści, 24 px. */
.wp-block-flexisnap-media-text:is(.is-style-media-obok-tekstu, .is-style-media-obok-tekstu-luzno, .is-style-media-packshot) {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--8);
	align-items: start;
}

.wp-block-flexisnap-media-text:is(.is-style-media-obok-tekstu, .is-style-media-obok-tekstu-luzno, .is-style-media-packshot) .flexisnap-media-text__media {
	display: grid;
	min-block-size: clamp(15rem, 25vw, 30rem);
	border-radius: var(--wp--preset--border-radius--karta);
}

.wp-block-flexisnap-media-text:is(.is-style-media-obok-tekstu, .is-style-media-obok-tekstu-luzno, .is-style-media-packshot) .flexisnap-media-text__media :is(img, video) {
	block-size: 100%;
	object-fit: cover;
}

.wp-block-flexisnap-media-text:is(.is-style-media-obok-tekstu, .is-style-media-obok-tekstu-luzno, .is-style-media-packshot) .flexisnap-media-text__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--6);
	min-inline-size: 0;
}

.wp-block-flexisnap-media-text:is(.is-style-media-obok-tekstu, .is-style-media-obok-tekstu-luzno, .is-style-media-packshot) .flexisnap-media-text__body > * {
	margin: 0;
}

.wp-block-flexisnap-media-text:is(.is-style-media-obok-tekstu, .is-style-media-packshot) .flexisnap-media-text__body > p + p {
	margin-block-start: calc(var(--wp--preset--spacing--4) - var(--wp--preset--spacing--6));
}

/* Nagłówek sekcji w kolumnie treści (strony produktów: „Description”,
   „How it works”): pod nim odstęp sekcji, jak pod nagłówkiem na całą
   szerokość, a nie odstęp kolumny. Reguła waży cztery klasy, więc wygrywa
   z rytmem akapitów wyżej. */
.wp-block-flexisnap-media-text:is(.is-style-media-obok-tekstu, .is-style-media-obok-tekstu-luzno, .is-style-media-packshot) .flexisnap-media-text__body > .wp-block-flexisnap-section-header + * {
	margin-block-start: calc(var(--wp--preset--spacing--sekcja) - var(--wp--preset--spacing--6));
}

@media (min-width: 64rem) {

	.wp-block-flexisnap-media-text:is(.is-style-media-obok-tekstu, .is-style-media-obok-tekstu-luzno, .is-style-media-packshot) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
	}
}

/* Packshot na szarym panelu (strony produktów w Figmie, sekcja
   „Description”): układ i rytm akapitów jak „Zdjęcie obok treści”, ale
   zdjęcie produktu z przezroczystym tłem stoi na szarym panelu w całości
   (`contain`), zamiast wypełniać kadr. Podmiana packshotu nie wymaga więc
   składania tła w pliku. Panel ma proporcję z projektu (832:480) na każdej
   szerokości, a zdjęcie jest wyjęte z przepływu, więc jego własna proporcja
   nie zmienia wysokości panelu. */
.wp-block-flexisnap-media-text.is-style-media-packshot .flexisnap-media-text__media {
	position: relative;
	aspect-ratio: 832 / 480;
	min-block-size: 0;
	background-color: var(--wp--preset--color--tlo-wtorne);
}

.wp-block-flexisnap-media-text.is-style-media-packshot .flexisnap-media-text__media :is(img, video) {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

/* Nagłówek obok treści (makieta: `media-text--split` bez zdjęcia, nagłówek
   sekcji w pierwszej kolumnie, siatka kart w drugiej). Blok bez medium
   drukuje sam `__body`, więc kolumny układa `__body`. Pasek marki
   nagłówka znika, tak jak w makiecie. */
.wp-block-flexisnap-media-text.is-style-media-naglowek-obok {
	grid-template-columns: minmax(0, 1fr);
}

.wp-block-flexisnap-media-text.is-style-media-naglowek-obok .flexisnap-media-text__body {
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	align-items: start;
	gap: var(--wp--preset--spacing--8);
	min-inline-size: 0;
}

.wp-block-flexisnap-media-text.is-style-media-naglowek-obok .flexisnap-media-text__body > * {
	margin: 0;
}

.wp-block-flexisnap-media-text.is-style-media-naglowek-obok .wp-block-flexisnap-section-header::before {
	content: none;
}

@media (min-width: 64rem) {

	.wp-block-flexisnap-media-text.is-style-media-naglowek-obok .flexisnap-media-text__body {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* Szerokie zdjęcie obok treści (makieta `media-text--wide-media`): od 64rem
   kolumny 40 i 60 procent, wyrównane do środka; niżej treść nad zdjęciem.
   Kadr ma proporcję z projektu (994:620) na każdej szerokości. Akapity stoją
   jeden pod drugim bez odstępu, tak jak w makiecie. */
.wp-block-flexisnap-media-text.is-style-media-szerokie-zdjecie {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--8);
	align-items: normal;
}

.wp-block-flexisnap-media-text.is-style-media-szerokie-zdjecie .flexisnap-media-text__media {
	display: grid;
	aspect-ratio: 994 / 620;
	border-radius: var(--wp--preset--border-radius--karta);
}

.wp-block-flexisnap-media-text.is-style-media-szerokie-zdjecie .flexisnap-media-text__media :is(img, video) {
	block-size: 100%;
	object-fit: cover;
}

.wp-block-flexisnap-media-text.is-style-media-szerokie-zdjecie .flexisnap-media-text__body {
	min-inline-size: 0;
}

.wp-block-flexisnap-media-text.is-style-media-szerokie-zdjecie .flexisnap-media-text__body > * {
	margin: 0;
}

@media (min-width: 64rem) {

	.wp-block-flexisnap-media-text.is-style-media-szerokie-zdjecie {
		grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
		align-items: center;
	}
}

/* Zdjęcie obok tytułu i treści (makieta `--split --even` z kolumną
   `__body--titled` i kadrem `__figure--wide`): jak równe kolumny, ale kolumna
   niesie własny tytuł sekcji, więc od tytułu do treści jest odstęp sekcji,
   a poniżej 64rem kadr ma proporcję z projektu (832:451) zamiast dolnej
   granicy wysokości. */
.wp-block-flexisnap-media-text.is-style-media-obok-tytulu .flexisnap-media-text__body {
	gap: var(--wp--preset--spacing--sekcja);
}

@media (width < 64rem) {

	.wp-block-flexisnap-media-text.is-style-media-obok-tytulu .flexisnap-media-text__media {
		min-block-size: 0;
		aspect-ratio: 832 / 451;
	}
}

/* Równe kolumny, bloki co sekcję (makieta `__body--sectioned`, Career): lista
   i domknięcie z przyciskiem dzielą odstęp sekcji, nie odstęp akapitów. */
.wp-block-flexisnap-media-text.is-style-media-rowne-kolumny-sekcje .flexisnap-media-text__body {
	gap: var(--wp--preset--spacing--sekcja);
}

/* Zapowiedź na granacie (makieta `.flexisnap-promo`, Resources): płyta
   z tekstem u góry i przyciskiem u dołu, zdjęcie produktu przy prawej
   krawędzi, wyższe od płyty i przycięte nią, pod tekstem. Zdjęcie pojawia się
   od 64rem, niżej tekst nie miałby obok niego miejsca (`display: none`, więc
   leniwe ładowanie go nie pobiera). Punkt zaczepienia: środek płyty
   przesunięty w górę o jej wcięcie. */
.wp-block-flexisnap-media-text.is-style-media-zapowiedz {
	--implai-zapowiedz: clamp(var(--wp--preset--spacing--6), 2.5vw, var(--wp--preset--spacing--7));

	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	box-sizing: border-box;
	min-block-size: clamp(14rem, 17.92vw, 21.5rem);
	padding: var(--implai-zapowiedz);
	border-radius: var(--wp--preset--border-radius--karta);
	overflow: hidden;
}

.wp-block-flexisnap-media-text.is-style-media-zapowiedz .flexisnap-media-text__media {
	display: none;
	position: absolute;
	inset-block-start: calc(50% - var(--implai-zapowiedz));
	inset-inline-end: 0;
	z-index: -1;
	inline-size: 53.7%;
	margin: 0;
	overflow: visible;
	translate: 0 -50%;
}

.wp-block-flexisnap-media-text.is-style-media-zapowiedz .flexisnap-media-text__media img {
	block-size: auto;
}

.wp-block-flexisnap-media-text.is-style-media-zapowiedz .flexisnap-media-text__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--sekcja);
}

.wp-block-flexisnap-media-text.is-style-media-zapowiedz .flexisnap-media-text__body > * {
	margin: 0;
}

@media (min-width: 64rem) {

	.wp-block-flexisnap-media-text.is-style-media-zapowiedz .flexisnap-media-text__media {
		display: block;
	}

	/* Tusz zdjęcia zaczyna się na 76 procentach szerokości płyty (lewa część
	   pliku jest przezroczysta), więc tekst kończy się przed nim. */
	.wp-block-flexisnap-media-text.is-style-media-zapowiedz .flexisnap-media-text__body > :first-child {
		max-inline-size: 75%;
	}
}