/*
Theme Name: MIG
Theme URI:
Author: Jarosław Borkowski
Author URI:
Description: Motyw blokowy WordPress dla serwisu wydarzeń/koncertów MIG. Ciemny motyw z akcentem czerwieni (#B42A33), oparty na krojach Syne, Inter i Montserrat.
Version: 2.63.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mig
*/

/*
 * Odstęp między sekcjami strony głównej — jedna wartość dla wszystkich.
 *
 * Sekcje miały ten margines wpisany osobno (49px), przez co zmiana rytmu strony
 * wymagała czterech poprawek i za każdym razem któraś zostawała w tyle.
 */
:root {
	--mig-sekcja-odstep: 98px;

	/*
	 * Tło paneli sekcji: czerwony poblask od lewego górnego rogu na ciemnym tle.
	 *
	 * Wartość siedzi w zmiennej, bo używa jej pięć sekcji naraz — „Z życia
	 * zespołu”, single, teledyski, karty płyt i pary na stronie O nas. Wpisana
	 * osobno w każdej z nich znaczyła, że zmiana odcienia to pięć poprawek
	 * i pewność, że któraś zostanie w tyle.
	 */
	--mig-panel-tlo:
		radial-gradient(120% 140% at 0% 0%, rgba(180, 42, 51, 0.22) 0%, rgba(180, 42, 51, 0) 58%),
		linear-gradient(180deg, #1c1a1a 0%, #171515 100%);
	--mig-panel-obwodka: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 900px) {
	:root {
		--mig-sekcja-odstep: 56px;
	}
}

/*
 * Stopka — proporcje 1:1 z makiety (node 1:1336 / 1:1337).
 *
 * Panel w makiecie ma 1834px szerokości i 779px wysokości.
 * Procenty poniżej są przeliczone z tych wartości, więc przy szerokości
 * projektowej dają dokładnie te same piksele, a niżej skalują się płynnie.
 *
 *   panel bordowy: 884/1834                = 48,2% szerokości stopki
 *   wcięcie kolumn: 65/1834                =  3,54% (padding % liczy się od stopki)
 *   kolumna 1: 452px z 819px dostępnych    = 55,2% (flex-basis % liczy się od .mig-footer__cols)
 *   wcięcie panelu bordowego: 133/1834     =  7,25% (padding % liczy się od stopki, nie od panelu)
 *
 * UWAGA na dwie różne bazy odniesienia — pomyliłem je przy pierwszym podejściu:
 * padding w % → szerokość kontenera nadrzędnego; flex-basis w % → kontener flex.
 */

/*
 * Wysokość wynika z treści. Makieta ma sztywne 779px, ale przy naszych
 * krótszych tekstach robiła się z tego pusta przestrzeń — proporcje
 * poziome zostają z projektu, pionowe dopasowujemy do zawartości.
 */
.mig-footer {
	position: relative;
	background-color: #dedee0;
	border-radius: 50px;
	/* Bez zerowania odstępu 48,2% + 51,8% + gap > 100% i panel bordowy zawija się pod spód. */
	gap: 0;
}

/* Lewa część na jasnym tle: dwie kolumny na stałych pozycjach */
.mig-footer__cols {
	flex: 0 0 48.2%;
	min-width: 0;
	padding: 72px 0 72px 3.54%;
	gap: 0;
	align-items: flex-start;
}

.mig-footer__col {
	min-width: 0;
	gap: 36px;
}

/*
 * Uwaga: flex-basis w % liczy się od kontenera nadrzędnego (.mig-footer__cols),
 * a nie od całej stopki. Kolumna ma 452px przy 819px dostępnych → 55,2%.
 */
.mig-footer__col--first {
	flex: 0 0 55.2%;
}

/*
 * flex-basis 0%, nie auto. Przy `auto` bazą jest szerokość treści, a długie
 * pozycje („Roztańczony PGE Narodowy 2026  10.10.2026”) przekraczały wtedy
 * pozostałe 44,8% i kolumna zawijała się pod pierwszą. Zawijanie liczone jest
 * z bazy, zanim zadziała kurczenie — dlatego samo min-width: 0 nie wystarcza.
 */
.mig-footer__col--second {
	flex: 1 1 0%;
}

.mig-footer__block {
	gap: 14px;
	width: 100%;
	align-items: flex-start;
}

/* Ikony społecznościowe zaraz po danych kontaktowych, bez rozpychania panelu */
.mig-footer__block--social {
	padding-top: 4px;
}

.mig-footer__social {
	gap: 12px;
}

/* Nagłówki: Syne Bold 26px, wersaliki */
.mig-footer__heading {
	margin: 0;
	color: #000;
	font-family: var(--wp--preset--font-family--syne);
	font-size: 26px;
	font-weight: 700;
	line-height: 30px;
	text-transform: uppercase;
}

.mig-footer__heading.is-light {
	color: var(--wp--preset--color--white);
}

/* Treść: Syne Regular 20px */
.mig-footer__text,
.mig-footer__list .wp-block-post-title {
	margin: 0;
	color: var(--wp--preset--color--dark);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 20px;
	font-weight: 400;
	line-height: 30px;
}

.mig-footer__text.is-light {
	color: var(--wp--preset--color--white);
}

.mig-footer__text a,
.mig-footer__list .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.mig-footer__text a:hover,
.mig-footer__text a:focus-visible,
.mig-footer__list .wp-block-post-title a:hover,
.mig-footer__list .wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* Adres e-mail jest w makiecie podkreślony */
.mig-footer__text--link a {
	text-decoration: underline;
	text-underline-position: from-font;
}

/* Koncerty w stopce: tytuł i data w jednej linii */
.mig-footer__list .wp-block-post-template {
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mig-footer__event {
	gap: 12px;
	align-items: baseline;
}

/* --- Panel bordowy (nachodzi na prawą część jasnego) --- */

/*
 * Padding w % liczy się od szerokości kontenera (.mig-footer = 1834px),
 * nie od szerokości samego panelu. 133px → 7,25%.
 */
.mig-footer__promo {
	flex: 0 0 51.8%;
	min-width: 0;
	padding: 72px 7.25%;
	background-color: #2d090b;
	border-radius: 50px;
	align-self: stretch;
	gap: 0;
	align-items: flex-start;
}

.mig-footer__promo-lead {
	margin-top: 27px;
	max-width: 627px;
}

/* --- Lista koncertów w panelu bordowym --- */

.mig-footer__promo .mig-footer__list {
	width: 100%;
	margin-top: 34px;
}

.mig-footer__promo .wp-block-post-template {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mig-footer__promo .wp-block-post-template > li {
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.mig-footer__promo .wp-block-post-template > li:last-child {
	border-bottom: 0;
}

.mig-footer__event-name {
	flex: 1 1 auto;
	min-width: 0;
}

/* Data trzyma się prawej krawędzi i nie zawija */
.mig-footer__event-date {
	flex: 0 0 auto;
	white-space: nowrap;
	opacity: 0.75;
}

.mig-footer__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 32px;
	padding: 16px 34px;
	background-color: var(--wp--preset--color--primary);
	border-radius: 100px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.mig-footer__more:hover,
.mig-footer__more:focus-visible {
	background-color: #932129;
	color: var(--wp--preset--color--white);
}

/* --- Belka copyright: czarne tło jak pasek nawigacji, niska --- */

/* Bez backdrop-filter — nad nieprzezroczystym tłem nic nie wnosi, a tworzy
   blok zawierający dla potomków fixed (patrz komentarz przy .mig-navbar). */
.mig-copybar {
	margin-top: var(--wp--preset--spacing--110);
	padding: 18px 0;
	background-color: #000;
}

.mig-copybar__text {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 14px;
	line-height: 23px;
	letter-spacing: -0.14px;
}

/* --- Mobile --- */

@media (max-width: 900px) {
	.mig-footer {
		min-height: 0;
		border-radius: 28px;
	}

	.mig-footer__cols,
	.mig-footer__promo {
		flex-basis: 100%;
		padding: 48px 28px;
	}

	.mig-footer__cols {
		gap: 40px;
	}

	.mig-footer__col--first,
	.mig-footer__col--second {
		flex: 1 1 100%;
	}

	.mig-footer__promo {
		border-radius: 28px;
	}

	.mig-footer__block--social {
		margin-top: 0;
		padding-top: 0;
	}

	.mig-footer__heading {
		font-size: 22px;
	}

	.mig-footer__text,
	.mig-footer__list .wp-block-post-title {
		font-size: 18px;
	}

	/* Przy wąskim ekranie data schodzi pod nazwę, zamiast ją ściskać */
	.mig-footer__event {
		flex-wrap: wrap !important;
		gap: 2px 12px;
	}

	.mig-footer__more {
		margin-top: 28px;
		padding: 14px 28px;
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mig-footer__text a,
	.mig-footer__more {
		transition: none;
	}
}

/* Filtry kategorii galerii (blok mig/filtry-galerii) */

/* Pasek nawigacji — wartości odczytane z projektu Figma (node 1:1309) */

/*
 * UWAGA: żadnego backdrop-filter/filter/transform na tym elemencie.
 * Właściwości te tworzą blok zawierający dla potomków `position: fixed`,
 * przez co overlay menu mobilnego przestaje odnosić się do okna przeglądarki
 * i zostaje przycięty do wysokości paska (widać wtedy tylko pierwszą pozycję).
 * Makieta ma tu backdrop-blur, ale przy nieprzezroczystym czarnym tle
 * nie daje on żadnego efektu wizualnego — pomijamy go świadomie.
 */
/*
 * Pasek zostaje przy górnej krawędzi podczas przewijania.
 *
 * `sticky`, nie `fixed` — fixed wyjmuje pasek z przepływu, więc trzeba by
 * ręcznie odsuwać treść pod nim odstępem równym jego wysokości, a ta różni się
 * między desktopem (90px) a telefonem (72px). Sticky zajmuje swoje miejsce
 * normalnie i przykleja się dopiero, gdy strona pod niego dojedzie.
 *
 * Sticky jest tu bezpieczne mimo pułapki 5.8: blok zawierający dla potomków
 * `position: fixed` tworzą transform, filter i backdrop-filter — nie sticky.
 * Overlay menu mobilnego nadal odnosi się do okna i otwiera się na pełny ekran.
 *
 * z-index musi przebić panele sekcji, bo te mają własne tła i konteksty
 * nakładania; bez niego pasek chowałby się pod „Następnymi koncertami".
 *
 * Sticky siedzi na <header>, nie na samym pasku, i to jest tu sedno.
 * Element przyklejony przesuwa się wyłącznie w obrębie pudełka swojego
 * rodzica, a .mig-navbar jest jedynym dzieckiem <header> — rodzic ma
 * dokładnie jego wysokość, więc zapas na przesunięcie wynosi zero i pasek
 * odjeżdża razem z nagłówkiem. Wygląda to jak reguła, która nie zadziałała.
 * <header> jest dzieckiem .wp-site-blocks, czyli całej strony, i zapasu ma
 * pod dostatkiem.
 */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.mig-navbar {
	background-color: #000;
	/* Wysokość paska z makiety: 90px = 14 + 62 (logo) + 14 */
	min-height: 90px;
}

.mig-navbar__logo {
	margin: 0;
	flex-shrink: 0;
}

.mig-navbar__logo img {
	display: block;
	width: 122px;
	height: auto;
}

/*
 * Style pozycji menu tylko od 768px w górę. Bez tego ograniczenia przeciekały
 * do rozwijanego menu mobilnego (m.in. white-space: nowrap), psując jego układ.
 */
@media (min-width: 768px) {
	.mig-navbar__menu .wp-block-navigation-item__content {
		color: rgba(255, 255, 255, 0.6);
		font-family: var(--wp--preset--font-family--syne);
		font-size: 14px;
		font-weight: 400;
		line-height: 23px;
		letter-spacing: -0.14px;
		white-space: nowrap;
		transition: color 0.2s ease;
	}

	.mig-navbar__menu .wp-block-navigation-item__content:hover,
	.mig-navbar__menu .wp-block-navigation-item__content:focus-visible,
	.mig-navbar__menu .current-menu-item .wp-block-navigation-item__content {
		color: var(--wp--preset--color--white);
	}
}

/* Przycisk Kontakt: przezroczysty, biała obwódka, strzałka ↗ */
.mig-navbar__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background-color: transparent;
	font-size: 14px;
	font-weight: 500;
	line-height: 23px;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.mig-navbar__cta .wp-block-button__link:hover,
.mig-navbar__cta .wp-block-button__link:focus-visible {
	background-color: rgba(255, 255, 255, 0.12);
}

.mig-arrow {
	width: 10px;
	height: 10px;
	flex-shrink: 0;
}

/*
 * Kontakt: na desktopie osobny przycisk, na mobile pozycja listy.
 * Reguła WordPressa `.wp-block-navigation .wp-block-navigation-item{display:flex}`
 * ma dwie klasy, więc pojedynczy selektor by jej nie przebił — stąd !important.
 */
.mig-navbar .mig-nav-kontakt {
	display: none !important;
}

/* --- Mobile 360-767px (makieta 20:2784) --- */

@media (max-width: 767px) {

	/* Pasek: 72px wysokości, logo 78x40, hamburger po prawej */
	.mig-navbar {
		/* min-height trzeba nadpisać — inaczej wygra z height i pasek zostanie 90px */
		min-height: 72px;
		height: 72px;
		border-radius: 0 !important;
		padding: 16px 22px !important;
	}

	.mig-navbar__logo img {
		width: 78px;
	}

	/* Przycisk Kontakt znika z paska — jego miejsce zajmuje pozycja w menu */
	.mig-navbar .mig-navbar__cta {
		display: none !important;
	}

	.mig-navbar .mig-nav-kontakt {
		display: block !important;
	}

	/* Hamburger 32x32 wg projektu */
	.mig-navbar .wp-block-navigation__responsive-container-open {
		width: 32px;
		height: 32px;
		padding: 0;
		color: var(--wp--preset--color--white);
	}

	.mig-navbar .wp-block-navigation__responsive-container-open svg {
		width: 32px;
		height: 32px;
	}

	/* Przyciemnione tło pod panelem */
	.mig-navbar .wp-block-navigation__responsive-container.is-menu-open {
		display: block !important;
		padding: 0 !important;
		background-color: rgba(0, 0, 0, 0.55) !important;
		overflow-y: auto;
	}

	/* Panel: czarny, 318px, dosunięty do prawej krawędzi, pełna wysokość */
	.mig-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		width: 318px;
		max-width: 100%;
		min-height: 100vh;
		margin: 0 0 0 auto;
		/* 84px u góry, żeby pierwsza pozycja nie kolidowała z krzyżykiem */
		padding: 84px 25px 48px;
		background-color: #000;
	}

	.mig-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		width: 100%;
		margin: 0;
	}

	/*
	 * Blok nawigacji przenosi do overlaya wyrównanie z desktopu (items-justified-right)
	 * przez zmienną --navigation-layout-justification-setting. Bez jej wyzerowania
	 * pozycje kurczą się do szerokości tekstu i uciekają w prawo.
	 * Prościej i pewniej: cały panel na układ blokowy.
	 */
	.mig-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		--navigation-layout-justification-setting: flex-start;
		display: block !important;
		width: 100% !important;
		padding: 0 !important;
	}

	.mig-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		--navigation-layout-justification-setting: flex-start;
		display: block !important;
		width: 100% !important;
		gap: 0 !important;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Pozycje: Syne 16px, #C4C4C4, separator 1px pod każdą */
	.mig-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		display: block !important;
		width: 100%;
		border-bottom: 1px solid #c4c4c4;
	}

	.mig-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
		border-bottom: 0;
	}

	.mig-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 14px 0;
		color: #c4c4c4;
		font-family: var(--wp--preset--font-family--syne);
		font-size: 16px;
		font-weight: 400;
		line-height: 30px;
		letter-spacing: 0;
		white-space: normal;
		text-align: left;
	}

	.mig-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
	.mig-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
		color: var(--wp--preset--color--white);
	}

	/* Krzyżyk zamykający w obrębie panelu */
}

@media (prefers-reduced-motion: reduce) {
	.mig-navbar__menu .wp-block-navigation-item__content,
	.mig-navbar__cta .wp-block-button__link {
		transition: none;
	}
}

/*
 * Sekcja „Następne koncerty" — wartości z makiety.
 *
 *   panel     #2d090b, 1834 × 328px, radius 50px, 49px pod hero
 *   treść     1745px szerokości (45px od lewej krawędzi panelu), 30px od góry
 *   nagłówek  Syne Bold 48px, wersaliki, wyśrodkowany, 28px nad kartami
 *   karta     571 × 164px, odstęp 16px, padding 24px, radius 24px,
 *             tło rgba(100,42,45,0.56)
 *
 * Szerokości podane w % względem 1834px, żeby skalowały się poniżej rozmiaru projektowego.
 */

.mig-next {
	margin-top: var(--mig-sekcja-odstep);
	padding: 30px 2.45% 49px;
	background-color: #2d090b;
	border-radius: 50px;
}

.mig-next__inner {
	gap: 28px;
	width: 100%;
	align-items: center;
}

/*
 * Nagłówek panelu korzysta ze wspólnej klasy .mig-sekcja__heading — tu zostaje
 * tylko zniesienie dolnego odstępu wiersza, bo o przerwę do kart dba już
 * gap panelu (28px z makiety).
 */
.mig-next .mig-sekcja__head {
	margin-bottom: 0;
}

.mig-next__query {
	width: 100%;
}

/*
 * Karty jako lista pionowa, jedna pod drugą.
 *
 * Wcześniej był tu poziomy slider z przyciąganiem i strzałkami. Pokazywał
 * naraz jeden termin i resztę chował za gestem — a to sekcja, po którą ludzie
 * wchodzą na stronę. Pięć dat widocznych od razu odpowiada na pytanie „kiedy
 * gracie" bez interakcji. Reguły przewijania i przyciągania usunięte w całości,
 * nie wyłączone: zostawione `scroll-snap` na liście pionowej szarpie stroną
 * przy zwykłym przewijaniu.
 */
.mig-next__row {
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	/* Wymuszone, bo WordPress nadaje blokom własne klasy układu. */
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
}

/*
 * Karta zajmuje całą szerokość panelu — przy liście pionowej nie ma powodu
 * jej zwężać, a stała szerokość zostawiałaby z prawej pas pustego tła.
 *
 * Wymiary wymuszone, bo WordPress generuje dla bloków własne klasy układu
 * (wp-container-*, wp-block-post-template-is-layout-*), które nadpisują
 * flex-basis.
 *
 * min-height zeszło ze 164px: ta wartość brała się z makiety, gdzie karty
 * stały obok siebie i musiały być równe. W liście każdą wyznacza jej własna
 * treść, a wymuszona wysokość rozciągałaby nazwę i datę na przeciwne końce
 * z pustką pośrodku.
 */
.mig-next__card {
	display: flex !important;
	flex-direction: column !important;
	flex: 0 0 auto !important;
	width: 100% !important;
	min-width: 0;
	padding: 24px;
	background-color: rgba(100, 42, 45, 0.56);
	border-radius: 24px;
	gap: 0;
	justify-content: space-between;
	align-items: stretch;
}

/* Górny wiersz oddzielony kreskowaną linią */
.mig-next__top {
	display: flex;
	flex-direction: row;
	width: 100%;
	/* min-width musi propagować się w dół, inaczej nowrap w nazwie rozpycha kartę */
	min-width: 0;
	min-height: 46px;
	gap: 16px;
	padding-bottom: 12px;
	border-bottom: 0.5px dashed var(--wp--preset--color--neutral-300);
	align-items: flex-start;
}

.mig-next__place {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	min-width: 0;
	/* rośnie, żeby nazwa miała miejsce i nie łamała się bez potrzeby */
	flex: 1 1 auto !important;
}

/* Pinezka w kolorze marki, jak w makiecie */
.mig-next__place .mig-icon {
	color: var(--wp--preset--color--primary);
}

/* Nazwa miejsca zawija się do dwóch linii zamiast być ucinana */
.mig-next__venue {
	flex: 1 1 auto;
	margin: 0;
	min-width: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	/* Bez overflow-wrap: anywhere — łamał wyrazy w środku („Gdows kiej”) */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.mig-next__venue a {
	color: inherit;
	text-decoration: none;
}

.mig-next__venue a:hover,
.mig-next__venue a:focus-visible {
	text-decoration: underline;
}

.mig-next__actions {
	gap: 16px;
	flex-shrink: 0;
}

/* Przycisk „BILETY": obwódka, pigułka, wersaliki — wymiary z makiety */
.mig-tickets {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 10px;
	min-height: 39px;
	padding: 6px 26px;
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--white);
	border-radius: 100px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.5px;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.mig-tickets:hover,
.mig-tickets:focus-visible {
	background-color: rgba(255, 255, 255, 0.12);
	color: var(--wp--preset--color--white);
}

/* Dolny wiersz: data i godzina po lewej, status po prawej */
.mig-next__bottom {
	display: flex;
	flex-direction: row;
	margin-top: auto;
	width: 100%;
	gap: 16px;
	padding-top: 12px;
	align-items: flex-end;
}

.mig-next__when {
	gap: 8px;
	padding-right: 32px;
	align-items: flex-start;
}

.mig-next__meta {
	gap: 4px;
	align-items: center;
}

.mig-next__metatext {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	line-height: 1.2;
	white-space: nowrap;
}

/*
 * Wiersz z ikoną znika razem z pustą wartością.
 *
 * Koncert bywa ogłoszony bez godziny — przy festynach data jest znana na długo
 * przed programem. Bez tej reguły zostawała sama ikona zegara, wyglądająca jak
 * błąd renderowania.
 */
.mig-next__meta:has(.mig-next__metatext:empty),
.mig-lista__meta:has(.mig-lista__metatext:empty) {
	display: none;
}

/* --- Strzałki slidera --- */

.mig-slider__nav {
	display: none;
	gap: 12px;
	align-self: flex-end;
	margin-top: -8px;
}

/* Pokazujemy dopiero, gdy JS potwierdzi, że jest co przewijać */
.mig-slider__nav.is-active {
	display: flex;
}

.mig-next__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.46);
	border-radius: 100px;
	color: var(--wp--preset--color--white);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.mig-next__arrow:hover:not([disabled]),
.mig-next__arrow:focus-visible {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: var(--wp--preset--color--white);
}

.mig-next__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

.mig-next__arrow svg {
	width: 18px;
	height: 18px;
}

/* Odnośnik do pełnej listy koncertów */
/*
 * Odnośnik „zobacz wszystko" stoi pod pasem kart we wszystkich sekcjach głównej.
 * Wcześniej trzy z nich miały go przy nagłówku, a jedna pod kartami — to samo
 * działanie w dwóch miejscach zmuszało do szukania go za każdym razem od nowa.
 */
.mig-sekcja__more {
	margin-top: 32px;
}

/* W panelu koncertów odstęp daje już gap kolumny (28px), więc tu tylko dopełnienie. */
.mig-next .mig-sekcja__more {
	margin-top: 4px;
}

/*
 * Strzałki trzymają się prawej krawędzi wiersza nagłówka niezależnie od tego,
 * ile jest w nim rodzeństwa. Wiersz ma justify-content: space-between, które
 * przy dwóch dzieciach rozsuwa je na końce, ale przy jednym wyrównuje do lewej
 * (pułapka 5.36) — po wyjęciu odnośnika strzałki wylądowałyby po lewej wszędzie
 * tam, gdzie nagłówek jest ukryty albo pusty. Margines auto jest od tego wolny.
 */
.mig-sekcja__head .mig-slider__nav {
	margin-left: auto;
}

.mig-sekcja__more .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 26px;
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.46);
	border-radius: 100px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mig-sekcja__more .wp-block-button__link:hover,
.mig-sekcja__more .wp-block-button__link:focus-visible {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: var(--wp--preset--color--white);
}

.mig-next__empty {
	margin: 0;
	color: var(--wp--preset--color--grey-100);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
}

/* Ikony dziedziczą kolor tekstu (currentColor w plikach SVG) */
.mig-icon {
	display: block;
	flex-shrink: 0;
}

.mig-icon--24 {
	width: 24px;
	height: 24px;
}

.mig-icon--20 {
	width: 20px;
	height: 20px;
}

.mig-icon--16 {
	width: 16px;
	height: 16px;
}

/* --- Aktualności: trzy najnowsze ogłoszenia --- */

/*
 * Panel z gradientem wspólny z „Z życia zespołu”, przez zmienne --mig-panel-*.
 * Wpisany osobno znaczyłby, że zmiana odcienia to poprawka w dwóch miejscach.
 */
.mig-aktualnosci {
	margin-top: var(--mig-sekcja-odstep);
	padding: 52px 48px 56px;
	background: var(--mig-panel-tlo);
	border: var(--mig-panel-obwodka);
	border-radius: 36px;
}

/* Z rodzicem w selektorze — inaczej .mig-sekcja__head z dalszej części arkusza wygrywa */
.mig-aktualnosci .mig-aktualnosci__head {
	margin-bottom: 32px;
}

/*
 * Pas kart. Na desktopie trzy mieszczą się co do piksela, więc nie ma czego
 * przewijać i strzałki gasną same (theme.js sprawdza scrollWidth). Na telefonie
 * karta schodzi do 85% szerokości okna i pas staje się suwakiem — ta sama
 * mechanika co w pozostałych sekcjach, bez osobnego kodu.
 */
.mig-aktualnosci__query .wp-block-post-template {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 24px !important;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	grid-template-columns: none !important;
	align-items: stretch !important;
}

.mig-aktualnosci__query .wp-block-post-template::-webkit-scrollbar {
	display: none;
}

/*
 * Szerokość liczona z liczby kart i odstępu, nie procentem na oko: trzy karty
 * po 33% plus dwa odstępy po 24px nie zmieściłyby się w rzędzie i trzecia
 * spadałaby pod spód przy każdym zaokrągleniu w dół.
 */
.mig-aktualnosci__query .wp-block-post-template > li {
	flex: 0 0 calc((100% - 48px) / 3);
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
	display: flex !important;
}

.mig-aktualnosc {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px;
	width: 100%;
	padding: 24px;
	background-color: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 24px;
}

/*
 * Tytuł o stałej wysokości: klamra trzech wierszy plus min-height.
 *
 * Bez tego dłuższy tytuł spychał w swojej karcie zdjęcie, zajawkę i przycisk
 * o wiersz niżej niż w sąsiednich, więc rząd kart wyglądał na rozjechany,
 * choć każda karta z osobna była poprawna. Trzy wiersze, bo najdłuższy dzisiaj
 * tytuł („Sierpień w trasie: dwadzieścia koncertów, osiem województw") mieści
 * się w nich w całości przy szerokości karty na desktopie.
 *
 * min-height razem z klamrą: klamra pilnuje górnej granicy, min-height dolnej.
 * Ten sam zabieg co przy opisach singli.
 */
.mig-aktualnosc__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	min-height: calc(3 * 1.25em);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--white);
}

/*
 * Tytuł jest odnośnikiem, więc klamra musi objąć element, który faktycznie
 * zawiera tekst. Nałożona wyżej obcinałaby nieprzewidywalnie.
 */
.mig-aktualnosc__title a {
	color: inherit;
	text-decoration: none;
}

.mig-aktualnosc__title a:hover,
.mig-aktualnosc__title a:focus-visible {
	text-decoration: underline;
}

/*
 * Zdjęcie w stałym kadrze 16:9. Bez tego karty w rzędzie miałyby różną
 * wysokość obrazu i tekst pod nimi zaczynałby się na trzech różnych poziomach.
 */
.mig-aktualnosc__foto {
	margin: 0;
}

.mig-aktualnosc__foto img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 16px;
}

/*
 * Treść o stałej wysokości — klamra wierszy plus min-height. Ten sam zabieg
 * co przy opisach singli: bez niego przycisk lądowałby raz wyżej, raz niżej
 * i rząd kart wyglądałby na krzywy.
 */
.mig-aktualnosc__tresc {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--neutral-300);
	min-height: calc(4 * 1.6em);
}

/*
 * Klamra idzie na wewnętrzny akapit, nie na blok zajawki. Blok renderuje się
 * jako <div> z <p> w środku, a -webkit-line-clamp działa na elemencie, który
 * sam zawiera tekst — nałożona na kontener obcina nieprzewidywalnie.
 */
.mig-aktualnosc__tresc .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}

/* Przycisk dosuwany do dołu karty, żeby stał równo we wszystkich trzech */
.mig-aktualnosc__cta {
	margin-top: auto;
	padding-top: 4px;
}

/*
 * Wariant na karcie: blok read-more z rdzenia renderuje sam odnośnik, bez
 * opakowania, więc dosunięcie do dołu i wyrównanie do lewej musi siedzieć
 * na nim samym, a nie na kontenerze jak przy przycisku z panelu.
 *
 * Selektor z rodzicem, bo pojedyncza klasa tu nie wystarczy: karta dostaje od
 * WordPressa klasę is-layout-flex, a razem z nią regułę
 * `.is-layout-flex > :is(*, div){margin:0}` o specyficzności (0,1,1)
 * — pułapka 5.23. Margines auto był przez nią zerowany, więc przycisk stał
 * tuż pod zajawką zamiast przy dolnej krawędzi i przy różnej długości tekstu
 * karty wyglądały na rozjechane.
 */
.mig-aktualnosc > .mig-aktualnosc__button--karta {
	margin-top: auto;
	align-self: flex-start;
}

.mig-aktualnosc__button {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 12px 22px;
	font-family: var(--wp--preset--font-family--syne);
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--white);
	text-decoration: none;
	background-color: var(--wp--preset--color--primary);
	border-radius: 6px;
	transition: background-color 0.2s ease;
}

.mig-aktualnosc__button:hover,
.mig-aktualnosc__button:focus-visible {
	background-color: #8f212a;
}

.mig-aktualnosci__empty {
	margin: 0;
	color: var(--wp--preset--color--neutral-300);
}

/* --- Pojedyncza aktualność --- */

.mig-wpis {
	margin-top: var(--mig-sekcja-odstep);
	max-width: 820px;
}

.mig-wpis__data {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--wp--preset--color--neutral-300);
}

.mig-wpis__title {
	margin: 0 0 28px;
	font-family: var(--wp--preset--font-family--syne);
	font-size: clamp(28px, 4.5vw, 44px);
	line-height: 1.15;
	color: var(--wp--preset--color--white);
}

.mig-wpis__foto {
	margin: 0 0 32px;
}

.mig-wpis__foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24px;
}

/*
 * Treść wpisu jest tu tekstem głównym, nie podpisem, więc dostaje biel
 * i większy stopień. Szarość z reszty motywu opisuje elementy pomocnicze
 * (zajawki na kartach, metadane) i na pełnym artykule czytała się blado.
 */
.mig-wpis__tresc {
	font-size: 19px;
	line-height: 1.75;
	color: var(--wp--preset--color--white);
}

/* Przycisk z panelu pod treścią wpisu, z oddechem nad i pod nim */
.mig-wpis .mig-aktualnosc__cta {
	margin: 32px 0 0;
}

.mig-wpis__powrot {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 15px;
}

/*
 * Archiwum: siatka, nie pas. Tu nie ma czego przewijać — wpisy mają się
 * zawijać do kolejnych rzędów, a przy jednym czy dwóch nie rozciągać się
 * na całą szerokość, stąd auto-fill zamiast auto-fit.
 */
.mig-aktualnosci-arch {
	margin-top: var(--mig-sekcja-odstep);
}

.mig-aktualnosci-arch__query .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 24px !important;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mig-aktualnosci-arch__query .wp-block-post-template > li {
	display: flex !important;
	margin: 0;
	padding: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mig-aktualnosci__query .wp-block-post-template {
		scroll-behavior: auto;
	}

	.mig-aktualnosc__button {
		transition: none;
	}
}

@media (max-width: 900px) {
	.mig-aktualnosci {
		padding: 32px 20px 36px;
		border-radius: 24px;
	}

	/* Jedna karta z zajawką następnej — sygnał, że pas się przewija */
	.mig-aktualnosci__query .wp-block-post-template > li {
		flex: 0 0 85%;
	}

	.mig-aktualnosci .mig-slider__nav {
		align-self: flex-start;
	}
}

/*
 * Zdjęcia prasowe do pobrania — koniec podstrony Galeria.
 *
 * Karty w siatce, która sama schodzi do jednej kolumny: przy dwóch paczkach
 * media query byłoby wpisaniem na sztywno, ile ich jest, a gniazd może
 * przybyć (playback, logotypy) i wtedy siatka poradzi sobie bez poprawki.
 */
.mig-pakiet {
	gap: 20px;
	margin-top: var(--mig-sekcja-odstep);
	align-items: flex-start;
}

.mig-pakiet__lead {
	max-width: 620px;
	margin: 0;
	color: var(--wp--preset--color--neutral-300);
}

.mig-pakiet__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
	width: 100%;
}

.mig-pakiet__karta {
	display: flex;
	flex-direction: row;
	gap: 16px;
	align-items: center;
	padding: 20px 24px;
	background: var(--mig-panel-tlo);
	border: var(--mig-panel-obwodka);
	border-radius: 20px;
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.mig-pakiet__karta:hover,
.mig-pakiet__karta:focus-visible {
	border-color: var(--wp--preset--color--primary);
	transform: translateY(-2px);
}

.mig-pakiet__ikona {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--primary);
	border-radius: 50%;
}

.mig-pakiet__tekst {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.mig-pakiet__nazwa {
	font-family: var(--wp--preset--font-family--syne);
	font-size: 18px;
	font-weight: 600;
	color: var(--wp--preset--color--white);
}

.mig-pakiet__opis {
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--neutral-300);
}

@media (prefers-reduced-motion: reduce) {
	.mig-pakiet__karta {
		transition: none;
	}

	.mig-pakiet__karta:hover,
	.mig-pakiet__karta:focus-visible {
		transform: none;
	}
}

@media (max-width: 900px) {
	.mig-next {
		margin-top: var(--mig-sekcja-odstep);
		padding: 28px 20px 32px;
		border-radius: 28px;
	}

	.mig-next__inner {
		gap: 20px;
	}

	/* Lista pionowa także na telefonie — karta na całą szerokość panelu. */
	.mig-next__card {
		flex-basis: auto;
		height: auto;
	}

	.mig-slider__nav {
		align-self: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mig-next__cta .wp-block-button__link {
		transition: none;
	}
}

/* Hero — wartości odczytane z projektu Figma */

/*
 * WordPress nadaje kontenerowi cover-a `width: auto` przy contentPosition innym niż domyślny
 * (reguła .has-custom-content-position.is-position-bottom-left w bloku core/cover),
 * przez co zwęża się on do szerokości treści. Bez tego nadpisania żadne wyrównanie
 * wewnątrz hero nie zadziała — wiersz nigdy nie sięgnie prawej krawędzi.
 */
.wp-block-cover.mig-hero.has-custom-content-position.is-position-bottom-left .wp-block-cover__inner-container {
	width: 100%;
}

.mig-hero__row {
	width: 100%;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Karta promocyjna: stałe 440px, dociśnięta do prawej krawędzi hero */
.mig-hero-promo {
	background-color: rgba(76, 27, 30, 0.82);
	flex: 0 0 440px;
	max-width: 440px;
	align-items: flex-start;
	margin-left: auto !important;
	margin-right: 0 !important;
}

.mig-hero-promo > * {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
}

/*
 * Logo w hero zamiast napisu „MIG".
 *
 * Plik ma 387x193,5, czyli proporcję 2:1 — width i height w znaczniku podane
 * z tych wartości, żeby przeglądarka zarezerwowała miejsce przed wczytaniem
 * pliku i układ nie skoczył. Szerokość skaluje się oknem, bo na telefonie
 * stała wartość z desktopu zabrałaby połowę kadru.
 */
.mig-hero__logo {
	margin: 0;
	line-height: 0;
}

.mig-hero__logo img {
	display: block;
	width: clamp(160px, 24vw, 320px);
	height: auto;
}

/* Treść hero: wszystko do lewej krawędzi, tekst łamie się na 520px */
.mig-hero__content {
	max-width: 520px;
	align-items: flex-start;
}

.mig-hero__content > * {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
}

/* Przycisk trzyma się lewej, nie rozciąga się na całą szerokość kolumny */
.mig-hero__content .wp-block-buttons {
	justify-content: flex-start;
	width: auto;
}

/*
 * Na telefonie karta promocyjna i kolumna tekstu idą pod siebie.
 *
 * Obie miały szerokość wpisaną z makiety i flex-shrink: 0, więc karta trzymała
 * 440px na ekranie szerokim na 375px i wypychała całą stronę w bok o blisko sto
 * pikseli. Blok grupy wypisuje flex-basis stylem inline, dlatego basis trzeba
 * zerować przez flex, a nie samą szerokością.
 */
@media (max-width: 900px) {
	.mig-hero__content,
	.mig-hero-promo {
		flex: 1 1 100% !important;
		max-width: 100%;
		margin-left: 0 !important;
	}
}

/*
 * Na telefonie hero sięga wysokości ekranu.
 *
 * 620px to wartość z makiety desktopowej. Na pionowym ekranie zostawiała pod
 * kartą pas pustego tła i sekcja czytała się jak baner wklejony w stronę,
 * a nie jak wejście do niej.
 *
 * svh, nie vh — to sedno sprawy. Na telefonie `100vh` to wysokość okna
 * z UKRYTYM paskiem adresu, a pasek jest widoczny właśnie przy wczytaniu
 * strony. Hero wychodziłoby wtedy poza ekran i przycisk „Posłuchaj" lądował
 * pod dolną krawędzią — dokładnie w chwili, gdy ktoś wchodzi pierwszy raz.
 * `svh` liczy zawsze ten mniejszy stan, więc kadr mieści się od razu.
 * Zapis podwójny: starsze przeglądarki zatrzymują się na wersji z vh.
 *
 * Nie `dvh` — ta jednostka zmienia się w trakcie chowania paska adresu,
 * więc hero rosłoby podczas przewijania i szarpało treścią pod spodem.
 *
 * 128px to pasek nawigacji (72px) plus odstęp nad hero i skrawek zostawiony
 * pod spodem: widoczny brzeg następnej sekcji mówi, że strona ma ciąg dalszy.
 * Bez niego pełny ekran wygląda jak koniec dokumentu.
 *
 * !important, bo blok cover wypisuje min-height stylem inline (pułapka 5.10
 * w parze z 5.16). To min-height, więc dłuższa treść nadal rozepchnie kadr.
 *
 * Selektor jest dwuczłonowy nie bez powodu: niżej w arkuszu stoi ogólne
 * `.wp-block-cover { min-height: 420px !important }` dla wszystkich sekcji
 * pełnoekranowych na telefonie. Sama `.mig-hero` ma tę samą specyficzność
 * i oba mają !important, więc wygrywała reguła późniejsza i hero zostawał
 * na 420px. `.wp-block-cover.mig-hero` przebija ją niezależnie od kolejności.
 */
@media (max-width: 767px) {
	.wp-block-cover.mig-hero {
		min-height: calc(100vh - 128px) !important;
		min-height: calc(100svh - 128px) !important;
	}
}

/*
 * Zdjęcie zajmuje górną część hero, nie całą jego wysokość.
 *
 * Rachunek, dla którego to powstało. Zdjęcie ma 1366x703, czyli proporcję 1,94
 * — jest bardzo szerokie. Przy `object-fit: cover` w ramce 414x768 skala wynosi
 * 768/703 = 1,09, więc obraz rozciąga się na 1492px, a przez ramkę widać z niego
 * 414px: niecałe 28% szerokości. Zespół stoi w rzędzie, więc widać środek rzędu
 * i nikogo z boków. Im wyższe hero, tym gorzej — to ta sama zależność, która
 * przy podwyższaniu kadru zabrała połowę składu.
 *
 * Ograniczenie zdjęcia do 62% wysokości zmienia ramkę na 414x476: skala spada
 * do 0,68, obraz ma 925px i widać z niego 45% zamiast 28%. Reszta hero zostaje
 * ciemna, a maska wygasza dolną krawędź, żeby przejście nie było linią.
 *
 * Przy okazji rozwiązuje to drugą rzecz: karta „Nowy singiel" siedziała
 * dokładnie na twarzach. Teraz leży na ciemnym tle i jest czytelna.
 *
 * Pełnej widoczności składu to nie da — przy tej proporcji cały rząd zmieściłby
 * się dopiero w pasku 414x213, a to już nie hero, tylko baner. Prawdziwym
 * rozwiązaniem jest zdjęcie kadrowane pod pion.
 */
/*
 * Logo wyśrodkowane na telefonie.
 *
 * Selektor jest dwuczłonowy z dwóch powodów naraz i każdy z osobna by wystarczył,
 * żeby pojedyncza klasa nie zadziałała: WordPress wstawia do każdego układu flex
 * regułę `.is-layout-flex > :is(*, div){margin:0}` o specyficzności (0,1,1)
 * — pułapka 5.23 — a w tym arkuszu stoi jeszcze `.mig-hero__content > *`
 * z tymi samymi zerowanymi marginesami.
 *
 * Środkuje margin auto, nie align-items: kolumna hero ma align-items: flex-start,
 * a marginesy auto w układzie elastycznym wygrywają z wyrównaniem kontenera.
 * Dzięki temu ruszamy samo logo i nic poza nim.
 */
@media (max-width: 767px) {
	.mig-hero__content > .mig-hero__logo {
		margin-left: auto;
		margin-right: auto;
	}

	.mig-hero {
		/*
		 * Miejsce zarezerwowane na treść pod zdjęciem: logo (80px), odstęp
		 * wiersza (24px) i karta singla (194px) dają 298px, plus zapas.
		 *
		 * Wysokość zdjęcia liczona od tej wartości, nie procentem. Procent
		 * wiąże kadr z wysokością hero, a ta zmienia się z ekranem: 62% na
		 * iPhonie XR to 476px i treść zaczynająca się na 420px wchodziła
		 * logo prosto w twarze. Odejmowanie stałej rezerwy trzyma zdjęcie
		 * nad treścią niezależnie od tego, jak wysoki jest telefon.
		 *
		 * min-height chroni ekrany niskie, gdzie odjęcie rezerwy zbiłoby
		 * kadr do paska albo wartości ujemnej.
		 */
		--mig-hero-tresc: 340px;
		background-color: var(--wp--preset--color--dark, #1c1a1a);

		/* Karta singla niżej — bliżej dolnej krawędzi niż domyślne 50px. */
		padding-bottom: 32px !important;
	}

	.mig-hero .wp-block-cover__image-background {
		height: calc(100% - var(--mig-hero-tresc));
		min-height: 180px;
		bottom: auto;
		-webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
	}
}

.mig-btn-ghost .wp-block-button__link {
	background-color: rgba(255, 255, 255, 0.08);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mig-btn-ghost .wp-block-button__link:hover,
.mig-btn-ghost .wp-block-button__link:focus-visible {
	background-color: rgba(255, 255, 255, 0.18);
	border-color: var(--wp--preset--color--white);
}

/* Zdjęcie w hero jest kadrowane tak jak w projekcie (obraz wyższy niż ramka) */
.mig-hero .wp-block-cover__image-background {
	object-position: center 40%;
}

@media (prefers-reduced-motion: reduce) {
	.mig-btn-ghost .wp-block-button__link {
		transition: none;
	}
}

/* Mapa koncertu (blok mig/mapa) */

.mig-map iframe {
	filter: grayscale(1) invert(0.92) contrast(0.9);
}

/*
 * Adres pod mapą na stronie koncertu. Z makiety wypadła kolumna na opis
 * wydarzenia — zespół i tak nie ma czym jej wypełniać, a mapa jest tu treścią
 * najważniejszą i dostaje pełną szerokość.
 */
.mig-koncert__adres {
	margin: 16px 0 0;
}

.mig-koncert__adres:empty {
	display: none;
}

@media (max-width: 767px) {
	.mig-map iframe {
		height: 340px;
	}
}

/* --- Mobile: 360-767px --- */

@media (max-width: 767px) {

	/* Karty repertuaru: okładka nad tekstem zamiast obok niego */
	.wp-block-post-template .wp-block-group.has-card-background-color {
		flex-wrap: wrap;
	}

	/* Mniejsze zaokrąglenia sekcji pełnoekranowych — na wąskim ekranie 36px wygląda przesadnie */
	.wp-block-cover.alignwide,
	.wp-block-group.alignwide.has-background {
		border-radius: 20px !important;
	}

	/* Sekcje hero: niższe, żeby treść nie uciekała poniżej ekranu */
	.wp-block-cover {
		min-height: 420px !important;
	}

	/* Mapa koncertu niższa na telefonie */
	.mig-map iframe {
		height: 320px;
	}

}


/*
 * WordPress renderuje szablon wpisu jako siatkę (is-layout-grid) z parametrami,
 * których nie ma już we wzorcu. Klasa z atrybutu className nie trafia na ten
 * element, więc celujemy w realnie obecne klasy bloku i wymuszamy układ poziomy.
 */
.mig-next .wp-block-post-template.is-layout-grid,
.mig-next .wp-block-post-template {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	grid-template-columns: none !important;
	gap: 16px !important;
}

/*
 * Podział ról: <li> generowane przez blok szablonu wpisu odpowiada za wymiary,
 * a .mig-next__card w środku za wygląd. Bez tego podziału padding i tło
 * nakładałyby się na obu elementach.
 */
.mig-next .wp-block-post-template > li {
	display: flex !important;
	flex: 0 0 auto !important;
	width: 100% !important;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.mig-next .wp-block-post-template > li > .mig-next__card {
	width: 100% !important;
	height: 100%;
}

/* --- Belka z profilami nad nawigacją --- */






/* Profile w menu mobilnym — ukryte na desktopie, gdzie są w belce u góry */
.mig-nav__social {
	display: none !important;
}

/* Lista koncertów w stopce mniejsza niż dane kontaktowe */
.mig-footer__list .wp-block-post-title,
.mig-footer__event .mig-footer__text {
	font-size: 16px;
	line-height: 26px;
}

@media (max-width: 767px) {
	
	/* W rozwiniętym menu profile pod pozycjami, oddzielone tą samą linią */
	.mig-navbar .wp-block-navigation__responsive-container.is-menu-open .mig-nav__social {
		display: flex !important;
		gap: 18px;
		width: 100%;
		/* Bez obramowania — separator pozycji „Kontakt” wystarcza za linię */
		margin-top: 0;
		padding-top: 28px;
	}

	.mig-navbar .wp-block-navigation__responsive-container.is-menu-open .mig-nav__social .wp-block-social-link {
		margin: 0;
		padding: 0;
	}

	.mig-navbar .wp-block-navigation__responsive-container.is-menu-open .mig-nav__social svg {
		width: 22px;
		height: 22px;
	}
}

/* --- Poprawki menu mobilnego --- */

@media (max-width: 767px) {

	/* Belka z profilami zbędna — te same ikony są w rozwiniętym menu.
	   !important, bo klasa układu bloku grupy narzuca display: flex. */
	.mig-navbar-topbar,
	
	/*
	 * Krzyżyk dokładnie tam, gdzie był hamburger (prawy górny róg, oś paska 72px),
	 * żeby czytał się jako ten sam przycisk zmieniony w zamknięcie.
	 */
	.mig-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: fixed !important;
		top: 20px !important;
		right: 22px !important;
		left: auto !important;
		width: 32px;
		height: 32px;
		padding: 0;
		z-index: 5;
		color: var(--wp--preset--color--white);
	}

	.mig-navbar .wp-block-navigation__responsive-container-close svg {
		width: 28px;
		height: 28px;
	}

	/* Panel zaczyna się pod paskiem, więc pierwsza pozycja nie koliduje z krzyżykiem */
	/* Jedna linia przed profilami, nie dwie — separator pozycji „Kontakt” wystarcza */
}

/*
 * Repertuar — wartości z makiety (nagłówek 1341, wiersz 3:673, karta 3:674).
 *
 *   nagłówek  Syne Bold 64px, wersaliki, 49px odstępu nad sekcją
 *   wiersz    dwie karty po 906px z 1834px, odstęp 22px
 *   karta     #292929, radius 21px, okładka 333px, tytuł 32px, opis 16px
 */

.mig-rep {
	margin-top: var(--mig-sekcja-odstep);
	/* Pasek nawigacji ma 90px i jest przyklejony — bez tego kotwica #single chowa nagłówek pod nim */
	scroll-margin-top: 110px;
}



.mig-rep__card {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 0;
	height: 100%;
	min-height: 0;
	padding: 0 18px;
	background-color: #292929;
	border-radius: 21px;
	overflow: hidden;
}

/* Przycisk odtwarzania: białe koło z ciemną strzałką */
.mig-play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-top: 6px;
	background-color: var(--wp--preset--color--white);
	border-radius: 9999px;
	color: var(--wp--preset--color--dark);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.mig-play:hover,
.mig-play:focus-visible {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	transform: scale(1.06);
}

.mig-rep__empty {
	margin: 0;
	color: var(--wp--preset--color--grey-100);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
}

@media (max-width: 700px) {
	.mig-rep {
		margin-top: var(--mig-sekcja-odstep);
	}

	.mig-rep__heading {
		font-size: 32px;
	}

	.mig-rep__head {
		margin-bottom: 28px;
	}

	.mig-rep__card {
		flex-direction: column !important;
		align-items: stretch;
		padding: 24px;
	}

}

@media (prefers-reduced-motion: reduce) {
	.mig-play {
		transition: none;
	}
}


/* --- Profile w wierszu menu (desktop) --- */

.mig-navbar__social {
	gap: 16px;
	margin: 0;
}

.mig-navbar__social .wp-block-social-link {
	margin: 0;
	padding: 0;
	opacity: 0.65;
	transition: opacity 0.2s ease;
}

.mig-navbar__social .wp-block-social-link:hover,
.mig-navbar__social .wp-block-social-link:focus-within {
	opacity: 1;
}

.mig-navbar__social .wp-block-social-link-anchor svg {
	width: 20px;
	height: 20px;
}

/* Na telefonie profile są w rozwiniętym menu, nie w pasku */
@media (max-width: 767px) {
	.mig-navbar .mig-navbar__social {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mig-navbar__social .wp-block-social-link {
		transition: none;
	}
}

/* --- Podstrona Muzyka: trzy sekcje na jednej stronie --- */

.mig-muzyka__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 8px;
}

.mig-muzyka__navlink {
	padding: 10px 26px;
	border: 1px solid var(--wp--preset--color--neutral-300);
	border-radius: 100px;
	color: var(--wp--preset--color--grey-100);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 16px;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.mig-muzyka__navlink:hover,
.mig-muzyka__navlink:focus-visible {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.mig-muzyka__section {
	scroll-margin-top: 110px;
}

/* Odstęp pod nagłówkiem daje teraz wiersz .mig-sekcja__head, w którym on siedzi */
.mig-muzyka__heading {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
}

.mig-muzyka__query .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 22px !important;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mig-muzyka__query .wp-block-post-template > li {
	margin: 0;
	padding: 0;
	min-width: 0;
}

@media (max-width: 1100px) {
	.mig-muzyka__query .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

@media (max-width: 700px) {
	.mig-muzyka__heading {
		font-size: 28px;
	}
}

/* --- Odtwarzacz osadzony w karcie --- */

.mig-player {
	width: 100%;
	margin-top: 10px;
	border-radius: 12px;
	overflow: hidden;
	line-height: 0;
}

.mig-player iframe {
	display: block;
	width: 100%;
	height: 152px;
	border: 0;
}

/* Przycisk odtwarzania jest teraz elementem button — zerujemy style przeglądarki */
button.mig-play {
	border: 0;
	cursor: pointer;
	padding: 0;
}

/* Karta singla jest zwięzła — bez tracklisty mieści się w niższym kaflu */

/* --- Shorts: pionowe klipy w poziomym przewijaniu --- */

/*
 * Sekcja stoi we własnym panelu — inaczej pas kafli zlewał się z tłem strony
 * i wyglądał jak przypadkowy dodatek pod „Singlami”.
 *
 * Wcięcie boczne siedzi w zmiennej, bo używa go i nagłówek, i pas kafli —
 * kafle mają zaczynać się dokładnie pod nagłówkiem, a kończyć poza panelem.
 */
.mig-shorts {
	--mig-shorts-wciecie: 48px;

	margin-top: var(--mig-sekcja-odstep);
	padding: 52px 0 56px;
	background: var(--mig-panel-tlo);
	border: var(--mig-panel-obwodka);
	border-radius: 36px;
	overflow: hidden;
}

/* Z rodzicem w selektorze — inaczej .mig-sekcja__head z dalszej części arkusza wygrywa */
.mig-shorts .mig-shorts__head {
	padding: 0 var(--mig-shorts-wciecie);
	align-items: flex-end;
	margin-bottom: 36px;
}

.mig-shorts__intro {
	gap: 12px;
	max-width: 620px;
	min-width: 0;
}

.mig-shorts__lead {
	margin: 0;
	color: var(--wp--preset--color--grey-100);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	line-height: 1.6;
}

/* Odnośnik do kanału i strzałki trzymają się razem przy prawej krawędzi */
.mig-shorts__akcje {
	gap: 20px !important;
	align-items: center;
	flex-shrink: 0;
}

/*
 * Pas dostaje wcięcie z lewej równe nagłówkowi, a z prawej dobija do krawędzi
 * panelu — ucięty kafel jest czytelniejszym sygnałem przewijania niż strzałki.
 * Maska wygasza go przy prawym boku.
 */
.mig-shorts__query {
	position: relative;
	padding-left: var(--mig-shorts-wciecie);
	-webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 96px), transparent 100%);
	mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 96px), transparent 100%);
}


/* Poziomy pas kafli — jak slider koncertów */
.mig-shorts__query .wp-block-post-template {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 20px !important;
	margin: 0;
	padding: 0 var(--mig-shorts-wciecie) 4px 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.mig-shorts__query .wp-block-post-template::-webkit-scrollbar {
	display: none;
}

/* Kafle rosną z szerokością okna, ale nie przekraczają rozmiaru z makiety */
.mig-shorts__query .wp-block-post-template > li {
	flex: 0 0 clamp(220px, 17vw, 300px);
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
}

/* Kafel w kadrze pionowym 9:16, jak na YouTube */
.mig-shorts__card {
	position: relative;
	height: 100%;
	padding: 0;
	background-color: var(--wp--preset--color--card);
	border-radius: 20px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.36);
	overflow: hidden;
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.mig-shorts__card:hover,
.mig-shorts__card:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.48);
}

.mig-shorts__card .mig-thumb {
	margin: 0;
}

.mig-shorts__card .mig-thumb__img {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	object-fit: cover;
}

/* Przycisk odtwarzania na środku miniatury */
.mig-shorts__card .mig-play {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.mig-shorts__card .mig-play:hover {
	transform: translate(-50%, -50%) scale(1.06);
}

/* Po uruchomieniu odtwarzacz zajmuje miejsce miniatury */
.mig-shorts__card .mig-player {
	margin: 0;
	border-radius: 0;
}

.mig-shorts__card .mig-player iframe {
	aspect-ratio: 9 / 16;
	height: auto;
}

.mig-shorts__card:has(.mig-player) .mig-thumb {
	display: none;
}

/*
 * Tytuł wjeżdża od dołu przy najechaniu — Shorts działają obrazem,
 * podpis na stałe tylko zaśmiecałby kadr.
 */
.mig-shorts__overlay {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 3;
	padding: 40px 16px 16px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
	transform: translateY(100%);
	opacity: 0;
	transition: transform 0.28s ease, opacity 0.28s ease;
	pointer-events: none;
}

.mig-shorts__card:hover .mig-shorts__overlay,
.mig-shorts__card:focus-within .mig-shorts__overlay {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

/* Po uruchomieniu odtwarzacza nakładka znika — nie zasłania sterowania */
.mig-shorts__card:has(.mig-player) .mig-shorts__overlay {
	display: none;
}

.mig-shorts__title {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
}

.mig-shorts__title a {
	color: inherit;
	text-decoration: none;
}

/* Delikatne przybliżenie miniatury przy najechaniu */
.mig-shorts__card .mig-thumb__img {
	transition: transform 0.4s ease;
}

.mig-shorts__card:hover .mig-thumb__img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.mig-shorts__overlay,
	.mig-shorts__card,
	.mig-shorts__card .mig-thumb__img {
		transition: none;
	}

	.mig-shorts__card:hover .mig-thumb__img,
	.mig-shorts__card:hover,
	.mig-shorts__card:focus-within {
		transform: none;
	}
}

@media (max-width: 900px) {
	.mig-shorts {
		--mig-shorts-wciecie: 20px;

		padding: 32px 0 36px;
		border-radius: 24px;
	}

	.mig-shorts .mig-shorts__head {
		align-items: flex-start;
		margin-bottom: 24px;
	}

	/* Odnośnik do kanału i strzałki lądują pod tekstem, a nie obok niego */
	.mig-shorts__akcje {
		width: 100%;
		justify-content: space-between;
	}
}

/*
 * Telefon: jeden kafel prawie na całą szerokość, z drugiego tylko skrawek.
 *
 * Kafel miał `clamp(220px, 17vw, 300px)`, a 17vw na ekranie 414px to 70px,
 * więc zawsze wygrywała dolna granica 220px — pas pokazywał półtora kafla
 * i żaden nie był na tyle duży, żeby dało się na niego patrzeć. To pionowe
 * wideo 9:16, więc szerokość kafla wprost decyduje o tym, czy da się je
 * oglądać bez wchodzenia na YouTube.
 *
 * Szerokość liczona od okna, nie wpisana na sztywno: od 100vw odejmujemy
 * wcięcie pasa (20px), odstęp między kaflami (20px) i 48px skrawka drugiego.
 * Skrawek jest tu potrzebny — bez niego nic nie mówi, że pas się przewija.
 *
 * Breakpoint 767px, nie 900: powyżej tego progu bywa okno desktopowe z paskiem
 * przewijania, a `100vw` liczy się razem z nim i kafel wychodziłby poza ekran.
 */
@media (max-width: 767px) {
	.mig-shorts__query .wp-block-post-template > li {
		flex: 0 0 calc(100vw - var(--mig-shorts-wciecie) - 68px);
	}

	/*
	 * Wygaszenie prawej krawędzi skrócone z 96px do 40. Przy skrawku szerokim
	 * na 48px dłuższa maska zjadałaby prawy brzeg głównego kafla, a nie sam
	 * podgląd następnego.
	 */
	.mig-shorts__query {
		-webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 40px), transparent 100%);
		mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 40px), transparent 100%);
	}
}

/*
 * Kafel trzyma kadr 9:16 nawet bez obrazka wyróżniającego. Wcześniej proporcja
 * była tylko na miniaturze, więc karta bez zdjęcia zapadała się do zera.
 */
.mig-shorts__card {
	aspect-ratio: 9 / 16;
	justify-content: center;
	background-color: var(--wp--preset--color--surface);
}

.mig-shorts__card .mig-thumb {
	position: absolute;
	inset: 0;
}

.mig-shorts__card .mig-thumb img {
	width: 100%;
	height: 100%;
}

/* Przycisk na środku kafla, także gdy nie ma jeszcze miniatury */
.mig-shorts__card .mig-play {
	top: 50%;
}

.mig-shorts__card:has(.mig-player) {
	aspect-ratio: auto;
}

/*
 * Miniatura klipu w Shortsach: kontener jest tam absolutny i wypełnia kafel
 * o proporcjach 9:16, więc obrazek też musi być absolutny. Reguła MUSI zostać
 * zawężona do Shortsów — jako globalna wyjmowała z układu miniatury w innych
 * sekcjach i karty zapadały się do pasków.
 */
.mig-shorts__card .mig-thumb__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.mig-shorts__card:hover .mig-thumb__img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.mig-thumb__img {
		transition: none;
	}

	.mig-shorts__card:hover .mig-thumb__img {
		transform: none;
	}
}

/* Po uruchomieniu kafel Shortsa trzyma kadr pionowy — ramka wypełnia go w całości */
.mig-shorts__card:has(.mig-player) {
	aspect-ratio: 9 / 16;
}

.mig-shorts__card .mig-player {
	position: absolute;
	inset: 0;
	z-index: 4;
}

.mig-shorts__card .mig-player iframe {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

/* Zamknięcie odtwarzacza — usunięcie ramki zatrzymuje film */
.mig-player {
	position: relative;
}

.mig-player__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background-color: rgba(0, 0, 0, 0.6);
	border: 0;
	border-radius: 9999px;
	color: var(--wp--preset--color--white);
	cursor: pointer;
}

.mig-player__close:hover,
.mig-player__close:focus-visible {
	background-color: var(--wp--preset--color--primary);
}

.mig-player__close svg {
	width: 18px;
	height: 18px;
}



/*
 * Przycisk odtwarzania w formie znanej z YouTube — czerwony prostokąt
 * z białym trójkątem. Czytelny sygnał „tu odtworzysz film”, bez sugerowania
 * firmowania przez YouTube. Wspólny dla Shortsów i Singli, bo w obu
 * przypadkach materiał pochodzi z YouTube.
 */
.mig-shorts__card .mig-play,
.mig-single__card .mig-play {
	width: 62px;
	height: 44px;
	background-color: rgba(0, 0, 0, 0.55);
	border-radius: 12px;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.mig-shorts__card .mig-play svg,
.mig-single__card .mig-play svg {
	display: none;
}

/* Trójkąt zbudowany z obramowania — bez dodatkowego pliku graficznego */
.mig-shorts__card .mig-play::before,
.mig-single__card .mig-play::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	margin-left: 3px;
	border-style: solid;
	border-width: 8px 0 8px 14px;
	border-color: transparent transparent transparent #fff;
}

.mig-shorts__card:hover .mig-play,
.mig-shorts__card .mig-play:focus-visible,
.mig-single__card:hover .mig-play,
.mig-single__card .mig-play:focus-visible {
	background-color: #ff0000;
	transform: translate(-50%, -50%) scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.mig-shorts__card .mig-play,
	.mig-single__card .mig-play {
		transition: none;
	}

	.mig-shorts__card:hover .mig-play,
	.mig-single__card:hover .mig-play {
		transform: translate(-50%, -50%);
	}
}


/* --- Występowaliśmy: archiwum zagranych koncertów --- */

.mig-past {
	margin-top: var(--mig-sekcja-odstep);
}




/*
 * Poziomy pas kart. Trzy karty mieszczą się w widoku na desktopie, więc
 * strzałki włączają się dopiero na węższych ekranach — decyduje o tym theme.js.
 */
/*
 * Trzy karty obok siebie, bez przewijania. Sekcja pokazuje trzy ostatnie
 * zagrane koncerty i tyle — slider kazał klikać strzałki po treść, która i tak
 * mieści się w rzędzie, a strona główna miała już cztery sekcje do przewijania.
 */
.mig-past__query .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 20px !important;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mig-past__query .wp-block-post-template > li {
	display: flex !important;
	margin: 0;
	padding: 0;
	min-width: 0;
}

@media (max-width: 1100px) {
	.mig-past__query .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 700px) {
	.mig-past__query .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

.mig-past__card {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	width: 100%;
	overflow: hidden;
	background-color: var(--wp--preset--color--card);
	border-radius: 24px;
}

/* Zdjęcie w kadrze panoramicznym; bez obrazka zostaje samo tło karty */
.mig-past__photo {
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.mig-past__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.mig-past__card:hover .mig-past__photo img {
	transform: scale(1.04);
}

.mig-past__body {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	padding: 20px 24px 24px;
}

.mig-past__place,
.mig-past__meta {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 8px !important;
}

.mig-past__place .mig-icon {
	flex: 0 0 auto;
	color: var(--wp--preset--color--primary);
}

.mig-past__meta .mig-icon {
	flex: 0 0 auto;
	color: var(--wp--preset--color--grey-100);
}

.mig-past__venue {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
}

.mig-past__venue a {
	color: inherit;
	text-decoration: none;
}

.mig-past__venue a:hover,
.mig-past__venue a:focus-visible {
	text-decoration: underline;
}

.mig-past__date {
	margin: 0;
	color: var(--wp--preset--color--grey-100);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	line-height: 26px;
}

.mig-past__empty {
	margin: 0;
	color: var(--wp--preset--color--grey-100);
	font-family: var(--wp--preset--font-family--inter);
}

@media (prefers-reduced-motion: reduce) {
	.mig-past__photo img {
		transition: none;
	}

	.mig-past__card:hover .mig-past__photo img {
		transform: none;
	}
}

@media (max-width: 767px) {
	.mig-past {
		margin-top: var(--mig-sekcja-odstep);
	}

	.mig-past__heading {
		font-size: 28px;
	}

	.mig-past__body {
		padding: 16px 18px 20px;
	}

	.mig-past__venue {
		font-size: 18px;
	}
}

/*
 * Karta bez obrazka wyróżniającego dostaje zapasowy kadr, żeby pas nie rozjeżdżał
 * się na kartach różnej wysokości. Po wgraniu zdjęcia blok obrazka renderuje się
 * sam i ta reguła przestaje obowiązywać.
 */
.mig-past__card:not(:has(.mig-past__photo))::before {
	content: "";
	display: block;
	aspect-ratio: 16 / 9;
	/* Adres i punkt ostrości podaje inc/settings.php — oba zmienia się w panelu. */
	background-image:
		linear-gradient(180deg, rgba(20, 20, 20, 0.25) 0%, rgba(20, 20, 20, 0.85) 100%),
		var(--mig-koncert-fallback, url("assets/images/koncert-tlum.jpg"));
	background-position: var(--mig-koncert-focal, 50% 50%);
	background-size: cover;
}


/* --- Strona Kontakt (node 1:2442) --- */

.mig-kontakt {
	margin-top: 24px;
}

/* Nagłówek na zdjęciu — nakładka bordowa jak w hero strony głównej */
.mig-kontakt__hero {
	padding: 64px 72px;
}

.mig-kontakt__hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: 640px;
}

.mig-kontakt__title {
	margin: 0 0 20px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: clamp(40px, 5vw, 76px);
	font-weight: 700;
	line-height: 1.02;
}

.mig-kontakt__lead {
	margin: 0;
	max-width: 480px;
	color: var(--wp--preset--color--grey-100);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	line-height: 26px;
}

/*
 * Dane po lewej, karta formularza po prawej. Karta wjeżdża w zdjęcie
 * ujemnym marginesem — tak jak w makiecie.
 */
.mig-kontakt__row {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 40px !important;
	align-items: flex-start;

	/*
	 * Blok cover ma position: relative, więc bez własnego kontekstu ten wiersz
	 * malowałby się POD zdjęciem — karta była podciągnięta, ale niewidoczna.
	 */
	position: relative;
	z-index: 2;
}

.mig-kontakt__info {
	display: flex !important;
	flex: 1 1 0%;
	flex-wrap: wrap !important;
	gap: 48px 40px !important;
	padding-top: 56px;
	min-width: 0;
}

.mig-kontakt__block {
	display: flex !important;
	flex: 1 1 240px;
	flex-direction: column !important;
	gap: 16px !important;
	min-width: 0;
}

.mig-kontakt__label {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.mig-kontakt__text {
	margin: 0;
	color: var(--wp--preset--color--grey-100);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	line-height: 28px;
}

.mig-kontakt__text a {
	color: inherit;
	text-decoration: none;
}

.mig-kontakt__text a:hover,
.mig-kontakt__text a:focus-visible {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

.mig-kontakt__text--link a {
	text-decoration: underline;
}

/* Biała karta formularza */
.mig-kontakt__form {
	display: flex !important;
	flex: 0 0 46%;
	flex-direction: column !important;
	gap: 20px !important;
	padding: 40px;
	background-color: var(--wp--preset--color--grey-50, #dedee0);
	border-radius: 24px;
}

/*
 * Karta wjeżdża w zdjęcie, jak w makiecie. Selektor musi być z rodzicem, bo
 * WordPress zeruje marginesy dzieci układu flex regułą
 * `.is-layout-flex > :is(*, div){margin:0}` — pojedyncza klasa jej nie przebije.
 */
.mig-kontakt__row > .mig-kontakt__form {
	margin-top: -260px;
}

.mig-kontakt__formtitle {
	margin: 0;
	color: var(--wp--preset--color--dark);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.mig-kontakt__formlead {
	margin: 0;
	color: #4a4a4a;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px;
	line-height: 24px;
}

/* Podgląd pól z makiety — same etykiety nad kreską, bez pól wejściowych */
.mig-form {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.mig-form__field {
	margin: 0;
	padding-bottom: 10px;
	color: #8a8a8a;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px;
	line-height: 24px;
	border-bottom: 1px solid #b9b9bd;
}

.mig-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	padding: 14px 34px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 100px;
	transition: background-color 0.2s ease;
}

.mig-form__submit:hover,
.mig-form__submit:focus-visible {
	background-color: #931f27;
	color: var(--wp--preset--color--white);
}

@media (max-width: 1100px) {
	.mig-kontakt__row {
		flex-wrap: wrap !important;
	}

	.mig-kontakt__row > .mig-kontakt__form {
		flex: 1 1 100%;
		margin-top: 0;
	}

	.mig-kontakt__info {
		flex: 1 1 100%;
		padding-top: 40px;
	}
}

@media (max-width: 767px) {
	.mig-kontakt__hero {
		padding: 40px 24px;
	}

	.mig-kontakt__form {
		padding: 28px 20px;
	}

	.mig-kontakt__info {
		gap: 32px !important;
	}
}

/*
 * Formularz Contact Form 7 w karcie kontaktowej — pola jako etykieta nad kreską,
 * tak jak w makiecie. Wtyczka wstawia własne znaczniki, więc celujemy w nie.
 */
.mig-kontakt__form .wpcf7 {
	width: 100%;
}

.mig-kontakt__form .wpcf7-form label {
	display: block;
	margin-bottom: 20px;
	color: #6c6c70;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	line-height: 20px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.mig-kontakt__form .wpcf7-form input[type="text"],
.mig-kontakt__form .wpcf7-form input[type="email"],
.mig-kontakt__form .wpcf7-form input[type="tel"],
.mig-kontakt__form .wpcf7-form input[type="date"],
.mig-kontakt__form .wpcf7-form select,
.mig-kontakt__form .wpcf7-form textarea {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 6px 0 10px;
	background-color: transparent;
	color: var(--wp--preset--color--dark);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	line-height: 26px;
	text-transform: none;
	letter-spacing: normal;
	border: 0;
	border-bottom: 1px solid #b9b9bd;
	border-radius: 0;
	appearance: none;
}

/* Trzy wiersze wystarczą — wyższe pole niepotrzebnie wydłuża kartę */
.mig-kontakt__form .wpcf7-form textarea {
	height: 78px;
	min-height: 78px;
	resize: vertical;
}

/* Ciaśniejsze odstępy między polami, żeby karta nie rosła w pionie */
.mig-kontakt__form .wpcf7-form p {
	margin: 0;
}

.mig-kontakt__form .wpcf7-form input:focus,
.mig-kontakt__form .wpcf7-form select:focus,
.mig-kontakt__form .wpcf7-form textarea:focus {
	outline: 0;
	border-bottom-color: var(--wp--preset--color--primary);
}

.mig-kontakt__form .wpcf7-form input[type="submit"] {
	margin-top: 8px;
	padding: 14px 34px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 16px;
	font-weight: 700;
	border: 0;
	border-radius: 100px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.mig-kontakt__form .wpcf7-form input[type="submit"]:hover,
.mig-kontakt__form .wpcf7-form input[type="submit"]:focus-visible {
	background-color: #931f27;
}

/* Komunikaty wtyczki — czytelne na jasnej karcie */
.mig-kontakt__form .wpcf7-not-valid-tip {
	color: #931f27;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	text-transform: none;
}

.mig-kontakt__form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 16px;
	color: var(--wp--preset--color--dark);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	line-height: 22px;
	border-radius: 8px;
}


/* --- Single: samodzielny kafel z miniaturą i odtwarzaczem --- */

/*
 * Karta nie dziedziczy po .mig-rep__card ani po Shortsach. Tamte mają własne
 * proporcje i własne założenia (poziomy układ płyt, pionowy kadr klipów),
 * więc nadpisywanie ich prowadziło do usterek, które trudno było przewidzieć.
 */
.mig-single__card {
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 0 !important;
	height: auto;
	padding: 0;
	background-color: var(--wp--preset--color--card, #292929);
	border-radius: 16px;
	overflow: hidden;
}

.mig-single__card .mig-thumb__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.mig-single__card:hover .mig-thumb__img {
	transform: scale(1.04);
}

/*
 * Kadr: miniatura, przycisk i odtwarzacz w jednym kontenerze.
 *
 * Kontener MA WŁASNE proporcje, a zawartość wypełnia go bezwzględnie. Wersja,
 * w której wysokość brała się z obrazka, dawała cykliczną zależność: komórka
 * siatki czekała na kartę, karta na kadr, kadr na obrazek ładowany leniwie.
 * Efektem był kadr o zerowej wysokości przy zawartości 331 px i karta, która
 * zmieniała rozmiar po uruchomieniu filmu. Tak samo rozwiązane są Shorts.
 */
.mig-single__media {
	position: relative;
	flex: 0 0 auto;

	/*
	 * Wysokość z procentowego wcięcia górnego, nie z aspect-ratio.
	 * Procent liczy się od SZEROKOŚCI rodzica, która jest tu znana od razu,
	 * więc wynik nie zależy od zawartości. `aspect-ratio` na elemencie układu
	 * kolumnowego, którego dzieci są pozycjonowane bezwzględnie, wyliczało się
	 * z zerowej treści i kadr znikał. 56,25% to 9/16.
	 */
	height: 0;
	padding: 56.25% 0 0;
	overflow: hidden;
	line-height: 0;
}

.mig-single__card .mig-thumb,
.mig-single__card .mig-player {
	position: absolute;
	inset: 0;
	margin: 0;
	border-radius: 0;
}

.mig-single__card .mig-play {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.mig-single__card .mig-play:hover,
.mig-single__card .mig-play:focus-visible {
	transform: translate(-50%, -50%) scale(1.06);
}

.mig-single__card .mig-player iframe {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

.mig-single__card:has(.mig-player) .mig-thumb {
	display: none;
}

/*
 * Nazwa utworu wjeżdża od dołu przy najechaniu, zamiast stać w pasku pod kadrem.
 *
 * Pasek niósł tytuł i rok, ale rok jest pusty przy wszystkich pozycjach, a tytuł
 * zespół ma wypalony w miniaturze z YouTube — napis pod obrazkiem powtarzał więc
 * napis na obrazku. Ta sama mechanika działa w sekcji „Z życia zespołu”.
 */
.mig-single__overlay {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 3;
	padding: 44px 16px 14px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0) 100%);
	transform: translateY(100%);
	opacity: 0;
	transition: transform 0.28s ease, opacity 0.28s ease;
	pointer-events: none;
}

/* focus-within, żeby nazwa pokazała się też przy dojściu klawiaturą */
.mig-single__card:hover .mig-single__overlay,
.mig-single__card:focus-within .mig-single__overlay {
	transform: translateY(0);
	opacity: 1;
}

/* Po uruchomieniu filmu nakładka znika — nie zasłania sterowania */
.mig-single__card:has(.mig-player) .mig-single__overlay {
	display: none;
}

.mig-single__name {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 15px;
	font-weight: 500;
	/* Rodzic ma line-height: 0, żeby kadr nie łapał dodatkowej wysokości */
	line-height: 1.35;
}

/* Karta bez miniatury nie może się zapaść — kadr trzyma proporcje */
.mig-single__card:not(:has(.mig-thumb__img)):not(:has(.mig-player))::before {
	content: "";
	display: block;
	aspect-ratio: 16 / 9;
	background-color: var(--wp--preset--color--surface, #1c1a1a);
}

@media (prefers-reduced-motion: reduce) {
	.mig-single__card .mig-thumb__img,
	.mig-single__card:hover .mig-thumb__img,
	.mig-single__overlay {
		transition: none;
		transform: none;
	}
}

/* --- Strona Kontakt (node 1:2442) --- */

.mig-kontakt {
	margin-top: 24px;
}

/* Nagłówek na zdjęciu — nakładka bordowa jak w hero strony głównej */
.mig-kontakt__hero {
	padding: 64px 72px;
}

.mig-kontakt__hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: 640px;
}

.mig-kontakt__title {
	margin: 0 0 20px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: clamp(40px, 5vw, 76px);
	font-weight: 700;
	line-height: 1.02;
}

.mig-kontakt__lead {
	margin: 0;
	max-width: 480px;
	color: var(--wp--preset--color--grey-100);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	line-height: 26px;
}

/*
 * Dane po lewej, karta formularza po prawej. Karta wjeżdża w zdjęcie
 * ujemnym marginesem — tak jak w makiecie.
 */
.mig-kontakt__row {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 40px !important;
	align-items: flex-start;

	/*
	 * Blok cover ma position: relative, więc bez własnego kontekstu ten wiersz
	 * malowałby się POD zdjęciem — karta była podciągnięta, ale niewidoczna.
	 */
	position: relative;
	z-index: 2;
}

.mig-kontakt__info {
	display: flex !important;
	flex: 1 1 0%;
	flex-wrap: wrap !important;
	gap: 48px 40px !important;
	padding-top: 56px;
	min-width: 0;
}

.mig-kontakt__block {
	display: flex !important;
	flex: 1 1 240px;
	flex-direction: column !important;
	gap: 16px !important;
	min-width: 0;
}

.mig-kontakt__label {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.mig-kontakt__text {
	margin: 0;
	color: var(--wp--preset--color--grey-100);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	line-height: 28px;
}

.mig-kontakt__text a {
	color: inherit;
	text-decoration: none;
}

.mig-kontakt__text a:hover,
.mig-kontakt__text a:focus-visible {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

.mig-kontakt__text--link a {
	text-decoration: underline;
}

/* Biała karta formularza */
.mig-kontakt__form {
	display: flex !important;
	flex: 0 0 46%;
	flex-direction: column !important;
	gap: 20px !important;
	padding: 40px;
	background-color: var(--wp--preset--color--grey-50, #dedee0);
	border-radius: 24px;
}

/*
 * Karta wjeżdża w zdjęcie, jak w makiecie. Selektor musi być z rodzicem, bo
 * WordPress zeruje marginesy dzieci układu flex regułą
 * `.is-layout-flex > :is(*, div){margin:0}` — pojedyncza klasa jej nie przebije.
 */
.mig-kontakt__row > .mig-kontakt__form {
	margin-top: -260px;
}

.mig-kontakt__formtitle {
	margin: 0;
	color: var(--wp--preset--color--dark);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.mig-kontakt__formlead {
	margin: 0;
	color: #4a4a4a;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px;
	line-height: 24px;
}

/* Podgląd pól z makiety — same etykiety nad kreską, bez pól wejściowych */
.mig-form {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.mig-form__field {
	margin: 0;
	padding-bottom: 10px;
	color: #8a8a8a;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px;
	line-height: 24px;
	border-bottom: 1px solid #b9b9bd;
}

.mig-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	padding: 14px 34px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 100px;
	transition: background-color 0.2s ease;
}

.mig-form__submit:hover,
.mig-form__submit:focus-visible {
	background-color: #931f27;
	color: var(--wp--preset--color--white);
}

@media (max-width: 1100px) {
	.mig-kontakt__row {
		flex-wrap: wrap !important;
	}

	.mig-kontakt__row > .mig-kontakt__form {
		flex: 1 1 100%;
		margin-top: 0;
	}

	.mig-kontakt__info {
		flex: 1 1 100%;
		padding-top: 40px;
	}
}

@media (max-width: 767px) {
	.mig-kontakt__hero {
		padding: 40px 24px;
	}

	.mig-kontakt__form {
		padding: 28px 20px;
	}

	.mig-kontakt__info {
		gap: 32px !important;
	}
}

/*
 * Formularz Contact Form 7 w karcie kontaktowej — pola jako etykieta nad kreską,
 * tak jak w makiecie. Wtyczka wstawia własne znaczniki, więc celujemy w nie.
 */
.mig-kontakt__form .wpcf7 {
	width: 100%;
}

.mig-kontakt__form .wpcf7-form label {
	display: block;
	margin-bottom: 20px;
	color: #6c6c70;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	line-height: 20px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.mig-kontakt__form .wpcf7-form input[type="text"],
.mig-kontakt__form .wpcf7-form input[type="email"],
.mig-kontakt__form .wpcf7-form input[type="tel"],
.mig-kontakt__form .wpcf7-form input[type="date"],
.mig-kontakt__form .wpcf7-form select,
.mig-kontakt__form .wpcf7-form textarea {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 6px 0 10px;
	background-color: transparent;
	color: var(--wp--preset--color--dark);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	line-height: 26px;
	text-transform: none;
	letter-spacing: normal;
	border: 0;
	border-bottom: 1px solid #b9b9bd;
	border-radius: 0;
	appearance: none;
}

/* Trzy wiersze wystarczą — wyższe pole niepotrzebnie wydłuża kartę */
.mig-kontakt__form .wpcf7-form textarea {
	height: 78px;
	min-height: 78px;
	resize: vertical;
}

/* Ciaśniejsze odstępy między polami, żeby karta nie rosła w pionie */
.mig-kontakt__form .wpcf7-form p {
	margin: 0;
}

.mig-kontakt__form .wpcf7-form input:focus,
.mig-kontakt__form .wpcf7-form select:focus,
.mig-kontakt__form .wpcf7-form textarea:focus {
	outline: 0;
	border-bottom-color: var(--wp--preset--color--primary);
}

.mig-kontakt__form .wpcf7-form input[type="submit"] {
	margin-top: 8px;
	padding: 14px 34px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 16px;
	font-weight: 700;
	border: 0;
	border-radius: 100px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.mig-kontakt__form .wpcf7-form input[type="submit"]:hover,
.mig-kontakt__form .wpcf7-form input[type="submit"]:focus-visible {
	background-color: #931f27;
}

/* Komunikaty wtyczki — czytelne na jasnej karcie */
.mig-kontakt__form .wpcf7-not-valid-tip {
	color: #931f27;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	text-transform: none;
}

.mig-kontakt__form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 16px;
	color: var(--wp--preset--color--dark);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	line-height: 22px;
	border-radius: 8px;
}




/* --- Strona O nas (node 1:2210) --- */

/* Zdjęcie obok tekstu w sekcji „Poznajmy się" */
.mig-onas__foto img {
	width: 100%;
	height: auto;
	border-radius: 24px;
}

/* Karty składu — dwie na wiersz, jak w makiecie */
.mig-osoba {
	height: 100%;
	padding: 28px 30px 30px;
	background-color: var(--wp--preset--color--card, #292929);
	border-radius: 21px;
}

.mig-osoba img {
	width: 100%;
	height: auto;
	margin-bottom: 18px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 14px;
}

.mig-osoba h3 {
	margin: 0 0 10px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
}

.mig-osoba p {
	margin: 0;
	color: var(--wp--preset--color--grey-100);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px;
	line-height: 26px;
}

/* Teledysk — szeroki kadr z zaokrągleniem */
.mig-onas__wideo iframe,
.mig-onas__wideo .wp-block-embed__wrapper > iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: 24px;
	display: block;
}

/* Bordowy panel z osią czasu */
.mig-osiagniecia {
	padding: 56px clamp(24px, 4vw, 64px);
	background-color: #2d090b;
	border-radius: 36px;
}

.mig-osiagniecia > h2 {
	margin: 0 0 36px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 700;
}

/* Wiersz osi: rok po lewej, opis w środku, zdjęcie po prawej */
.mig-osiagniecie {
	padding: 26px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.mig-osiagniecie:first-of-type {
	border-top: 0;
}

.mig-osiagniecie__rok {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

.mig-osiagniecie__miejsce {
	margin: 4px 0 0;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 16px;
	font-weight: 700;
}

.mig-osiagniecie h3 {
	margin: 0 0 8px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 20px;
	font-weight: 700;
}

.mig-osiagniecie p:not(.mig-osiagniecie__rok):not(.mig-osiagniecie__miejsce) {
	margin: 0;
	color: var(--wp--preset--color--grey-100);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px;
	line-height: 26px;
}

@media (max-width: 767px) {
	.mig-osiagniecia {
		padding: 32px 20px;
	}

	.mig-osoba {
		padding: 20px 22px 24px;
	}
}

/*
 * Pole zastępcze w miejscu zdjęcia. Pokazuje proporcje kadru, zanim materiały
 * dotrą — dzięki temu układ da się ocenić od razu. Po wstawieniu bloku Obraz
 * akapit z tą klasą po prostu się usuwa.
 */
.mig-fotka {
	margin: 0;
}

/*
 * Bez wymuszonych proporcji — o kadrze decyduje edytor, nie arkusz.
 *
 * Wcześniej stało tu aspect-ratio: 4/3 z przycięciem od środka. Zespół wgrywał
 * zdjęcie i nie miał jak wpłynąć na to, co z niego zostanie: własne ustawienia
 * bloku obrazu przykrywała reguła motywu. Teraz działa i pole „Proporcje”
 * w ustawieniach bloku, i narzędzie „Przytnij” na pasku narzędzi.
 */
.mig-fotka img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
}

/* W karcie składu zdjęcie stoi nad nagłówkiem */
.mig-osoba .mig-fotka {
	margin-bottom: 18px;
}

/*
 * Układ naprzemienny w sekcji „Poznajmy się": zdjęcie raz z lewej, raz z prawej.
 * W znacznikach kolejność jest zawsze taka sama — zdjęcie, potem tekst — a odwraca
 * ją CSS. Dzięki temu na wąskim ekranie, gdzie kolumny układają się w pion,
 * kolejność zostaje spójna: najpierw obraz, pod nim opis.
 */
.mig-zigzag {
	align-items: center;
	gap: 40px;
	margin-bottom: 48px;
}

/*
 * Trzy pary tekst-zdjęcie przewijane po jednej.
 *
 * Trzy bloki jeden pod drugim to na telefonie długa kolumna, przez którą trzeba
 * się przewinąć, żeby dojść do składu zespołu. Jako pas czyta się szybciej,
 * a przesunięcie palcem jest naturalniejsze niż długie scrollowanie.
 *
 * Krok slidera liczy theme.js: bez elementów listy w środku bierze szerokość
 * widoku, co przy slajdzie na 100% daje dokładnie jedną parę.
 */
.mig-poznajmy {
	position: relative;
	margin-bottom: 48px;
	padding: 40px;
	background: var(--mig-panel-tlo);
	border: var(--mig-panel-obwodka);
	border-radius: 36px;
}

.mig-poznajmy__pas {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 0 !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.mig-poznajmy__pas::-webkit-scrollbar {
	display: none;
}

/*
 * Kolumny od górnej krawędzi, nie od środka.
 *
 * Blok kolumn centruje je w pionie, więc przy różnej długości opisów zdjęcie
 * siedziało w każdym slajdzie na innej wysokości i skakało przy przewijaniu.
 * Wyrównanie do góry trzyma je w tym samym miejscu na wszystkich trzech.
 */
.mig-poznajmy__pas > .mig-zigzag {
	flex: 0 0 100% !important;
	min-width: 0;
	align-items: flex-start !important;
	/* Odstęp między parami dawał w pasie martwe pole — rytm robi teraz sam slider */
	margin-bottom: 0;
	scroll-snap-align: start;
}

/*
 * Strzałki w prawym górnym rogu panelu, na obu szerokościach.
 *
 * Pozycja bezwzględna, a nie miejsce w wierszu nagłówka: nagłówek jest zwykłym
 * blokiem w treści strony, więc nie da się go opakować razem ze strzałkami bez
 * grzebania redakcji w strukturze. Róg działa tak samo niezależnie od tego,
 * co zespół wpisze w nagłówku.
 */
.mig-poznajmy__nav {
	position: absolute;
	top: 40px;
	right: 40px;
	margin: 0;
	z-index: 2;
}

/* Nagłówek ustępuje strzałkom miejsca, żeby dłuższy tekst pod nie nie wszedł */
.mig-poznajmy > .mig-sekcja__heading {
	margin: 0 0 28px;
	padding-right: 130px;
}

@media (max-width: 900px) {
	.mig-poznajmy {
		padding: 24px 20px 28px;
		border-radius: 24px;
	}

	.mig-poznajmy__nav {
		top: 24px;
		right: 20px;
	}

	.mig-poznajmy > .mig-sekcja__heading {
		margin-bottom: 20px;
		padding-right: 116px;
	}
}

/* Jak wyżej: proporcje ustawia się przy zdjęciu w edytorze, nie tutaj */
.mig-zigzag img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24px;
}

.mig-zigzag h3 {
	margin: 0 0 12px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 700;
	line-height: 1.2;
}

/* Kolumny bloku stają się flexem dopiero powyżej 781 px — tam odwracamy wiersz */
@media (min-width: 782px) {
	.mig-zigzag.mig-zigzag--odwrotny {
		flex-direction: row-reverse;
	}
}

@media (max-width: 781px) {
	.mig-zigzag {
		margin-bottom: 32px;
	}
}

/*
 * Formularz na desktopie: krótkie pola po dwa w rzędzie.
 * Karta ma około 800 px szerokości, więc jedna kolumna niepotrzebnie ciągnęła
 * ją w dół — przy siedmiu polach robiło się z tego bardzo wysokie pudło.
 *
 * Które pola mają zająć całą szerokość, rozpoznajemy po zawartości (:has),
 * a nie po pozycji — dzięki temu zmiana kolejności pól w panelu niczego nie psuje.
 */
@media (min-width: 900px) {
	.mig-kontakt__form .wpcf7-form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px 20px;
		align-items: end;
	}

	.mig-kontakt__form .wpcf7-form > p {
		margin: 0;
	}

	.mig-kontakt__form .wpcf7-form label {
		margin-bottom: 0;
	}

	/* Wiadomość, przycisk, honeypot i komunikaty — przez całą szerokość */
	.mig-kontakt__form .wpcf7-form > p:has(textarea),
	.mig-kontakt__form .wpcf7-form > p:has(input[type="submit"]),
	.mig-kontakt__form .wpcf7-form > p:has([data-cf7apps-honeypot]),
	.mig-kontakt__form .wpcf7-form > .wpcf7-response-output {
		grid-column: 1 / -1;
	}

	/* Ciaśniejsza karta — przy dwóch kolumnach nie potrzeba tyle marginesu */
	.mig-kontakt__row > .mig-kontakt__form {
		gap: 16px !important;
		padding: 32px;
	}

	.mig-kontakt__form .wpcf7-form textarea {
		height: 68px;
		min-height: 68px;
	}
}

/*
 * Dyskografia: dwa rodzaje siatki.
 * Płyty to szerokie karty z tracklistą — po dwie w rzędzie. Single i teledyski
 * to kafle z miniaturą 16:9, więc mieszczą się po trzy i lepiej wypełniają rząd.
 */
/*
 * Sekcja kafli siedzi w panelu z gradientem, tym samym co płyty i „Z życia
 * zespołu”. Bez niego kafle wisiały na gołym tle między panelami płyt
 * i podstrona rwała się na dwa różne rytmy.
 */
.mig-muzyka__section--kafel {
	padding: 44px 40px 48px;
	background: var(--mig-panel-tlo);
	border: var(--mig-panel-obwodka);
	border-radius: 36px;
}

/*
 * Dwa w rzędzie, tak jak single na stronie głównej. Kafel 868×488 px zamiast
 * 425×239 — miniatura z YouTube ma źródło 1280×720, więc przy tej szerokości
 * nadal nie jest rozciągana.
 *
 * Trzy kolumny odpadły nie z powodu rozmiaru, tylko rachunku: przy czterech
 * pozycjach zostawiają sierotę w drugim rzędzie.
 */
.mig-muzyka__section--kafel .wp-block-post-template {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 22px !important;
}

/* --- Singiel: jeden na widok, przewijany strzałkami --- */

.mig-slajdy {
	position: relative;
	padding: 44px 40px 48px;
	background: var(--mig-panel-tlo);
	border: var(--mig-panel-obwodka);
	border-radius: 36px;
	overflow: hidden;
}

/*
 * Slajd zajmuje całą szerokość pasa, więc na widoku jest zawsze jeden.
 * scroll-snap trzyma go w kadrze także po przewinięciu palcem, a strzałki
 * (theme.js) przesuwają dokładnie o szerokość slajdu — odstęp jest zerowy,
 * żeby sąsiad nie wystawał zza krawędzi.
 */
.mig-slajdy .wp-block-post-template {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 0 !important;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.mig-slajdy .wp-block-post-template::-webkit-scrollbar {
	display: none;
}

.mig-slajdy .wp-block-post-template > li {
	flex: 0 0 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
}

.mig-slajd {
	/* Szerokość kadru w jednym miejscu — używa jej i kadr, i wyliczenie jego wysokości */
	--mig-slajd-kadr: 58%;

	display: flex !important;
	flex-direction: row !important;
	/* stretch, żeby kolumna tekstu sięgała dolnej krawędzi kadru i mogła tam zakotwiczyć odnośniki */
	align-items: stretch;
	gap: 40px !important;
	padding: 8px 0;
}

/*
 * Kadr 16:9, nie kwadrat. Miniatura z YouTube jest kadrem 16:9 z tytułem
 * wypalonym w obrazie — kwadrat ucinał go po bokach. Przy okazji kadr robi się
 * na tyle duży, że klip da się wygodnie oglądać bez wychodzenia ze strony.
 *
 * Wysokość z procentowego wcięcia, bo dzieci są pozycjonowane bezwzględnie
 * i proporcja liczona od treści dałaby zero (pułapka 5.24). UWAGA: padding
 * w procentach liczy się od szerokości RODZICA, nie własnej (pułapka 5.9),
 * więc 56,25% trzeba przemnożyć przez udział kadru w slajdzie.
 */
.mig-slajd__media {
	position: relative;
	flex: 0 0 var(--mig-slajd-kadr);
	height: 0;
	padding: calc(var(--mig-slajd-kadr) * 0.5625) 0 0;
	background-color: var(--wp--preset--color--surface);
	border-radius: 20px;
	overflow: hidden;
	line-height: 0;
}

.mig-slajd__media .mig-thumb,
.mig-slajd__media .mig-player {
	position: absolute;
	inset: 0;
	margin: 0;
	border-radius: 0;
}

.mig-slajd__media .mig-thumb__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Kadr ma już 16:9, więc odtwarzacz wypełnia go co do piksela — bez czarnych pasów */
.mig-slajd__media .mig-player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

/* Przycisk w kształcie youtube'owym, powiększony pod duży kadr slajdu */
.mig-slajd__media .mig-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 86px;
	height: 60px;
	margin: 0;
	transform: translate(-50%, -50%);
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 16px;
	z-index: 4;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.mig-slajd__media .mig-play svg {
	display: none;
}

.mig-slajd__media .mig-play::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	margin-left: 4px;
	border-style: solid;
	border-width: 11px 0 11px 19px;
	border-color: transparent transparent transparent #fff;
}

.mig-slajd__media .mig-play:hover,
.mig-slajd__media .mig-play:focus-visible {
	background-color: #ff0000;
	transform: translate(-50%, -50%) scale(1.06);
}

/*
 * Tekst wyśrodkowany w pionie, odnośniki zakotwiczone przy dole. Dolne wcięcie
 * rezerwuje im miejsce, żeby przy długim opisie nie weszły na ostatni wiersz.
 */
.mig-slajd__body {
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start;
	justify-content: center;
	gap: 0 !important;
	flex: 1 1 0%;
	min-width: 0;
	padding-bottom: 58px;
}

.mig-slajd__title {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: clamp(32px, 3vw, 52px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.mig-slajd__rok {
	margin: 12px 0 0;
	color: var(--wp--preset--color--grey-100);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	letter-spacing: 0.04em;
}

.mig-slajd__rok:empty,
.mig-slajd__opis:empty {
	display: none;
}

/*
 * Opis ma stałą wysokość, nie taką jak treść.
 *
 * Bez tego każdy slajd był innej wysokości i przyciski serwisów lądowały raz
 * wyżej, raz niżej — przy przewijaniu skakały w pionie. Liczba wierszy dobrana
 * do najdłuższego opisu w bazie (222 znaki), więc na razie nic się nie urywa,
 * a gdy ktoś napisze dłuższy, zostanie przycięty zamiast rozpychać slajd.
 *
 * min-height razem z klamrą: klamra pilnuje górnej granicy, min-height dolnej.
 */
.mig-slajd__opis {
	--mig-opis-linie: 4;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--mig-opis-linie);
	line-clamp: var(--mig-opis-linie);
	overflow: hidden;
	margin: 18px 0 0;
	max-width: 62ch;
	min-height: calc(var(--mig-opis-linie) * 1.6em);
	color: var(--wp--preset--color--grey-100);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px;
	line-height: 1.6;
}

/*
 * Odnośniki siadają na dolnej krawędzi kadru, a nie tuż pod opisem.
 *
 * Pozycja bezwzględna zamiast marginesu automatycznego, bo tekst ma zostać
 * wyśrodkowany w pionie: margines auto na ostatnim dziecku wyłącza rozkład
 * justify-content i wypycha cały tekst pod górną krawędź.
 */
.mig-slajd__linki {
	position: absolute;
	inset: auto auto 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}


@media (max-width: 900px) {
	.mig-slajdy {
		padding: 24px 20px 28px;
		border-radius: 24px;
	}

	.mig-slajd {
		flex-direction: column !important;
		gap: 24px !important;
	}

	/* W kolumnie nie ma do czego równać — odnośniki wracają do zwykłego przepływu */
	.mig-slajd__body {
		padding-bottom: 0;
	}

	/*
	 * Trzy przyciski w jednym rzędzie. W rozmiarze desktopowym zajmowały 383 px
	 * przy 303 px dostępnych i YouTube spadał do drugiego wiersza — po zejściu
	 * z paddingiem, ikoną i krojem mieszczą się w 269 px.
	 *
	 * flex-basis auto zamiast równych części: przy równych „Tidal" dostawałby
	 * tyle samo miejsca co „YouTube" i napis by się rozjechał. Zawijanie zostaje
	 * jako zabezpieczenie dla ekranów węższych niż 360 px.
	 */
	.mig-slajd__linki {
		position: static;
		margin-top: 20px;
		gap: 8px;
	}

	.mig-slajd__linki .mig-sluchaj__link {
		flex: 1 1 auto;
		justify-content: center;
		gap: 6px;
		padding: 9px 12px;
		font-size: 12px;
	}

	.mig-slajd__linki .mig-sluchaj__icon {
		width: 14px;
		height: 14px;
	}

	/* Węższa kolumna mieści mniej znaków w wierszu, więc klamra idzie w górę */
	.mig-slajd__opis {
		--mig-opis-linie: 6;

		font-size: 14px;
	}

	.mig-slajd__media .mig-play {
		width: 68px;
		height: 48px;
		border-radius: 13px;
	}

	.mig-slajd__media .mig-play::before {
		border-width: 9px 0 9px 15px;
	}

	.mig-slajd__media {
		flex-basis: auto;
		/* W kolumnie kadr ma pełną szerokość rodzica, więc mnożnik odpada */
		padding-top: 56.25%;
	}

	.mig-slajd__opis {
		font-size: 15px;
	}
}

/* --- Płyta: panel na całą szerokość (node 1:2275) --- */

/*
 * Jedna płyta na wiersz. W dwóch kolumnach karta rosła z długością tracklisty
 * (422–576px przy 12–19 utworach), a najdłuższe tytuły remiksów — „Kochana
 * Uwierz (Tr!Fle & Loop & Black Due Remix)”, ok. 427px — nie mieściły się
 * w wąskiej kolumnie. Pełna szerokość daje trzy kolumny po ~450px.
 */
.mig-muzyka__section--plyta .wp-block-post-template {
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 24px !important;
}

/* Ten sam gradient co sekcja „Z życia zespołu” — poblask od lewego górnego rogu */
.mig-plyta {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start;
	gap: 40px !important;
	padding: 40px;
	background: var(--mig-panel-tlo);
	border: var(--mig-panel-obwodka);
	border-radius: 36px;
}

/*
 * Okładka kwadratowa, nie okrągła. Koło ładnie udawało winyl, ale zespół
 * wydawał kasety i płyty CD, a tylko trzy z sześciu grafik są kwadratami —
 * przy okładce 600×414 koło zabierało około jednej trzeciej obrazu.
 */
.mig-plyta__cover {
	flex: 0 0 280px;
	margin: 0;
}

.mig-plyta__cover img {
	display: block;
	width: 280px;
	height: 280px;
	object-fit: cover;
	border-radius: 20px;
}

.mig-plyta__body {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start;
	gap: 0 !important;
	min-width: 0;
	flex: 1 1 0%;
	padding: 4px 0 0;
}

.mig-plyta__title {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.96px;
}

/* Rok i liczba utworów w jednym wierszu, rozdzielone kropką */
.mig-plyta__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0 22px;
	color: var(--wp--preset--color--grey-100);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
}

.mig-plyta__dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: #4d4d4d;
}

/*
 * Trzy kolumny: 19 utworów schodzi do 7 wierszy, czyli 154px — mniej niż
 * okładka, więc to ona wyznacza wysokość panelu i wszystkie płyty są równe.
 * break-inside pilnuje, żeby pozycja nie pękła między kolumnami.
 */
.mig-plyta__tracks {
	columns: 3;
	column-gap: 32px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mig-track;
}

.mig-plyta__tracks li {
	display: flex;
	gap: 10px;
	break-inside: avoid;
	counter-increment: mig-track;
	color: var(--wp--preset--color--grey-100);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px;
	line-height: 22px;
}

/* Numer z licznika — działa też, gdy zespół wpisze listę bez numeracji */
.mig-plyta__tracks li::before {
	content: counter(mig-track, decimal-leading-zero);
	flex: 0 0 auto;
	color: #6a6a6e;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 1200px) {
	.mig-plyta__tracks {
		columns: 2;
	}
}

@media (max-width: 900px) {
	.mig-plyta {
		flex-direction: column !important;
		gap: 24px !important;
		padding: 24px;
		border-radius: 24px;
	}

	.mig-plyta__cover,
	.mig-plyta__cover img {
		width: 100%;
		max-width: 280px;
		height: auto;
		flex-basis: auto;
		aspect-ratio: 1;
	}

	.mig-plyta__title {
		font-size: 26px;
	}

	.mig-plyta__tracks {
		columns: 1;
	}
}

/* --- Wiersz nad listami: skróty do sekcji i profile do odsłuchu --- */

.mig-muzyka__top {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.mig-muzyka__top .mig-muzyka__nav {
	margin-bottom: 0;
}

.mig-sluchaj {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/*
 * Odsyłamy na profile, a nie do pojedynczych płyt: dwóch najstarszych albumów
 * nie ma w żadnym serwisie, więc przycisk przy karcie pojawiałby się raz tak,
 * raz nie.
 */
.mig-sluchaj__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 22px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 100px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.mig-sluchaj__icon {
	flex: 0 0 auto;
}

.mig-sluchaj__link--spotify:hover,
.mig-sluchaj__link--spotify:focus-visible {
	border-color: #1db954;
	background-color: rgba(29, 185, 84, 0.14);
	color: var(--wp--preset--color--white);
}

.mig-sluchaj__link--youtube:hover,
.mig-sluchaj__link--youtube:focus-visible {
	border-color: #ff0033;
	background-color: rgba(255, 0, 51, 0.14);
	color: var(--wp--preset--color--white);
}

/* Barwy własne serwisów zapalają się dopiero przy najechaniu — rząd przycisków zostaje spokojny */
.mig-sluchaj__link--tidal:hover,
.mig-sluchaj__link--tidal:focus-visible {
	border-color: rgba(255, 255, 255, 0.9);
	background-color: rgba(255, 255, 255, 0.14);
	color: var(--wp--preset--color--white);
}

.mig-sluchaj__link--deezer:hover,
.mig-sluchaj__link--deezer:focus-visible {
	border-color: #a238ff;
	background-color: rgba(162, 56, 255, 0.16);
	color: var(--wp--preset--color--white);
}

@media (max-width: 900px) {
	.mig-muzyka__section--kafel {
		padding: 24px 20px 28px;
		border-radius: 24px;
	}
}

/* Poniżej tej szerokości dwie kolumny dają kafel węższy niż 320px — jedna wystarczy */
@media (max-width: 700px) {
	.mig-muzyka__section--kafel .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/*
 * Nagłówki podstron: zdjęcie w tle wybierane w panelu.
 * Szablony to pliki .html, więc adres przychodzi zmienną z inc/settings.php.
 * Bez wyboru zmienna ma wartość none i zostaje samo bordowe tło z bloku.
 */
.mig-archhead {
	background-repeat: no-repeat;
	background-size: cover;
}

/*
 * Nagłówek pojedynczego koncertu: kadr zapasowy, gdy wydarzenie nie ma własnego
 * zdjęcia. Blok cover z useFeaturedImage nie wypisuje wtedy żadnego obrazu, więc
 * hero było samym ciemnym prostokątem — a obrazka wyróżniającego nie ma dziś
 * żaden z siedmiu koncertów.
 *
 * Tło idzie pod spodem: kiedy koncert dostanie własne zdjęcie, blok wstawi
 * wp-block-cover__image-background pozycjonowany na całość i przykryje kadr
 * zapasowy. Zmienna jest ta sama co przy kartach koncertów, razem z punktem
 * ostrości — jeden wybór w panelu obsługuje oba miejsca.
 */
.mig-koncert-hero {
	background-image: var(--mig-koncert-fallback, none);
	background-position: var(--mig-koncert-focal, 50% 50%);
	background-repeat: no-repeat;
	background-size: cover;
}

.mig-archhead--koncerty {
	background-image: var(--mig-arch-koncerty-img, none);
	background-position: var(--mig-arch-koncerty-focal, 50% 50%);
}

.mig-archhead--muzyka {
	background-image: var(--mig-arch-muzyka-img, none);
	background-position: var(--mig-arch-muzyka-focal, 50% 50%);
}

.mig-archhead--galeria {
	background-image: var(--mig-arch-galeria-img, none);
	background-position: var(--mig-arch-galeria-focal, 50% 50%);
}

.mig-archhead--aktualnosci {
	background-image: var(--mig-arch-aktualnosci-img, none);
	background-position: var(--mig-arch-aktualnosci-focal, 50% 50%);
}

/* Treść wpisana w edytorze strony Kontakt — pod szkieletem z makiety */
.mig-kontakt__tresc {
	color: var(--wp--preset--color--grey-100);
	font-family: var(--wp--preset--font-family--inter);
	line-height: 1.7;
}

.mig-kontakt__tresc:empty {
	display: none;
}

.mig-kontakt__tresc h2,
.mig-kontakt__tresc h3 {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
}


/* --- Wspólny nagłówek sekcji na stronie głównej --- */

/*
 * Cztery sekcje miały wcześniej trzy różne style nagłówka: 64 px do lewej,
 * 40 px na środku i preset bez wersalików. Jedna reguła zamiast trzech —
 * inaczej przy każdej zmianie trzeba pamiętać o wszystkich miejscach.
 */
.mig-sekcja__head {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 20px !important;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-bottom: 32px;
}

.mig-sekcja__heading {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: var(--wp--preset--font-size--gigantic);
	font-weight: 700;
	line-height: 1.1;
	text-align: left;
	text-transform: uppercase;
}

/* Strzałki stoją przy prawej krawędzi wiersza, na wysokości nagłówka */
.mig-sekcja__head .mig-slider__nav {
	align-self: center;
	margin: 0;
}

/* Na głównej przy singlach po prawej stoją dwie rzeczy: odnośnik i strzałki */
@media (max-width: 767px) {
	.mig-sekcja__head {
		margin-bottom: 24px;
	}

	/*
	 * Preset „gigantic" ma dolny próg 44px i tego nie przeskoczy nawet na
	 * najwęższym telefonie. „WYSTĘPOWALIŚMY" to czternaście znaków bez spacji,
	 * czyli około 380px przy 375px ekranu — nagłówek wychodził poza kadr
	 * i ciągnął za sobą poziomy pasek przewijania na całej stronie.
	 *
	 * Skalowanie po szerokości okna, nie stały rozmiar, żeby zadziałało też
	 * na 320px.
	 */
	.mig-sekcja__heading,
	.mig-muzyka__heading {
		font-size: clamp(24px, 8.5vw, 40px);
		/* Ostatnia deska ratunku, gdyby kiedyś doszedł jeszcze dłuższy wyraz */
		overflow-wrap: break-word;
	}
}

/* --- Archiwum koncertów (node 1:1686) --- */

/*
 * Rezerwacja siedzi przy dolnej krawędzi nagłówka i jest celowo drobna.
 *
 * Nagłówek urósł do 620 px, żeby kadr ze sceny nie był ścinany w 58% tylko
 * w 37% — a przy takiej wysokości blok rezerwacji zawieszony pod zdaniem
 * wprowadzającym zostawiał pod sobą pustkę. Duży odstęp górny dosuwa go
 * do dołu, bo blok cover ustawia treść od dołu (contentPosition bottom left).
 */
.mig-koncerty__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	margin-top: 92px;
}

.mig-koncerty__button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 11px 24px;
	background-color: var(--wp--preset--color--primary);
	border-radius: 100px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.mig-koncerty__button:hover,
.mig-koncerty__button:focus-visible {
	background-color: #931f27;
	color: var(--wp--preset--color--white);
}

/* Rider stoi obok przycisku rezerwacji, ale ciszej — to materiał pomocniczy */
.mig-koncerty__rider {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 100px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mig-koncerty__rider:hover,
.mig-koncerty__rider:focus-visible {
	background-color: rgba(255, 255, 255, 0.14);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
}

.mig-koncerty__tel {
	margin: 0;
	color: var(--wp--preset--color--grey-100);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	line-height: 20px;
}

.mig-koncerty__telLabel {
	display: block;
	color: rgba(255, 255, 255, 0.55);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mig-koncerty__tel a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
	white-space: nowrap;
}

.mig-koncerty__tel a:hover,
.mig-koncerty__tel a:focus-visible {
	text-decoration: underline;
}

/* --- Lista koncertów --- */

.mig-lista {
	margin-top: 72px;
}

.mig-lista__query .wp-block-post-template {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mig-lista__query .wp-block-post-template > li {
	margin: 0;
	padding: 0;
}

/*
 * Wiersz: nazwa z lewej, termin i akcja z prawej. Przy braku miejsca
 * prawa część schodzi pod lewą, zamiast ściskać obie do nieczytelności.
 */
.mig-lista__row {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 16px 28px !important;
	align-items: center;
	justify-content: space-between;
	padding: 20px 26px;
	background-color: var(--wp--preset--color--card, #292929);
	border-radius: 18px;
	transition: background-color 0.2s ease;
}

.mig-lista__row:hover {
	background-color: #333;
}

/* Minione wygaszone — lista nadchodzących ma być tą, która przyciąga wzrok */
.mig-lista--past .mig-lista__row {
	background-color: #232323;
	opacity: 0.86;
}

.mig-lista__what {
	display: flex !important;
	flex: 1 1 320px;
	flex-direction: row !important;
	align-items: flex-start;
	gap: 12px !important;
	min-width: 0;
}

.mig-lista__what .mig-icon {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--wp--preset--color--primary);
}

.mig-lista__names {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	min-width: 0;
}

.mig-lista__title {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
}

.mig-lista__title a {
	color: inherit;
	text-decoration: none;
}

.mig-lista__title a:hover,
.mig-lista__title a:focus-visible {
	text-decoration: underline;
}

.mig-lista__place {
	margin: 0;
	color: var(--wp--preset--color--grey-100);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px;
	line-height: 22px;
}

.mig-lista__place:empty {
	display: none;
}

.mig-lista__when {
	display: flex !important;
	flex: 0 1 auto;
	flex-wrap: wrap !important;
	align-items: center;
	gap: 12px 22px !important;
}

.mig-lista__meta {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 8px !important;
}

.mig-lista__meta .mig-icon {
	flex: 0 0 auto;
	color: var(--wp--preset--color--grey-100);
}

.mig-lista__metatext {
	margin: 0;
	color: var(--wp--preset--color--grey-100);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px;
	line-height: 22px;
	white-space: nowrap;
}

.mig-lista__tag {
	margin: 0;
	padding: 6px 14px;
	background-color: rgba(255, 255, 255, 0.09);
	border-radius: 999px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	line-height: 18px;
	white-space: nowrap;
}

.mig-lista__tag:empty {
	display: none;
}

.mig-lista__empty {
	margin: 0;
	padding: 24px 26px;
	background-color: #232323;
	border-radius: 18px;
	color: var(--wp--preset--color--grey-100);
	font-family: var(--wp--preset--font-family--inter);
}

@media (prefers-reduced-motion: reduce) {
	.mig-koncerty__button,
	.mig-lista__row {
		transition: none;
	}
}

@media (max-width: 767px) {
	.mig-lista {
		margin-top: 48px;
	}

	.mig-lista__row {
		padding: 16px 18px;
	}

	.mig-lista__when {
		flex: 1 1 100%;
	}

	.mig-koncerty__cta {
		margin-top: 22px;
	}

	/*
	 * Na telefonie 620 px zjadłoby cały ekran, a przy wąskim i wysokim kadrze
	 * zdjęcie i tak przycina się w poziomie, nie w pionie — im niższy nagłówek,
	 * tym więcej sceny widać. Wysokość i tak wyznaczy treść.
	 *
	 * !important jest konieczne: blok cover wypisuje min-height stylem inline,
	 * a ten wygrywa z arkuszem (pułapka 5.10 w parze z 5.16).
	 */
	.mig-archhead--koncerty {
		min-height: 340px !important;
	}
}

/* --- Galeria: wydarzenia, nie pojedyncze zdjęcia --- */

/*
 * Jedna karta to jedno wydarzenie: okładka z obrazka wyróżniającego i nazwa
 * położona na dole kadru. Zdjęcia z wydarzenia siedzą na jego podstronie,
 * bo przy czterdziestu kadrach na koncert wpis na każde zdjęcie byłby nie do
 * utrzymania w panelu.
 */
.mig-galeria {
	margin-top: var(--mig-sekcja-odstep);
}

/* Na głównej pas przewijany, po trzy karty w widoku — jak w makiecie odniesienia */
.mig-galeria__query .wp-block-post-template {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 24px !important;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.mig-galeria__query .wp-block-post-template::-webkit-scrollbar {
	display: none;
}

.mig-galeria__query .wp-block-post-template > li {
	flex: 0 0 calc((100% - 48px) / 3);
	min-width: 0;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
}

/* Na archiwum i w „Zobacz także” ten sam kafel układa się w siatkę */
.mig-galeria__query--siatka .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	overflow: visible;
}

.mig-galeria__query--siatka .wp-block-post-template > li {
	flex: none;
}

.mig-galeria__karta {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
}

.mig-galeria__foto {
	margin: 0;
}

.mig-galeria__foto img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.mig-galeria__karta:hover .mig-galeria__foto img {
	transform: scale(1.04);
}

/*
 * Nazwa leży na kadrze, nie pod nim. Gradient pod spodem, bo zdjęcia
 * z koncertów bywają jasne od reflektorów i sam biały tekst na nich ginął.
 */
.mig-galeria__nazwa {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	margin: 0;
	padding: 56px 20px 18px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0) 100%);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
}

.mig-galeria__nazwa a {
	color: inherit;
	text-decoration: none;
}

/* Odnośnik obejmuje cały kadr, żeby klikało się w zdjęcie, a nie w sam podpis */
.mig-galeria__foto a {
	display: block;
}

.mig-galeria__empty {
	margin: 0;
	padding: 24px 26px;
	background-color: #232323;
	border-radius: 18px;
	color: var(--wp--preset--color--grey-100);
	font-family: var(--wp--preset--font-family--inter);
}

@media (max-width: 1100px) {
	.mig-galeria__query .wp-block-post-template > li {
		flex-basis: calc((100% - 24px) / 2);
	}

	.mig-galeria__query--siatka .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 700px) {
	.mig-galeria__query .wp-block-post-template > li {
		flex-basis: 84vw;
	}

	.mig-galeria__query--siatka .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.mig-galeria__nazwa {
		padding: 44px 16px 14px;
		font-size: 16px;
	}
}

/* --- Podstrona wydarzenia --- */

.mig-wyd__wroc {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--grey-100);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	text-decoration: none;
	transition: color 0.2s ease;
}

.mig-wyd__wroc:hover,
.mig-wyd__wroc:focus-visible {
	color: var(--wp--preset--color--white);
}

.mig-wyd__title {
	margin: 18px 0 28px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--syne);
	font-size: clamp(32px, 4vw, 64px);
	font-weight: 700;
	line-height: 1.08;
	text-transform: uppercase;
}

.mig-wyd__okladka {
	margin: 0;
}

.mig-wyd__okladka img {
	display: block;
	width: 100%;
	max-height: 620px;
	object-fit: cover;
	border-radius: 24px;
}

/*
 * Siatka zdjęć wybranych w panelu „Zdjęcia z wydarzenia”.
 *
 * auto-fill z minimum 240px, żeby przy trzech i przy czterdziestu kadrach
 * rząd wypełniał się sam — liczba kolumn wynika z szerokości okna, a nie
 * z tego, ile zdjęć zespół akurat wrzucił.
 */
.mig-wyd__siatka {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mig-wyd__kadr {
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
}

.mig-wyd__kadr a {
	display: block;
}

.mig-wyd__kadr img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.mig-wyd__kadr:hover img {
	transform: scale(1.05);
}

/* Blok Galeria wpisany w treść — gdy zespół woli dodać zdjęcia w edytorze */
.mig-wyd__zdjecia .wp-block-gallery {
	gap: 16px;
}

.mig-wyd__zdjecia .wp-block-gallery img {
	border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
	.mig-wyd__kadr img,
	.mig-wyd__kadr:hover img {
		transition: none;
		transform: none;
	}
}

@media (max-width: 767px) {
	.mig-wyd__title {
		margin: 14px 0 20px;
	}

	.mig-wyd__okladka img {
		max-height: 320px;
		border-radius: 16px;
	}

	.mig-wyd__zdjecia .wp-block-gallery,
	.mig-wyd__siatka {
		gap: 10px;
	}

	.mig-wyd__siatka {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
}

/*
 * Zabezpieczenie przed poziomym przewijaniem na telefonie.
 *
 * Po wdrożeniu na hosting strona daje się przesunąć w bok o około 86px.
 * Sprawdzone i wykluczone: reguły ukrywające przycisk Kontakt i profile
 * w pasku (są, w max-width 767px), nadpisanie karty hero na pełną szerokość
 * (jest, w max-width 900px), użycia 100vw (jedyne w Shortsach, które mają
 * overflow: hidden). Elementy widoczne w pomiarze wystają wszystkie o mniej
 * więcej tyle samo, więc są skutkiem szerszego dokumentu, nie przyczyną.
 *
 * `clip`, nie `hidden` — hidden tworzy kontener przewijania i zabiłby
 * przyklejony pasek nawigacji (5.38). clip przycina bez tego skutku.
 *
 * To łata objawu. Przyczyna do znalezienia: szukać elementu, którego
 * SZEROKOŚĆ przekracza szerokość okna, nie takiego, który wystaje poza
 * prawą krawędź — to drugie dotyczy wszystkiego dosuniętego do prawej.
 */
@media (max-width: 767px) {
	.wp-site-blocks {
		overflow-x: clip;
	}
}

/*
 * Próg hamburgera wyrównany do reszty stylów mobilnych.
 *
 * WordPress przełącza blok nawigacji na overlay dopiero przy 600px, a wszystkie
 * reguły mobilne motywu obowiązują od 767px. W paśmie 601–767px renderowało się
 * więc pełne poziome menu — od dołożenia Aktualności siedem pozycji, razem grubo
 * ponad 700px — i rozpychało pasek poza szerokość okna.
 *
 * Zamiast przepisywać nasze reguły na 600px podnosimy próg overlaya: chowamy
 * listę, dopóki nie jest rozwinięta, i wymuszamy pokazanie hamburgera.
 */
@media (max-width: 767px) {
	.mig-navbar .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.mig-navbar .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
}