@charset "UTF-8";

/* =========================================================
   Popup Maker – styl popupów (Student House Moniuszki)

   Selektor bazowy: .pum  → dotyczy WSZYSTKICH popupów.
   Wszystkie wartości siedzą w zmiennych poniżej (sekcja
   "USTAWIENIA") – zmieniasz tam, reguły niżej tylko je czytają.

   W treści popupu (edytor) wpisz tylko H2 + akapit.
   Logo i zdjęcie po lewej dokłada CSS.
   !important – przebija style "Theme" Popup Makera.
   ========================================================= */

html body .pum {

	/* ============== USTAWIENIA ============== */

	/* — Kolory — */
	--shm-navy:        #0D123A;
	--shm-text:        #22163D;
	--shm-red:         #E03652;
	--shm-red-hover:   #c52743;
	--shm-white:       #fff;
	--shm-overlay:     rgba(13, 18, 58, 0.7);
	--shm-shadow:      rgba(13, 18, 58, 0.35);

	/* — Kontener / layout — */
	--shm-max-width:   1064px;
	--shm-width:       92%;
	--shm-min-height:  650px;
	--shm-split:       50%;          /* podział: zdjęcie | treść */
	--shm-pad-bottom:  41px;         /* padding treści dół */
	--shm-pad-x:       clamp(1.75rem, 1rem + 3vw, 3.5rem); /* padding treści boki */
	--shm-pad-top:     44px;         /* odstęp treści od góry białego tła */

	/* — Logo (lewy górny róg treści) — */
	--shm-logo:        url('../svg/popup-logo.svg');
	--shm-logo-w:      clamp(110px, 9vw, 138px);
	--shm-logo-h:      60px;
	--shm-logo-gap:    20%;          /* odstęp pod logo */

	/* — Zdjęcie po lewej (ACF nadpisuje per popup; NAZWA musi zgadzać się z functions.php) — */
	--shm-popup-photo: url('https://studenthousemoniuszki.pl/img/popup_erasmus.jpg');

	/* — Typografia: clamp(min → max) — */
	--shm-h2-size:     clamp(1.5rem,   1.09rem + 1.77vw, 2.5rem);    /* 24 → 40px */
	--shm-h2-lh:       clamp(1.875rem, 1.36rem + 2.21vw, 3.125rem);  /* 30 → 50px */
	--shm-h3-size:     clamp(1.25rem,  0.99rem + 1.1vw,  1.875rem);  /* 20 → 30px */
	--shm-h3-lh:       clamp(1.625rem, 1.26rem + 1.55vw, 2.5rem);    /* 26 → 40px */
	--shm-p-size:      clamp(1rem,     0.85rem + 0.66vw, 1.375rem);  /* 16 → 22px */
	--shm-p-lh:        clamp(1.5rem,   1.24rem + 1.1vw,  2.125rem);  /* 24 → 34px */

	/* — Przycisk zamknięcia — */
	--shm-close-size:    60px;
	--shm-close-offset:  24px;       /* odległość X od prawej krawędzi */
	--shm-close-icon:    url('../svg/popup-close.svg');
	/* pionowa pozycja X liczona tak, by jego środek leżał na środku logo */
	--shm-close-top:     calc(var(--shm-pad-top) + (var(--shm-logo-h) - var(--shm-close-size)) / 2);

	/* — Mobile (poniżej 768px) — */
	--shm-photo-mobile-h: 200px;

	/* ============== STYLE ============== */

	/* UWAGA: tło i flex tylko gdy popup OTWARTY.
	   Popup Maker zamyka popup przez inline `display: none` – nie wolno
	   tego nadpisać `!important`, bo overlay zostawał widoczny po zamknięciu.
	   Otwarty popup dostaje inline `display: block`, więc celujemy w niego. */
	&.pum-active,
	&[style*="display: block"],
	&[style*="display:block"] {
		background: var(--shm-overlay) !important;

		/* Centrowanie okna w viewporcie (nadpisuje pozycjonowanie Popup Makera) */
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	/* --- Kontener --- */
	& .pum-container {
		position: relative !important;
		inset: auto !important;        /* kasuje inline top/left od Popup Makera */
		margin: auto !important;
		width: var(--shm-width) !important;
		max-width: var(--shm-max-width) !important;
		min-height: var(--shm-min-height) !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: var(--shm-white) !important;
		box-shadow: 0 30px 80px var(--shm-shadow) !important;
		overflow: hidden !important;

		/* Zdjęcie po lewej stronie */
		&::before {
			content: '' !important;
			position: absolute !important;
			inset: 0 auto 0 0 !important;
			width: var(--shm-split) !important;
			background-color: var(--shm-navy) !important;
			background-image: var(--shm-popup-photo) !important;
			background-repeat: no-repeat !important;
			background-position: center center !important;
			background-size: cover !important;
		}
	}

	/* --- Treść (prawa kolumna) --- */
	& .pum-content {
		box-sizing: border-box !important;
		margin-left: var(--shm-split) !important;
		width: var(--shm-split) !important;
		padding: var(--shm-pad-top) var(--shm-pad-x) var(--shm-pad-bottom) !important;
		font-family: 'Lato', sans-serif !important;
		color: var(--shm-text) !important;

		/* Logo */
		&::before {
			content: '' !important;
			display: block !important;
			width: var(--shm-logo-w) !important;
			height: var(--shm-logo-h) !important;
			margin-bottom: var(--shm-logo-gap) !important;
			background: var(--shm-logo) no-repeat left center !important;
			background-size: contain !important;
		}

		/* Nagłówek główny */
		& h2 {
			margin: 0 0 2rem !important;
			font-weight: 600 !important;
			font-size: var(--shm-h2-size) !important;
			line-height: var(--shm-h2-lh) !important;
			text-align: left !important;
			color: var(--shm-text) !important;
		}

		/* Nagłówek pomocniczy */
		& h3 {
			margin: 0 0 1.5rem !important;
			font-weight: 600 !important;
			font-size: var(--shm-h3-size) !important;
			line-height: var(--shm-h3-lh) !important;
			color: var(--shm-text) !important;
		}

		/* Tekst */
		& p {
			margin: 0 0 1rem !important;
			font-size: var(--shm-p-size) !important;
			line-height: var(--shm-p-lh) !important;
			color: var(--shm-text) !important;

			&:last-child {
				margin-bottom: 0 !important;
			}
		}

		& strong {
			font-weight: 700 !important;
		}
	}

	/* Tytuł generowany przez Popup Maker – ukryty (używamy H2 z treści) */
	& .pum-title {
		display: none !important;
	}

	/* --- Przycisk zamknięcia (gotowy SVG: kółko + X) --- */
	& .pum-close.popmake-close {
		top: var(--shm-close-top) !important;
		right: var(--shm-close-offset) !important;
		width: var(--shm-close-size) !important;
		height: var(--shm-close-size) !important;
		padding: 0 !important;
		border: 0 !important;
		background: var(--shm-close-icon) no-repeat center / contain !important;
		font-size: 0 !important;            /* chowamy domyślny "×" */
		box-shadow: none !important;
		cursor: pointer !important;
		transition: transform 0.2s ease !important;

		&:hover {
			transform: scale(1.05) !important;
		}
	}
}

/* --- Mobile: nadpisujemy zmienne + układ pionowy --- */
@media only screen and (max-width: 767px) {

	html body .pum {
		--shm-width:        94%;
		--shm-max-width:    100%;
		--shm-min-height:   0;
		--shm-split:        100%;        /* treść na pełną szerokość */
		--shm-close-size:   38px;
		--shm-close-offset: 14px;
		--shm-close-top:    14px;        /* na mobile X siedzi nad zdjęciem, nie przy logo */
		--shm-pad-top:      32px;

		/* Zdjęcie na górze zamiast po lewej */
		& .pum-container::before {
			inset: 0 0 auto 0 !important;
			height: var(--shm-photo-mobile-h) !important;
		}

		/* Treść pod zdjęciem */
		& .pum-content {
			margin: var(--shm-photo-mobile-h) 0 0 !important;
		}
	}
}