/* OCEX Rows - row-based layout system.
   The rows are inserted into the finished page by the module's event handler; this
   stylesheet provides the grid, the background bands and the full-width breakout.
   The band colours are fixed values (see "Background bands" and "Dark mode" below), not
   theme variables: neutral greys plus faint red ("brand-soft") and blue ("accent-soft")
   tints. They are deliberately subdued - the sectioning should be noticeable, not loud.
   Adjust them to your palette. */

/* ---------- Grid ---------- */

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

/* The Bootstrap clearfix ::before/::after would become REAL grid cells (an empty first
   slot) if anything applied it to the container - so it is switched off. */
.ocex-row::before,
.ocex-row::after,
.ocex-row-inner::before,
.ocex-row-inner::after {
	content: none;
	display: none;
}

/* Companion of minmax(0, Xfr): the cell content must not be able to stretch the band
   either (Bootstrap .media-body = width 10000px). */
.ocex-row-cell {
	min-width: 0;
	/* Third-party modules placed in a cell (carousel rows, flex lists) overflowed the cell
	   on mobile and caused horizontal scrolling of the page. `clip` cuts the overflow but,
	   unlike `hidden`, does not create a scroll container, so `position: sticky` and
	   dropdowns inside the cell keep working. */
	max-width: 100%;
	overflow-x: clip;
}

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

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

/* default vertical spacing between rows */
.ocex-row + .ocex-row {
	margin-top: 20px;
}

/* ---------- Container width (width_mode = contained) ----------
   In the zones OUTSIDE the content column (below_content, above_footer, below_footer) no
   ancestor bounds a contained row, so it would run edge to edge. This rule gives it real
   container behaviour; the theme-following block below refines the width. */
.ocex-row--contained {
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

/* Theme-following width: the theme's .container is NOT the fixed Bootstrap 1170px but
   PERCENTAGE based (768px: 98%, 992px: 96%, 1200px: 92%, 1919px: 86%). A hard-coded 1170px
   would make these rows narrower than neighbouring rows that sit inside the container,
   and the wider the monitor, the bigger the difference. So the same percentages are used
   here; adjust them if the container of your theme differs. */
.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%; }
}

/* INSIDE the content column (above_content zone) the ancestor already bounds the width -
   no further narrowing there, and no double inner padding. `width: 100%` is needed so that
   the percentage rules above do NOT narrow the rows sitting in the content column; the id
   selector is stronger, so it overrides them. */
#content .ocex-row--contained {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* ---------- Full width (width_mode = full) ---------- */

/* The row breaks out of the container: the BACKGROUND is 100vw wide, the CONTENT stays at
   container width (so the inner wrapper holds the grid and the outer element is only the band). */
.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;
	/* the width comes from the theme-following percentage block above (not a fixed 1170px) */
	margin: 0 auto;
	padding: 0 15px;
	box-sizing: border-box;
}

/* Trust-strip blocks (.ocex-trust) placed in a cell: the row provides the spacing; the
   block's own outer margin would only create a gap here (e.g. a white strip above the
   footer). */
.ocex-row-cell .ocex-trust {
	margin: 0;
}

/* If a breakout row sits directly above the footer, the footer's top margin would leave a
   white strip between the two - make them touch. */
.ocex-row--full + footer,
.ocex-row--bleed + footer {
	margin-top: 0;
}

/* in a band row the content must not touch the edge of the band */
.ocex-row--full > .ocex-row-inner {
	padding-top: 14px;
	padding-bottom: 14px;
}

/* ---------- Full-bleed (width_mode = bleed) ----------
   Here the CONTENT runs to the screen edge as well - the row itself stays the grid (no
   inner wrapper), it only breaks out of the container. */
.ocex-row--bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* overflow-x protection: 100vw is wider than the viewport by the width of the vertical
   scrollbar -> horizontal scrolling. It is clipped at page level, but ONLY on pages that
   really contain a breakout row (:has). Unlike overflow-x: hidden, clip does not break
   position: sticky. */
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;
	}
}

/* ---------- Background bands (band, palette keys) ---------- */

/* EVERY coloured band gets vertical breathing room - including `--custom` (free colour);
   without it the content would stick to the band edge and the margins of the neighbouring
   rows would show up as white stripes. */
.ocex-row--banded {
	padding-top: 28px;
	padding-bottom: 28px;
}

/* Consecutive rows with the SAME band: the band stays continuous and the inner spacing is
   not doubled (the padding-bottom of the upper row provides the 28px). */
.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; }

/* on the dark band plain text links would be unreadable; buttons are left alone */
.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); }

/* ---------- Dark mode ([data-ocex-theme="dark"], normally set on the html element) ---------- */

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

/* the contrast band stays the same in dark mode - this is the intended emphasis */
[data-ocex-theme="dark"] .ocex-row--contrast { --ocex-bandbg: #1e1e1e; color: #f0f0f0; }

/* still a translucent tint, just strong enough to be visible on a dark background */
[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); }

/* ---------- Responsive ---------- */

/* on narrow screens every row is single-column (the cells stack) */
@media (max-width: 767px) {
	.ocex-row,
	.ocex-row--full > .ocex-row-inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Free colour (the #rrggbb chosen in the band setting) - taken from the --ocex-band variable.
   Palette-key bands work through classes; this is only needed for the "custom" branch. */
.ocex-row--custom { --ocex-bandbg: var(--ocex-band, transparent); }

/* ---------- THE BACKGROUND BAND IS ALWAYS FULL WIDTH ----------
   Regardless of the row width setting, the background colour spans the full width.

   Why: the content of a `contained` row deliberately stays at container width, but a
   coloured band only sections the page if it runs edge to edge. So the background is NOT
   the row's own background but a 100vw ::before layer behind the content - the content
   width and the band width can be set independently.

   The grid protection above switched the ::before off (Bootstrap clearfix), so it is
   explicitly re-enabled here - but only for the coloured (banded) rows. */

.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;
}

/* the content goes ABOVE the band (otherwise the ::before would cover it) */
.ocex-row--banded > * {
	position: relative;
	z-index: 1;
}

/* 100vw can overflow by the width of the vertical scrollbar - clipped for coloured rows as well */
html:has(.ocex-row--banded) {
	overflow-x: clip;
}

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