/**
 * Home Page — overrides
 *
 * Styles that apply only to the Home page template (page-templates/template-home.php).
 * Enqueued conditionally by ba_enqueue_home_assets() in functions.php.
 */

/* Hero image: align crop to the left so subjects in the left half stay visible
   (default object-position is center, which was cropping them off on desktop). */
.ba-section--hero .ba-hero__media img {
	object-position: 26% center;
}

/* Treatment card image overlay (ba-grid-3 only — does not affect zone/other cards) */
.ba-grid-3 .ba-tcard__media { position: relative; isolation: isolate; }
.ba-grid-3 .ba-tcard__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, #F1E9E1 94%);
	pointer-events: none;
	z-index: 1;
}


/* .ba-banner--with-image primitive promoted to global.css §21 (shared
 * between Home, Concerns, Treatments Hub, Pricing). */

/* ---------------------------------------------------------------------------
 * Find us — fixed column height per Figma (564px) on desktop.
 *
 * global.css uses min-height: 540 + align-items: stretch, which lets the
 * body column grow with content and pulls the image to match (~876px).
 * On Home we enforce 564px on both columns.
 * -------------------------------------------------------------------------*/
@media ( min-width: 900px ) {
	.ba-find {
		align-items: start;
	}
	.ba-find__media,
	.ba-find__body {
		height: 564px;
		min-height: 564px;
	}
}

/* ---------------------------------------------------------------------------
 * Meet Dr Fatima — desktop-only line break after "prescription".
 * Template injects <br class="ba-meet__lead-br"> via str_replace; we hide it
 * on tablet/mobile so the natural wrap takes over there.
 * -------------------------------------------------------------------------*/
@media ( max-width: 1100px ) {
	.ba-meet__lead-br { display: none; }
}

/* ---------------------------------------------------------------------------
 * Spotlight (Medical-grade skincare) — soften the bold accent words
 * ("hyperpigmentation, melasma, rosacea, signs of ageing") from bold to medium.
 * -------------------------------------------------------------------------*/
.ba-spotlight__body strong {
	font-weight: 500;
}