/*
 * S.O.S. Consult - globalne styly temy.
 * Styly jednotlivych blokov su v /blocks/<blok>/style.css.
 */

/* ------------------------------------------------------------------ */
/* Zaklad                                                              */
/* ------------------------------------------------------------------ */

:where(img) {
	max-width: 100%;
	height: auto;
}

/*
 * Formularove prvky pocitaju sirku aj s odsadenim a ramom. Bez toho pole
 * so sirkou 100 % prerastie svoj stlpec o velkost odsadenia a prekryje
 * susedne pole.
 */
input,
textarea,
select {
	box-sizing: border-box;
}

:where(.wp-site-blocks *:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 3px;
	border-radius: 2px;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ------------------------------------------------------------------ */
/* Sekcie a rytmus stranky                                             */
/* ------------------------------------------------------------------ */

.sos-sekcia {
	position: relative;
}

/*
 * Tmave sekcie dostavaju jemnu zrnitost - bez nej posobia ploche.
 * Sum je inline SVG, takze nepotrebuje dalsi subor.
 */
.sos-sekcia--tmava::after,
.sos-hero::after {
	z-index: 1;
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.35;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E" );
}

.sos-sekcia--tmava > *,
.sos-hero > * {
	position: relative;
	z-index: 1;
}

.sos-sekcia--tmava {
	--wp--preset--color--accent-4: rgba(255, 255, 255, 0.66);
	--wp--preset--color--accent-5: rgba(255, 255, 255, 0.14);
}

.sos-hlavicka-sekcie {
	max-width: 42rem;
}

/* ------------------------------------------------------------------ */
/* Hlavicka                                                            */
/* ------------------------------------------------------------------ */

/*
 * Hlavicka je tmava zamerne: logo je navrhnute na cierny podklad, na svetlom
 * by tmave vnutro pismen posobilo ako chyba.
 */
.sos-hlavicka {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid rgba(201, 161, 75, 0.22);
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 92%, transparent);
	transition: box-shadow var(--wp--custom--prechod), background-color var(--wp--custom--prechod);
}

/*
 * Logo drzime na vysku, nie na sirku. Pri sirke v percentach rastie lepiaca
 * hlavicka na velkych obrazovkach az na 130 px.
 */
.sos-hlavicka .wp-block-site-logo img {
	width: auto;
	height: clamp(42px, 4.4vw, 56px);
	max-width: none;
	display: block;
}

.sos-hlavicka .wp-block-site-title a {
	color: #fff;
}

/*
 * Rozmazanie pozadia je na pseudoprvku zamerne. Keby bol backdrop-filter priamo
 * na hlavicke, vytvoril by novy containing block a prekryvne mobilne menu
 * (position: fixed) by sa zmestilo len do vysky hlavicky.
 */
.sos-hlavicka::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	backdrop-filter: blur(14px) saturate(140%);
	pointer-events: none;
}

.sos-hlavicka.je-odrolovana {
	box-shadow: 0 1px 0 var(--wp--preset--color--accent-5), 0 12px 32px -24px rgba(10, 13, 11, 0.55);
}

.sos-hlavicka .wp-block-navigation {
	gap: clamp(1.25rem, 2.2vw, 2.25rem);
}

.sos-hlavicka .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35rem;
}

.sos-hlavicka .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 2px;
	background-color: var(--wp--preset--color--accent-1);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--wp--custom--prechod);
}

.sos-hlavicka .wp-block-navigation-item__content:hover::after,
.sos-hlavicka .wp-block-navigation-item.je-aktivna .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.sos-hlavicka .wp-block-navigation-item.je-aktivna .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-1);
}

/* Prekryvne menu na mobile */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--contrast);
	color: #fff;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	justify-content: center;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	letter-spacing: -0.03em;
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

.sos-hero {
	overflow: hidden;
}

/*
 * Prechod nad fotkou. Samotne stmavenie z bloku Cover je rovnomerne, text v
 * spodnej casti preto potrebuje silnejsi podklad.
 */
.sos-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(10, 13, 11, 0.4) 0%,
		rgba(10, 13, 11, 0.12) 35%,
		rgba(10, 13, 11, 0.78) 100%
	);
}

/*
 * Vyssia specificita nez rozvrhnutie bloku Cover - inak by obsah zostal
 * obmedzeny na sirku textoveho stlpca a prilepeny k lavemu okraju.
 */
.wp-block-cover.sos-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.sos-hero .wp-block-cover__image-background {
	transform: scale(1.06);
	animation: sos-hero-zoom 18s ease-out forwards;
}

@keyframes sos-hero-zoom {
	to {
		transform: scale(1);
	}
}

.sos-hero__obsah {
	max-width: 56rem;
}

.sos-hero__nadpis {
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(10, 13, 11, 0.5);
}

.sos-hero__popis {
	max-width: 40rem;
	color: rgba(255, 255, 255, 0.88);
	text-shadow: 0 1px 12px rgba(10, 13, 11, 0.55);
}

/* ------------------------------------------------------------------ */
/* Pasik so sluzbami pod hero                                          */
/* ------------------------------------------------------------------ */

.sos-pasik__polozka {
	position: relative;
	height: 100%;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border: 1px solid rgba(201, 161, 75, 0.18);
	border-radius: var(--wp--custom--radius--large);
	background-color: rgba(255, 255, 255, 0.025);
	overflow: hidden;
	transition: transform var(--wp--custom--prechod), background-color var(--wp--custom--prechod),
		border-color var(--wp--custom--prechod);
}

/* Zlaty pruh vlavo, ktory pri prejdeni narastie. */
.sos-pasik__polozka::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 3px;
	background: linear-gradient( to bottom, var(--wp--preset--color--accent-6), var(--wp--preset--color--accent-1) );
	transform: scaleY(0.28);
	transform-origin: top;
	transition: transform var(--wp--custom--prechod);
}

.sos-pasik__polozka:hover,
.sos-pasik__polozka:focus-within {
	transform: translateY(-4px);
	background-color: rgba(255, 255, 255, 0.06);
	border-color: rgba(201, 161, 75, 0.45);
}

.sos-pasik__polozka:hover::before,
.sos-pasik__polozka:focus-within::before {
	transform: scaleY(1);
}

.sos-pasik__cislo {
	margin: 0;
	color: var(--wp--preset--color--accent-6);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.18em;
}

.sos-pasik__polozka h2 {
	margin: 0;
}

.sos-pasik__popis {
	margin: 0;
	max-width: 26rem;
	color: rgba(255, 255, 255, 0.66);
}

.sos-pasik__odkaz {
	margin: 0.35rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.sos-pasik__odkaz a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--wp--preset--color--accent-6);
	text-decoration: none;
	transition: color var(--wp--custom--prechod), gap var(--wp--custom--prechod);
}

.sos-pasik__odkaz a::after {
	content: "\2192";
	transition: transform var(--wp--custom--prechod);
}

/*
 * Odkaz roztiahnuty cez celu polozku - klikatelna je cela karta, ale
 * v HTML zostava jediny zmysluplny odkaz kvoli citackam obrazovky.
 */
.sos-pasik__odkaz a::before {
	content: "";
	position: absolute;
	inset: 0;
}

.sos-pasik__polozka:hover .sos-pasik__odkaz a {
	color: #fff;
}

.sos-pasik__polozka:hover .sos-pasik__odkaz a::after {
	transform: translateX(5px);
}

/* ------------------------------------------------------------------ */
/* Styl bloku: nadradeny popisok (eyebrow)                             */
/* ------------------------------------------------------------------ */

.is-style-sos-eyebrow {
	/* Blokovy prvok (nie inline-flex) - inak ho rozvrhnutie WordPressu
	   nezarovna rovnako ako nadpisy a podpisok vyskoci mimo stlpca. */
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1rem;
	color: var(--wp--preset--color--accent-6);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.is-style-sos-eyebrow::before {
	content: "";
	width: 2rem;
	height: 2px;
	flex-shrink: 0;
	background-color: currentColor;
}

/* ------------------------------------------------------------------ */
/* Styl bloku: karta                                                   */
/* ------------------------------------------------------------------ */

.wp-block-group.is-style-sos-karta {
	position: relative;
	height: 100%;
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--accent-5);
	border-radius: var(--wp--custom--radius--large);
	background-color: var(--wp--preset--color--base);
	overflow: hidden;
	transition: transform var(--wp--custom--prechod), box-shadow var(--wp--custom--prechod),
		border-color var(--wp--custom--prechod);
}

.wp-block-group.is-style-sos-karta::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	height: 3px;
	background: linear-gradient( 90deg, var(--wp--preset--color--accent-1), var(--wp--preset--color--accent-6) 55%, transparent );
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--wp--custom--prechod);
}

.wp-block-group.is-style-sos-karta:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 40%, transparent);
	box-shadow: var(--wp--custom--shadow--lift);
}

.wp-block-group.is-style-sos-karta:hover::before {
	transform: scaleX(1);
}

.wp-block-group.is-style-sos-karta h3 {
	margin-top: 0;
}

.sos-karta__popis {
	color: var(--wp--preset--color--accent-4);
}

/*
 * Karta s poradovym cislom.
 * Cislo je v triede, nie vo vlastnom data-atribute - blok Group taky atribut
 * pri ukladani nezachova a editor by kartu oznacil ako poskodenu.
 */
.sos-karta--01::after { content: "01"; }
.sos-karta--02::after { content: "02"; }
.sos-karta--03::after { content: "03"; }

/* Nadpis nesmie zabiehat pod poradove cislo v rohu karty. */
.sos-karta--cislo h3 {
	padding-inline-end: 3.5rem;
}

.sos-karta--cislo::after {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--40);
	inset-inline-end: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--accent-6);
	font-size: 3.25rem;
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 1;
	opacity: 0.45;
	pointer-events: none;
}

/* Karty v tmavej sekcii */
.sos-sekcia--tmava .wp-block-group.is-style-sos-karta {
	background-color: rgba(255, 255, 255, 0.045);
	border-color: rgba(255, 255, 255, 0.12);
}

.sos-sekcia--tmava .wp-block-group.is-style-sos-karta:hover {
	background-color: rgba(255, 255, 255, 0.07);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 55%, transparent);
	box-shadow: none;
}

.sos-sekcia--tmava .sos-karta__popis {
	color: rgba(255, 255, 255, 0.66);
}

/* ------------------------------------------------------------------ */
/* Styl bloku: zoznam s odrazkou v tvare fajky                         */
/* ------------------------------------------------------------------ */

ul.is-style-sos-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}

ul.is-style-sos-checklist li {
	position: relative;
	padding-inline-start: 1.9rem;
}

ul.is-style-sos-checklist li::before {
	content: "";
	position: absolute;
	inset-block-start: 0.3em;
	inset-inline-start: 0;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 16%, transparent);
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23148713' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.5 3.5L15 7'/%3E%3C/svg%3E" );
	background-position: center;
	background-repeat: no-repeat;
	background-size: 0.85rem;
}

/* ------------------------------------------------------------------ */
/* Styl bloku: velke cislo                                             */
/* ------------------------------------------------------------------ */

.is-style-sos-cislo {
	display: block;
	margin: 0 0 0.25rem;
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 1;
}

/* ------------------------------------------------------------------ */
/* Tlacidla                                                            */
/* ------------------------------------------------------------------ */

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	transition: transform var(--wp--custom--prechod), background-color var(--wp--custom--prechod),
		color var(--wp--custom--prechod), box-shadow var(--wp--custom--prechod),
		border-color var(--wp--custom--prechod);
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
}

/* Primarne tlacidlo so sipkou */
.is-style-sos-sipka .wp-block-button__link {
	box-shadow: var(--wp--custom--shadow--tlacidlo);
}

.is-style-sos-sipka .wp-block-button__link::after {
	content: "";
	width: 1.05rem;
	height: 1.05rem;
	background-color: currentColor;
	transition: transform var(--wp--custom--prechod);
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E" ) center / contain no-repeat;
}

.is-style-sos-sipka .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

/* Svetle tlacidlo na tmavom pozadi */
.is-style-sos-svetle .wp-block-button__link {
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: #fff;
	backdrop-filter: blur(6px);
}

.is-style-sos-svetle .wp-block-button__link:hover {
	background-color: #fff;
	border-color: #fff;
	color: var(--wp--preset--color--contrast);
}

/* ------------------------------------------------------------------ */
/* Pata                                                                */
/* ------------------------------------------------------------------ */

.sos-pata a {
	color: inherit;
	text-decoration: none;
	transition: color var(--wp--custom--prechod);
}

.sos-pata a:hover {
	color: var(--wp--preset--color--accent-1);
}

.sos-pata li {
	transition: transform var(--wp--custom--prechod);
}

.sos-pata li:hover {
	transform: translateX(3px);
}

/* ------------------------------------------------------------------ */
/* Archiv a detail projektu                                            */
/* ------------------------------------------------------------------ */

.sos-archiv__hlavicka {
	max-width: 46rem;
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

.sos-projekt__hlavicka {
	max-width: 46rem;
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

/* Citatelna sirka textu projektu, zarovnana vlavo s ostatnymi blokmi. */
.sos-projekt__text {
	max-width: 42rem;
	margin-block: var(--wp--preset--spacing--50);
}

/* ------------------------------------------------------------------ */
/* Postupne odkryvanie obsahu pri rolovani                             */
/* ------------------------------------------------------------------ */

.sos-odkryt {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.sos-odkryt.je-viditelny {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.sos-odkryt {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------------ */
/* Hlavicka na mobile: logo vlavo, hamburger vpravo v jednom riadku    */
/* ------------------------------------------------------------------ */

@media (max-width: 40rem) {
	/* Vyssia specificita nez zakladny styl bloku tlacidiel, ktory sa nacita neskor. */
	.sos-hlavicka .wp-block-buttons.sos-hlavicka__cta {
		display: none;
	}

	/* Lepiaca hlavicka nema na mobile zaberat prilis vela vysky. */
	.sos-hlavicka {
		padding-block: 0.6rem;
	}

	.sos-hlavicka .wp-block-site-logo img {
		height: 38px;
	}
}

/* Lightbox (pouzivaju bloky fotogaleria a rolovacia galeria)          */
/* ------------------------------------------------------------------ */
.sos-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(12, 16, 20, 0.94);
}

.sos-lightbox[hidden] {
	display: none;
}

.sos-lightbox__obrazok {
	max-width: min(100%, 1400px);
	max-height: 82vh;
	object-fit: contain;
	border-radius: var(--wp--custom--radius--small);
}

.sos-lightbox__popis {
	position: absolute;
	inset-block-end: 1.25rem;
	inset-inline: 0;
	margin: 0 auto;
	max-width: 42rem;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.875rem;
	text-align: center;
}

.sos-lightbox__ovladac {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.sos-lightbox__ovladac:hover,
.sos-lightbox__ovladac:focus-visible {
	background: rgba(255, 255, 255, 0.2);
}

.sos-lightbox__zavriet {
	inset-block-start: 1rem;
	inset-inline-end: 1rem;
}

.sos-lightbox__predchadzajuci {
	inset-inline-start: 1rem;
}

.sos-lightbox__nasledujuci {
	inset-inline-end: 1rem;
}

body.sos-lightbox-otvoreny {
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Hlavicka na mobile: logo vlavo, hamburger vpravo v jednom riadku    */
/* ------------------------------------------------------------------ */

@media (max-width: 40rem) {
	/* Vyssia specificita nez zakladny styl bloku tlacidiel, ktory sa nacita neskor. */
	.sos-hlavicka .wp-block-buttons.sos-hlavicka__cta {
		display: none;
	}
}

/*
 * Sekcie na seba nadvazuju priamo - medzi nimi nesmie presvitat biele tlo
 * stranky. Zakladny blockGap (1.5rem) sa preto na celosirkovych sekciach,
 * hlavnom obsahu a pate rusi. Vnutorny rytmus sekcii ostava nedotknuty.
 *
 * Vyssia specificita (.wp-site-blocks pred triedou sekcie) je nutna:
 * rozlozenie jadra nastavuje rozostup cez `.wp-container-... > * + *`.
 */
.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-site-blocks .sos-hero,
.wp-site-blocks .sos-sekcia,
.wp-site-blocks .sos-sekcia--tmava {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ------------------------------------------------------------------ */
/* Vyzva v pase (sekcia Otazky)                                        */
/* ------------------------------------------------------------------ */

.sos-vyzva {
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--accent-5);
	border-radius: var(--wp--custom--radius--large);
	background: linear-gradient( 135deg, var(--wp--preset--color--accent-3), #fff );
}

.sos-vyzva__text {
	margin: 0;
	max-width: 34rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

/* ------------------------------------------------------------------ */
/* Tablet: tri stlpce v riadku su prilis uzke                          */
/* ------------------------------------------------------------------ */

/*
 * Jadro WordPressu skladá stlpce pod 782 px do jedneho. Medzi 782 a 992 px
 * by vsak tri karty vedla seba mali len ~250 px, co je na text primalo.
 * V tomto rozsahu ich preto ukladame po dvoch.
 *
 * !important je nutne: jadro nastavuje flex-wrap: nowrap tiez cez !important.
 * Karty hladame cez :has(), aby sme nemuseli menit jednotlive patterny.
 */
@media (min-width: 48.9rem) and (max-width: 61.999rem) {
	.sos-pasik .wp-block-columns,
	.wp-block-columns:has( > .wp-block-column > .is-style-sos-karta ) {
		flex-wrap: wrap !important;
	}

	.sos-pasik .wp-block-columns > .wp-block-column,
	.wp-block-columns:has( > .wp-block-column > .is-style-sos-karta ) > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--40) / 2);
		flex-grow: 0;
	}
}