/* 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;
}

/* 2026-08-17 tulaj-lelet („a recently viewed és a felette lévő modul keskenyebb”):
   a téma .container-e NEM a Bootstrap-féle fix 1170px, hanem SZÁZALÉKOS
   (768→98%, 992→96%, 1200→92%, 1919→86%). A fenti beégetett 1170px ezért keskenyebb
   sort adott, mint a szomszédos, konténerben ülő sorok — 1422px-es ablakban 1140 vs
   1264 px, és minél szélesebb a monitor, annál nagyobb az eltérés (1919px felett a
   konténer 86% ≈ 1650px, a sor viszont maradna 1140). Mostantól ugyanazokat a
   százalékokat követjük, mint a téma. Mérés: scratchpad/measure_rows3.py */
.ocex-row--contained,
.ocex-row--full > .ocex-row-inner {
	max-width: none;
	width: 100%;
}

@media (min-width: 768px) {
	.ocex-row--contained,
	.ocex-row--full > .ocex-row-inner { width: 98%; }
}

@media (min-width: 992px) {
	.ocex-row--contained,
	.ocex-row--full > .ocex-row-inner { width: 96%; }
}

@media (min-width: 1200px) {
	.ocex-row--contained,
	.ocex-row--full > .ocex-row-inner { width: 92%; }
}

@media (min-width: 1919px) {
	.ocex-row--contained,
	.ocex-row--full > .ocex-row-inner { width: 86%; }
}

/* 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. A `width: 100%` azért kell, hogy a
   fenti százalékos szabályok NE szűkítsék a tartalom-oszlopban ülő sorokat; az
   id-s szelektor erősebb, tehát felülírja őket. */
#content .ocex-row--contained {
	max-width: none;
	width: 100%;
	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;
	/* a szélességet a fenti, témát követő százalékos blokk adja (nem 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) ---------- */

/* MINDEN színezett sáv kap függőleges levegőt — a `--custom` (szabad szín) korábban
   kimaradt ebből, ezért a tartalom a sáv széléhez tapadt, és a szomszédos sorok
   margója fehér csíkként látszott (tulaj-jelzés, 2026-08-06). */
.ocex-row--banded {
	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,
.ocex-row--custom + .ocex-row--custom {
	margin-top: 0;
	padding-top: 0;
}

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

.ocex-row--contrast { --ocex-bandbg: #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 { --ocex-bandbg: rgba(237, 30, 36, .04); }

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

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

[data-ocex-theme="dark"] .ocex-row--soft { --ocex-bandbg: #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 { --ocex-bandbg: #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 { --ocex-bandbg: rgba(237, 30, 36, .10); }

[data-ocex-theme="dark"] .ocex-row--accent-soft { --ocex-bandbg: 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);
	}
}

/* Szabad szín (a sáv-beállításban választott #rrggbb) — a --ocex-band változóból.
   A paletta-kulcsos sávok osztállyal mennek, ez csak a „custom" ághoz kell. */
.ocex-row--custom { --ocex-bandbg: var(--ocex-band, transparent); }

/* ---------- A HÁTTÉR-SÁV MINDIG TELJES SZÉLESSÉGŰ ----------
   Tulaj-kérés (2026-08-06): „függetlenül a sor szélesség beállításától azt szeretném,
   ha a háttérszín mindig teljes szélességű lenne."

   Miért így: a `contained` sor tartalma szándékosan 1170px-en marad, de a színes sáv
   csak akkor tagolja a lapot, ha széltől szélig fut. Ezért a hátteret NEM a sor
   background-ja adja, hanem egy 100vw-s ::before réteg a tartalom mögött — így a
   tartalom szélessége és a sáv szélessége függetlenül állítható.

   A ::before-t a rács-védelem korábban kikapcsolta (Bootstrap-clearfix), ezért itt
   kifejezetten visszaengedjük — de csak a színezett (banded) soroknál. */

.ocex-row--banded {
	position: relative;
	background: transparent;
}

.ocex-row--banded::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--ocex-bandbg, transparent);
	z-index: 0;
	pointer-events: none;
}

/* a tartalom a sáv FÖLÉ kerül (különben a ::before eltakarná) */
.ocex-row--banded > * {
	position: relative;
	z-index: 1;
}

/* a 100vw a függőleges görgetősávval túllóghat — a színezett sornál is levágjuk */
html:has(.ocex-row--banded) {
	overflow-x: clip;
}

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