/**
 * Események – az Events Manager megjelenésének igazítása a sablonhoz.
 *
 * A plugin sima tartalomtípust használ, ezért az esemény oldalát a sablon
 * rendereli: a fejléc, az oldalsáv és a szövegtörzs formája magától stimmel.
 * Itt csak az van, amit a plugin ad hozzá.
 *
 * Csak az esemény oldalakon töltődik be, lásd inc/events.php.
 */

/* --------------------------------- 1. Esemény adatai az oldalsávban */

/*
 * Az inc/events.php teszi az oldalsáv tetejére: időpont, helyszín, cím,
 * besorolás. A sablon widgetjeinek formáját követi.
 */
.lt-event-facts__list {
	display: grid;
	gap: var(--space-3);
	margin: 0;
}

.lt-event-facts__list dt {
	margin: 0;
	color: var(--c-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.lt-event-facts__list dd {
	margin: 2px 0 0;
	color: var(--c-ink);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.lt-event-facts__list dd a {
	color: var(--c-blue-600);
	font-weight: 500;
}

/* --------------------------------- 2. Eseménytár: elrendezés */

/*
 * A lista mindig a teljes idővonalat tartalmazza, a szűrés a böngészőben
 * rejti el a sorokat. Az oldalsáv ezért nem a widgetterületé, hanem a
 * szűrőké és az idővonalé – lásd template-parts/event-filters.php.
 */
.lt-events__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--c-line);
}

.lt-events__count {
	margin: 0;
	color: var(--c-muted);
	font-size: 0.9375rem;
}

.lt-events__count strong {
	color: var(--c-ink);
	font-size: 1.125rem;
}

/* A .btn szabálya display: inline-flex, ami elnyomná a [hidden] attribútumot. */
.lt-events__reset[hidden] { display: none; }

.lt-events__empty {
	margin: 0;
	padding: var(--space-7) var(--space-5);
	border: 1px dashed var(--c-line-strong);
	border-radius: var(--radius-m);
	color: var(--c-muted);
	text-align: center;
}

.lt-events__group + .lt-events__group { margin-top: var(--space-6); }
.lt-events__group[hidden] { display: none; }

/*
 * A hónap neve a görgetéssel együtt marad a lista tetején, hogy mindig látszódjon,
 * hol jár az olvasó. A fejléc alá tapad, annak magasságát a JavaScript méri.
 */
.lt-events__month {
	position: sticky;
	top: calc(var(--header-offset) + 8px);
	z-index: 3;
	width: -moz-fit-content;
	width: fit-content;
	margin: 0 0 var(--space-3);
	padding: 6px 16px;
	border: 1px solid var(--c-blue-100);
	border-radius: 999px;
	/* Halvány kék mező: a hónap az egyetlen tagolás a nyolcvan soros listában,
	   ezért elkülönül a fehér háttértől. Áttetsző, hogy a mögötte átgörgő
	   sorok ne tűnjenek el alatta. */
	background: rgba(238, 243, 250, 0.92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: var(--shadow-s);
	color: var(--c-blue-600);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.lt-events__list {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --------------------------------- 3. Képkeret álló és fekvő képhez */

/*
 * A kiemelt képek fele álló plakát, fele fekvő fénykép. Egy arányba vágva a
 * plakátokból épp a cím esne ki. Ezért a kép egészben látszik (contain), a
 * keret üresen maradó részét pedig ugyanannak a képnek az elmosott,
 * felnagyított mása tölti ki – lásd lt_event_frame() az inc/events.php-ban.
 */
.lt-frame {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: var(--c-tint);
}

.lt-frame__blur {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(16px) saturate(1.35);
	transform: scale(1.2);
	opacity: 0.5;
}

.lt-frame__img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.45s var(--ease);
}

/* --------------------------------- 4. Egy esemény sora */

.lt-event[hidden] { display: none; }

.lt-event__link {
	display: grid;
	grid-template-columns: 56px 152px minmax(0, 1fr) 16px;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-3);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
	background: var(--c-surface);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.lt-event__link:hover,
.lt-event__link:focus-visible {
	border-color: var(--c-blue-100);
	box-shadow: var(--shadow-m);
	transform: translateY(-2px);
}

.lt-event__date {
	display: grid;
	justify-items: center;
	gap: 1px;
	padding: 7px 0;
	border-radius: var(--radius-s);
	background: var(--c-tint);
}

.lt-event__day {
	color: var(--c-navy-800);
	font-size: 1.375rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.lt-event__mon {
	color: var(--c-muted);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* A soron következő esemény kiemelve: az első pillantásra el kell különülnie. */
.lt-event__link--next { border-color: var(--c-blue-100); }
.lt-event__link--next .lt-event__date { background: var(--c-blue-600); }
.lt-event__link--next .lt-event__day { color: #fff; }
.lt-event__link--next .lt-event__mon { color: rgba(255, 255, 255, 0.8); }

.lt-event__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-s);
	background: var(--c-tint);
}

.lt-event__media .lt-frame { border-radius: 0; }
.lt-event__link:hover .lt-frame__img { transform: scale(1.04); }
.lt-event__media .card__placeholder { font-size: 1.75rem; }

.lt-event__body {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 5px;
}

.lt-event__title {
	color: var(--c-ink);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
}

.lt-event__link:hover .lt-event__title { color: var(--c-blue-600); }

.lt-event__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	color: var(--c-muted);
	font-size: 0.8125rem;
}

.lt-event__badge {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--c-blue-600);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.lt-event__cat {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--c-tint);
	color: var(--c-body);
	font-size: 0.75rem;
	font-weight: 600;
}

.lt-event__excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--c-body);
	font-size: 0.875rem;
	line-height: 1.5;
}

.lt-event__arrow {
	color: var(--c-line-strong);
	transition: transform 0.2s var(--ease), color 0.2s var(--ease);
}

.lt-event__link:hover .lt-event__arrow {
	color: var(--c-blue-600);
	transform: translateX(3px);
}

/* --------------------------------- 5. Oldalsáv: szűrő */

@media (min-width: 1000px) {
	/*
	 * Nem az egész oldalsáv tapad, csak az idővonal: az mutatja görgetés közben,
	 * hol tartunk. A szűrő egyszeri művelet, nyugodtan elgördülhet fölötte.
	 *
	 * Ehhez az oldalsávnak a fő hasáb aljáig kell érnie – ez a rács
	 * alapértelmezése –, mert a tapadó elem csak a saját dobozán belül marad a
	 * képernyőn. Ezért nincs itt align-self: start.
	 */
	.lt-timeline {
		position: sticky;
		top: calc(var(--header-offset) + 16px);
	}

	.lt-filter__sum { cursor: default; }
	.lt-filter__chev { display: none; }
}

/*
 * A szűrő fejléce egyben a nyitó-csukó kapcsoló. Széles képernyőn csak cím:
 * ott a doboz mindig nyitva van, a nyílra nincs szükség.
 */
.lt-filter__sum {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-bottom: var(--space-2);
	/* A vonal a teljes fejlécsor alatt fut, nem csak a cím alatt – különben
	   keskeny képernyőn a nyíl előtt megállna. */
	border-bottom: 1px solid var(--c-line);
	list-style: none;
	cursor: pointer;
}

.lt-filter__sum::-webkit-details-marker { display: none; }
/* A cím saját vonalát a fejlécsoré váltja ki. */
.lt-filter__sum .widget__title {
	flex: 1;
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}
.lt-filter__sum:hover .widget__title { color: var(--c-blue-600); }

.lt-filter__chev {
	flex: 0 0 auto;
	color: var(--c-muted);
	transition: transform 0.2s var(--ease);
}

.lt-filter__box[open] .lt-filter__chev { transform: rotate(180deg); }

.lt-filter__box > .lt-segment {
	margin-top: var(--space-4);
	padding-top: 3px;
}

.lt-segment {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3px;
	padding: 3px;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	background: var(--c-tint);
}

.lt-segment__btn {
	padding: 7px 2px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--c-body);
	font: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
	transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.lt-segment__btn span { opacity: 0.5; font-size: 0.75rem; }
.lt-segment__btn:hover { color: var(--c-ink); }

.lt-segment__btn.is-on {
	background: var(--c-surface);
	box-shadow: var(--shadow-s);
	color: var(--c-navy-800);
}

.lt-filter__search {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--space-4);
	padding: 0 12px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-s);
	color: var(--c-muted);
}

.lt-filter__search:focus-within {
	border-color: var(--c-blue-500);
	box-shadow: var(--ring);
}

.lt-filter__search input {
	flex: 1;
	min-width: 0;
	padding: 9px 0;
	border: 0;
	background: transparent;
	color: var(--c-ink);
	font: inherit;
	font-size: 0.9375rem;
}

.lt-filter__search input:focus { outline: 0; }

.lt-filter__label {
	margin: var(--space-4) 0 var(--space-2);
	color: var(--c-muted);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.lt-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Hat besorolás és tizenöt címke fér el itt, ezért a bélyegek szűkebbek a
 * sablon szokásos szövegméreténél – enélkül az oldalsáv fele szűrő lenne.
 */

/* A sablon widgetlistáinak elválasztó vonala itt nem kell. */
.lt-chips li + li {
	margin: 0;
	padding: 0;
	border: 0;
}

.lt-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 9px;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	background: var(--c-surface);
	color: var(--c-body);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.lt-chip:hover {
	border-color: var(--c-line-strong);
	background: var(--c-tint);
}

.lt-chip[aria-pressed="true"] {
	border-color: var(--c-blue-600);
	background: var(--c-blue-600);
	color: #fff;
}

.lt-chip__num { font-size: 0.625rem; opacity: 0.6; font-variant-numeric: tabular-nums; }
.lt-chip.is-empty { opacity: 0.4; }

/* --------------------------------- 6. Oldalsáv: idővonal */

/*
 * Hónapsáv: minden hónap egy sor, a sáv hossza az adott hónap eseményszámát
 * mutatja. Görgetés közben a JavaScript teszi rá az is-current osztályt, és
 * a sávot is odagörgeti – így látszik, hol tartunk az idővonalon.
 */
/*
 * A sáv a maga ablakában görgethető – ez az egyetlen görgetősáv az oldalsávon.
 * Keskeny képernyőn ugyanez fekszik el vízszintesen, lásd a keskeny képernyő
 * szakaszt.
 */
.lt-rail {
	position: relative;
	max-height: min(34vh, 320px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.lt-rail__year {
	position: sticky;
	top: 0;
	z-index: 1;
	margin: var(--space-4) 0 3px;
	padding: 2px 0;
	background: var(--c-surface);
	color: var(--c-navy-800);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.lt-rail__year:first-child { margin-top: 0; }

.lt-rail__item {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr) 20px;
	align-items: center;
	gap: 8px;
	padding: 4px 6px;
	border-radius: 6px;
	color: var(--c-muted);
	font-size: 0.75rem;
	text-decoration: none;
	transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.lt-rail__item:hover {
	background: var(--c-tint);
	color: var(--c-ink);
	text-decoration: none;
}

.lt-rail__mon { font-weight: 600; }

.lt-rail__bar {
	width: var(--lt-bar);
	height: 6px;
	border-radius: 999px;
	background: var(--c-blue-100);
	transition: width 0.25s var(--ease), background-color 0.2s var(--ease);
}

.lt-rail__num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	opacity: 0.6;
}

.lt-rail__item.is-current {
	background: var(--c-blue-050);
	box-shadow: inset 2px 0 0 var(--c-blue-600);
	color: var(--c-navy-800);
}

.lt-rail__item.is-current .lt-rail__mon { font-weight: 700; }
.lt-rail__item.is-current .lt-rail__bar { background: var(--c-blue-600); }

.lt-rail__item.is-empty { opacity: 0.35; pointer-events: none; }
.lt-rail__item.is-empty .lt-rail__bar { background: var(--c-line-strong); }

/* --------------------------------- 7. Az esemény oldala */

/* A fejléc alatti sor: mikor és hol. A teljes adatlap az oldalsávban van. */
.lt-event-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
}

.lt-event-meta__item--date {
	color: var(--c-navy-800);
	font-weight: 600;
}

.lt-event-meta__item + .lt-event-meta__item::before {
	content: "·";
	margin-right: 10px;
	color: var(--c-line-strong);
}

/*
 * A kiemelt kép magassága a képtől függ, nem fordítva: az álló plakát a
 * maximumig magas és keskeny marad, a fekvő fénykép kitölti a szélességet.
 * Ami üresen marad, azt az elmosott mása tölti ki.
 */
.lt-event-hero {
	margin: 0 0 var(--space-6);
}

.lt-event-hero .lt-frame {
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-s);
}

.lt-frame--auto { height: auto; }

.lt-frame--auto .lt-frame__img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: min(62vh, 560px);
	margin-inline: auto;
}

/* --- Galéria ---------------------------------------------------------- */

.lt-gallery {
	margin-top: var(--space-7);
	padding-top: var(--space-6);
	border-top: 1px solid var(--c-line);
}

.lt-gallery__title {
	margin: 0 0 var(--space-4);
	font-size: var(--step-1);
}

/*
 * A galéria a szövegtörzsön belül áll, ezért a .prose listaszabályait – saját
 * felsorolásjel, behúzás, sorköz – itt semlegesíteni kell. Nélküle a képek
 * pontokkal és behúzva jelennének meg.
 */
.lt-gallery__grid,
.prose .lt-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * A felsorolásjelet háromfelől is kapja: a böngészőtől, a .prose-tól és a
 * plugin saját „pixelbones” stíluslapjától, ami az esemény törzsét körülveszi.
 * Ez utóbbi közvetlenül az li-re ír, ezért nem elég a listán kikapcsolni.
 */
.lt-gallery__grid > li,
.prose .lt-gallery__grid > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.prose .lt-gallery__grid > li::before { content: none; }
.prose .lt-gallery__btn { font-weight: inherit; }

/*
 * Ugyanez a leírás saját felsorolásaira. A „pixelbones” lap !important-tal ad
 * listajelet (circle, illetve decimal, mindkettő „inside”), amit a .prose
 * list-style: none szabálya nem tud felülírni – így minden ponton két jel
 * látszott: a sablon kék pöttye és a plugin karikája.
 */
.prose .em.pixelbones ul {
	list-style: none !important;
	padding-left: 0 !important;
}

.prose .em.pixelbones ol {
	list-style: decimal outside !important;
	padding-left: 1.35em !important;
}

/*
 * A címsorokat is átírja: a h2-t a törzsméret + 26 pixelre, vékony betűvel és
 * összehúzott betűközzel. Az esemény leírásában lévő ## ettől akkora lett, mint
 * a „Képek” szakaszcím, pedig annál egy szinttel lejjebb tartozik. A .prose saját
 * arányait vesszük vissza – azokat a szabályokat, amiket a plugin felülírt.
 */
.prose .em.pixelbones h1,
.prose .em.pixelbones h2,
.prose .em.pixelbones h3,
.prose .em.pixelbones h4,
.prose .em.pixelbones h5,
.prose .em.pixelbones h6 {
	margin-top: var(--space-7) !important;
	margin-bottom: var(--space-3) !important;
	font-weight: 700 !important;
	line-height: 1.22 !important;
	letter-spacing: -0.011em !important;
}

.prose .em.pixelbones h1 { font-size: var(--step-3) !important; }
.prose .em.pixelbones h2 { font-size: var(--step-2) !important; }
.prose .em.pixelbones h3 { font-size: var(--step-1) !important; }

.prose .em.pixelbones h4,
.prose .em.pixelbones h5,
.prose .em.pixelbones h6 { font-size: var(--step-0) !important; }

/*
 * És a sorköz: a plugin a bekezdésekre a saját --line-height változóját teszi
 * (16 pixeles szövegre 20 pixel), ami jóval szűkebb a sablon 1,72-ánál. Ettől
 * nemcsak a szöveg tömör, hanem a felsorolásjel is elcsúszik: a .prose a pöttyöt
 * 0,68em-re teszi a sor tetejétől, ami a lazább sorközhöz van hangolva.
 * Az „inherit” a .prose értékét hozza vissza, szám megismétlése nélkül.
 */
.prose .em.pixelbones,
.prose .em.pixelbones p,
.prose .em.pixelbones li { line-height: inherit !important; }

.lt-gallery__btn {
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: var(--radius-s);
	background: var(--c-tint);
	cursor: zoom-in;
}

.lt-gallery__btn img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--ease);
}

.lt-gallery__btn:hover img,
.lt-gallery__btn:focus-visible img { transform: scale(1.06); }

/* --- Képnagyító ------------------------------------------------------- */

/*
 * Natív <dialog>: a hátteret, az Esc-et és a fókuszt a böngésző kezeli.
 * A jelölést az assets/js/gallery.js építi, ezért zárt állapotban nincs is
 * az oldalon.
 */
.lt-lightbox {
	max-width: 100vw;
	max-height: 100vh;
	width: 100vw;
	height: 100vh;
	padding: clamp(var(--space-4), 4vw, var(--space-7));
	border: 0;
	background: transparent;
	overflow: hidden;
}

.lt-lightbox[open] {
	display: grid;
	place-items: center;
}

.lt-lightbox::backdrop { background: rgba(8, 16, 30, 0.92); }

.lt-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	border-radius: var(--radius-s);
	object-fit: contain;
}

.lt-lightbox__btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s var(--ease);
}

.lt-lightbox__btn:hover { background: rgba(255, 255, 255, 0.24); }
.lt-lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.lt-lightbox__btn--close { top: var(--space-4); right: var(--space-4); }
.lt-lightbox__btn--prev { left: var(--space-3); top: 50%; transform: translateY(-50%); }
.lt-lightbox__btn--next { right: var(--space-3); top: 50%; transform: translateY(-50%); }

.lt-lightbox__count {
	position: absolute;
	bottom: var(--space-4);
	left: 50%;
	margin: 0;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------- 8. Keskeny képernyő */

@media (max-width: 999px) {
	/* A szűrő a lista elé kerül, az idővonal pedig vízszintes szalaggá lapul. */
	.lt-events__side { order: -1; }

	/* Ujjal is el kell találni, ezért telefonon nem szűkítjük a bélyegeket. */
	.lt-chip { padding: 6px 11px; font-size: 0.8125rem; }
	.lt-chip__num { font-size: 0.6875rem; }
	.lt-events__side .widget { padding: var(--space-4); }
	.lt-events__side .lt-timeline .widget__title { margin-bottom: var(--space-3); }

	.lt-rail {
		display: flex;
		flex-wrap: nowrap;
		gap: 6px;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		padding-bottom: 6px;
	}

	.lt-rail__year {
		position: static;
		align-self: center;
		flex: 0 0 auto;
		margin: 0 2px 0 0;
	}

	.lt-rail__item {
		display: inline-flex;
		flex: 0 0 auto;
		gap: 5px;
		padding: 5px 10px;
		border: 1px solid var(--c-line);
		border-radius: 999px;
	}

	.lt-rail__bar { display: none; }
	.lt-rail__item.is-current { box-shadow: none; border-color: var(--c-blue-600); }
}

@media (max-width: 700px) {
	.lt-gallery__grid,
	.prose .lt-gallery__grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-2); }
	.lt-lightbox { padding: var(--space-3); }
	.lt-lightbox__btn--prev { left: 2px; }
	.lt-lightbox__btn--next { right: 2px; }

	/*
	 * Telefonon tömör sor: dátum, kis bélyegkép, cím. A teljes szélességű kép
	 * itt nem válna be, mert az álló plakátokból alig mutatna valamit.
	 */
	.lt-event__link {
		grid-template-columns: 42px 88px minmax(0, 1fr);
		gap: var(--space-3);
		padding: var(--space-2);
	}

	.lt-event__day { font-size: 1.125rem; }
	.lt-event__mon { font-size: 0.625rem; }
	.lt-event__title { font-size: 0.9375rem; }
	.lt-event__meta { font-size: 0.75rem; }
	.lt-event__arrow,
	.lt-event__excerpt { display: none; }
	.lt-event__link:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.lt-event__link,
	.lt-frame__img,
	.lt-event__arrow,
	.lt-rail__bar { transition: none; }

	.lt-event__link:hover { transform: none; }
	.lt-event__link:hover .lt-frame__img { transform: none; }
}

/* --------------------------------- 9. Főoldali doboz: közelgő + naptár */

/*
 * Balra a közelgő események egymás alatt, jobbra a naptár. Keskeny képernyőn
 * egymás alá kerülnek, a naptár elöl: ott az ad gyors áttekintést.
 */
.lt-front-events__grid {
	display: grid;
	gap: var(--space-5);
	align-items: start;
}

@media (min-width: 860px) {
	.lt-front-events__grid { grid-template-columns: minmax(0, 1fr) 316px; }
}

/* --- Közelgő események ------------------------------------------------- */

.lt-upcoming {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lt-upcoming__link {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-3);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
	background: var(--c-surface);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.lt-upcoming__link:hover,
.lt-upcoming__link:focus-visible {
	border-color: var(--c-blue-100);
	box-shadow: var(--shadow-m);
	transform: translateY(-2px);
}

.lt-upcoming__date {
	display: grid;
	justify-items: center;
	gap: 1px;
	padding: 7px 0;
	border-radius: var(--radius-s);
	background: var(--c-blue-600);
}

.lt-upcoming__day {
	color: #fff;
	font-size: 1.375rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.lt-upcoming__mon {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.lt-upcoming__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-3);
	min-width: 0;
}

.lt-upcoming__text {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.lt-upcoming__title {
	color: var(--c-ink);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
}

.lt-upcoming__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	color: var(--c-muted);
	font-size: 0.75rem;
}

.lt-upcoming__cat {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--c-tint);
	color: var(--c-body);
	font-weight: 600;
}

.lt-upcoming__link:hover .lt-upcoming__title { color: var(--c-blue-600); }

.lt-upcoming__media {
	position: relative;
	overflow: hidden;
	width: 64px;
	aspect-ratio: 1;
	border-radius: var(--radius-s);
	background: var(--c-tint);
}

/* --- Naptár ------------------------------------------------------------ */

.lt-cal {
	padding: var(--space-4);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
	background: var(--c-surface);
}

.lt-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.lt-cal__cim {
	color: var(--c-navy-800);
	font-size: 0.9375rem;
	font-weight: 700;
}

.lt-cal__nav {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--c-line);
	border-radius: 50%;
	background: var(--c-surface);
	color: var(--c-muted);
	cursor: pointer;
	transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.lt-cal__nav:hover {
	border-color: var(--c-blue-500);
	color: var(--c-blue-600);
}

.lt-cal__nevek,
.lt-cal__racs {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 2px;
}

.lt-cal__nevek {
	margin-bottom: 4px;
	color: var(--c-muted);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
}

.lt-cal__nap {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border-radius: var(--radius-s);
	color: var(--c-body);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.lt-cal__nap--ures { visibility: hidden; }

/* Eseményes nap: kiemelve és kattintható. */
a.lt-cal__nap.is-esemeny {
	background: var(--c-blue-600);
	color: #fff;
	font-weight: 700;
}

a.lt-cal__nap.is-esemeny:hover {
	background: var(--c-navy-800);
	text-decoration: none;
}

/* A mai nap gyűrűvel, hogy az eseményes kiemelést ne nyomja el. */
.lt-cal__nap.is-ma {
	box-shadow: inset 0 0 0 2px var(--c-gold);
	font-weight: 700;
}

@media (max-width: 859px) {
	/* Keskenyen a naptár megy elöre: az ad gyors áttekintést. */
	.lt-cal { order: -1; }
	.lt-front-events__grid { display: flex; flex-direction: column; }
}