/* ---------------------------------------------------------------------------
 * single-treatment.css — page-scoped overrides for the Treatment CPT single
 * template. Loaded only on `is_singular( 'treatment' )` via
 * `ba_enqueue_single_treatment_assets()` in functions.php.
 * ---------------------------------------------------------------------------*/

/* Bottom CTA banner ("Ready to take the next step?") — force a wrap point on
 * the title and the supporting copy. Values are tuned for the current
 * editorial copy; if a future edit changes the wording the line break point
 * will shift accordingly. Scoped via the unique #tbanner-title heading id. */
#tbanner-title { max-width: 16ch; }
#tbanner-title ~ .ba-banner__text { max-width: 50ch; }

/* About media video — post-specific object-position overrides */
@media (min-width: 1101px) {
	.postid-19  .ba-t-about__media video { object-position: 70% 100%; }
	.postid-119 .ba-t-about__media video { object-position: 65% center; }
}

/* About body layout:
 * .ba-t-about__main takes all available space and centres the text content.
 * .ba-about-spot__products sits below with a fixed gap, visually anchored to
 * the bottom. When there are no products the main block fills the full height
 * and centres on its own.
 * Override global justify-content: center — centering is delegated to __main. */
.ba-t-about__body    { justify-content: flex-start; }
.ba-t-about__main    { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.ba-about-spot__products { margin-top: 140px; }

/* Details logos strip — shown below ba-t-helps inside ba-t-card--main */
.ba-t-details-logos {
	margin-top: 32px;
	background: rgba(246, 240, 232, 0.8);
	border-radius: var(--ba-radius-sm);
	padding: var(--ba-space-4);
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--ba-space-6);
	max-width: 100%;
	width: auto;
	align-self: flex-start;
}
.ba-t-details-logo {
	margin: 0;
	border-radius: var(--ba-radius-sm);
	overflow: hidden;
	background: transparent;
	height: 70px;
	flex: 0 0 auto;
}
.ba-t-details-logo img {
	display: block;
	width: auto;
	height: 100%;
	object-fit: contain;
}

/* Hero video — fills the media container exactly like the img does */
.ba-t-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Treatment Options section (post 27 — injectables-men only, admin preview).
 * Replaces "At a glance" on this post; all other posts keep .ba-section--t-glance.
 * --------------------------------------------------------------------------- */

.ba-section--t-options {
	background: #FCF8F3;
	border-radius: var(--ba-radius-lg);
	padding: var(--ba-section-pad);
}

.ba-t-options__head {
	margin-bottom: 36px;
}

.ba-t-options__title {
	font-family: var(--ba-font-heading);
	font-weight: 400;
	font-size: 40px;
	line-height: 1.15;
	color: var(--ba-text-primary);
	margin: 0;
}

.ba-t-options__sub {
	margin: 12px 0 0;
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ba-text-secondary);
}

.ba-t-options__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

/* Card */
.ba-t-optcard {
	background: rgba(246, 240, 232, 0.85);
	border-radius: 20px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border: 1px solid rgba(69, 49, 36, 0);
	box-shadow: 0 4px 16px rgba(69, 49, 36, 0);
	transition: transform 0.5s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

a.ba-t-optcard:hover {
	transform: translateY(-3px);
	background-color: #F6F0E8;
	border-color: rgba(69, 49, 36, 0.07);
	box-shadow: 0px 16px 40px rgba(69, 49, 36, 0.07);
}

/*
 * Reveal-system fix: animations.css sets transition-property to only
 * opacity/transform/filter on [data-anim-ready] [data-reveal] (specificity 0,2,0).
 * This selector (also 0,2,0) loads later → wins the cascade, extending the list
 * to include background-color and box-shadow while preserving reveal timing.
 */
[data-anim-ready] .ba-t-optcard {
	transition-property:        opacity, transform, filter, background-color, box-shadow, border-color;
	transition-duration:        1300ms, 1300ms, 1300ms, 150ms, 150ms, 150ms;
	transition-timing-function: cubic-bezier(.16, 1, .3, 1),
	                            cubic-bezier(.16, 1, .3, 1),
	                            cubic-bezier(.16, 1, .3, 1),
	                            ease-in-out,
	                            ease-in-out,
	                            ease-in-out;
	transition-delay:           calc(var(--ba-anim-base, 240ms) + var(--ba-anim-delay, 0ms)),
	                            calc(var(--ba-anim-base, 240ms) + var(--ba-anim-delay, 0ms)),
	                            calc(var(--ba-anim-base, 240ms) + var(--ba-anim-delay, 0ms)),
	                            0s, 0s, 0s;
}

/* Top row: icon (left) + arrow button (right) */
.ba-t-optcard__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

/* 48×48 icon container */
.ba-t-optcard__icon-wrap {
	width: 48px;
	height: 48px;
	background: rgba(239, 230, 221, 0.8);
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #38271E;
}

/* 32×32 circle arrow */
.ba-t-optcard__arrow {
	width: 32px;
	height: 32px;
	background: rgba(252, 248, 243, 0.88);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #38271E;
}

/* Card title — 51px below the icon row */
.ba-t-optcard__title {
	margin: 51px 0 0;
	font-family: var(--ba-font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.35;
	color: #38271E;
}

/* Card subtitle — 8px below title */
.ba-t-optcard__sub {
	margin: 8px 0 0;
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.45;
	color: #6F6258;
}

/* Responsive */
@media (max-width: 1100px) {
	.ba-t-options__title      { font-size: 32px; }
	.ba-t-options__grid       { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.ba-section--t-options    { padding: 24px; border-radius: 20px; }
	.ba-t-options__title      { font-size: 28px; }
	.ba-t-options__grid       { grid-template-columns: 1fr; }
}