/**
 * KartelMedia Pro — style bazowe: nagłówek, stopka, szablony.
 *
 * Kolory, fonty i odstępy wyłącznie z presetów theme.json, więc zakładka
 * Wygląd zmienia także te elementy. Mobile-first; breakpointy 768 i 1024 px.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	word-wrap: normal !important;
}

/* Format „Kolor tekstu” w RichText używa <mark> — bez tła przeglądarka dałaby żółte podświetlenie. */
mark.has-inline-color {
	background-color: transparent;
}

/*
 * Kolor palety o slugu „border” daje klasę tekstu .has-border-color
 * (color: … !important) — tę samą, którą WordPress dodaje każdemu blokowi
 * z kolorem obramowania. Bez tej reguły blok z obramowaniem miał tekst
 * w kolorze obramowania. Kolor tekstu „border” ustawiony świadomie ma
 * dodatkowo .has-text-color, więc zostaje.
 */
.has-border-color:not(.has-text-color) {
	color: inherit !important;
}

.skip-link:focus {
	top: 1rem;
	left: 1rem;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	clip: auto;
	clip-path: none;
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--text);
}

/*
 * Kontenery o szerokości „szerokiej” z marginesami strony: max-width liczony
 * bez paddingu (content-box), żeby treść nagłówka, stopki, hero i sekcji
 * zaczynała się w tej samej linii.
 */
.kmp-header__inner,
.kmp-footer__grid,
.kmp-footer__bottom,
.kmp-hero__content {
	box-sizing: content-box;
}

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

.kmp-header {
	position: relative;
	z-index: 100;
	background: var(--wp--preset--color--background);
	border-bottom: 1px solid var(--wp--preset--color--border);
	transition: box-shadow 0.2s ease;
}

.kmp-header.is-sticky {
	position: sticky;
	top: 0;
}

.admin-bar .kmp-header.is-sticky {
	top: 46px;
}

/*
 * Przyklejony nagłówek zasłaniał początek sekcji po przejściu do kotwicy.
 * Wysokość nagłówka mierzy main.js (--kmp-header-offset); bez JS zapas 72 px.
 */
html:has(.kmp-header.is-sticky) {
	scroll-padding-top: calc(var(--kmp-header-offset, 72px) + var(--wp--preset--spacing--20));
}

.kmp-header.is-scrolled {
	box-shadow: 0 4px 16px rgb(0 0 0 / 0.08);
}

.kmp-header__inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	max-width: var(--wp--style--global--wide-size);
	min-height: 72px;
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--20);
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

.kmp-site-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.custom-logo {
	display: block;
	width: auto;
	max-height: 64px;
}

/* Logo z napisem (KartelMedia Pro → Nagłówek → Napis obok logo). */
.kmp-site-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.kmp-site-logo .custom-logo {
	max-height: 48px;
}

.kmp-site-logo__text {
	max-width: 11rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.15;
}

.kmp-footer .kmp-site-logo {
	color: inherit;
}

.kmp-nav {
	display: none;
}

.kmp-nav.is-open {
	display: block;
	position: absolute;
	inset: 100% 0 auto;
	padding: var(--wp--preset--spacing--30) var(--wp--style--root--padding-right) var(--wp--preset--spacing--30) var(--wp--style--root--padding-left);
	background: var(--wp--preset--color--background);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.kmp-nav__list,
.kmp-nav .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kmp-nav__list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.kmp-nav .sub-menu {
	margin-top: 0.25rem;
	padding-left: var(--wp--preset--spacing--30);
}

.kmp-nav a {
	color: var(--wp--preset--color--text);
	font-weight: 500;
	text-decoration: none;
}

.kmp-nav a:hover,
.kmp-nav .current-menu-item > a {
	color: var(--wp--preset--color--primary);
}

.kmp-nav-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 10px;
	background: none;
	border: 0;
	cursor: pointer;
}

.kmp-nav-toggle span {
	display: block;
	height: 2px;
	background: var(--wp--preset--color--text);
	border-radius: 2px;
}

.kmp-lang-switcher {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kmp-lang-switcher a {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	text-transform: uppercase;
}

.kmp-lang-switcher a:has(.kmp-lang-switcher__flag) {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.kmp-lang-switcher__flag {
	display: block;
	width: 20px;
	height: auto;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08);
}

.kmp-header__cta {
	display: none;
}

@media (min-width: 768px) {
	.kmp-header__cta {
		display: inline-block;
	}
}

@media (min-width: 783px) {
	.admin-bar .kmp-header.is-sticky {
		top: 32px;
	}
}

@media (min-width: 1024px) {
	.kmp-nav,
	.kmp-nav.is-open {
		display: block;
		position: static;
		margin-left: auto;
		padding: 0;
		border: 0;
	}

	.kmp-nav__list {
		flex-direction: row;
		gap: var(--wp--preset--spacing--40);
	}

	.kmp-nav li {
		position: relative;
	}

	.kmp-nav .sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 220px;
		margin: 0;
		padding: var(--wp--preset--spacing--20);
		background: var(--wp--preset--color--background);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius);
		box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
	}

	.kmp-nav li:hover > .sub-menu,
	.kmp-nav li:focus-within > .sub-menu {
		display: block;
	}

	.kmp-nav-toggle {
		display: none;
	}
}

/* --- Treść -------------------------------------------------------- */

.kmp-main {
	display: block;
}

.kmp-entry__header {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
}

.kmp-entry__meta {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.kmp-entry__content {
	padding-bottom: var(--wp--preset--spacing--60);
}

.kmp-entry__content > .alignfull:first-child {
	margin-top: 0;
}

/* Sekcje na pełną szerokość jedna pod drugą stykają się — bez białych pasów. */
.kmp-entry__content > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* Ostatnia sekcja na pełną szerokość przylega do stopki. */
.kmp-entry__content:has(> .alignfull:last-child) {
	padding-bottom: 0;
}

.kmp-entry__content > .alignfull:last-child {
	margin-bottom: 0;
}

/* --- Stopka ------------------------------------------------------- */

.kmp-footer {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--background);
	font-size: var(--wp--preset--font-size--small);
}

.kmp-footer a {
	color: inherit;
}

.kmp-footer__grid,
.kmp-footer__bottom {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

.kmp-footer__grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--60);
}

.kmp-footer__heading {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: inherit;
	font-size: var(--wp--preset--font-size--medium);
}

.kmp-footer ul {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kmp-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	padding-block: var(--wp--preset--spacing--30);
	border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.kmp-footer__bottom ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

@media (min-width: 768px) {
	.kmp-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.kmp-footer__grid {
		grid-template-columns: repeat(var(--kmp-footer-cols, 4), minmax(0, 1fr));
	}
}

/* --- Bloki: sekcja, siatka, ikona ---------------------------------- */

/* Bazy komponentów przez :where() — waga 0: reguły bloków zawsze wygrywają, niezależnie od kolejności ładowania plików. */
:where(.kmp-section) {
	padding-block: var(--wp--preset--spacing--70);
}

.kmp-section__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* Pełna szerokość: tło do krawędzi ekranu, treść w marginesach strony. */
.kmp-section.alignfull {
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

.kmp-grid {
	display: grid;
	grid-template-columns: repeat(var(--kmp-cols-m, 1), minmax(0, 1fr));
	gap: var(--kmp-gap, var(--wp--preset--spacing--40));
	align-items: stretch;
}

/* Nagłówek sekcji w siatce: cały wiersz; odstęp do kart daje już gap siatki. */
.kmp-grid > .wp-block-kartelmedia-section-header {
	grid-column: 1 / -1;
	margin-block-end: var(--wp--preset--spacing--20);
}

@media (min-width: 768px) {
	.kmp-grid {
		grid-template-columns: repeat(var(--kmp-cols-t, 2), minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.kmp-grid {
		grid-template-columns: repeat(var(--kmp-cols-d, 3), minmax(0, 1fr));
	}
}

.kmp-icon {
	display: inline-block;
	flex: none;
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
}

/* Edytor: podgląd ikony w panelu i kontrolka obrazu. */
.kmp-icon-picker__preview .kmp-icon {
	width: 32px;
	height: 32px;
	margin-top: 8px;
}

.kmp-image-control img {
	display: block;
	max-width: 100%;
	margin-bottom: 8px;
	border-radius: 4px;
}

/* --- Hero (wspólna baza bloków hero, page-hero, hero-slider) --------- */

:where(.kmp-hero) {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--80);
	color: var(--wp--preset--color--background);
}

.kmp-hero:not(.has-background):not(.has-image) {
	background:
		radial-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
		linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-dark));
}

.kmp-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kmp-hero__overlay {
	position: absolute;
	inset: 0;
}

.kmp-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

.kmp-hero__content > * {
	max-width: 44rem;
}

.kmp-hero.has-text-align-center .kmp-hero__content > * {
	margin-inline: auto;
}

.kmp-hero.has-text-align-center .wp-block-buttons {
	justify-content: center;
}

.kmp-hero :where(h1, h2, h3, .wp-block-heading) {
	color: inherit;
}

.kmp-hero .is-style-outline .wp-element-button {
	border: 2px solid currentColor;
	background: transparent;
	color: inherit;
}

/* Hero z obrazem obok tekstu (układ split): na telefonie obraz nad tekstem. */
.kmp-hero--split .kmp-hero__content > * {
	max-width: none;
}

.kmp-hero__split {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	align-items: center;
}

.kmp-hero__media {
	margin: 0;
}

.kmp-hero__split-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(var(--wp--custom--radius) * 2);
}

.kmp-hero__text > * {
	max-width: 40rem;
}

@media (min-width: 1024px) {
	.kmp-hero__split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.kmp-hero--split.is-image-right .kmp-hero__media {
		order: 2;
	}
}

/*
 * Ciemne tła hero i sekcji CTA: wypełniony przycisk w kolorze podstawowym
 * zlewał się z gradientem w tym samym kolorze. Bez własnego koloru — jasny.
 * Hero z własnym (np. jasnym) tłem zostaje przy przycisku domyślnym.
 */
:is(.kmp-hero:not(.has-background), .kmp-cta-section:not(.has-background)) .wp-block-button:not(.is-style-outline) > .wp-element-button:not(.has-background) {
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--primary);
}

:is(.kmp-hero:not(.has-background), .kmp-cta-section:not(.has-background)) .wp-block-button:not(.is-style-outline) > .wp-element-button:not(.has-background):is(:hover, :focus) {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-dark);
}

/* --- Karta (wspólna baza kart bloków) ----------------------------- */

/* Obraz z biblioteki w miejscu ikony karty (feature-card). */
.kmp-card__icon.is-image {
	width: 4rem;
	height: 4rem;
	padding: 0;
	background: none;
}

.kmp-card__image-icon {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

:where(.kmp-card) {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
}

.kmp-card__body > :first-child {
	margin-top: 0;
}

.kmp-card__body > :last-child {
	margin-bottom: 0;
}

/* Stopka karty: zawsze przy dolnej krawędzi — w rzędzie kart stopki są na jednej linii. */
.kmp-card__footer {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
}

:where(.kmp-card__icon) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--wp--custom--radius);
	color: var(--wp--preset--color--primary);
	background: color-mix(in srgb, currentColor 12%, transparent);
}