/**
 * Divello Visual Composer: layout extras.
 *
 * Inner rows, per-device visibility, text schemes, shadows, row gradients,
 * parallax, column links and presets. Loaded after frontend.css (handle
 * nova-builder-layout), so it only adds; nothing here changes a page that does
 * not use the matching classes. Per-element values (padding, colours, radius,
 * z-index, offset) are compiled by NB_CSS into the footer style block instead.
 */

/* ---------------------------------------------------------------- Inner row */

.nb-row--inner { width: 100%; }

.nb-row--inner > .nb-row__inner {
	max-width: none;
	padding-inline: 0;
}

/* ------------------------------------------------------------ Hide by device */

@media (min-width: 1001px) {
	.nb-hide-desktop { display: none !important; }
}

@media (min-width: 691px) and (max-width: 1000px) {
	.nb-hide-tablet { display: none !important; }
}

@media (max-width: 690px) {
	.nb-hide-phone { display: none !important; }
}

/* ------------------------------------------------------------- Text schemes */

.nb-scheme--light {
	color: #fff;
	--nova-heading: #fff;
}

.nb-scheme--dark {
	color: #111;
	--nova-heading: #111;
}

/* Zero specificity on purpose: a heading with its own colour (nb_heading
   color, a column text_color via --nova-heading) must beat the scheme. */
:where(.nb-scheme--light) :where(h1, h2, h3, h4, h5, h6) { color: var(--nova-heading, #fff); }
:where(.nb-scheme--dark) :where(h1, h2, h3, h4, h5, h6) { color: var(--nova-heading, #111); }

/* ------------------------------------------------------------------ Shadows
 *
 * Rows carry the shadow themselves; a column carries it on its inner wrapper,
 * which is the box that also takes the background and radius.
 */

.nb-row.nb-shadow--small,   .nb-col.nb-shadow--small   > .nb-col__inner { box-shadow: 0 2px 8px rgba(0, 0, 0, .10); }
.nb-row.nb-shadow--medium,  .nb-col.nb-shadow--medium  > .nb-col__inner { box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.nb-row.nb-shadow--large,   .nb-col.nb-shadow--large   > .nb-col__inner { box-shadow: 0 18px 48px rgba(0, 0, 0, .20); }

/* ----------------------------------------------------------- Padding presets */

.nb-col--pad-none > .nb-col__inner { padding: 0; }
.nb-col--pad-1 > .nb-col__inner { padding: 1%; }
.nb-col--pad-2 > .nb-col__inner { padding: 2%; }
.nb-col--pad-3 > .nb-col__inner { padding: 3%; }
.nb-col--pad-4 > .nb-col__inner { padding: 4%; }
.nb-col--pad-5 > .nb-col__inner { padding: 5%; }

/* ------------------------------------------------------------- Column link */

.nb-col--linked > .nb-col__inner { position: relative; }

.nb-col__link {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	text-decoration: none;
}

.nb-col__link:focus-visible {
	outline: 2px solid var(--nova-accent, currentColor);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- Gradient */

.nb-row__gradient {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.nb-row__gradient--animate {
	background-size: 200% 200%;
	animation: nb-gradient-shift 12s ease-in-out infinite alternate;
}

@keyframes nb-gradient-shift {
	from { background-position: 0% 50%; }
	to   { background-position: 100% 50%; }
}

.nb-row--has-gradient > .nb-row__inner { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- Parallax
 *
 * The picture moves from a pseudo-element, translated by layout.js through
 * --nb-par. Without the script (or with reduced motion) it is a still cover
 * image, which is what the row would have shown anyway.
 */

.nb-row--bg-parallax { overflow: hidden; }

.nb-row--bg-parallax.nb-row--has-bg { background-image: none; }

.nb-row--bg-parallax.nb-row--has-bg::before {
	content: "";
	position: absolute;
	inset: -15% 0;
	z-index: 0;
	background-image: var(--nb-row-bg);
	background-size: cover;
	background-position: center;
	transform: translate3d(0, var(--nb-par, 0px), 0);
	will-change: transform;
	pointer-events: none;
}

/* ------------------------------------------------- Reverse column order */

@media (max-width: 690px) {
	.nb-row--reverse-phone > .nb-row__inner {
		display: flex;
		flex-direction: column-reverse;
	}
}

/* ----------------------------------------------------- Animation stagger */

.nb-anim { transition-delay: var(--nb-anim-delay, 0s); }

@media (prefers-reduced-motion: reduce) {
	.nb-row__gradient--animate { animation: none; }
	.nb-row--bg-parallax.nb-row--has-bg::before { transform: none; }
	.nb-anim { transition-delay: 0s !important; }
}