/* Gniazdo w Felicjanowie - wydarzenia: ramka z terminem na wpisie i wyskakujace okienko z zapowiedzia. */

/* ramka "Termin / Miejsce / Prowadzacy / Cena" nad trescia wpisu */
.wydarzenie-ramka {
	display: grid;
	gap: var(--s-3) var(--s-6);
	margin-bottom: var(--s-6);
	padding: var(--s-5);
	border: 1px solid var(--c-linia);
	border-radius: var(--r-m);
	background: var(--c-papier);
}

.wydarzenie-ramka dt {
	color: var(--c-miod-tekst);
	font-size: var(--fs-drobny);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wydarzenie-ramka dd {
	color: var(--c-zielen);
	font-weight: 600;
}

.wydarzenie-ramka__po {
	margin-bottom: var(--s-5);
	color: var(--c-bordo);
	font-weight: 600;
}

@media (min-width: 40em) {
	.wydarzenie-ramka {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* wyskakujace okienko */
.okienko {
	width: min(100% - 2 * var(--s-4), 30rem);
	max-height: calc(100dvh - 2 * var(--s-4));
	padding: 0;
	border: 0;
	border-radius: var(--r-l);
	background: var(--c-papier);
	color: var(--c-tekst);
	box-shadow: var(--cien-m);
	overflow: auto;
}

.okienko::backdrop {
	background: var(--c-zaslona);
}

.okienko[open] {
	animation: okienko-wejscie 0.45s var(--ease-out);
}

@keyframes okienko-wejscie {
	from { opacity: 0; transform: translateY(1rem) scale(0.97); }
	to { opacity: 1; transform: none; }
}

.okienko__srodek {
	position: relative;
	padding: var(--s-7) var(--s-5) var(--s-5);
	border-top: var(--zab) solid transparent;
	text-align: center;
}

/* zabki z wycinanki u gory okienka */
.okienko__srodek::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--zab)) 0 auto;
	height: var(--zab);
	background:
		linear-gradient(135deg, var(--c-bordo) 25%, transparent 25%) 0 0 / var(--zab) var(--zab),
		linear-gradient(225deg, var(--c-bordo) 25%, transparent 25%) 0 0 / var(--zab) var(--zab);
}

.okienko__zamknij {
	position: absolute;
	top: var(--s-3);
	right: var(--s-3);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--c-piasek);
	color: var(--c-zielen);
	transition: background-color 0.2s ease, transform 0.2s var(--ease-out);
}

.okienko__zamknij:active {
	transform: scale(0.94);
}

.okienko .etykieta {
	margin-bottom: var(--s-2);
}

.okienko__termin {
	color: var(--c-bordo);
	font-weight: 700;
}

.okienko__tytul {
	margin-top: var(--s-2);
	color: var(--c-zielen);
	font: 400 var(--fs-h3) / 1.08 var(--f-naglowki);
	text-wrap: balance;
}

.okienko__tekst {
	margin-top: var(--s-3);
	color: var(--c-tekst-2);
}

.okienko__akcje {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-3);
	margin-top: var(--s-5);
}

@media (hover: hover) and (pointer: fine) {
	.okienko__zamknij:hover {
		background: var(--c-miod-jasny);
	}
}

@media (min-width: 40em) {
	.okienko__srodek {
		padding-inline: var(--s-7);
		padding-bottom: var(--s-6);
	}
}

@media (prefers-reduced-motion: reduce) {
	.okienko[open] {
		animation: none;
	}
}