/* OSM Areas Map Carousel
   ---------------------------------------------------------------------------
   A native CSS scroll-snap carousel of area cards (map + title + phone + CTA).
   No carousel library. Works without JS as a horizontally scrollable row.

   Two rules that MUST be respected when editing this file:
   1. PHP only ever sets the SOURCE variables inline (--oam-mc-per-desk/-tab/-mob,
      peek, gutter). Never set --oam-mc-per / --oam-mc-peek / --oam-mc-gut inline:
      inline styles beat media queries and would lock every screen to the desktop
      values.
   2. Structural rules are scoped as `.oam-mc .oam-mc-*` on purpose: theme resets
      like `ul[class]{padding:0}` out-specify a single class and would silently
      zero the track padding (killing the peek).
   3. Never use the `padding` shorthand on the track. It resets the left/right
      peek padding and the peek controls silently stop working.
   --------------------------------------------------------------------------- */

.oam-mc {
	position: relative;
	--oam-mc-gap: 22px;
	--oam-mc-radius: 16px;
	--oam-mc-card: #ffffff;
	--oam-mc-title: #0d2350;
	--oam-mc-sub: #7c8aa5;
	--oam-mc-btn: #0d3577;
	--oam-mc-btn-text: #ffffff;
	--oam-mc-arrow-bg: #ffffff;
	--oam-mc-arrow-fg: #0d2350;

	/* Resolved per breakpoint from the inline source values. */
	--oam-mc-per: var(--oam-mc-per-desk, 4);
	--oam-mc-peek: var(--oam-mc-peek-desk, 0px);
	--oam-mc-gut: var(--oam-mc-gut-desk, 0px);

	/* Track padding per side. Default: no peek, gutter both sides. */
	--oam-mc-pad-l: var(--oam-mc-gut);
	--oam-mc-pad-r: var(--oam-mc-gut);
}

/* Peek sides. A peeking side gets peek + gap so the exposed sliver of the
   neighbouring card ends up exactly the peek width. The opposite side keeps the
   plain gutter. With peek on both sides the gutter is not used at all. */
.oam-mc--peek-right {
	--oam-mc-pad-l: var(--oam-mc-gut);
	--oam-mc-pad-r: calc( var(--oam-mc-peek) + var(--oam-mc-gap) );
}
.oam-mc--peek-left {
	--oam-mc-pad-l: calc( var(--oam-mc-peek) + var(--oam-mc-gap) );
	--oam-mc-pad-r: var(--oam-mc-gut);
}
.oam-mc--peek-both {
	--oam-mc-pad-l: calc( var(--oam-mc-peek) + var(--oam-mc-gap) );
	--oam-mc-pad-r: calc( var(--oam-mc-peek) + var(--oam-mc-gap) );
}

/* Viewport holds ONLY the track + arrows, so arrows centre on the card row and
   dots/credit below can never push them out of it. */
.oam-mc-viewport {
	position: relative;
}

.oam-mc .oam-mc-track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--oam-mc-gap);
	overflow-x: auto;
	overflow-y: hidden;
	/* proximity, not mandatory: mandatory snapping fights programmatic scrolling
	   and drags the track back after an arrow click. */
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	margin: 0;
	list-style: none;
	/* Longhand only — see note at the top of this file. */
	padding-top: 4px;
	padding-bottom: 10px;
	padding-left: var(--oam-mc-pad-l, 0px);
	padding-right: var(--oam-mc-pad-r, 0px);
	scroll-padding-left: var(--oam-mc-pad-l, 0px);
	scroll-padding-right: var(--oam-mc-pad-r, 0px);
}
.oam-mc .oam-mc-track::-webkit-scrollbar { display: none; }

.oam-mc .oam-mc-slide {
	scroll-snap-align: start;
	flex: 0 0 calc( ( 100% - ( var(--oam-mc-per) - 1 ) * var(--oam-mc-gap) ) / var(--oam-mc-per) );
	min-width: 0;
}

.oam-mc .oam-mc-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--oam-mc-card);
	border-radius: var(--oam-mc-radius);
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(8, 20, 45, 0.14);
}

/* Map area. Fixed ratio so the row reserves space before Leaflet loads (no CLS).
   Isolated because Leaflet gives its panes z-index 400 and controls 800; without
   a stacking context those escape and paint over the arrows. */
.oam-mc .oam-mc-map {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 11;
	background: #e9eef5;
	z-index: 0;
	isolation: isolate;
}
@supports not ( aspect-ratio: 1 ) {
	.oam-mc-map { height: 190px; }
}
.oam-mc-map-el { position: absolute; inset: 0; height: 100%; width: 100%; }
.oam-mc-map .leaflet-container { height: 100%; width: 100%; background: #e9eef5; }

/* Placeholder until the card scrolls into view and its map is built. */
.oam-mc-ph {
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, #eef2f8 0%, #e3e9f2 100% );
}

.oam-mc .oam-mc-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 20px 18px 22px;
	text-align: center;
	flex: 1 1 auto;
}
.oam-mc .oam-mc-title {
	margin: 0;
	font-size: clamp( 20px, 1.7vw, 28px );
	font-weight: 800;
	line-height: 1.15;
	color: var(--oam-mc-title);
}
.oam-mc-title a { color: inherit; text-decoration: none; }
.oam-mc-title a:hover { text-decoration: underline; }

.oam-mc .oam-mc-phone {
	margin: 0;
	font-size: 15px;
	line-height: 1.3;
	color: var(--oam-mc-sub);
	text-decoration: none;
}
a.oam-mc-phone:hover { color: var(--oam-mc-title); }

.oam-mc .oam-mc-cta {
	display: block;
	width: 100%;
	margin-top: auto;
	padding: 14px 20px;
	border-radius: 40px;
	background: var(--oam-mc-btn);
	color: var(--oam-mc-btn-text);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: filter 0.2s ease;
}
.oam-mc-cta:hover { filter: brightness( 1.12 ); color: var(--oam-mc-btn-text); }

/* ---- Arrows ---- */
.oam-mc .oam-mc-nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	/* Above Leaflet's controls (800) so a map can never paint over an arrow. */
	z-index: 900;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--oam-mc-arrow-bg);
	color: var(--oam-mc-arrow-fg);
	box-shadow: 0 6px 18px rgba(8, 20, 45, 0.28);
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
}
.oam-mc.is-live .oam-mc-nav { display: flex; }
.oam-mc .oam-mc-nav[disabled] { opacity: 0; pointer-events: none; }
/* Inside the box: hanging outside gets clipped by Elementor's overflow:hidden. */
.oam-mc .oam-mc-nav--prev { left: 10px; }
.oam-mc .oam-mc-nav--next { right: 10px; }

.oam-mc-nav i { display: block; width: 1em; height: 1em; font-size: inherit; }
.oam-mc-nav svg { display: block; width: 0.95em; height: 0.95em; fill: currentColor; }
/* The bundled default chevron is stroked, not filled. */
.oam-mc-nav svg.oam-mc-chev {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.1;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---- Dots ---- */
.oam-mc-dots {
	display: none;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}
.oam-mc.is-live .oam-mc-dots { display: flex; }
.oam-mc .oam-mc-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
}
.oam-mc .oam-mc-dot.is-on { width: 26px; border-radius: 6px; background: #fff; }
.oam-mc.oam-mc--light .oam-mc-dot { background: rgba(13, 35, 80, 0.25); }
.oam-mc.oam-mc--light .oam-mc-dot.is-on { background: var(--oam-mc-title); }

/* ---- Credit ---- */
.oam-mc .oam-mc-credit {
	margin: 10px 0 0;
	font-size: 11px;
	line-height: 1.4;
	text-align: right;
	opacity: 0.65;
	color: inherit;
}
.oam-mc-credit a { color: inherit; text-decoration: underline; }

/* Smooth scrolling can be turned off per widget. */
.oam-mc--nosmooth .oam-mc-track { scroll-behavior: auto; }

/* ---- Breakpoints (match Elementor: tablet <=1024, mobile <=767) ---- */
@media ( max-width: 1024px ) {
	.oam-mc {
		--oam-mc-per: var(--oam-mc-per-tab, 2);
		--oam-mc-peek: var(--oam-mc-peek-tab, 0px);
		--oam-mc-gut: var(--oam-mc-gut-tab, 0px);
	}
	.oam-mc .oam-mc-nav { width: 40px; height: 40px; font-size: 18px; }
	.oam-mc .oam-mc-nav--prev { left: 6px; }
	.oam-mc .oam-mc-nav--next { right: 6px; }
}
@media ( max-width: 767px ) {
	.oam-mc {
		--oam-mc-per: var(--oam-mc-per-mob, 1);
		--oam-mc-peek: var(--oam-mc-peek-mob, 0px);
		--oam-mc-gut: var(--oam-mc-gut-mob, 0px);
		--oam-mc-gap: 14px;
	}
	.oam-mc .oam-mc-nav { width: 34px; height: 34px; font-size: 16px; }
	.oam-mc .oam-mc-nav--prev { left: 2px; }
	.oam-mc .oam-mc-nav--next { right: 2px; }
	.oam-mc .oam-mc-title { font-size: clamp( 18px, 5.5vw, 24px ); }
	.oam-mc .oam-mc-cta { padding: 12px 16px; font-size: 14px; }
	.oam-mc-dots { margin-top: 10px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.oam-mc .oam-mc-track { scroll-behavior: auto; }
}