/*
 * Layout primitives for the Flatsome-compatible shortcodes (inc/ux-builder/shortcodes.php).
 * Breakpoints follow Flatsome: small < 550px, medium 550–849px, large ≥ 850px.
 * Typography/colours inherit from the site stylesheets.
 */

.ux-section {
	position: relative;
	overflow: hidden;
}

.ux-section__bg,
.ux-section__overlay,
.ux-banner__bg,
.ux-banner__overlay {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-repeat: no-repeat;
}

.ux-section__content {
	position: relative;
	z-index: 1;
}

.ux-dark,
.ux-dark h1,
.ux-dark h2,
.ux-dark h3,
.ux-dark h4,
.ux-dark p {
	color: #fcf9f7;
}

/* Row + columns */
.ux-row {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
}

.ux-row--full {
	max-width: none;
}

.ux-row--inner {
	padding-left: 0;
	padding-right: 0;
	margin-left: -15px;
	margin-right: -15px;
	width: calc(100% + 30px);
	max-width: none;
}

.ux-row--h-center { justify-content: center; }
.ux-row--h-right { justify-content: flex-end; }
.ux-row--v-middle,
.ux-row--v-center { align-items: center; }
.ux-row--v-bottom { align-items: flex-end; }
.ux-row--v-equal > .ux-col > .ux-col__inner { height: 100%; }

.ux-col {
	position: relative;
	box-sizing: border-box;
	padding: 0 15px 30px;
	flex: 0 0 100%;
	max-width: 100%;
}

.ux-row--small > .ux-col { padding: 0 9.8px 19.6px; }
.ux-row--large > .ux-col { padding: 0 30px 30px; }
.ux-row--collapse > .ux-col { padding: 0; }

.ux-col--sm-1 { flex-basis: 8.3333%; max-width: 8.3333%; }
.ux-col--sm-2 { flex-basis: 16.6667%; max-width: 16.6667%; }
.ux-col--sm-3 { flex-basis: 25%; max-width: 25%; }
.ux-col--sm-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
.ux-col--sm-5 { flex-basis: 41.6667%; max-width: 41.6667%; }
.ux-col--sm-6 { flex-basis: 50%; max-width: 50%; }
.ux-col--sm-7 { flex-basis: 58.3333%; max-width: 58.3333%; }
.ux-col--sm-8 { flex-basis: 66.6667%; max-width: 66.6667%; }
.ux-col--sm-9 { flex-basis: 75%; max-width: 75%; }
.ux-col--sm-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
.ux-col--sm-11 { flex-basis: 91.6667%; max-width: 91.6667%; }
.ux-col--sm-12 { flex-basis: 100%; max-width: 100%; }

@media (min-width: 550px) {
	.ux-col--md-1 { flex-basis: 8.3333%; max-width: 8.3333%; }
	.ux-col--md-2 { flex-basis: 16.6667%; max-width: 16.6667%; }
	.ux-col--md-3 { flex-basis: 25%; max-width: 25%; }
	.ux-col--md-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
	.ux-col--md-5 { flex-basis: 41.6667%; max-width: 41.6667%; }
	.ux-col--md-6 { flex-basis: 50%; max-width: 50%; }
	.ux-col--md-7 { flex-basis: 58.3333%; max-width: 58.3333%; }
	.ux-col--md-8 { flex-basis: 66.6667%; max-width: 66.6667%; }
	.ux-col--md-9 { flex-basis: 75%; max-width: 75%; }
	.ux-col--md-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
	.ux-col--md-11 { flex-basis: 91.6667%; max-width: 91.6667%; }
	.ux-col--md-12 { flex-basis: 100%; max-width: 100%; }
}

@media (min-width: 850px) {
	.ux-col--lg-1 { flex-basis: 8.3333%; max-width: 8.3333%; }
	.ux-col--lg-2 { flex-basis: 16.6667%; max-width: 16.6667%; }
	.ux-col--lg-3 { flex-basis: 25%; max-width: 25%; }
	.ux-col--lg-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
	.ux-col--lg-5 { flex-basis: 41.6667%; max-width: 41.6667%; }
	.ux-col--lg-6 { flex-basis: 50%; max-width: 50%; }
	.ux-col--lg-7 { flex-basis: 58.3333%; max-width: 58.3333%; }
	.ux-col--lg-8 { flex-basis: 66.6667%; max-width: 66.6667%; }
	.ux-col--lg-9 { flex-basis: 75%; max-width: 75%; }
	.ux-col--lg-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
	.ux-col--lg-11 { flex-basis: 91.6667%; max-width: 91.6667%; }
	.ux-col--lg-12 { flex-basis: 100%; max-width: 100%; }
}

/* Banner */
.ux-banner {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.ux-banner__layers {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ux-banner__link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.ux-text-box {
	position: absolute;
	max-width: 100%;
	box-sizing: border-box;
}

/* Elements */
.ux-image {
	margin: 0;
}

.ux-image__img {
	display: block;
	width: 100%;
	height: auto;
}

.ux-image__caption {
	margin-top: 0.5em;
	font-size: 0.875em;
	opacity: 0.8;
}

.ux-title {
	margin-bottom: 1em;
}

.ux-title--center {
	text-align: center;
}

.ux-title__text {
	margin: 0;
}

.ux-text > :first-child { margin-top: 0; }
.ux-text > :last-child { margin-bottom: 0; }

.ux-text-left { text-align: left; }
.ux-text-center { text-align: center; }
.ux-text-right { text-align: right; }

.ux-button--white {
	color: #fcf9f7;
	border-color: #fcf9f7;
}

.ux-divider--center { margin-left: auto; margin-right: auto; }
.ux-divider--right { margin-left: auto; }
.ux-divider { background-color: currentColor; opacity: 0.6; }

/* Flatsome visibility helpers */
@media (max-width: 549px) {
	.hide-for-small { display: none !important; }
	.ux-gap[style*="--ux-gap-sm"] { height: var(--ux-gap-sm) !important; }
	.ux-banner[style*="--ux-banner-sm"] { min-height: var(--ux-banner-sm) !important; }
	.ux-section[style*="--ux-padding-sm"] { padding-top: var(--ux-padding-sm) !important; padding-bottom: var(--ux-padding-sm) !important; }
}

@media (min-width: 550px) {
	.show-for-small { display: none !important; }
}

@media (min-width: 550px) and (max-width: 849px) {
	.hide-for-medium { display: none !important; }
}

@media (min-width: 850px) {
	.hide-for-large { display: none !important; }
	.show-for-medium { display: none !important; }
}

/* Plain (non-builder) page content */
.mh-page-content {
	max-width: 860px;
	margin: 0 auto;
	padding: 160px 20px 80px;
}

.mh-page-content h1 {
	margin-bottom: 0.6em;
}

.mh-page-content img {
	max-width: 100%;
	height: auto;
}