/**
 * newsedge — egyedi réteg
 *
 * Két forrásból áll:
 *   1. a régi oldal saját `custom_css`-e (jos_template_styles id=15) — szó
 *      szerint, csak a K2-re hivatkozó szabályok maradtak ki, mert a célon
 *      nincs K2;
 *   2. a Joomla 5 és a saját markupunk illesztései — a régi sablon CSS-e
 *      Joomla 3 kimenetre készült.
 */

/* ══ 1. A régi oldal custom_css-e ═══════════════════════════════════════ */

.nap {
	color: white;
	padding: 0px;
	margin: 0;
}

div.bannergroup {
	text-align: center;
}

div.bannergroup img {
	margin: auto;
}

.stay-connect-sidebar .rt-socials ul li a i.fa-youtube,
.stay-connect-sidebar .rt-socials ul li a i.fa-google-plus,
.stay-connect-sidebar .rt-socials ul li a i.fa-instagram {
	color: #ff0000;
}

.stay-connect-sidebar .rt-socials ul li {
	margin: 0 !important;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
	background: none !important;
}

#sp-bottom .sp-module h3.sp-module-title {
	text-transform: none !important;
}

@media screen and (max-width: 600px) {
	.nap {
		text-align: center;
	}
}

/* ══ 2. Illesztés a Joomla 5 kimenetéhez ════════════════════════════════ */

/* A lábléc linkszínét a régi elrendezés sor-beállítása adta, nem CSS fájl. */
#sp-footer a {
	color: var(--ne-footer-link, #f70f0f);
}

#sp-footer a:hover,
#sp-footer a:focus {
	color: var(--ne-footer-link-hover, #7d0505);
}

/* A felső sáv szövegszíne szintén sor-beállítás volt. */
#sp-top-bar,
#sp-top-bar a {
	color: var(--ne-topbar-text, #ffffff);
}

/*
 * A Joomla 5 mod_menu `.mod-menu` osztályt ad, a régi CSS `.nav.menu`-t vár.
 * Az off-canvas és az oldalsáv-menük emiatt maradnának formázatlanul.
 */
.offcanvas-inner .mod-menu,
#sp-bottom .mod-menu,
aside .mod-menu {
	list-style: none;
	padding: 0;
	margin: 0;
}

.offcanvas-inner .mod-menu ul,
#sp-bottom .mod-menu ul,
aside .mod-menu ul {
	list-style: none;
	padding-left: 10px;
}

/*
 * A Joomla 5 morzsája <nav class="breadcrumb"><ol> — a régi CSS a <ul>-re és a
 * .breadcrumb li-re volt írva, az <ol> alapértelmezett számozását tüntetjük el.
 */
#sp-title .breadcrumb ol {
	list-style: none;
	padding: 0;
	margin: 0;
	display: inline-block;
}

#sp-title .breadcrumb ol li {
	display: inline-block;
}

#sp-title .breadcrumb ol li .divider {
	display: none;
}

/* Érintőképernyőn az első koppintás nyitja a legördülőt (lásd js/newsedge.js). */
.sp-megamenu-parent > li.nyitva > .sp-dropdown {
	display: block;
}

/* A ragadós fejléc helykitöltője ne ugráltassa az oldalt. */
.sticky-wrapper {
	height: 0;
}

.sticky-wrapper.is-sticky + #sp-header,
#sp-header.menu-fixed {
	top: 0;
}

/* ══ 3. Bootstrap 5 osztályok Bootstrap 3-as sablonban ═════════════════════
 *
 * A sablon a régi oldal Bootstrap 3-át hozza, a Joomla 5 viszont Bootstrap 5
 * osztályneveket ad a kimenetében. Ami hiányzik, azt itt pótoljuk — mérve,
 * nem találomra: az alábbi osztályok mind előfordulnak a kirenderelt
 * oldalakon, és egyikre sincs szabály a hét CSS fájlban.
 */

/*
 * A LEGFONTOSABB. A Joomla 5 ezzel rejti el a képernyőolvasónak szánt
 * szövegeket — Bootstrap 3-ban `.sr-only` a neve, tehát szabály híján ezek
 * LÁTSZANAK. A cikkoldalon a „Részletek" felirat, a kapcsolatoknál a „Cím:",
 * „Telefonszám:", „Mobiltelefon:" címkék, a keresőben az űrlap-legendák.
 */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Bootstrap 5 lebegtetés (a BS3-ban `pull-left` / `pull-right`). */
.float-start {
	float: left;
}

.float-end {
	float: right;
}

/* Térközök, amiket a Joomla űrlapjai használnak. */
.mb-3 {
	margin-bottom: 1rem;
}

.pt-3 {
	padding-top: 1rem;
}

.pe-2 {
	padding-right: .5rem;
}

/* A Smart Search „tippek" doboza `.card`-ot kap. */
.card {
	margin-bottom: 1rem;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, .125);
	border-radius: 3px;
}

.card-body {
	padding: 15px;
}

/*
 * Ikonok. A sablon IcoMoon-készlete 294 `icon-*` osztályt ismer, a Joomla 5
 * viszont öt olyat is használ, ami nincs benne — a lapozó nyilai emiatt
 * üresen maradnának. A közös `[class^="icon-"]:before` alapszabály (betűtípus,
 * méret) már megvan a template.css-ben, itt csak a glifet adjuk hozzá.
 */
/* A lapozó négy nyila. Az IcoMoon-készlet glifjei nem egy családot alkotnak
   (a jobbra mutatók vastagabbak, mint a balra mutatók), ezért mind a négyet a
   FontAwesome egységes, vékony `angle` sorozatából vesszük. */
.icon-angle-left:before,
.icon-angle-right:before,
.icon-angle-double-left:before,
.icon-angle-double-right:before {
	font-family: 'FontAwesome';
	font-weight: normal;
}

.icon-angle-left:before {
	content: "\f104";
}

.icon-angle-right:before {
	content: "\f105";
}

.icon-angle-double-left:before {
	content: "\f100";
}

.icon-angle-double-right:before {
	content: "\f101";
}

.icon-search-plus:before {
	content: "\53";
}

/* ══ A rács szélessége ════════════════════════════════════════════════════
 *
 * A `bootstrap.min.css` 1200 képpont felett 1170-es `.container`-t ad, a régi
 * oldal viszont 1140-eset használt. Mérés a mentéseken (mindhárom 2×-es, a
 * sötét oldalcím-sáv magassága 248 kontra 124 képpont, azaz pontosan a fele):
 *
 *   - a cím és a morzsamenü bal széle 178 CSS-képpont, nálunk 164 volt;
 *   - a cikkoldal eszközsorának vízszintes vonala 730 képpont hosszú, nálunk
 *     750 volt;
 *   - a hasábköz mindkettőn 30 (a Bootstrap alapértéke).
 *
 * 1466 pontos ablakban tehát a régi tartalom 1110 képpont széles, a miénk 1140
 * volt. A különbséget a Helix keretrendszer CSS-e adta, ami a bővítménnyel
 * érkezett — nincs meg nálunk, ezért itt pótoljuk. Egyetlen szabály, de MINDEN
 * oldal rácsát elmozdítja: a blokkok szélessége `calc()`-kal követi.
 */
@media (min-width: 1200px) {
	.container {
		width: 1140px;
	}
}

/* ── A főoldal rácsa 15 képponttal kijjebb ér ────────────────────────────
 *
 * A 1140-es `container` mindenhol stimmel — a fejlécben, a „Friss hírek"
 * sávban, a cikk- és a rovatoldalon a mentés bal széle 177–178 —, a FŐOLDAL
 * rácsa viszont nem: ott a mentésen a blokkok 162-nél kezdődnek és 1302-nél
 * érnek véget, azaz pontosan 1140 szélesek, 15 képponttal kijjebb mindkét
 * oldalon. A régi oldalon ezt az SP Page Builder adta: a sorai a `container`
 * belső dobozát ki-kihagyva, a `row` negatív margóján ültek.
 *
 * A mérés a teljes főoldal mentésén 24 sorból 21-nél 162-t ad (a maradék három
 * a „Friss hírek" sáv és a jobb hasáb), tehát MINDEN rácssorra áll.
 *
 * Ez a fél lépés adja vissza a News Show Pro pontos hasábszélességeit is:
 * padding nélküli `container` (1140) + `row` −15 (1170) + `col-md-8`/`col-md-4`
 * 15-ös bélése = 750 és 360 — betű szerint a forrás `img_width` értékei
 * ([279] 750×536, [314] 360×258).
 *
 * Csak 1200 fölött: lejjebb a `container` folyékony, és a bélése tartja el a
 * tartalmat a képernyő szélétől — a mobil nézet javításait nem bolygatjuk.
 */
@media (min-width: 1200px) {
	.ne-fooldal-sor > .container {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ══ 4. A pótolt blokkok alapszerkezete ═══════════════════════════════════
 *
 * A régi oldal öt blokkját nem telepített bővítmények rajzolták
 * (`mod_news_pro_gk5`, `mod_roksprocket`, `mod_k2_tools`, `mod_rtsocials`).
 * A core modulokat a sablon HTML-felülírásai (`html/mod_articles/*.php` stb.)
 * ugyanabba a DOM-ba rendezik, amire a sablon CSS-e íródott — a *variáns*
 * szabályok (`.most-viewed`, `.post-gallery`, `.top-social`, `#sp-breaking-news`)
 * tehát már működnek. Ami hiányzik, az a bővítmények SAJÁT alap-CSS-e, mert az
 * a bővítménnyel együtt érkezett, nem a sablonnal. Azt pótolja ez a szakasz.
 */

/* ── Friss hírek sáv (RokSprocket Headlines) ─────────────────────────────── */
.sprocket-headlines {
	display: flex;
	align-items: center;
	overflow: hidden;
}

.sprocket-headlines .sprocket-headlines-badge {
	flex: 0 0 auto;
}

.sprocket-headlines ul.sprocket-headlines-list {
	flex: 1 1 auto;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

/* Egyszerre egy címsor látszik — a többit a JS váltja. */
.sprocket-headlines ul.sprocket-headlines-list > li {
	display: none;
	margin: 0;
	padding: 0;
}

.sprocket-headlines ul.sprocket-headlines-list > li.active {
	display: block;
}

.sprocket-headlines .sprocket-headlines-navigation {
	flex: 0 0 auto;
	text-align: right;
}

.sprocket-headlines .sprocket-headlines-navigation .arrow {
	display: inline-block;
	cursor: pointer;
	color: #ffffff;
	text-align: center;
	font-family: 'FontAwesome';
}

.sprocket-headlines .sprocket-headlines-navigation .arrow.prev::before {
	content: "\f104";
}

.sprocket-headlines .sprocket-headlines-navigation .arrow.next::before {
	content: "\f105";
}

/* 767 px alatt a sablon a lista bal margóját nullázza (`style.css:4986`), 480
   alatt a paddingjét is (`style.css:5060`) — a bővítmény saját behúzását vette
   ki, csak épp így a címsor a piros jelvényhez ér, sőt a jelvény kilógó
   nyilacskája alá. Egy szűk margó visszaadja a levegőt; margó, nem padding,
   mert az `!important` a paddingre szól. */
@media screen and (max-width: 767px) {
	#sp-breaking-news .sprocket-headlines ul.sprocket-headlines-list {
		margin-left: 12px;
	}
}

/* ── „További hírek, tippek": a komponens alatti kártyarács ───────────────
 *
 * A cikk- és a kategóriaoldal alján álló hatos rács ([330], `tartalom-alja`).
 * Két hasáb, három sor; a hasábokat a `.ne-hasab-2` adja, itt csak azt kell
 * visszavenni, amit a bővítmény saját CSS-e adott volna: a kártya képe a
 * `style.css:1056` szerint BALRA LEBEG, itt viszont a cím fölött, teljes
 * szélességben áll (`kepernyokep/esemeny-cikkoldal.png`).
 *
 * A rács fölött a régi oldalon vízszintes vonal és térköz választja el a
 * cikktől — a `style.css` ezt a `.sp-module`-ra nem adja, mert a bővítmény
 * modulja saját margóval jött. */
#sp-tartalom-alja {
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid #ededed;
}

/* A blokk címe a régi oldalon NEM a Helix kis, verzálos modulcíme
   (`template.css:2201`: 14 px, `uppercase`), hanem nagy, kisbetűs felirat: a
   „További hírek, tippek" a mentésen 229 CSS-képpont széles és 24 magas, ami
   ~22 px-es betűnek felel meg. A bővítmény modulja saját címstílust hozott. */
#sp-tartalom-alja .sp-module .sp-module-title {
	font-size: 22px;
	text-transform: none;
	line-height: 1.3;
	margin: 0 0 25px;
}

#sp-tartalom-alja .nspArts .nspArt > .img-wrapper {
	float: none;
	width: 100%;
	margin: 0 0 12px 0;
}

#sp-tartalom-alja .nspArts .nspArt .nspImage {
	width: 100%;
	height: auto;
	display: block;
}

/* ── Tartalom galéria (News Show Pro „News Blocks") ──────────────────────── */
.gkNspPM-NewsBlocks {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.gkNspPM-NewsBlocks.gk-oszlop-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gkNspPM-NewsBlocks.gk-oszlop-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gkNspPM-NewsBlocks > figure {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.gkNspPM-NewsBlocks > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* A kép a figure közvetlen gyereke kell legyen (a sablon így hivatkozik rá),
   ezért a hivatkozás egy fölé fektetett, átlátszó réteg. */
.gkNspPM-NewsBlocks > figure > .gkImgOverlay {
	position: absolute;
	inset: 0;
	display: block;
}

/* ── K2 kategórialista ───────────────────────────────────────────────────── */
.k2CategoriesListBlock ul {
	list-style: none;
	margin: 0;
}

.k2CategoriesListBlock ul.level0 > li a {
	display: block;
	overflow: hidden;
}

/* ── Közösségi ikonok (rt-socials) ───────────────────────────────────────── */
.rt-socials ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rt-socials ul li a {
	display: inline-block;
	text-decoration: none;
}

/* ── Felső sáv keresője ──────────────────────────────────────────────────── */
.ne-kereso {
	display: flex;
	max-width: 320px;
	margin: 0 auto;
}

.ne-kereso .ne-kereso-mezo {
	flex: 1 1 auto;
	min-width: 0;
	height: 26px;
	padding: 0 8px;
	border: none;
	background: #ffffff;
	color: #111111;
	font-size: 12px;
	line-height: 26px;
}

.ne-kereso .ne-kereso-gomb {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	padding: 0;
	border: none;
	background: #333333;
	color: #ffffff;
	font-size: 12px;
	line-height: 26px;
	cursor: pointer;
}

.ne-kereso .ne-kereso-gomb:hover {
	background: #111111;
}

/* A felső sáv bal oszlopában a névnap-modul áll (mod_nevnap, lásd
   20_nevnap.php). Ha valaki kikapcsolja, az oszlop ne essen össze: a három
   harmad elrendezése maga is a régi kinézet része, a kereső tőle áll középen. */
#sp-top-bar #sp-top1:empty {
	min-height: 1px;
}

/* ══ A főoldal rácsa ════════════════════════════════════════════════════

   A régi főoldalt az SP Page Builder rajzolta. A blokkok saját CSS-e (a
   zászló-címek, az `.nspArt` képre ültetett szövege, a `.gkTabs*` fülsor, a
   videó-kártyák sötétítése és play-ikonja) a sablon `style.css`-ében **megvan**
   — az alább következő szabályok csak azt pótolják, ami a komponenssel jött
   volna: a rács és a hasábok.
                                                     (lásd 21_fooldal.php) */

/* A rács alatt a komponens üres — ne hagyjon 100 px lyukat a lábléc előtt.
   A régi oldal ugyanezt tette a `.com-sppagebuilder` body-osztállyal
   (template.css:2155). */
.body-wrapper #sp-main-body.ne-racs-alatt {
	padding: 0;
}

.ne-fooldal-sor > .container > .row > div {
	margin-bottom: 30px;
}

/*
 * Két blokk EGY hasábban: kell közéjük rés, különben a második ráfut az első
 * aljára (a jobb hasábban a banner alá tett „Megéri velünk kombinálni!" és a
 * „Legfrissebb 10" pont így csúszott össze).
 *
 * A régi oldalon ezt a com_sppagebuilder saját CSS-e adta — a builder JSON-je
 * egyetlen addonon sem tartalmaz margót, tehát a bővítmény alapértéke volt. A
 * méret a képernyőképről: a „Megéri velünk kombinálni!" zöld címe fölött
 * 60 képpont, ami a 2×-es nagyításon 30 CSS-képpont — ugyanaz, mint a
 * zászló-cím alatti térköz (`.title-style .sppb-addon-title`, style.css:838).
 *
 * Csak a blokkok KÖZÉ kerül (`+`), a hasáb aljára nem: a sorok közti rést a
 * fenti szabály és a sor saját belső margója adja.
 */
.ne-fooldal-sor .sppb-addon + .sppb-addon {
	margin-top: 30px;
}

/* A jelvényeket (`.nspCategory`) a style.css abszolút pozicionálja; a
   viszonyítási pontjuk a kártya. A `nsptext-shadow` ezt magától megadja, a
   `recent-news` viszont nem. */
.ne-fooldal-sor .nspArts .nspArt,
.ne-fooldal-sor .nspLinksWrap ul.nspList li {
	position: relative;
}

.ne-fooldal-sor .nspArts .nspArt .nspImage,
.ne-fooldal-sor .gkItem img {
	width: 100%;
	height: auto;
	display: block;
}

/* Hasábok. A News Show Pro ezt beégetett szélességekkel oldotta meg; nálunk
   flexbox, hogy mobilon magától egy hasábra essen.

   A hasábköz `gap`, NEM a tételek belső margója. A `style.css` ugyanis erősebb
   szabályokkal nullázza a tételek paddingjét — `.nspArts .nspArt { padding: 0 }`
   (0,2,0) és `.nspLinksWrap .nspLinks ul.nspList li { padding: 10px 0 0 }`
   (0,4,0) —, tehát egy `.ne-hasab-2 > * { padding: 0 10px }` (0,1,0) alulmaradna,
   és az egymás melletti képek ÖSSZEÉRNÉNEK. A `gap`-et viszont nem írja felül
   semmi. */
.ne-hasab-2,
.ne-hasab-3 {
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.ne-hasab-2 > *,
.ne-hasab-3 > * {
	margin-bottom: 24px;
}

.ne-hasab-2 > * {
	flex: 0 0 calc(50% - 10px);
	max-width: calc(50% - 10px);
}

.ne-hasab-3 > * {
	flex: 0 0 calc(33.3333% - 13.34px);
	max-width: calc(33.3333% - 13.34px);
}

/* A `.align-fix .nspMain { margin: 0 -10px }` (style.css:1027) a bővítmény
   10 px-es tétel-paddingjét ellensúlyozta, hogy a blokk széle a címhez
   igazodjon. Nálunk a hasábköz `gap`, tehát nincs mit ellensúlyozni — a negatív
   margó viszont kilógatná a blokkot a hasábjából. */
.ne-fooldal-sor .align-fix .nspMain {
	margin: 0;
}

@media screen and (max-width: 767px) {
	.ne-hasab-2 > *,
	.ne-hasab-3 > * {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* Videó-kártyák: a felirat a képre ül, a sötétítést és a play-ikont a
   style.css `.gkImageWrap:before/:after` szabálya adja. */
.ne-fooldal-sor .gkNspPM-VideoList .gkItem {
	margin: 0 0 24px;
	overflow: hidden;
}

.ne-fooldal-sor .gkNspPM-VideoList .gkItem figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 15px 20px;
	color: #ffffff;
}

.ne-fooldal-sor .gkNspPM-VideoList .gkItem figcaption h3 {
	font-size: 18px;
	margin: 0 0 4px;
}

.ne-fooldal-sor .gkNspPM-VideoList .gkItem figcaption strong {
	font-size: 12px;
	text-transform: uppercase;
}

/* ── A videósáv lapozója (`.gkBottomNav`) ─────────────────────────────────
 *
 * A sablon a sáv HELYÉT és a SZÍNEIT megadja — `.video-layout1 … .gkBottomNav
 * { position: relative; top: 10px }` (style.css:1816), a nyílgombok kerete
 * (:1778), a pontok mérete (:1832) és az aktív pont zöldje (preset.css:217) —,
 * a bővítmény saját CSS-ére hagyva viszont három dolgot:
 *
 *   1. a két nyíl a sáv két SZÉLÉRE kerül (`position: absolute` van rá,
 *      `left`/`right` nincs — enélkül egymásra csúsznának);
 *   2. a nyíl JELE (`a:after`-t formáz a sablon, de `content`-et nem ad);
 *   3. a pontok középre állítása, és hogy a `li` KÖR legyen.
 *
 * A `kepernyokep/esemeny-fooldal.png` videósávja alatt mind a három látszik.
 * A `.video-layout1 … .gkBottomNav a` (0,4,0) minden hivatkozásra ráül a
 * sávban — a pontok `a`-jait ezért erősebb szabállyal kell visszavenni,
 * különben azok is 30×34-es keretes dobozok lennének. */

.ne-fooldal-sor .gkNspPM-VideoList .gkBottomNav {
	min-height: 34px;
	text-align: center;
}

.ne-fooldal-sor .gkNspPM-VideoList .gkBottomNav .gkBottomNavPrev {
	left: 0;
}

.ne-fooldal-sor .gkNspPM-VideoList .gkBottomNav .gkBottomNavNext {
	right: 0;
}

.ne-fooldal-sor .gkNspPM-VideoList .gkBottomNav .gkBottomNavPrev:after,
.ne-fooldal-sor .gkNspPM-VideoList .gkBottomNav .gkBottomNavNext:after {
	position: absolute;
	top: 5px;
	font-family: 'FontAwesome';
	font-size: 18px;
}

.ne-fooldal-sor .gkNspPM-VideoList .gkBottomNav .gkBottomNavPrev:after {
	content: "\f104";
}

.ne-fooldal-sor .gkNspPM-VideoList .gkBottomNav .gkBottomNavNext:after {
	content: "\f105";
}

.ne-fooldal-sor .gkNspPM-VideoList .gkBottomNav .gkBottomNavPagination {
	list-style: none;
	margin: 0;
	padding: 11px 0 0;
	display: inline-block;
}

.ne-fooldal-sor .gkNspPM-VideoList .gkBottomNav .gkBottomNavPagination li {
	display: inline-block;
	margin: 0 3px;
	border-radius: 50%;
	cursor: pointer;
}

/* (0,6,0) — a `.video-layout1 … .gkBottomNav a` (0,4,0) fölé. */
.ne-fooldal-sor .video-layout1 .gkNspPM-VideoList .gkBottomNav .gkBottomNavPagination li a {
	position: static;
	display: block;
	width: 100%;
	height: 100%;
	border: none;
	margin: 0;
	line-height: 0;
}

/* Fülek. A fülsor kinézete a style.css `.gkTabsNav` szabályaiból jön; itt csak
   a váltás logikája látszik (a JS az .active osztályt mozgatja). */
.gkTabsNav {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.gkTabsNav li {
	cursor: pointer;
	position: relative;
}

.gkTabsContainer > .gkTabsItem {
	display: none;
}

.gkTabsContainer > .gkTabsItem.active {
	display: block;
}

/* ── A News Show Pro alap-elrendezése ─────────────────────────────────────
 *
 * A `style.css` a kártya képét BALRA LEBEGTETI
 * (`.nspArts .nspArt .img-wrapper { float: left }`, style.css:1056), a
 * hasábszélességeket viszont a bővítmény SAJÁT CSS-e adta — az pedig a
 * bővítménnyel érkezett, nem a sablonnal. Enélkül a lebegő kép nem növeli a
 * kártya magasságát: a kártya 0 magas marad, a ráültetett cím
 * (`.nsptext … { position: absolute; bottom: 40px }`) pedig a FÖLÖTTE lévő
 * sávba csúszik. Ez okozta az első változat összecsúszását.
 */
.ne-fooldal-sor .nspArts .nspArt,
.ne-fooldal-sor .nspLinksWrap ul.nspList li {
	position: relative;
	overflow: hidden;
}

.ne-fooldal-sor .nspArts .nspArt > .img-wrapper {
	float: none;
	width: 100%;
	margin-bottom: 0;
}

.ne-fooldal-sor .nspImageWrapper {
	display: block;
}

.ne-fooldal-sor .nspArts .nspArt {
	margin-bottom: 24px;
}

/* A 3. sor bal oszlopa („Események"): a kép balra lebeg, a szöveg mellette
   kezdődik, és a kép ALATT folytatódik.

   A körbefolyás nem elírás: a régi oldalon a hosszabb bevezetők utolsó sorai
   teljes szélességben csúsztak a bélyegkép alá (`kepernyokep/esemeny-fooldal.png`,
   a „Terra-Akva Terrarisztikai és Akvarisztikai Börze" tétel). Ezért a
   szövegblokkok NEM kapnak `overflow: hidden`-t — az saját blokk-környezetet
   nyitna, és a szöveg a kép mellé szorulna. Ugyanez a döntés az 5. sor
   link-listájánál, lásd ott.

   A `.nspArt` maga viszont befogja a lebegő képet (`.ne-fooldal-sor …
   { overflow: hidden }`), tehát a rövid szövegű tétel is megtartja a kép
   magasságát. */
#sp-fooldal3a .nspArts .nspArt > .img-wrapper {
	float: left;
	width: 300px;
	margin: 0 25px 6px 0;
	aspect-ratio: 300 / 200;
	overflow: hidden;
}

/* Keskeny képernyőn a 300 px-es lebegtetett kép nem hagy helyet a szövegnek:
   480 px-en 130 px, 390 px-en 60 px marad neki, a cím pedig szavanként törik és
   kilóg a képernyőről. A sablon ugyanezt a blokkot (`.more-news`) 767 px alatt
   maga is fölé-alá rendezi — a képre `width: 100% !important`-ot ad
   (`style.css:5104`) —, csak a lebegtetést nem tudja levenni, mert azt a
   bővítmény CSS-e adta. Itt vesszük le.

   A 300 × 200-as vágás is elmarad: teljes szélességen a kép a saját arányában
   áll ki, nem vágjuk. */
@media screen and (max-width: 767px) {
	#sp-fooldal3a .nspArts .nspArt > .img-wrapper {
		float: none;
		width: 100%;
		aspect-ratio: auto;
		margin: 0 0 10px 0;
	}
}

/* ── Az 5. sor link-listája: bélyegkép balra, a szöveg körbefolyja ─────────
 *
 * A méretek NEM becslésből valók: a 2025-09-10-i mentés (web.archive.org)
 * minden link-tételen kiírta a bővítmény inline stílusát, tehát a régi oldal
 * geometriája pontosan ismert:
 *
 *     <a class="nspImageWrapper" style="margin:6px 14px 0 0;">
 *         <img class="nspImage" style="width:120px;height:80px;">
 *
 * Ez egyezik a forrás modul paramétereivel (`links_img_width: 120`,
 * `links_img_height: 80`, `links_img_margin: 6px 14px 0 0`).
 *
 * A tétel LEBEGTETÉSSEL áll össze, ahogy a forrásban (`links_image_position`
 * = left; a sablon `float: left`-je a `style.css:1115`): a szöveg a kép
 * mellett kezdődik, majd a bélyegkép alatt TELJES SZÉLESSÉGBEN folytatódik.
 * A régi oldalon ez a „Moulding Expo" tételnél tisztán látszik
 * (`kepernyokep/esemeny-fooldal.png`). 2026-08-25-én két valódi hasábra
 * vettük, 2026-08-26-án a felhasználó a régi körbefolyást kérte vissza.
 *
 * Ezért a szövegnek NEM lehet saját blokk-környezete — se `overflow: hidden`,
 * se flex, se közbeiktatott doboz —, különben a kép MELLÉ szorulna, és nem
 * folyna alá. A `li`-nek viszont van (`style.css:1110`): az fogja be a
 * lebegő képet, így a rövid szövegű tétel is megtartja a kép magasságát. */

/* A két hasáb LEBEGTETÉSSEL, nem flexbox-szal.
 *
 * A régi oldalon a hasábok egymástól FÜGGETLENÜL csúsztak: a harmadik tétel
 * közvetlenül az első alá ült, akkor is, ha a jobb oldali szomszédja magasabb
 * volt — a lebegő doboz felcsúszik, ameddig elfér. A flexbox ezt nem tudja: ott
 * a sor magassága a legmagasabb tételé, tehát a rövidebb alatt üres sáv marad.
 * A felhasználó 2026-08-26-án ezt az üres sávot kérte eltüntetni.
 *
 * `clear` szándékosan NINCS: a tételek egyforma szélesek, tehát a páratlanok
 * úgyis a bal, a párosak a jobb hasábba esnek (kettőnél több nem fér egy sorba),
 * a felcsúszást viszont nem gátolja semmi.
 *
 * A `margin-bottom` 0. A régi képernyőképen a bal hasáb tételosztása 131,5 px
 * (a bélyegképek teteje 52 → 183,5 → 315,5 CSS-képpont), ami pontosan az öt
 * szövegsor + a `style.css:1943` `padding-top: 10px`-je — extra alsó margó
 * tehát nem volt, a `.ne-hasab-2 > *` 24 px-ét itt vissza kell venni. */
#sp-fooldal5a .nspLinksWrap ul.nspList {
	display: block;
	overflow: hidden;
}

#sp-fooldal5a .nspLinksWrap ul.nspList > li {
	float: left;
	width: calc(50% - 10px);
	max-width: none;
	margin-bottom: 0;
}

#sp-fooldal5a .nspLinksWrap ul.nspList > li:nth-child(odd) {
	margin-right: 20px;
}

/* Egy hasáb a `.ne-hasab-2` töréspontján. A saját szabály erősebb (id), tehát
   a `flex-basis: 100%`-os közös média-lekérdezés itt nem érne el semmit. */
@media screen and (max-width: 767px) {
	#sp-fooldal5a .nspLinksWrap ul.nspList > li {
		float: none;
		width: auto;
		margin-right: 0;
	}
}

/* Ugyanez a geometria áll a jobb sáv „Olvasta?" blokkjában is ([327]:
   `links_img_width` 120, `_height` 80, `_margin` 6px 14px 0 0 — betű szerint
   ugyanaz, mint a [298]-nál), ezért a két hely egy szabályt kap. */
#sp-fooldal5a .nspLinksWrap ul.nspList li > .img-wrapper,
#sp-right .nspLinksWrap ul.nspList li > .img-wrapper {
	float: left;
	margin: 6px 14px 0 0;
}

/* 120 × 80 — a régi oldal inline stílusa. `object-fit: cover`, mert a forrás
   `img_keep_aspect_ratio` = 0 volt: a bővítmény vágott, nem torzított. */
#sp-fooldal5a .nspLinksWrap ul.nspList li > .img-wrapper img,
#sp-right .nspLinksWrap ul.nspList li > .img-wrapper img {
	width: 120px;
	height: 80px;
	object-fit: cover;
	display: block;
}

/* Mobilon a hasáb egyre esik és a képernyő keskeny: a 120 px-es bélyegkép
   mellett alig maradna szöveg, a körbefolyás pedig két-három szavas sorokká
   törne. Ezért kisebb kép és szűkebb köz. */
@media screen and (max-width: 480px) {
	#sp-fooldal5a .nspLinksWrap ul.nspList li > .img-wrapper {
		margin: 4px 10px 0 0;
	}

	#sp-fooldal5a .nspLinksWrap ul.nspList li > .img-wrapper img,
	#sp-right .nspLinksWrap ul.nspList li > .img-wrapper img {
		width: 90px;
		height: 60px;
	}
}

/* A ráültetett szöveg csak akkor olvasható, ha a sötétítés is kifut a kártya
   aljáig — a `.nsptext-shadow:before` 50%-os gradiense ehhez a kártya
   magasságához igazodik, tehát a képnek ki kell töltenie a kártyát. */
.ne-fooldal-sor .nsptext .nspArts .nspArt .nspImage {
	width: 100%;
	display: block;
}

/* A képre ültetett kártyák szövegdoboza (`nsp.php`, `ne_rateszett`).
   A style.css a címet és az infósort külön-külön pozicionálja a kártya aljához
   (`bottom: 40px` / `bottom: 15px`), a kategória-jelvényt pedig egy fix
   `margin-top: -80px`-szal emeli a cím fölé. Ez egysoros címre készült:
   kétsorosnál a jelvény ráfut a szövegre. Itt a hármat egy dobozba tesszük, és
   a dobozt ültetjük a kép aljára — így a sorrend (jelvény, cím, dátum) mindig
   tartja magát. */
.ne-fooldal-sor .nspArts .nspArt .nspTextWrap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 0 20px 15px;
}

.ne-fooldal-sor .nspArts .nspArt .nspTextWrap .nspHeader,
.ne-fooldal-sor .nspArts .nspArt .nspTextWrap .nspInfo {
	position: static;
	padding: 0;
	margin: 0;
	color: #ffffff;
}

.ne-fooldal-sor .nspArts .nspArt .nspTextWrap .nspHeader {
	margin-bottom: 6px;
}

.ne-fooldal-sor .nspArts .nspArt .nspTextWrap .nspInfo1 {
	margin-bottom: 8px;
}

.ne-fooldal-sor .nspArts .nspArt .nspTextWrap .nspCategory {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 3px 10px;
	color: #ffffff;
}

/* ── A News Show Pro lapozója ─────────────────────────────────────────────
 *
 * A blokkok nem listák voltak, hanem LAPOK: a bővítmény `news_full_pages`
 * lapot léptetett `animation_interval` ms-onként (a főoldal első sora 9 lapot
 * 4 másodpercenként). A felület CSS-e MEGVAN a sablonban
 * (`.nspTopInterface`, `style.css:788` és `:1030`) — a lapok kezelése az, ami a
 * bővítménnyel jött volna.
 *                                                (lásd 21_fooldal.php)
 */

/* A nem aktív lap nem látszik. Csak elrejtjük: az aktív lap megtartja a saját
   megjelenítését (a hasábos lapok flexbox-ok). */
.ne-nsp-lapok > .ne-nsp-lap:not(.active) {
	display: none;
}

.ne-nsp-lapok > .ne-nsp-lap.active {
	animation: ne-nsp-be var(--ne-nsp-sebesseg, 400ms) ease-out;
}

@keyframes ne-nsp-be {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* A `.nspTopInterface` abszolút, `top: 0; right: 0` — a viszonyítási pontja a
   modul doboza, így a nyilak/pontok a CÍM vonalába kerülnek, ahogy a
   képernyőképen. A zászló-címes blokkoknál ezt a `.title-style` adja
   (style.css:835); ahol nincs, ott a modulkeret kapja meg. */
.sp-module:has(.nspTopInterface),
.sppb-addon-module:has(.nspTopInterface) {
	position: relative;
}

.nspTopInterface .nspPagination {
	list-style: none;
	padding: 0;
	overflow: hidden;
}

.nspTopInterface .nspPagination li {
	float: left;
	cursor: pointer;
}

/* A pont maga a `li` háttere (style.css:1036); a hivatkozás csak a kattintható
   felület. */
.nspTopInterface .nspPagination li a {
	display: block;
	width: 100%;
	height: 100%;
}

.nspTopInterface a.nspPrev,
.nspTopInterface a.nspNext {
	cursor: pointer;
	text-align: center;
	text-decoration: none;
}

/* ══ 5. A K2 elemnézete és kategórialistája ══════════════════════════════
 *
 * Ugyanaz a helyzet, mint a főoldalon: a sablon `style.css`-e a K2 DOM-jára
 * van írva (144 szabály hivatkozik az `.rt-itemView`-ra és a `.catItem*`-ra),
 * a **lebegtetés lezárását, a listák alapállását és a képek méretezését**
 * viszont a K2 saját `k2.css`-e adta — az pedig a bővítménnyel érkezett, nem a
 * sablonnal. A K2 a lebegő oszlopait `<div class="clr">` elemekkel zárta le;
 * arra a sablonban nincs szabály, mert a K2 hozta magával.
 *                                              (lásd 22_k2_elemnezet.php) */

/* ── Kategórialista (bloglayout1) ────────────────────────────────────────── */

/* A kép balra lebeg 45%-on, a bevezető mellette 55%-on (style.css:3123, 3192).
   Lezárás nélkül a következő elem alácsúszna. */
.bloglayout1 .catItemBody {
	overflow: hidden;
}

.bloglayout1 .catItemBody .catItemImageBlock .catItemImage img {
	width: 100%;
	height: auto;
	display: block;
}

/* A cím a kép melletti hasábban áll, nem a kép alatt: saját blokk-környezet. */
.bloglayout1 .catItemBody .catItemHeader {
	overflow: hidden;
}

.bloglayout1 .catItemBody .catItemIntroText p:last-child {
	margin-bottom: 0;
}

/* ── Cikkoldal (rt-itemView) ─────────────────────────────────────────────── */

.rt-itemView .itemBody .itemImageBlock .itemImage img {
	width: 100%;
	height: auto;
	display: block;
}

.rt-itemView .itemBody .itemImageBlock .itemImageCaption {
	display: block;
	margin-top: 8px;
	color: #777777;
	font-size: 13px;
	font-style: italic;
}

/* Az eszközsor (betűméret, nyomtatás, küldés). A style.css jobbra lebegteti
   (`.SocialSharingwrap .itemToolbar`), a listát magát a K2 formázta: egy sor,
   függőleges elválasztókkal — a képernyőképen is így áll. */
/* A megosztó gombok. A sablon a helyüket megadja
   (`.SocialSharingwrap .itemSocialSharing { float: left }`, style.css:3550), a
   gombok KINÉZETÉT viszont a szolgáltatók saját beágyazott gombjai hozták —
   nálunk sima hivatkozás áll ott, tehát a keretet itt kell megrajzolni. A
   méret a mentett gombhoz igazodik: kis, szürke keretes pirula. */
.rt-itemView .itemSocialSharing .itemTwitterButton,
.rt-itemView .itemSocialSharing .itemFacebookButton {
	float: left;
}

.rt-itemView .itemSocialSharing a {
	display: inline-block;
	border: 1px solid #dedede;
	border-radius: 3px;
	padding: 3px 10px;
	font-size: 13px;
	line-height: 20px;
	color: #444444;
}

.rt-itemView .itemSocialSharing a:hover {
	border-color: #73b612;
	color: #73b612;
}

.rt-itemView .itemSocialSharing a .ne-ikon-x {
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: -0.125em;
	margin-right: 6px;
}

.rt-itemView .itemSocialSharing a .fa {
	margin-right: 6px;
}

.rt-itemView .itemToolbar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rt-itemView .itemToolbar ul li {
	display: inline-block;
	margin: 0;
	padding: 0 12px;
	font-size: 14px;
	line-height: 24px;
	border-left: 1px solid #e4e4e4;
}

.rt-itemView .itemToolbar ul li:first-child {
	border-left: none;
}

.rt-itemView .itemToolbar ul li.ne-betumeret span {
	color: #444444;
	margin-right: 6px;
}

.rt-itemView .itemToolbar ul li.ne-betumeret a {
	margin-left: 4px;
}

/* A címkék listája a „Kategória:" sor mellett fut, nem alatta. */
.rt-itemView .itemLinks .itemTagsBlock ul {
	display: inline-block;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* A szerzői doboz: kerek avatar balra, mellette a szöveg (style.css:3607).
   A lebegtetést és a lezárást a K2 adta. */
.rt-itemView .itemAuthorBlock {
	overflow: hidden;
}

.rt-itemView .itemAuthorBlock .itemAuthorAvatar {
	float: left;
	object-fit: cover;
}

.rt-itemView .itemAuthorBlock .itemAuthorDetails {
	overflow: hidden;
}

/* A szerző neve ZÖLD a régi oldalon (`kepernyokep/esemeny-cikkoldal.png`). A
   K2 hivatkozásként írta ki — a szerzői oldalára mutatott —, onnan kapta a
   kiemelő színt; nálunk sima szöveg, tehát a színt itt kell megadni. A sablon
   csak a méretét adja meg (`style.css:3627`). */
.rt-itemView .itemAuthorBlock .itemAuthorDetails .itemAuthorName {
	color: #73b612;
}

.rt-itemView .itemAuthorBlock .itemAuthorEmail {
	margin-top: 10px;
}

.rt-itemView .itemAuthorBlock .itemAuthorEmail i {
	padding-right: 6px;
}

/* Előző / következő cikk: a régi oldalon a előző balra, a következő jobbra
   állt a szürke dobozban (style.css:3672). */
.rt-itemView .itemNavigation {
	overflow: hidden;
}

.rt-itemView .itemNavigation .ne-cikknav {
	overflow: hidden;
}

.rt-itemView .itemNavigation a.itemNext {
	float: right;
	padding-left: 25px;
	padding-bottom: 12px;
	display: inline-block;
	text-align: right;
}

/* A betűméretet a JS soron belüli stílusként teszi az `.itemFullText`-re
   (lásd js/newsedge.js) — a bekezdéseknek nincs saját méretük, tehát öröklik.
   Alapállapotban semmit nem írunk felül. */

/* ══ 6. A képernyőkép-kör javításai ══════════════════════════════════════
 *
 * A felhasználó két dokumentumban (EMjavitas1/2) végigment a főoldalon és a
 * rovatoldalakon. Az alábbi szabályok azokat a pontokat zárják le, amelyekhez
 * nem kellett döntés. Ahol volt eredeti szám, az a FORRÁS moduljának
 * paraméteréből jön (`jos_modules.params`), nem becslésből — a hivatkozott
 * modul-azonosítók a forrás oldal moduljai.
 *                                              (lásd 25_kinezet_javitas.php) */

/* ── Friss hírek: nincs kacsacsőr a címsor előtt ─────────────────────────
 *
 * A `template.css:2231` MINDEN modul-listára ráteszi
 * (`.sp-module ul > li > a:before`), a régi oldalon viszont a sávban nem volt.
 */
.sprocket-headlines ul.sprocket-headlines-list > li > a::before {
	content: none;
	margin-right: 0;
}

/* ── A kategória-jelvény zöld doboza a képre ültetett kártyákon ──────────
 *
 * A `style.css`/`preset.css` a `.nsptext … .nspInfo .nspCategory`-t festi, a
 * jelvény viszont nálunk `.nspInfo1`-ben áll (ez a `.recent-news` szerkezete),
 * ezért kimaradt a szabályból. A szín a sablon akcentusa (`preset.css`:
 * #73b612), a jobb alsó bevágás ugyanaz a `:before` háromszög, mint a
 * zászló-címeknél.
 */
.ne-fooldal-sor .nspArts .nspArt .nspTextWrap .nspCategory {
	background: #73b612;
}

.ne-fooldal-sor .nspArts .nspArt .nspTextWrap .nspCategory::before {
	position: absolute;
	content: "";
	top: 0;
	right: -8px;
	border-top: 8px solid #73b612;
	border-right: 8px solid transparent;
}

/* ── Az első sor két hasábja egy vonalban ér véget ───────────────────────
 *
 * A News Show Pro FIX méretre vágta a bélyegképeket — a bal oszlop modulja
 * ([279]) 750×536-ra, a jobb oszlopé ([314]) 360×258-ra —, és a `container`
 * pont ekkora hasábokat ad (1170 px-nél 750 és 360). Mi az eredeti képet
 * adjuk ki `height: auto`-val, tehát a magasság képenként más: ezért lóg be a
 * jobb alsó kép a bal alá. Itt az arányt állítjuk vissza.
 *
 * A két jobb oldali kártya közti rés 20 px, mert 258 + 20 + 258 = 536, azaz
 * pontosan a bal kártya magassága — és ez az arány minden töréspontnál tartja
 * magát, mert mindkét hasáb ugyanúgy skálázódik.
 */
#sp-fooldal1a .nspArts .nspArt .img-wrapper {
	aspect-ratio: 750 / 536;
	overflow: hidden;
}

#sp-fooldal1b .nspArts .nspArt .img-wrapper {
	aspect-ratio: 360 / 258;
	overflow: hidden;
}

#sp-fooldal1a .nspArts .nspArt .img-wrapper > a,
#sp-fooldal1a .nspArts .nspArt .nspImageWrapper,
#sp-fooldal1b .nspArts .nspArt .img-wrapper > a,
#sp-fooldal1b .nspArts .nspArt .nspImageWrapper,
#sp-fooldal3a .nspArts .nspArt .img-wrapper > a,
#sp-fooldal3a .nspArts .nspArt .nspImageWrapper {
	display: block;
	height: 100%;
}

#sp-fooldal1a .nspArts .nspArt .nspImage,
#sp-fooldal1b .nspArts .nspArt .nspImage,
#sp-fooldal3a .nspArts .nspArt .nspImage {
	height: 100%;
	object-fit: cover;
}

#sp-fooldal1b .nspArts .nspArt {
	margin-bottom: 20px;
}

#sp-fooldal1b .nspArts .nspArt:last-child {
	margin-bottom: 0;
}

/* ── A dátum–like sor felzárkózik a cím alá ──────────────────────────────
 *
 * A `style.css:1076` a címsornak `padding: 15px 0 5px`-öt ad, alá jön még a
 * Bootstrap 3 `h4` alsó margója — együtt ~22 px. A régi blokkokban a dátum
 * szorosan a cím alatt állt.
 *
 * Csak a KÖZVETLEN gyerek címsorra vonatkozik: a képre ültetett kártyáknál a
 * cím a `.nspTextWrap`-ben van, az már 6 px-en áll (lásd fentebb) — a
 * felhasználó épp azokat hozta példának.
 */
.nspArts .nspArt > .nspHeader {
	padding: 15px 0 0;
	margin-bottom: 6px;
}

/* ── A lapozó pöttyei kerekek ────────────────────────────────────────────
 *
 * A `style.css:1036` 12×12 px-es négyzetet ad; az eredetin (lásd
 * `kepernyokep/esemeny-fooldal.png`, az „Események" blokk fölött) kerek pont
 * volt. A kerekítést a bővítmény saját CSS-e adta.
 */
.nspTopInterface .nspPagination li {
	border-radius: 50%;
}

/* ── A link-listák a sor elejéhez igazodnak ──────────────────────────────
 *
 * Az `ul.nspList` megtartja a böngésző alapértelmezett `padding-left`-jét,
 * ezért a „Legfrissebb 10" linkjei beljebb kezdődnek, mint a blokk címe.
 */
.nspLinksWrap ul.nspList {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

/* ── Tartalom galéria: sötétítő réteg, hoverre kivilágosodik ─────────────
 *
 * A `.gkImgOverlay` nálunk csak a kattintható felület volt. A sötétítést a
 * News Show Pro saját CSS-e adta; a sablon ugyanezt a mintát használja a
 * rovatlista képeinél (`style.css:3135`), onnan az érték és az időzítés.
 */
.gkNspPM-NewsBlocks > figure > .gkImgOverlay {
	background-color: rgba(0, 0, 0, 0.3);
	transition: background-color 0.5s ease-out;
}

.gkNspPM-NewsBlocks > figure:hover > .gkImgOverlay {
	background-color: rgba(0, 0, 0, 0);
}

/* ── Népszerű tartalmak (alsó sáv): kis kép balra, cím mellette ──────────
 *
 * A forrás modulja ([302]) `img_width: 110`, `img_height: 70`,
 * `img_margin: 0 15px 0 0` — a kép balra lebegett, a cím mellette állt.
 * A `.nspInfo` saját blokk-környezetet kap, hogy a dátum a cím alatt
 * maradjon, ne fusson a kép alá.
 */
/* A tétel fogja be a lebegő képet. Enélkül a rövid című tétel szövege
   alacsonyabb, mint a 70 px-es bélyegkép, a kép kilóg a tételéből, és a
   KÖVETKEZŐ tétel képe már nem fér a bal szélre — mellé csúszik, beljebb
   kezdve. Az alsó sávban keskeny a hasáb, ott ez azonnal látszik (a
   „Bogács, Bogácsi Termálfürdő" tétel csúszott így el 390 px-en). */
.most-viewed .nspArts .nspArt {
	overflow: hidden;
}

.most-viewed .nspArts .nspArt > .img-wrapper {
	float: left;
	width: 110px;
	margin: 0 15px 0 0;
	aspect-ratio: 110 / 70;
	overflow: hidden;
}

.most-viewed .nspArts .nspArt > .img-wrapper > a,
.most-viewed .nspArts .nspArt .nspImageWrapper {
	display: block;
	height: 100%;
}

.most-viewed .nspArts .nspArt .nspImage {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.most-viewed .nspArts .nspArt > .nspHeader,
.most-viewed .nspArts .nspArt > .nspInfo {
	overflow: hidden;
}

.most-viewed .nspArts .nspArt > .nspHeader {
	padding: 0;
}

/* ══ 7. Rovat- és cikkoldalak ════════════════════════════════════════════ */

/* ── Az oldalcím-sáv éltől élig ér ───────────────────────────────────────
 *
 * A `#sp-title` `container-fluid`-ot használ, de a Bootstrap 3 oszlop-
 * paddingja 15-15 px-szel beljebb húzza a dobozt — a felső zöld sáv viszont
 * teljes szélességű. Az eredetin (`kepernyokep/esemeny-kategoriaoldal.png`)
 * a sötét sáv éltől élig ért.
 */
#sp-title > .container-fluid {
	padding-left: 0;
	padding-right: 0;
}

#sp-title > .container-fluid > .row {
	margin-left: 0;
	margin-right: 0;
}

#sp-title > .container-fluid > .row > [class*="col-"] {
	padding-left: 0;
	padding-right: 0;
}

/* ── Morzsasor: se helyjelölő ikon, se elválasztó a „Főlap" előtt ────────
 *
 * A Joomla 5 morzsamodulja egy külön `li`-be teszi a helyjelölő ikont, és a
 * Bootstrap `li + li:before` emiatt a „Főlap" ELÉ is tesz elválasztót. Az
 * eredetin egyik sem volt: „Főlap - Esemény - Hírek, elemzések".
 */
#sp-title .sp-page-title .breadcrumb li.mod-breadcrumbs__divider {
	display: none;
}

#sp-title .sp-page-title .breadcrumb li.mod-breadcrumbs__divider + li::before {
	content: none;
	padding: 0;
}

/* ── A lapozó: kitöltött szürke négyzetek, keret nélkül ──────────────────
 *
 * A `ul.pagination` Bootstrap 5 osztályokat kap a Joomlától (`ms-0`), a
 * sablon viszont Bootstrap 3-as, és annak alapértelmezése (fehér gomb, #ddd
 * keret, 6/12-es bélés) látszott. A régi oldal K2-lapozóját a sablon saját
 * szabálya festette (`style.css:2982`, `div.k2Pagination .pagination li a`):
 * 44 × 44 képpontos, kitöltött #f8f8f8 négyzet keret nélkül, 5-5 képpont
 * margóval, 16 px-es 500-as számmal, az aktív lapon a kiemelő színnel.
 *
 * A mentésen ugyanez mérhető: a gombok 44 szélesek, a köz 10, az első gomb
 * (zöld) 223-nál kezdődik, azaz a 730-as hasábban középen áll — a `k2.css:140`
 * `div.k2Pagination { text-align: center }` szabálya szerint.
 *
 * A `disabled` tételek azért tűnnek el, mert a régi sablon `pagination.php`-ja
 * az „első"/„előző" gombot CSAK aktív állapotban rajzolta ki
 * (`referencia/radius_newsedge/html/pagination.php:15`) — az első lapon a
 * mentésen is `1 … 10 > >>` áll, `«` és `‹` nélkül. A Joomla ezeket kirajzolja
 * (letiltott `span`-ként), ezért itt rejtjük el.
 *
 * A nyilak vastagságát a `.icon-angle-*` glifcsere intézi (3. szakasz).
 */
#sp-component .pagination__wrapper {
	text-align: center;
}

#sp-component ul.pagination {
	display: inline-block;
	float: none;
	margin: 30px 0 10px;
	/* A `li`-k inline-block-ok, a Joomla elrendezése viszont új sorba teszi
	   őket: a sortörés szóközzé válna, és a köz 10 helyett 14 lenne. */
	font-size: 0;
}

#sp-component ul.pagination > li.page-item {
	display: inline-block;
	float: none;
}

#sp-component ul.pagination > li.page-item.disabled {
	display: none;
}

#sp-component ul.pagination > li.page-item > .page-link {
	display: block;
	float: none;
	background: #f8f8f8;
	border: none;
	border-radius: 0;
	box-shadow: none;
	font-size: 16px;
	font-weight: 500;
	width: 44px;
	height: 44px;
	line-height: 44px;
	padding: 0;
	margin: 0 5px;
	text-align: center;
}

#sp-component ul.pagination > li.page-item.active > .page-link,
#sp-component ul.pagination > li.page-item > a.page-link:hover,
#sp-component ul.pagination > li.page-item > a.page-link:focus {
	background: #73b612;
	color: #fff;
}

/* A lapozó nyilai nem ikonglifek voltak: a K2 saját lapozója sima szöveget
   írt ki (`‹ › « »`), és a sablon betűje rajzolta — a mentésen a „>" 6,75 × 9,5
   CSS-képpont, feketén, az 500-as vastagsággal. A Joomla 5 ehelyett
   `icon-angle-*` osztályt ad, amit a 3. szakasz a FontAwesome vékony
   sorozatára cserél; a lapozóban ezt vonjuk vissza. */
#sp-component ul.pagination .page-link [class^="icon-"]:before {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

#sp-component ul.pagination .page-link .icon-angle-left:before {
	content: "\2039";
}

#sp-component ul.pagination .page-link .icon-angle-right:before {
	content: "\203a";
}

#sp-component ul.pagination .page-link .icon-angle-double-left:before {
	content: "\ab";
}

#sp-component ul.pagination .page-link .icon-angle-double-right:before {
	content: "\bb";
}

/* ── Rovatlista: a képen sötétítő réteg, hoverre kivilágosodik ───────────
 *
 * A szabály MEGVAN a sablonban (`style.css:3135`: `rgba(0,0,0,.3)`, hoverre
 * 0), csak nem érvényesült: a `span.catItemImage` és a benne álló `a` sorbeli
 * elem, így az abszolút pozicionált `:after` nem kapott magasságot. A
 * `display: block`-ot a K2 saját `k2.css`-e adta, az viszont a bővítménnyel
 * érkezett — a célon nincs telepítve.
 */
.bloglayout1 .catItemBody .catItemImageBlock .catItemImage,
.bloglayout1 .catItemBody .catItemImageBlock .catItemImage a {
	display: block;
}

/* ── Az idézetben álló linkajánlók nincsenek aláhúzva ────────────────────
 *
 * A `style.css:3531` az egész idézet-bekezdést aláhúzza — ez a sablon saját
 * formaterve, de a cikkek végi linkajánlóknál zavaró.
 */
.rt-itemView .itemBody .itemFullText blockquote p,
.rt-itemView .itemBody .itemFullText blockquote a {
	text-decoration: none;
}

/* Az oldalsáv `custom-class` arculata a `.sp-module` felső margóját 30 px-re
   viszi (style.css:2610) — az elsőnél viszont nem kell térköz, mert a hasáb
   teteje a komponens tetejéhez igazodik. */
.custom-class .sp-module:first-child {
	margin-top: 0;
}

/* A módosítás dátuma külön sorban áll: a `style.css:3576` `inline-block`-ot ad
   neki, a mellette lévő `.itemCategory` szintén az — így egy sorba folynának. */
.rt-itemView .itemLinks .itemDateModified {
	display: block;
}

/* ══ 8. A „Kapcsolat" megamenü ══════════════════════════════════════════
 *
 * A legördülő szerkezetét a `helper.php` adja (`newsedge_megamenu_doboz`), a
 * kinézetét a sablon: a `.sp-has-child:hover > .sp-dropdown` nyitja
 * (`template.css:915`), a `.sp-menu-full` a jobb szélhez igazítja (`:872`), a
 * `.sp-megamenu-parent .sp-module` pedig a hasábok belső margóját adja (`:829`).
 * Itt csak az marad, amit a Bootstrap-rács és a modulcímek igényelnek.
 *                                             (lásd 26_kapcsolat_menu.php) */

/* A legördülő belsejében a `.row` negatív margója kilógna a fehér dobozból. */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner > .row {
	margin-left: 0;
	margin-right: 0;
}

/* A hasábok modulcíme a menüben nem a nagybetűs modulcím-stílust viszi, hanem
   a régi oldalon látott, sima feliratot. A `.sp-module` felső margóját
   (template.css:2196) is el kell venni: a hasáb tetején nem kell térköz. */
.sp-megamenu-parent .sp-dropdown .sp-module {
	margin-top: 0;
}

.sp-megamenu-parent .sp-dropdown .sp-module .sp-module-title {
	font-size: 14px;
	text-transform: none;
	margin: 0 0 10px;
	padding: 0 10px;
	color: #111111;
}

/* A hasábokban álló menük listái nem kapnak kacsacsőrt és keretet — a
   `template.css:2214` a moduloknak adja, itt viszont menüpontok állnak. */
.sp-megamenu-parent .sp-dropdown .sp-module ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-megamenu-parent .sp-dropdown .sp-module ul > li {
	border-bottom: none;
}

.sp-megamenu-parent .sp-dropdown .sp-module ul > li > a::before {
	content: none;
	margin-right: 0;
}

.sp-megamenu-parent .sp-dropdown .sp-module ul > li > a {
	line-height: 1.5;
	padding: 6px 10px;
}

/* A bannerhasáb képe töltse ki a hasábot. */
.sp-megamenu-parent .sp-dropdown .sp-module .bannergroup img {
	max-width: 100%;
	height: auto;
}

/* Mobilon a legördülő nem fér ki fix szélességgel. */
@media screen and (max-width: 991px) {
	.sp-megamenu-parent .sp-dropdown.sp-menu-full {
		width: auto !important;
		max-width: 100vw;
	}
}

/* A `custom-class` szaggatott lista-elválasztója és térköze a menümodulokra
   való (a régi oldalon a jobb sáv „Portáljaink" listáján is ott volt). A News
   Show Pro link-listája viszont saját térközzel dolgozik — a „Legfrissebb 10"
   az eredetin elválasztó nélkül állt. */
.custom-class .sp-module .nspLinksWrap ul.nspList > li {
	margin-bottom: 0;
	border-bottom: none;
}

/* ── Az X (korábban Twitter) jele ────────────────────────────────────────
 *
 * A Font Awesome 4.7-ben nincs X-jel (a készlet 2016-os, a névváltás 2023-as),
 * ezért a `19_hianyzo_blokkok.php` beépített SVG-t ír a közösségi modulokba.
 * A méret és a függőleges helyzet a FontAwesome glifjéhez igazodik: 1em magas,
 * és 0,125em-mel lóg az alapvonal alá — így egy sorban áll a szomszédaival.
 */
.rt-socials .ne-ikon-x {
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: -0.125em;
}

/* A láblécben minden ikon a saját márkaszínét viszi (style.css:2535), fehér
   dobozban; az X-é fekete. A felső sávban mind fehér — ott a `currentColor`
   magától hozza (style.css:117). */
.footer-social.sp-module .rt-socials ul li .ne-ikon-x {
	color: #000000;
}

/* ── A megamenü nyitópontja `span` is lehet ──────────────────────────────
 *
 * A „Kapcsolat" menüpont `heading` típusú (a régi oldalon a `com_sppagebuilder`
 * oldalára mutatott, az a célon nincs telepítve), ezért `<span>`-ként renderel,
 * nem `<a>`-ként. A fejlécmenü szabályai viszont KIZÁRÓLAG a linkre vannak
 * írva — a `span` így a `template.css:813` alapállapotában maradt: 12 px
 * betűvel 14 helyett, más belső margóval. És a nyíl is rajta maradt, mert a
 * `style.css:320` szintén csak a linkről szedi le.
 *
 * Itt a három érintett szabályt tükrözzük a `span`-ra, hogy a menüpont
 * pontosan úgy nézzen ki, mint a szomszédai.
 */
#sp-menu .sp-megamenu-parent > li > span {
	font-size: 14px;
	color: #111111;
	text-transform: uppercase;
	line-height: 89px;
	padding: 0 12px;
	cursor: pointer;
	transition: all 1s ease-out;
}

#sp-menu .sp-megamenu-parent > li.active > span,
#sp-menu .sp-megamenu-parent > li:hover > span {
	color: #73b612;
}

/* Az almenüs pontok NYILAT viselnek — a régi oldalon a `Főoldal`, az
   `Esemény`, a `Szabadidő` és a `Kapcsolat` mind (`kepernyokep/esemeny-fooldal.png`
   és `esemeny-cikkoldal.png`, fejléc). Tömör háromszög, nem vékony `angle-down`:
   a FontAwesome `caret-down` (`\f0d7`).

   A `style.css:320` ezt kifejezetten kikapcsolja (`content: ""`), és 2026-08-25-ig
   ezt vettük mércének — a képernyőkép viszont mást mutat, tehát a sablon
   szabálya az, ami nem érvényesült a régi oldalon (a Helix keretrendszer CSS-e
   írta felül). Itt a KÉP dönt.

   Két szelektor: az almenüs pont lehet hivatkozás (`<a>`) és sima szöveg
   (`<span>`) is. */
#sp-menu .sp-megamenu-parent > li.sp-has-child > a::after,
#sp-menu .sp-megamenu-parent > li.sp-has-child > span::after {
	content: "\f0d7";
	font-family: 'FontAwesome';
	font-size: 12px;
	font-weight: normal;
	margin-left: 7px;
}