/*
 * Popup okno s oznamom (modules/_layout/popup.latte).
 * Vzhľad webu sa nastaví prepísaním premenných v style.css webu (dialog.pp, aby vyhrali nad týmto súborom), napr.:
 *   dialog.pp { --pp-accent: #D4006F; --pp-radius: 22px; --pp-font: 'Archivo', sans-serif; }
 * Úpravy konkrétnych prvkov s predponou .pp (súbor sa načíta po štýloch webu): .pp .pp__title { ... }
 */
.pp {
	--pp-bg: #ffffff;
	--pp-text: #111111;
	--pp-accent: #111111;
	--pp-accent-text: #ffffff;
	--pp-backdrop: rgba(0, 0, 0, .55);
	--pp-radius: 16px;
	--pp-font: inherit;

	width: 100%;
	max-width: min(560px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--pp-text);
	font-family: var(--pp-font);
	overflow: visible;
}
.pp::backdrop { background: var(--pp-backdrop); }
.pp[open] { animation: pp-in .25s ease-out; }

/* stránka pod oknom sa neposúva */
body:has(.pp[open]) { overflow: hidden; }

.pp__box {
	position: relative;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	background: var(--pp-bg);
	border-radius: var(--pp-radius);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45);
}
/* po otvorení dostane zameranie samotné okno (nie krížik), bez rámčeka */
.pp__box:focus { outline: none; }

.pp__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: #111111;
	font-size: 24px;
	line-height: 38px;
	cursor: pointer;
}
.pp__close:hover { background: #ffffff; }

.pp__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 320px;
	object-fit: cover;
}

.pp__body { padding: 28px 28px 30px; }

.pp__title {
	margin: 0 44px 12px 0;
	font-size: 24px;
	line-height: 1.2;
}

.pp__text { font-size: 16px; line-height: 1.55; }
.pp__text p,
.pp__text ul,
.pp__text ol { margin: 0 0 .8em; }
.pp__text ul,
.pp__text ol { padding-left: 1.3em; }
.pp__text > :last-child { margin-bottom: 0; }
.pp__text a { color: inherit; text-decoration: underline; }

.pp__btn {
	display: inline-block;
	margin-top: 22px;
	padding: 13px 26px;
	border-radius: 999px;
	background: var(--pp-accent);
	color: var(--pp-accent-text);
	font-weight: 700;
	text-decoration: none;
}
.pp__btn:hover { opacity: .9; }

@media (max-width: 480px) {
	.pp__image { max-height: 34vh; }
	.pp__body { padding: 22px 20px 24px; }
	.pp__title { font-size: 21px; }
}

@keyframes pp-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.pp[open] { animation: none; }
}