/* ═══════════════════════════════════════════════════════════════════════
   Find a CENTRE Carousel — Public Styles
   ───────────────────────────────────────────────────────────────────────
   Two card style variants:
     .fac-style-classic     — image top + dark body bottom
     .fac-style-transparent — full-image with gradient overlay
═══════════════════════════════════════════════════════════════════════ */

/* ── CSS Custom Property Defaults ────────────────────────────────────── */
.fac-carousel-wrap {
	--fac-card-w:       340px;
	--fac-img-h:        280px;
	--fac-card-h:       480px;
	--fac-radius:       16px;
	--fac-body-bg:      #1a1a1a;
	--fac-side-overlay: 0.50;
	--fac-pt:           60px;
	--fac-pb:           60px;
	--fac-gap:          0px;

	padding-top:    var(--fac-pt);
	padding-bottom: var(--fac-pb);
	position:       relative;
	user-select:    none;
}

/* ══════════════════════════════════════════════════════════════════════
   STAGE — height auto-fits whichever mode is active
══════════════════════════════════════════════════════════════════════ */

/* Classic: image height + body min */
.fac-style-classic .fac-stage {
	position: relative;
	height:   calc(var(--fac-img-h) + 220px);
}

/* Transparent: fixed card height */
.fac-style-transparent .fac-stage {
	position: relative;
	height:   var(--fac-card-h);
}

/* ── Slide List ───────────────────────────────────────────────────────── */
.fac-slide-list {
	list-style: none;
	margin:     0;
	padding:    0;
	position:   relative;
	width:      100%;
	height:     100%;
}

/* ══════════════════════════════════════════════════════════════════════
   SLIDE BASE
   KEY FIX: top:50% + translateY(-50%) so ALL cards are vertically
   centred in the stage, preventing the active card from appearing
   "higher" than the scaled side cards.
══════════════════════════════════════════════════════════════════════ */
.fac-slide {
	position:        absolute;
	top:             50%;
	left:            50%;
	width:           var(--fac-card-w);
	margin-left:     calc(var(--fac-card-w) / -2);
	border-radius:   var(--fac-radius);
	overflow:        hidden;
	cursor:          pointer;
	will-change:     transform, opacity;
	transition:
		transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		opacity   0.4s ease,
		box-shadow 0.4s ease;
}

/* ══════════════════════════════════════════════════════════════════════
   POSITION CLASSES — all transforms include translateY(-50%) to keep
   vertical centre alignment consistent across scale values.
══════════════════════════════════════════════════════════════════════ */

.fac-slide.fac-active {
	transform:  translateX(0) translateY(-50%) scale(1);
	opacity:    1;
	z-index:    10;
	cursor:     default;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.fac-slide.fac-prev-1 {
	transform:  translateX(-68%) translateY(-50%) scale(0.84);
	opacity:    1;
	z-index:    9;
}

.fac-slide.fac-next-1 {
	transform:  translateX(68%) translateY(-50%) scale(0.84);
	opacity:    1;
	z-index:    9;
}

.fac-slide.fac-prev-2 {
	transform:  translateX(-115%) translateY(-50%) scale(0.68);
	opacity:    0.5;
	z-index:    8;
}

.fac-slide.fac-next-2 {
	transform:  translateX(115%) translateY(-50%) scale(0.68);
	opacity:    0.5;
	z-index:    8;
}

.fac-slide.fac-hidden-left {
	transform:      translateX(-148%) translateY(-50%) scale(0.55);
	opacity:        0;
	z-index:        7;
	pointer-events: none;
}

.fac-slide.fac-hidden-right {
	transform:      translateX(148%) translateY(-50%) scale(0.55);
	opacity:        0;
	z-index:        7;
	pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════
   SHARED DIM OVERLAY (appears on non-active slides)
══════════════════════════════════════════════════════════════════════ */
.fac-dim-overlay {
	position:       absolute;
	inset:          0;
	background:     rgba(0, 0, 0, 0);
	transition:     background 0.45s ease;
	pointer-events: none;
	z-index:        2;
}

.fac-slide:not(.fac-active) .fac-dim-overlay {
	background: rgba(0, 0, 0, var(--fac-side-overlay, 0.5));
}

/* ══════════════════════════════════════════════════════════════════════
   CLASSIC CARD STYLE
══════════════════════════════════════════════════════════════════════ */

.fac-style-classic .fac-card {
	display:        flex;
	flex-direction: column;
	width:          100%;
}

/* Greyscale on side cards */
.fac-style-classic .fac-slide:not(.fac-active) .fac-card-image {
	filter: grayscale(55%) brightness(0.75);
	transition: filter 0.45s ease;
}
.fac-style-classic .fac-slide.fac-active .fac-card-image {
	filter: none;
}

.fac-card-image {
	position:            relative;
	flex-shrink:         0;
	height:              var(--fac-img-h);
	background-size:     cover;
	background-position: center;
	background-color:    #2a2a2a;
}

.fac-card-body {
	background:     var(--fac-body-bg, #1a1a1a);
	padding:        18px 20px 16px;
	display:        flex;
	flex-direction: column;
	align-items:    flex-start; /* overridden by text_align control */
	gap:            8px;
	position:       relative;
}

/* Dim body of side cards */
.fac-style-classic .fac-slide:not(.fac-active) .fac-card-body::after {
	content:        '';
	position:       absolute;
	inset:          0;
	background:     rgba(0, 0, 0, 0.42);
	transition:     background 0.45s;
	z-index:        1;
	pointer-events: none;
}

/* ── Classic text ─────────────────────────────────────────────────── */
.fac-centre-name {
	color:       #ffffff;
	font-size:   26px;
	font-weight: 700;
	margin:      0 0 4px;
	line-height: 1.2;
}

.fac-details { display: flex; flex-direction: column; gap: 2px; }

.fac-org-name,
.fac-address,
.fac-hours {
	color:       #cccccc;
	font-size:   13px;
	line-height: 1.5;
	margin:      0;
}
.fac-org-name { font-weight: 600; }

/* ── Footer (counter + day) ────────────────────────────────────────── */
.fac-card-footer {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-top:      10px;
	padding-top:     10px;
	border-top:      1px solid rgba(255, 255, 255, 0.1);
}

.fac-counter {
	color:       #aaaaaa;
	font-size:   13px;
	font-weight: 600;
}

.fac-day-wrap {
	display:     flex;
	align-items: center;
	gap:         8px;
}

.fac-day-text {
	color:       #ffffff;
	font-size:   14px;
	font-weight: 600;
}

.fac-info-btn {
	position:    relative;
	cursor:      pointer;
	color:       #cccccc;
	display:     inline-flex;
	align-items: center;
}

.fac-tooltip {
	display:        none;
	position:       absolute;
	bottom:         calc(100% + 8px);
	right:          0;
	background:     rgba(0, 0, 0, 0.88);
	color:          #fff;
	font-size:      12px;
	padding:        8px 12px;
	border-radius:  6px;
	width:          220px;
	line-height:    1.5;
	z-index:        100;
	pointer-events: none;
	white-space:    normal;
}
.fac-info-btn:hover .fac-tooltip,
.fac-info-btn:focus .fac-tooltip { display: block; }

/* ══════════════════════════════════════════════════════════════════════
   TRANSPARENT CARD STYLE
══════════════════════════════════════════════════════════════════════ */

.fac-style-transparent .fac-slide {
	border-radius: var(--fac-radius);
}

.fac-card-transparent {
	position:            relative;
	width:               100%;
	height:              var(--fac-card-h);
	background-size:     cover;
	background-position: center;
	background-color:    #1a1a2a;
	display:             flex;
	flex-direction:      column;
	justify-content:     flex-end; /* content at bottom */
	border-radius:       var(--fac-radius);
	overflow:            hidden;
}

/* Bottom gradient overlay (color set via Elementor selector) */
.fac-card-overlay {
	position:       absolute;
	inset:          0;
	background:     linear-gradient(
		to top,
		#000000 0%,
		rgba(0,0,0,0.8) 30%,
		rgba(0,0,0,0.35) 60%,
		transparent 100%
	);
	z-index:        1;
	pointer-events: none;
}

/* Greyscale + darken on side cards in transparent mode */
.fac-style-transparent .fac-slide:not(.fac-active) .fac-card-transparent {
	filter: grayscale(50%) brightness(0.7);
	transition: filter 0.45s ease;
}
.fac-style-transparent .fac-slide.fac-active .fac-card-transparent {
	filter: none;
}

/* The dim overlay adds extra darkness on top of the image for side cards */
.fac-style-transparent .fac-dim-overlay { z-index: 3; }

/* Card body sits above overlays */
.fac-card-transparent .fac-card-body {
	position:       relative;
	z-index:        4;
	background:     transparent;
	padding:        0 24px 28px;
	display:        flex;
	flex-direction: column;
	align-items:    flex-start; /* overridden by text_align control */
	gap:            10px;
}

/* Centre name — yellow by default */
.fac-style-transparent .fac-centre-name {
	color:       #d4b400;
	font-size:   30px;
	font-weight: 700;
	margin:      0;
	line-height: 1.2;
}

/* Address & hours — white */
.fac-style-transparent .fac-address,
.fac-style-transparent .fac-hours,
.fac-style-transparent .fac-org-name {
	color:     #ffffff;
	font-size: 13px;
	margin:    0;
}

/* ── Learn More Button (Button 1) ─────────────────────────────────── */
.fac-learn-more-btn {
	display:         inline-block;
	border:          2px solid #2a9d8f;
	color:           #ffffff;
	background:      #2a9d8f;
	font-size:       13px;
	font-weight:     700;
	letter-spacing:  1.5px;
	text-transform:  uppercase;
	text-decoration: none;
	padding:         11px 24px;
	border-radius:   6px;
	align-self:      flex-start;
	transition:      background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	margin-top:      6px;
}
.fac-learn-more-btn:hover {
	background:   #228077;
	border-color: #228077;
}

/* ── Button 2 ─────────────────────────────────────────────────────── */
.fac-btn2 {
	background:   #2a9d8f;
	border-color: #2a9d8f;
	color:        #ffffff;
	margin-top:   8px;
}
.fac-btn2:hover {
	background:   #228077;
	border-color: #228077;
}

/* ══════════════════════════════════════════════════════════════════════
   5-SLIDE LAYOUT (fac-slides-5)
   Wide format — 5 cards visible with tighter spacing
   Uses calc() to incorporate --fac-gap into translations
══════════════════════════════════════════════════════════════════════ */

/* Active slide – slightly smaller scale to show more of side cards */
.fac-slides-5 .fac-slide.fac-active {
	transform: translateX(0) translateY(-50%) scale(1);
}

/* Inner pair (prev-1 / next-1) — positioned close with gap support */
.fac-slides-5 .fac-slide.fac-prev-1 {
	transform: translateX(calc(-60% - var(--fac-gap, 0px))) translateY(-50%) scale(0.86);
	opacity:   1;
	z-index:   9;
}
.fac-slides-5 .fac-slide.fac-next-1 {
	transform: translateX(calc(60% + var(--fac-gap, 0px))) translateY(-50%) scale(0.86);
	opacity:   1;
	z-index:   9;
}

/* Outer pair (prev-2 / next-2) — visible, further out */
.fac-slides-5 .fac-slide.fac-prev-2 {
	transform: translateX(calc(-107% - var(--fac-gap, 0px) * 2)) translateY(-50%) scale(0.70);
	opacity:   0.80;
	z-index:   8;
}
.fac-slides-5 .fac-slide.fac-next-2 {
	transform: translateX(calc(107% + var(--fac-gap, 0px) * 2)) translateY(-50%) scale(0.70);
	opacity:   0.80;
	z-index:   8;
}

/* 3-slide mode also gets gap support */
.fac-slide.fac-prev-1 {
	transform: translateX(calc(-68% - var(--fac-gap, 0px))) translateY(-50%) scale(0.84);
}
.fac-slide.fac-next-1 {
	transform: translateX(calc(68% + var(--fac-gap, 0px))) translateY(-50%) scale(0.84);
}

/* ══════════════════════════════════════════════════════════════════════
   NAVIGATION ARROWS
══════════════════════════════════════════════════════════════════════ */
.fac-nav-btn {
	position:        absolute;
	top:             50%;
	transform:       translateY(-50%);
	z-index:         20;
	background:      rgba(0, 0, 0, 0.35);
	border:          1.5px solid rgba(255, 255, 255, 0.3);
	border-radius:   50%;
	width:           48px;
	height:          48px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	cursor:          pointer;
	transition:      background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
	padding:         0;
}
.fac-nav-btn:hover {
	background:   rgba(0, 0, 0, 0.6);
	border-color: rgba(255, 255, 255, 0.7);
	transform:    translateY(-50%) scale(1.08);
}
.fac-nav-btn svg    { stroke: #ffffff; }
.fac-nav-prev       { left: 12px; }
.fac-nav-next       { right: 12px; }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
	/* 5-slide: hide outer pair on medium screens */
	.fac-slides-5 .fac-slide.fac-prev-2 {
		transform: translateX(calc(-105% - var(--fac-gap, 0px) * 2)) translateY(-50%) scale(0.65);
		opacity:   0.65;
	}
	.fac-slides-5 .fac-slide.fac-next-2 {
		transform: translateX(calc(105% + var(--fac-gap, 0px) * 2)) translateY(-50%) scale(0.65);
		opacity:   0.65;
	}
}

@media (max-width: 900px) {
	.fac-slide.fac-prev-1 { transform: translateX(calc(-60% - var(--fac-gap, 0px))) translateY(-50%) scale(0.82); }
	.fac-slide.fac-next-1 { transform: translateX(calc(60% + var(--fac-gap, 0px))) translateY(-50%) scale(0.82); }
	.fac-slides-5 .fac-slide.fac-prev-1 { transform: translateX(calc(-50% - var(--fac-gap, 0px))) translateY(-50%) scale(0.82); }
	.fac-slides-5 .fac-slide.fac-next-1 { transform: translateX(calc(50% + var(--fac-gap, 0px))) translateY(-50%) scale(0.82); }
	.fac-slides-5 .fac-slide.fac-prev-2 { transform: translateX(-90%) translateY(-50%) scale(0.64); opacity: 0.5; }
	.fac-slides-5 .fac-slide.fac-next-2 { transform: translateX(90%) translateY(-50%) scale(0.64); opacity: 0.5; }
	.fac-centre-name { font-size: 20px; }
}

@media (max-width: 600px) {
	.fac-slide.fac-prev-1 { transform: translateX(calc(-52% - var(--fac-gap, 0px))) translateY(-50%) scale(0.78); }
	.fac-slide.fac-next-1 { transform: translateX(calc(52% + var(--fac-gap, 0px))) translateY(-50%) scale(0.78); }
	.fac-slides-5 .fac-slide.fac-prev-1 { transform: translateX(calc(-50% - var(--fac-gap, 0px))) translateY(-50%) scale(0.78); }
	.fac-slides-5 .fac-slide.fac-next-1 { transform: translateX(calc(50% + var(--fac-gap, 0px))) translateY(-50%) scale(0.78); }
	.fac-slides-5 .fac-slide.fac-prev-2,
	.fac-slides-5 .fac-slide.fac-next-2 { opacity: 0; pointer-events: none; }
	.fac-nav-prev { left: 4px; }
	.fac-nav-next { right: 4px; }
}