/**
 * How Acupuncture Can Help (hba/conditions-detail).
 *
 * Loaded only on pages containing .hba-cond-hero / .hba-cond-list.
 */

/* ==========================================================================
   Intro
   ========================================================================== */
.hba-cond-hero {
	padding: clamp(2.5rem, 4.3vw, 82px) var(--hba-gutter, clamp(1.25rem, 3vw, 58px)) clamp(2.5rem, 3.6vw, 69px);
}
.hba-cond-hero__cols {
	gap: clamp(1.75rem, 3.4vw, 65px);
	align-items: center;
	margin: 0;
}
.hba-cond-hero__title {
	margin: 0.3rem 0 0;
}
.hba-cond-hero__text {
	max-width: 56ch;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.78;
}
.hba-cond-hero__media {
	margin: 0;
}
.hba-cond-hero__image {
	margin: 0;
}
.hba-cond-hero__image img {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border-radius: 14px;
}
.hba-cond-menu {
	margin-top: clamp(2.5rem, 4.2vw, 80px);
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 20px;
}

/* Six icon cards, matching the Treatments quick menu. */
.hba-cond-menu {
	margin-top: clamp(1.75rem, 2.6vw, 50px);
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 20px;
}
.hba-cond-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	min-height: 180px;
	padding: 28px 10px 22px;
	border: 1px solid #ecdfdd;
	border-radius: 8px;
	/* White, not the theme's #f9f2f2: these cards sit on the cream band and
	   need to lift off it. */
	background: #fff;
	text-align: center;
	transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease;
}
.hba-cond-card > * {
	margin: 0;
}
.hba-cond-card__icon img {
	display: block;
	width: auto;
	height: 62px;
	max-width: 80px;
	border-radius: 0;
	object-fit: contain;
}
.hba-cond-card .hba-cond-card__label {
	margin-top: 14px;
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: clamp(19px, calc(4.8px + 1.0vw), 24px);
	font-weight: 500;
	line-height: 1.12;
	color: #171717;
}
.hba-cond-card__label a {
	color: inherit;
	text-decoration: none;
}
/* whole card clickable */
.hba-cond-card__label a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.hba-cond-card:hover,
.hba-cond-card:focus-within {
	border-color: var(--wp--preset--color--primary-soft);
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(102, 0, 51, 0.12);
}
.hba-cond-card:focus-within {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
.hba-cond-card__label a:focus-visible {
	outline: none;
}

/* ==========================================================================
   One section per area of care
   ========================================================================== */
.hba-cond-list {
	padding: clamp(2.5rem, 4.3vw, 82px) var(--hba-gutter, clamp(1.25rem, 3vw, 58px));
}
.hba-cond {
	scroll-margin-top: clamp(5rem, 8vw, 120px);
}
/* The section spans the site's usual container; the reading measure is held by
   the text itself, so headings line up with every other section. */
.hba-cond__lead,
.hba-cond p,
.hba-cond__points {
	max-width: 68ch;
}
.hba-cond + .hba-cond {
	margin-top: clamp(2.5rem, 4vw, 76px);
	padding-top: clamp(2.5rem, 4vw, 76px);
	border-top: 1px solid rgba(35, 35, 35, 0.1);
}
.hba-cond__icon {
	margin: 0 0 0.9rem;
}
.hba-cond__title {
	margin: 0;
}
/* A notch smaller than the default body size: these are long reading sections. */
.hba-cond__lead {
	max-width: 60ch;
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
	color: var(--wp--preset--color--primary, #660033);
}
.hba-cond p {
	max-width: 70ch;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.78;
}
.hba-cond__points li {
	font-size: var(--wp--preset--font-size--small);
}
.hba-cond__faqs {
	margin-top: clamp(1.25rem, 1.9vw, 36px);
}
.hba-cond-faq.wp-block-details {
	max-width: none;
}
.hba-cond__sub {
	margin-bottom: 0.4rem !important;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(35, 35, 35, 0.88);
}
.hba-cond__points {
	margin: 0 0 clamp(1.25rem, 1.9vw, 36px);
	padding: 0;
	list-style: none;
	/* A grid rather than CSS columns: column fragmentation was dropping the
	   marker off the first item in the second column. */
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px clamp(1.5rem, 2.6vw, 50px);
}
.hba-cond__points li {
	position: relative;
	padding-left: 30px;
	margin: 0;
	line-height: 1.5;
}
/* A tick on a soft round badge, rather than a dash. */
.hba-cond__points li::before {
	content: "";
	position: absolute;
	top: 0.08em;
	left: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(102, 0, 51, 0.09) url("../icons/cond-check.svg") center / 13px 13px no-repeat;
}
.hba-cond__buttons {
	gap: 10px;
}

/* ==========================================================================
   Further reading
   ========================================================================== */
/* Scoped so it beats the block-layout gap, which was leaving the card sitting
   right under the last section's button. */
.hba-cond-list .hba-cond-reading {
	margin-top: clamp(3rem, 5.2vw, 100px);
	padding: clamp(1.75rem, 2.9vw, 55px);
	border-radius: 14px;
}
.hba-cond-reading__title {
	margin-top: 0;
}
.hba-cond-reading__links {
	padding: 0;
	list-style: none;
}
.hba-cond-reading__links li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 10px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}
.hba-cond-reading > p {
	font-size: var(--wp--preset--font-size--small);
}
.hba-cond-reading__links li::before {
	content: "";
	position: absolute;
	top: 0.1em;
	left: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(102, 0, 51, 0.09) url("../icons/cond-check.svg") center / 13px 13px no-repeat;
}
.hba-cond-reading__note {
	margin-bottom: 0;
	font-size: 0.8125rem;
	line-height: 1.65;
	color: rgba(35, 35, 35, 0.66);
}

@media (max-width: 1099px) {
	.hba-cond-hero .hba-cond-menu {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.hba-cond__points {
		grid-template-columns: minmax(0, 1fr);
	}
	.hba-cond-hero .hba-cond-menu {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.hba-cond-card {
		min-height: 150px;
		padding: 20px 8px 16px;
	}
	.hba-cond-card__icon img {
		height: 48px;
	}
}

/* ==========================================================================
   Closing sections: personal approach, further reading, call to action
   ========================================================================== */
.hba-cond-personal {
	padding: clamp(2.5rem, 4vw, 76px) var(--hba-gutter, clamp(1.25rem, 3vw, 58px));
}
.hba-cond-personal__title {
	margin-top: 0;
}
.hba-cond-personal p {
	max-width: 72ch;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.78;
}
.hba-cond-reading-section {
	padding: clamp(2.5rem, 4vw, 76px) var(--hba-gutter, clamp(1.25rem, 3vw, 58px));
}
@media (max-width: 1099px) {
	.hba-cond-hero__cols {
		flex-wrap: wrap !important;
	}
	.hba-cond-hero__cols > .wp-block-column {
		flex-basis: 100% !important;
	}
	.hba-cond-hero__image img {
		aspect-ratio: 16 / 9;
	}
}

/* ==========================================================================
   Question panels on this page
   The shared FAQ styling is built for two narrow columns; here the panels run
   the full width of the page, and the questions keep the sentence case they
   were written in.
   ========================================================================== */
.hba-cond-list .hba-cond-faq > summary,
.hba-cond-faq.hba-faq > summary {
	text-transform: none;
}
.hba-cond-list .hba-cond-faq > summary + p,
.hba-cond-list .hba-cond-faq p {
	max-width: none;
}
.hba-cond-faq p + p {
	margin-top: 0.9em;
}
.hba-cond-faq[open] > summary {
	margin-bottom: 0.2em;
}

/* "A personal approach" reads as a two-column section: copy left, photo right. */
.hba-cond-personal__cols {
	gap: clamp(1.75rem, 3.4vw, 65px);
	align-items: center;
	margin: 0;
}
.hba-cond-personal__title {
	margin-top: 0;
}
.hba-cond-personal__media,
.hba-cond-personal__image {
	margin: 0;
}
.hba-cond-personal__image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center;
	border-radius: 14px;
}
/* The portrait was taller than the copy beside it. Taking the figure out of
   the flow lets the text set the height, and the photograph fills whatever
   that turns out to be. */
@media (min-width: 1100px) {
	.hba-cond-personal__cols {
		align-items: stretch;
	}
	.hba-cond-personal__cols > .wp-block-column {
		align-self: stretch;
	}
	.hba-cond-personal__media {
		position: relative;
		min-height: 420px;
	}
	.hba-cond-personal__image {
		position: absolute;
		inset: 0;
	}
	.hba-cond-personal__image img {
		height: 100%;
		aspect-ratio: auto;
	}
}
@media (max-width: 1099px) {
	.hba-cond-personal__cols {
		flex-wrap: wrap !important;
	}
	.hba-cond-personal__cols > .wp-block-column {
		flex-basis: 100% !important;
	}
	.hba-cond-personal__image img {
		aspect-ratio: 16 / 9;
	}
}