/**
 * naples-feature-card.css
 *
 * Phase 12 — Reusable promo card with text overlay on image.
 * Phase 12.1 — Fixed width / layout to respect legacy positioning.
 *
 * The legacy .feature-* shortcodes have their own widths/floats baked
 * into compiled CSS files (e.g. .feature-coolsculpting { width: 49%;
 * float: right } at >= 1024px). Rather than fight those rules, we
 * EMBRACE them: the legacy classes still control the outer geometry
 * (where the card sits in the parent layout), and our naples styling
 * only handles the interior chrome (background image, overlay, text).
 *
 * Removed: aspect-ratio: 3/2 (was making cards huge when width 100%)
 * Added:   min-height: 380px (predictable card size regardless of width)
 *          Removed float: none !important (legacy float allowed to win)
 */

/* ====================================================================
   CARD WRAPPER
   ==================================================================== */
.naples-redesign .naples-feature-card {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--naples-primary); /* fallback if image fails */
	font-family: var(--naples-font-body);
	min-height: 380px;
	/* width and float NOT set — legacy .feature-X CSS controls those */
}

/* Wide hero variant for SkinMedica — taller min-height because banner */
.naples-redesign .naples-feature-card.is-wide-hero {
	min-height: 460px;
	width: 100% !important;
	float: none !important;
}

@media (max-width: 600px) {
	.naples-redesign .naples-feature-card {
		min-height: 320px;
	}
	.naples-redesign .naples-feature-card.is-wide-hero {
		min-height: 380px;
	}
}


/* ====================================================================
   BACKGROUND IMAGE (full-bleed)
   ==================================================================== */
.naples-redesign .naples-feature-card-bg {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 1;
	margin: 0;
}

.naples-redesign .naples-feature-card-bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	max-width: none !important;
}

/* Dark gradient overlay for text legibility */
.naples-redesign .naples-feature-card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.1) 80%, rgba(0,0,0,0) 100%);
	pointer-events: none;
}


/* ====================================================================
   CONTENT BLOCK
   ==================================================================== */
.naples-redesign .naples-feature-card-content {
	position: relative;
	z-index: 3;
	width: 100% !important;     /* override legacy .content { width: 60% } */
	max-width: 520px;
	padding: 40px 36px;
	color: var(--naples-white);
	min-height: 380px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.naples-redesign .naples-feature-card.is-wide-hero .naples-feature-card-content {
	max-width: 640px;
	padding: 48px 60px;
	justify-content: center;
	min-height: 460px;
}

@media (max-width: 768px) {
	.naples-redesign .naples-feature-card-content {
		padding: 28px 24px;
		min-height: 320px;
	}
	.naples-redesign .naples-feature-card.is-wide-hero .naples-feature-card-content {
		padding: 28px 24px;
		min-height: 380px;
	}
}


/* ====================================================================
   LOGO (optional, above heading)
   ==================================================================== */
.naples-redesign .naples-feature-card-logo {
	display: block;
	margin: 0 0 12px;
	line-height: 0;
}

.naples-redesign .naples-feature-card-logo img {
	display: block;
	max-width: 200px;
	max-height: 36px;
	width: auto !important;
	height: auto;
	object-fit: contain;
	object-position: left center;
}

/* VECTRA logo is taller — give it more room */
.naples-redesign .naples-feature-card.feature-vectra .naples-feature-card-logo img {
	max-height: 60px;
	max-width: 220px;
}


/* ====================================================================
   HEADING
   ==================================================================== */
.naples-redesign .naples-feature-card-heading {
	font-family: var(--naples-font-heading);
	font-size: 38px;
	font-weight: 400;
	line-height: 1.05;
	color: var(--naples-white);
	margin: 0 0 12px;
	letter-spacing: -0.4px;
}

.naples-redesign .naples-feature-card.is-wide-hero .naples-feature-card-heading {
	font-size: 44px;
}

@media (max-width: 768px) {
	.naples-redesign .naples-feature-card-heading {
		font-size: 28px;
	}
	.naples-redesign .naples-feature-card.is-wide-hero .naples-feature-card-heading {
		font-size: 32px;
	}
}


/* ====================================================================
   EMSCULPT BRAND MARK
   ==================================================================== */
.naples-redesign .naples-feature-emsculpt-mark {
	display: inline-block;
	font-family: var(--naples-font-heading);
	font-weight: 700;
	letter-spacing: -1px;
}

.naples-redesign .naples-feature-emsculpt-light {
	font-weight: 300;
}


/* ====================================================================
   BODY TEXT
   ==================================================================== */
.naples-redesign .naples-feature-card-body {
	font-family: var(--naples-font-body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--naples-white);
	margin: 0 0 18px;
	font-weight: 400;
	max-width: 400px;
	opacity: 0.92;
}

.naples-redesign .naples-feature-card.is-wide-hero .naples-feature-card-body {
	font-size: 15px;
	max-width: 480px;
}


/* ====================================================================
   CTA BUTTON
   ==================================================================== */
.naples-redesign .naples-feature-card-cta {
	display: inline-flex;
	align-items: stretch;
	background: transparent;
	color: var(--naples-white);
	text-decoration: none;
	font-family: var(--naples-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.6px;
	transition: opacity 0.2s ease;
	margin-top: auto;

	/* Reset legacy button styles */
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	background-color: transparent !important;
	width: auto !important;
	align-self: flex-start;
}

.naples-redesign .naples-feature-card-cta:hover,
.naples-redesign .naples-feature-card-cta:focus {
	opacity: 0.85;
	color: var(--naples-white);
	text-decoration: none;
	outline: 0;
	background: transparent !important;
}

.naples-redesign .naples-feature-card-cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	flex: 0 0 40px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.85);
	color: var(--naples-white);
}

.naples-redesign .naples-feature-card-cta-label {
	display: inline-flex;
	align-items: center;
	padding: 10px 22px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-left: 0;
	color: var(--naples-white);
	text-transform: uppercase;
	letter-spacing: 0.8px;
}


/* ====================================================================
   MODEL DISCLAIMER
   ==================================================================== */
.naples-redesign .naples-feature-card-model {
	position: absolute;
	bottom: 10px;
	right: 14px;
	z-index: 4;
	font-family: var(--naples-font-body);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 1.2px;
	color: var(--naples-white);
	opacity: 0.65;
	pointer-events: none;
}


/* ====================================================================
   LEGACY-SCOPED OVERRIDES
   ==================================================================== */
.naples-redesign .naples-feature-card h2,
.naples-redesign .naples-feature-card p {
	color: var(--naples-white);
	font-family: var(--naples-font-body);
}

.naples-redesign .naples-feature-card h2 {
	font-family: var(--naples-font-heading);
}

/* Hide any legacy logo IMG / SVG that the old shortcode might still emit */
.naples-redesign .naples-feature-card .content > img,
.naples-redesign .naples-feature-card .content > svg {
	display: none;
}

/* Hide legacy ::after that injects "MODEL" (we render our own) */
.naples-redesign .naples-feature-card.feature-coolsculpting::after,
.naples-redesign .naples-feature-card.feature-skinmedica::after,
.naples-redesign .naples-feature-card.feature-vaginal-rejuv::after,
.naples-redesign .naples-feature-card.feature-vectra::after,
.naples-redesign .naples-feature-card.feature-emsculpt::after,
.naples-redesign .naples-feature-card.feature-exparel::after,
.naples-redesign .naples-feature-card.feature-specials-events::after {
	content: none !important;
}

/* Defeat legacy padding on the wrapper (they had 1.875rem internal padding
   that throws off our content positioning). Our padding lives on the
   content block, the wrapper should be flush. */
.naples-redesign .naples-feature-card.feature-coolsculpting,
.naples-redesign .naples-feature-card.feature-skinmedica,
.naples-redesign .naples-feature-card.feature-vaginal-rejuv,
.naples-redesign .naples-feature-card.feature-vectra,
.naples-redesign .naples-feature-card.feature-emsculpt,
.naples-redesign .naples-feature-card.feature-exparel,
.naples-redesign .naples-feature-card.feature-specials-events {
	padding: 0 !important;
	display: block !important;     /* override legacy flex */
	align-items: stretch !important;
}

/* Reset .content width legacy that limited content area */
.naples-redesign .naples-feature-card .naples-feature-card-content {
	width: 100% !important;
}


/* ====================================================================
   PHASE 12.1.x — Spacing between adjacent feature cards
   --------------------------------------------------------------------
   When two .naples-feature-card are siblings (e.g. /plastic-surgery/
   has CoolSculpting + Special Offers floating side by side), they
   visually touch because legacy floated them at 49%+49% with no gap.
   This adds a small horizontal margin to the SECOND card only, so
   single-card pages are not affected.
   ==================================================================== */
@media (min-width: 1024px) {
	.naples-redesign .naples-feature-card + .naples-feature-card {
		margin-left: 2%;
		width: 47% !important;     /* 47 + 2 + 49 = 98, leaves 2% breathing room */
	}
	.naples-redesign .naples-feature-card:has(+ .naples-feature-card) {
		width: 49% !important;
	}
}

/* Stacked layout — add vertical breathing room on mobile too */
@media (max-width: 1023px) {
	.naples-redesign .naples-feature-card + .naples-feature-card {
		margin-top: var(--naples-space-3);
	}
}


/* ====================================================================
   PHASE 12.1.x — Spacing between adjacent feature cards
   --------------------------------------------------------------------
   When two .naples-feature-card are siblings (e.g. /plastic-surgery/
   has CoolSculpting + Special Offers floating side by side), they
   visually touch because legacy floated them at 49%+49% with no gap.
   This adds a small horizontal margin to the SECOND card only, so
   single-card pages are not affected.
   ==================================================================== */
@media (min-width: 1024px) {
	.naples-redesign .naples-feature-card + .naples-feature-card {
		margin-left: 2%;
		width: 47% !important;     /* 47 + 2 + 49 = 98, leaves 2% breathing room */
	}
	.naples-redesign .naples-feature-card:has(+ .naples-feature-card) {
		width: 49% !important;
	}
}

/* Stacked layout — add vertical breathing room on mobile too */
@media (max-width: 1023px) {
	.naples-redesign .naples-feature-card + .naples-feature-card {
		margin-top: var(--naples-space-3);
	}
}


/* ====================================================================
   PHASE 12.1.x v2 — Universal margin para crear gap entre cards
   --------------------------------------------------------------------
   El sibling selector (+) no funcionó porque las cards no son hermanos
   DIRECTOS en el DOM (WP editor mete wrappers intermedios). Approach
   alternativo: forzar 48% width en cada card (en lugar del 49% legacy),
   y agregar margin-bottom para gap vertical en mobile.

   En desktop: 48% + 48% = 96%, queda 4% de gap visible entre cards
   floating side by side. En mobile: full width + margin-bottom 24px.
   ==================================================================== */
@media (min-width: 1024px) {
	.naples-redesign .naples-feature-card.feature-coolsculpting,
	.naples-redesign .naples-feature-card.feature-skinmedica,
	.naples-redesign .naples-feature-card.feature-vaginal-rejuv,
	.naples-redesign .naples-feature-card.feature-vectra,
	.naples-redesign .naples-feature-card.feature-emsculpt,
	.naples-redesign .naples-feature-card.feature-exparel,
	.naples-redesign .naples-feature-card.feature-specials-events {
		width: 48% !important;
	}
}

/* Vertical gap siempre presente (visible en mobile y entre cards stacked) */
.naples-redesign .naples-feature-card {
	margin-bottom: var(--naples-space-3);
}


/* ====================================================================
   PHASE 12.1.x v3 — Gap horizontal entre 2 cards floating
   --------------------------------------------------------------------
   El legacy hace float:right en ambas, así ambas se van a la derecha
   en orden inverso (segunda visualmente a la izquierda, primera a la
   derecha). Sin margin entre ellas se tocan.

   Solución: margin-right en cada feature card reduce el width visible
   y crea gap. Y un selector más específico para vencer el margin del
   legacy que está en :root y otros archivos.
   ==================================================================== */
@media (min-width: 1024px) {
	/* Ambas cards floating: reducir width un poco + margin-left para gap */
	.naples-redesign .naples-feature-card.feature-coolsculpting,
	.naples-redesign .naples-feature-card.feature-skinmedica,
	.naples-redesign .naples-feature-card.feature-vaginal-rejuv,
	.naples-redesign .naples-feature-card.feature-vectra,
	.naples-redesign .naples-feature-card.feature-emsculpt,
	.naples-redesign .naples-feature-card.feature-exparel,
	.naples-redesign .naples-feature-card.feature-specials-events {
		width: 47% !important;
		margin-left: 3% !important;
	}

	/* Skinmedica wide hero NO debe tener margin-left */
	.naples-redesign .naples-feature-card.feature-skinmedica.is-wide-hero {
		width: 100% !important;
		margin-left: 0 !important;
	}
}