/* OCEX Rows — sor-alapú elrendezés-rendszer (F1).
   A sorokat a modul eseménykezelője szúrja a kész lapba; ez a stíluslap adja a
   rácsot, a háttér-sávokat és a teljes szélességű kitörést.
   Paletta-igazodás (trikdis.stylesheet.css :root): --g-50 #f8f8f8, --g-900 #1e1e1e,
   --trikdis #ed1e24, --protegus #0d5c98. A sáv-színek szándékosan halkak
   (visszafogott design): a tagolás legyen érezhető, ne hangos. */

/* ---------- Rács ---------- */

.ocex-row {
	display: grid;
	grid-template-columns: var(--ocex-cols, minmax(0, 1fr));
	gap: 20px;
}

/* A Bootstrap-clearfix ::before/::after VALÓDI rács-cellává válna (üres első hely),
   ha bármi ráülne a konténerre — ezért kikapcsoljuk. */
.ocex-row::before,
.ocex-row::after,
.ocex-row-inner::before,
.ocex-row-inner::after {
	content: none;
	display: none;
}

/* A minmax(0, Xfr) párja: a cella tartalma se feszíthesse szét a sávot
   (Bootstrap .media-body = width 10000px). */
.ocex-row-cell {
	min-width: 0;
	/* 2026-08-03: a cellaba tett IDEGEN modulok (carousel-sorok, flex-listak) mobilon
	   kilogtak a cellabol es 15px vizszintes gorgetest okoztak a lapon. A `clip`
	   levagja, de — a `hidden`-nel ellentetben — nem hoz letre gorgeto-kontenert,
	   igy a benne levo `position: sticky` es a lenyilok tovabbra is mukodnek. */
	max-width: 100%;
	overflow-x: clip;
}

@supports not (overflow-x: clip) {
	.ocex-row-cell { overflow-x: hidden; }
}

.ocex-row-cell img {
	max-width: 100%;
}

/* alap ritmus a sorok között (F2-ben állíthatóvá tehető) */
.ocex-row + .ocex-row {
	margin-top: 20px;
}

/* ---------- Konténer-szélesség (width_mode = contained) ----------
   2026-08-04 tulaj-lelet („mintha fordítva menne"): a tartalom-területen KÍVÜLI
   zónákban (below_content, above_footer, below_footer — body-szinten állnak) a
   contained sort semmi nem határolta → teljes szélesre folyt, miközben a full mód
   1170-re rendezett tartalmat adott. Itt kap valódi konténer-viselkedést. */
.ocex-row--contained {
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

/* a tartalom-oszlopon BELÜL (above_content zóna) az őse már határol — ott nem
   szűkítünk tovább, és dupla belső margó sincs */
#content .ocex-row--contained {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* ---------- Teljes szélesség (width_mode = full) ---------- */

/* A sor kitör a konténerből: a HÁTTÉR 100vw, a TARTALOM konténer-szélességen marad
   (ezért rácsol a belső burok, és a külső csak sáv). */
.ocex-row--full {
	display: block;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.ocex-row--full > .ocex-row-inner {
	display: grid;
	grid-template-columns: var(--ocex-cols, minmax(0, 1fr));
	gap: 20px;
	width: 100%;
	max-width: 1170px;
	margin: 0 auto;
	padding: 0 15px;
	box-sizing: border-box;
}

/* Cellába tett tartalom-blokkok: a sor adja a ritmust, a blokk saját külső
   margója itt csak rést csinálna (tulaj-lelet: „fehér rész a footer fölött"). */
.ocex-row-cell .ocex-trust {
	margin: 0;
}

/* Ha kitörő sor ül közvetlenül a footeren, a footer felső margója fehér sávot
   hagyna a kettő között — tapadjanak össze. */
.ocex-row--full + footer,
.ocex-row--bleed + footer {
	margin-top: 0;
}

/* a sáv-os (band) sorban a tartalom ne érjen a sáv széléig */
.ocex-row--full > .ocex-row-inner {
	padding-top: 14px;
	padding-bottom: 14px;
}

/* ---------- Full-bleed (width_mode = bleed) ----------
   Tulaj-kérés (2026-08-04): itt a TARTALOM is a képernyő széléig fut — a sor maga
   marad rács (nincs belső burok), csak kitör a konténerből. */
.ocex-row--bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* overflow-x védelem: a 100vw a függőleges görgetősáv szélességével túllóg a
   viewporton → vízszintes görgetés. A lap szintjén levágjuk, de CSAK azon az
   oldalon, ahol tényleg van kitörő sor (:has). A clip — az overflow-x: hidden-nel
   szemben — nem tör el a position: sticky-t. */
html:has(.ocex-row--full),
html:has(.ocex-row--bleed) {
	overflow-x: clip;
}

@supports not (overflow: clip) {
	html:has(.ocex-row--full),
	html:has(.ocex-row--bleed) {
		overflow-x: hidden;
	}
}

/* ---------- Háttér-sávok (band, paletta-kulcsok) ---------- */

.ocex-row--soft,
.ocex-row--contrast,
.ocex-row--brand-soft,
.ocex-row--accent-soft {
	padding-top: 28px;
	padding-bottom: 28px;
}

/* Egymás után következő AZONOS sávú sorok: a sáv összefüggő marad, a belső tér
   nem duplázódik (a felső sor padding-bottomja adja a 28px-et). */
.ocex-row--soft + .ocex-row--soft,
.ocex-row--contrast + .ocex-row--contrast,
.ocex-row--brand-soft + .ocex-row--brand-soft,
.ocex-row--accent-soft + .ocex-row--accent-soft {
	margin-top: 0;
	padding-top: 0;
}

.ocex-row--soft {
	background: #f6f7f9;
}

.ocex-row--contrast {
	background: #1e1e1e;
	color: #f0f0f0;
}

/* a sötét sávon a sima szöveglink olvashatatlan lenne; a gombokhoz nem nyúlunk */
.ocex-row--contrast a:not(.btn) {
	color: #f0f0f0;
}

.ocex-row--brand-soft {
	background: rgba(237, 30, 36, .04);
}

.ocex-row--accent-soft {
	background: rgba(13, 92, 152, .05);
}

/* ---------- Sötét mód (html[data-ocex-theme="dark"]) ---------- */

[data-ocex-theme="dark"] .ocex-row--soft {
	background: #22242b;
}

/* a kontrasztos sáv sötétben is ugyanaz marad — ez a szándékolt kiemelés */
[data-ocex-theme="dark"] .ocex-row--contrast {
	background: #1e1e1e;
	color: #f0f0f0;
}

/* továbbra is áttetsző árnyalat, csak annyival erősebb, hogy sötét alapon látszódjon */
[data-ocex-theme="dark"] .ocex-row--brand-soft {
	background: rgba(237, 30, 36, .10);
}

[data-ocex-theme="dark"] .ocex-row--accent-soft {
	background: rgba(13, 92, 152, .14);
}

/* ---------- Reszponzív ---------- */

/* keskeny képernyőn minden sor egyoszlopos (a cellák egymás alá esnek) */
@media (max-width: 767px) {
	.ocex-row,
	.ocex-row--full > .ocex-row-inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- Helyben-szerkesztes (csak belepett adminnak renderelodik) ----------
   A "+ Uj sor ide" savok es a fogaskerek a latogatonak SOSEM keszul el —
   a controller adminfelismerese nelkul a markup sem kerul a lapra.        */
.ocex-row { position: relative; }
.ocex-row-gear {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 60;
	width: 30px;
	height: 30px;
	line-height: 28px;
	text-align: center;
	background: rgba(255, 255, 255, .92);
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 50%;
	color: #444;
}
.ocex-row-gear:hover,
.ocex-row-gear:focus { color: #0d5c98; border-color: rgba(13, 92, 152, .55); text-decoration: none; }

.ocex-rowadd { margin: 10px auto; max-width: 1170px; padding: 0 15px; }
.ocex-rowadd a {
	display: block;
	padding: 8px 14px;
	border: 2px dashed rgba(13, 92, 152, .35);
	border-radius: 4px;
	text-align: center;
	color: #5a6169;
	background: rgba(13, 92, 152, .04);
	text-decoration: none;
	font-size: 13px;
}
.ocex-rowadd a:hover,
.ocex-rowadd a:focus { border-color: rgba(13, 92, 152, .7); color: #0d5c98; background: rgba(13, 92, 152, .08); text-decoration: none; }

[data-ocex-theme="dark"] .ocex-row-gear { background: rgba(38, 42, 51, .92); color: #c8d0da; border-color: rgba(255, 255, 255, .22); }
[data-ocex-theme="dark"] .ocex-rowadd a { color: #98a2b0; border-color: rgba(110, 168, 220, .4); background: rgba(110, 168, 220, .06); }
[data-ocex-theme="dark"] .ocex-rowadd a:hover { color: #8ec0ea; border-color: rgba(110, 168, 220, .8); }

@media print { .ocex-rowadd, .ocex-row-gear { display: none; } }