/**
 * naples-split-teal.css
 *
 * Phase 12.2 — Teal background variant of naples-split.
 * Used by the refactored [surgery-center] shortcode and any future
 * call to naples_render_split() with bg_color = 'teal'.
 *
 * Visual pattern (matches Figma master):
 *  - Left half: teal background (--naples-primary) with white text
 *    + white-outlined CTA
 *  - Right half: lobby photo flush to the right edge
 *
 * Also includes legacy overrides for .surgery-center wrapper class
 * to defeat residual rules from shortcodes/surgery-center/*.scss.
 */

/* ====================================================================
   TEAL BG VARIANT — applies anywhere naples_render_split is called
   with bg_color = 'teal'
   ==================================================================== */
.naples-redesign .naples-split.is-bg-teal {
	background: var(--naples-primary);
	color: var(--naples-white);
	display: flex;
	flex-direction: row;
	align-items: stretch;
	margin: var(--naples-space-4) 0;
}

@media (max-width: 900px) {
	.naples-redesign .naples-split.is-bg-teal {
		flex-direction: column;
	}
}

/* Image takes ~45% of width, flush to its edge */
.naples-redesign .naples-split.is-bg-teal .naples-split-image {
	flex: 0 0 45%;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.naples-redesign .naples-split.is-bg-teal .naples-split-image picture,
.naples-redesign .naples-split.is-bg-teal .naples-split-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 900px) {
	.naples-redesign .naples-split.is-bg-teal .naples-split-image {
		flex: 0 0 auto;
		width: 100%;
		max-height: 320px;
	}
}

/* When image is on the RIGHT, image comes after content in DOM order.
   The renderer outputs image FIRST then content, so we need to flip
   visually using flex order when is-image-right. */
.naples-redesign .naples-split.is-bg-teal.is-image-right {
	flex-direction: row-reverse;
}

@media (max-width: 900px) {
	.naples-redesign .naples-split.is-bg-teal.is-image-right {
		flex-direction: column;
	}
}

/* Content block — left side of the row when image is right */
.naples-redesign .naples-split.is-bg-teal .naples-split-content {
	flex: 1 1 55%;
	display: flex;
	align-items: center;
	padding: var(--naples-space-5) var(--naples-space-5);
}

@media (max-width: 900px) {
	.naples-redesign .naples-split.is-bg-teal .naples-split-content {
		padding: var(--naples-space-4) var(--naples-space-4);
	}
}

.naples-redesign .naples-split.is-bg-teal .naples-split-content-inner {
	max-width: 480px;
	width: 100%;
}

/* Heading — serif, white, large */
.naples-redesign .naples-split.is-bg-teal .naples-split-heading {
	font-family: var(--naples-font-heading);
	font-size: 44px;
	font-weight: 400;
	line-height: 1.1;
	color: var(--naples-white);
	margin: 0 0 var(--naples-space-3);
	letter-spacing: -0.3px;
}

@media (max-width: 768px) {
	.naples-redesign .naples-split.is-bg-teal .naples-split-heading {
		font-size: 32px;
	}
}

/* Body — Inter, white, regular */
.naples-redesign .naples-split.is-bg-teal .naples-split-body,
.naples-redesign .naples-split.is-bg-teal .naples-split-body p {
	font-family: var(--naples-font-body);
	font-size: 15px;
	line-height: 1.55;
	color: var(--naples-white);
	margin: 0 0 var(--naples-space-3);
	font-weight: 400;
	opacity: 0.92;
}




/* ====================================================================
   LEGACY OVERRIDES — defeat residual .surgery-center CSS
   The wrapper still has class="surgery-center" via the .surgery-center-promo
   extra class. Reset any legacy padding/border/colors that survived.
   ==================================================================== */
.naples-redesign .naples-split.surgery-center-promo .naples-split-content {
	background: transparent !important;
}

.naples-redesign .naples-split.surgery-center-promo h2 {
	color: var(--naples-white);
	font-family: var(--naples-font-heading);
}

.naples-redesign .naples-split.surgery-center-promo p {
	color: var(--naples-white);
	font-family: var(--naples-font-body);
}

/* Hide legacy .surgery-center::before/after that the old SCSS might add */
.naples-redesign .naples-split.surgery-center-promo::before,
.naples-redesign .naples-split.surgery-center-promo::after {
	content: none !important;
}