/**
 * Treatments Hub — overrides
 *
 * Styles that apply only to the Treatments Hub template
 * (page-templates/template-treatments-hub.php).
 * Enqueued conditionally by ba_enqueue_treatments_hub_assets() in functions.php.
 */

/* ---------------------------------------------------------------------------
 * 1. HERO
 * Grid / typography / media come from the unified hero primitive in
 * global.css §5. Only Treatments-Hub-specific extras live here.
 * -------------------------------------------------------------------------*/
.ba-thub-hero__cta { margin-bottom: var(--ba-space-sub-cta); }
.ba-thub-hero__trust { font-size: 13px; color: var(--ba-text-muted); margin: 0; }

/* ---------------------------------------------------------------------------
 * 2. CATEGORIES
 * Plain section (no bg). Header = 2-col (title left, intro+link right).
 * Grid = 3 columns; 3+3 square cards; wide strip spans all cols (row 3).
 * -------------------------------------------------------------------------*/
.ba-thub-cats { margin-top: var(--ba-space-11); }
.ba-thub-cats__head {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 40px;
	align-items: start;
	margin-bottom: var(--ba-gap-2xl);
}
.ba-thub-cats__head-left { display: flex; flex-direction: column; }
.ba-thub-cats__title {
	font-family: var(--ba-font-heading);
	font-weight: 400;
	font-size: 56px;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--ba-text-primary);
	margin: 0;
}
.ba-thub-cats__head-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	padding-top: 6px;
}
.ba-thub-cats__intro {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.55;
	color: var(--ba-text-muted);
	margin: 0 0 30px;
	max-width: 420px;
}
/* .ba-thub-cats__link removed — template now uses shared .ba-link.ba-link--underline
 * primitive from global.css §6. */

.ba-thub-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.ba-thub-card {
	position: relative;
	background: var(--ba-card-bg-light);
	border-radius: var(--ba-radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 26px 60px rgba(62, 42, 32, 0.07), inset 0 0 0 1px rgba(62, 42, 32, 0.055);
}
/* Inner offset border (matches .ba-tcard pattern) */
.ba-thub-card::after {
	content: '';
	position: absolute;
	inset: var(--ba-inset-ring);
	border: 1px solid rgba(69, 49, 36, 0.05);
	border-radius: calc(var(--ba-radius-card) - var(--ba-inset-ring));
	pointer-events: none;
	z-index: 0;
}
.ba-thub-card__media {
	position: relative;
	isolation: isolate;
	height: 300px;
	background: linear-gradient(180deg, #EDE1D5, #D8CBBE);
	overflow: hidden;
}
.ba-thub-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ba-thub-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, #F1E9E1 94%);
	pointer-events: none;
	z-index: 1;
}

/* "MOST POPULAR" pill — sits centred on the seam between image and body */
.ba-thub-card__pill {
	position: absolute;
	top: 300px;
	right: var(--ba-space-7);
	transform: translateY(-50%);
	z-index: 2;
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #FBF7F2;
	background: rgba(56, 39, 30, 0.9);
	padding: 8.5px 12px;
	border-radius: 999px;
}

.ba-thub-card__body {
	position: relative;
	z-index: 1;
	padding: var(--ba-space-7);
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.ba-thub-card__label { margin-bottom: 14px; }
.ba-thub-card__title {
	font-family: var(--ba-font-heading);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.15;
	color: var(--ba-text-primary);
	margin: 0 0 var(--ba-space-7);
}
.ba-thub-card__short {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.55;
	color: #3B322D;
	margin: 0 0 var(--ba-space-9);
}
/* When an extra note follows, keep the same rhythm between short and extra. */
.ba-thub-card__short:has(+ .ba-thub-card__extra) {
	margin-bottom: var(--ba-space-9);
}
.ba-thub-card__extra {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.55;
	color: #A38974;
	margin: 0 0 var(--ba-space-7);
}

.ba-thub-card__tags {
	list-style: none;
	margin: 0 0 var(--ba-space-7);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ba-space-2);
}
.ba-thub-card__tag {
	display: inline-flex;
	align-items: center;
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 1;
	color: var(--ba-text-primary);
	background: rgba(237, 225, 213, 0.56);
	border-radius: 999px;
	padding: 10px 12px;
}

.ba-thub-card__link {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 14px;
	color: var(--ba-text-primary);
	padding-bottom: 5px;
	border-bottom: 1px solid rgba(56, 39, 30, 0.14);
}
.ba-thub-card__link:hover { border-bottom-color: rgba(56, 39, 30, 0.32); }

/* Wide card — spans full 3-col row, horizontal layout 608/672 */
.ba-thub-card--wide {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: stretch;
	height: 360px;
}
.ba-thub-card--wide .ba-thub-card__media {
	flex: 0 0 608px;
	width: 608px;
	height: 100%;
}
.ba-thub-card--wide .ba-thub-card__body {
	flex: 1 1 auto;
	justify-content: center;
	padding: 40px 48px;
}
.ba-thub-card--wide .ba-thub-card__short { margin-bottom: var(--ba-space-12); }
.ba-thub-card__cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: auto;
}

/* ---------------------------------------------------------------------------
 * 3. START WITH YOUR CONCERN
 * Section bg #FCF8F3, padding 40, radius 28 (--ba-radius-md).
 * 2-col grid 618/560, gap 24, content vertically centred.
 * -------------------------------------------------------------------------*/
.ba-thub-bridge {
	background: #FCF8F3;
	padding: var(--ba-space-8);
	border-radius: var(--ba-radius-card);
	margin-top: 112px;
}
.ba-thub-bridge__grid {
	display: grid;
	grid-template-columns: 618fr 560fr;
	gap: var(--ba-space-6);
	align-items: center;
}
.ba-thub-bridge__body {
	display: flex;
	flex-direction: column;
	padding: 12px 8px;
}
.ba-thub-bridge__title {
	font-family: var(--ba-font-heading);
	font-weight: 400;
	font-size: 48px;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--ba-text-primary);
	margin: 0 0 var(--ba-space-8);
}
.ba-thub-bridge__short {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.55;
	color: var(--ba-text-secondary);
	margin: 0 0 var(--ba-space-8);
	max-width: 560px;
}
.ba-thub-bridge__chips {
	list-style: none;
	margin: 0 0 var(--ba-space-6);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.ba-thub-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ba-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.2;
	color: var(--ba-text-primary);
	background: rgba(237, 225, 213, 0.7);
	border-radius: var(--ba-radius-card-xs);
	padding: 17px 15px;
	text-align: center;
	white-space: nowrap;
	transition: background 150ms ease;
}
.ba-thub-chip:hover { background: rgba(237, 225, 213, 1); }
.ba-thub-bridge__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 0;
}
.ba-thub-bridge__media {
	position: relative;
	border-radius: var(--ba-radius-image);
	background: linear-gradient(180deg, #EDE1D5, #D8CBBE);
	height: 560px;
	overflow: hidden;
}
.ba-thub-bridge__media img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* Bottom CTA banner — uses the shared .ba-banner + .ba-banner--with-image
 * primitive from global.css §21. No Treatments-Hub-specific overrides. */

/* ---------------------------------------------------------------------------
 * 5. RESPONSIVE — tablet (<=1100) and mobile (<=720)
 * -------------------------------------------------------------------------*/
@media ( max-width: 1100px ) {
	/* Hero responsive lives in global.css §5. */

	.ba-thub-cats { margin-top: 48px; }
	.ba-thub-cats__head { grid-template-columns: 1fr; gap: 20px; }
	.ba-thub-cats__head-right { align-items: flex-start; text-align: left; }
	.ba-thub-cats__title { font-size: 44px; }

	.ba-thub-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
	.ba-thub-card__media { height: 260px; }
	.ba-thub-card__body { padding: 48px 40px; }
	.ba-thub-card__pill { top: 260px; right: 22px; }
	.ba-thub-card__title { font-size: 26px; margin-bottom: 22px; }
	.ba-thub-card__short { margin-bottom: 28px; }
	.ba-thub-card__extra { margin-top: 0; margin-bottom: 20px; }
	.ba-thub-card__tags { margin-bottom: 24px; }

	.ba-thub-card--wide { flex-direction: column; }
	.ba-thub-card--wide .ba-thub-card__media {
		flex: 0 0 auto;
		width: 100%;
		min-height: 280px;
	}
	.ba-thub-card--wide .ba-thub-card__body { padding: 48px 40px; }
	.ba-thub-card--wide .ba-thub-card__short { margin-bottom: 28px; }

	.ba-thub-bridge { padding: var(--ba-space-7); border-radius: var(--ba-radius-card); margin-top: var(--ba-space-12); }
	.ba-thub-bridge__grid { grid-template-columns: 1fr; gap: 28px; }
	.ba-thub-bridge__media { height: 420px; }
	.ba-thub-bridge__title { font-size: 40px; margin-bottom: 28px; }
	.ba-thub-bridge__short { margin-bottom: 28px; }
	.ba-thub-bridge__chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ba-thub-chip { padding: 14px 20px; font-size: 13px; }
}

@media ( max-width: 720px ) {
	/* Hero responsive lives in global.css §5. */

	.ba-thub-cats__title { font-size: 34px; }

	.ba-thub-grid { grid-template-columns: 1fr; }
	.ba-thub-card__media { height: 240px; }
	.ba-thub-card__pill { top: 240px; right: 16px; }
	.ba-thub-card__body { padding: 40px 32px; }
	.ba-thub-card__title { font-size: 22px; }
	.ba-thub-card--wide .ba-thub-card__media { min-height: 220px; }
	.ba-thub-card--wide .ba-thub-card__body { padding: 40px 32px; }

	.ba-thub-bridge { padding: var(--ba-space-5); border-radius: var(--ba-radius-card); margin-top: var(--ba-space-9); }
	.ba-thub-bridge__title { font-size: 32px; }
	.ba-thub-bridge__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.ba-thub-bridge__media { height: 300px; }
}