/**
 * Concerns ("Best for") — page-specific styles.
 *
 * Loaded only on the Concerns template
 * (page-templates/template-concerns.php) via ba_enqueue_concerns_assets().
 */

/* ---------------------------------------------------------------------------
 * 1. HERO
 * .ba-section--c-hero panel (bg/padding/radius) is declared in global.css
 * canonical hero block. Only the inner grid + typography live here.
 * -------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------
 * 2. CONCERNS (sidebar + content)
 * -------------------------------------------------------------------------*/
.ba-concerns {
	margin-top: 72px;
	display: grid;
	grid-template-columns: 320px minmax(0, 912px);
	gap: 48px;
	align-items: start;
}

/* Sidebar primitive (.ba-concerns__sidebar / cats / cat / cat-chev) lives in
 * global.css sec 21b — shared between Concerns and Pricing. */

/* ---- Content ---- */
.ba-concerns__content {
	display: flex;
	flex-direction: column;
}
.ba-concerns__panel[hidden] { display: none; }
.ba-concerns__panel-title {
	font-family: var(--ba-font-body);
	font-weight: 500;
	font-size: 28px;
	line-height: 1.2;
	color: var(--ba-text-primary);
	margin: 0 0 8px;
}
.ba-concerns__divider {
	border: 0;
	border-top: 1px solid rgba(56, 39, 30, 0.08);
	margin: 0 0 24px;
	width: 100%;
}
.ba-concerns__items {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ba-concerns__empty {
	font-family: var(--ba-font-body);
	font-size: 15px;
	color: var(--ba-text-muted);
	margin: 0;
	padding: 24px 0;
}

/* ---- Accordion item ----
 * Base .ba-c-item primitive lives in global.css §20b.
 * Concerns adds has-image layout + rec pills + link + media. */
.ba-c-item.has-image .ba-c-item__body {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 32px;
}
.ba-c-item.has-image .ba-c-item__content {
	flex: 0 1 650px;
	max-width: 650px;
}
.ba-c-item__text {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.55;
	color: #6F6258;
	margin: 0 0 20px;
}
.ba-c-item__rec {
	background: rgba(237, 225, 213, 0.7);
	border-radius: var(--ba-radius-card-xs);
	padding: 16px 20px;
}
.ba-c-item__rec-title {
	font-family: var(--ba-font-body);
	font-weight: 600;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.65px;
	text-transform: uppercase;
	color: var(--ba-text-primary);
	margin: 0 0 12px;
}
.ba-c-item__rec-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ba-c-item__rec-chip {
	display: inline-flex;
	align-items: center;
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 13px;
	line-height: 1;
	color: var(--ba-text-primary);
	background: #F6F0E8;
	border: 1px solid rgba(56, 39, 30, 0.06);
	border-radius: 999px;
	padding: 7px 12px;
}
.ba-c-item__link {
	margin-top: 24px;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ba-font-body);
	font-weight: 500;
	font-size: 14px;
	color: var(--ba-text-primary);
	border-bottom: 1px solid rgba(56, 39, 30, 0.18);
}
.ba-c-item__link:hover { border-bottom-color: rgba(56, 39, 30, 0.42); }

.ba-c-item__media {
	flex: 0 0 180px;
	width: 180px;
	height: 225px;
	border-radius: var(--ba-radius-card-xs);
	overflow: hidden;
	background: linear-gradient(180deg, #EDE1D5, #D8CBBE);
}
.ba-c-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Footer note ---- */
.ba-concerns__note {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 24px 0 0;
	padding: 4px 0;
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ba-text-muted);
}
.ba-concerns__note-icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: #6F6258;
}

/* ---------------------------------------------------------------------------
 * 4. BOTTOM CTA BANNER — shared primitive in global.css §21 (.ba-banner +
 * .ba-banner--with-image). Only the Concerns-specific title wrap stays here.
 * -------------------------------------------------------------------------*/
.ba-concerns-banner .ba-banner__title { max-width: 17ch; }
.ba-concerns-banner .ba-banner__text  { max-width: 41ch; }

/* ---------------------------------------------------------------------------
 * RESPONSIVE
 * -------------------------------------------------------------------------*/
@media ( max-width: 1100px ) {
	.ba-concerns {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	/* side-nav responsive lives in global.css */

	.ba-c-item.has-image .ba-c-item__body { flex-direction: column; gap: 20px; }
	.ba-c-item.has-image .ba-c-item__content { flex: 1 1 100%; max-width: 100%; }
	.ba-c-item__media { width: 100%; height: 220px; flex-basis: auto; }
}

@media ( max-width: 720px ) {
	.ba-c-item__summary { padding: 18px 20px; font-size: 16px; }
	.ba-c-item__body { padding: 0 20px 22px; }
	.ba-concerns__panel-title { font-size: 24px; }
}

/* ---- Hero image — anchor focal point to bottom-right ---- */
.ba-c-hero__media img { object-position: 100% 100%; }

/* ---- Results caption — align to right (Concerns-only override) ---- */
.ba-results__sub { text-align: right; }