/* =========================================================
   Layout primitives for pages migrated from Elementor.
   Implements the subset of Elementor's container model the
   site uses, driven by the same CSS variables, so the per-page
   layout rules in css/pages/*.css keep working unchanged.
   Breakpoints: tablet ≤1024px, mobile ≤767px.
   ========================================================= */

.ou-con{
	--display:flex;
	--flex-direction:column;
	--flex-wrap:nowrap;
	--justify-content:flex-start;
	--align-items:stretch;
	--gap:20px;
	--row-gap:var(--gap);
	--column-gap:var(--gap);
	--padding:10px;
	--container-max-width:1140px;
	--content-width:min(100%, var(--container-max-width));
	--container-widget-width:100%;
	--container-widget-flex-grow:0;
	--container-widget-align-self:auto;

	position:relative;
	display:var(--display);
	flex-direction:var(--flex-direction);
	flex-wrap:var(--flex-wrap);
	justify-content:var(--justify-content);
	align-items:var(--align-items);
	row-gap:var(--row-gap);
	column-gap:var(--column-gap);
	grid-template-columns:var(--e-con-grid-template-columns, 1fr);
	grid-template-rows:var(--e-con-grid-template-rows, auto);
	grid-auto-flow:var(--grid-auto-flow, row);
	width:var(--width,100%);
	min-height:var(--min-height, auto);
	flex-grow:var(--flex-grow,0);
	flex-shrink:var(--flex-shrink,1);
	order:var(--order,0);
	align-self:var(--align-self,auto);
	padding:var(--padding);
	margin-inline:auto;
}

/* boxed containers: the outer box is full width, the inner box carries the layout */
.ou-con--boxed{ display:flex; flex-direction:column; }
.ou-con--boxed > .ou-con__inner{
	display:var(--display);
	flex-direction:var(--flex-direction);
	flex-wrap:var(--flex-wrap);
	justify-content:var(--justify-content);
	align-items:var(--align-items);
	row-gap:var(--row-gap);
	column-gap:var(--column-gap);
	grid-template-columns:var(--e-con-grid-template-columns, 1fr);
	grid-template-rows:var(--e-con-grid-template-rows, auto);
	grid-auto-flow:var(--grid-auto-flow, row);
	width:100%;
	max-width:var(--content-width);
	margin-inline:auto;
}

/* nested containers have no padding of their own */
.ou-con .ou-con{ --padding:0px; }

/* widgets inside a row-direction flex container share the space */
.ou-con > .ou-el-widget,
.ou-con__inner > .ou-el-widget{
	width:var(--container-widget-width);
	flex-grow:var(--container-widget-flex-grow);
	align-self:var(--container-widget-align-self);
	min-width:0;
}
.ou-el-widget__width-initial{ width:var(--container-widget-width, auto); max-width:100%; }
.ou-el-widget__width-inherit{ width:100%; }

/* ---------- widgets ---------- */
.ou-el-heading-title{ margin:0; padding:0; line-height:1.15; }
.ou-w-heading .ou-el-heading-title{ color:#fff; font-weight:700; }

.ou-w-image{ text-align:center; }
.ou-w-image img{ display:inline-block; max-width:100%; height:auto; border-radius:var(--ou-radius-sm); }
.ou-w-image .widget-image-caption:empty{ display:none; }

.ou-w-text-editor{ color:#d6d6dc; }
.ou-w-text-editor > .ou-w-container > :last-child{ margin-bottom:0; }

.ou-el-icon-list-items{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.ou-el-icon-list-item{ display:flex; align-items:center; gap:10px; }
.ou-el-icon-list-item > a{ display:flex; align-items:center; gap:10px; color:inherit; }
.ou-el-icon-list-item > a:hover{ color:var(--ou-accent); }
.ou-el-icon-list-icon{ display:inline-flex; flex:0 0 auto; color:var(--ou-accent); }
.ou-el-icon-list-icon svg{ width:var(--e-icon-list-icon-size,16px); height:var(--e-icon-list-icon-size,16px); fill:currentColor; }

.ou-w-google_maps iframe{ display:block; width:100%; height:380px; border:0; border-radius:var(--ou-radius); filter:grayscale(.3) invert(.92) hue-rotate(180deg); }

/* full-bleed hero (was in Customizer CSS) */
.ou-con:has(.ou-hero),
.ou-con:has(.ou-hero) > .ou-con__inner{ padding:0; margin:0; max-width:none; }
.ou-hero{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:0; }
@media (max-width:768px){
	.ou-hero{ min-height:calc(100svh - 76px); }
	.ou-hero__slide{ background-size:cover !important; }
}

/* ---------- responsive visibility ---------- */
@media (min-width:1025px){ .ou-hide-desktop{ display:none !important; } }
@media (min-width:768px) and (max-width:1024px){
	.ou-hide-tablet{ display:none !important; }
	.ou-con{ --container-max-width:1024px; }
}
@media (max-width:767px){
	.ou-hide-mobile{ display:none !important; }
	.ou-con{ --container-max-width:767px; --flex-wrap:var(--flex-wrap-mobile, wrap); }
}
