/**
 * HBA – About page section styles (patterns hba/about-*, hba/booking-cta-blush).
 * Measurements come from the 1920px design (content area 1500px); values
 * scale fluidly below that. Loaded only on pages that use these patterns.
 */

/* ==========================================================================
   About hero (hba/about-hero)
   ========================================================================== */
.hba-about-hero {
	padding-top: clamp(2rem, 2.45vw, 47px);
	padding-bottom: clamp(1.5rem, 1.4vw, 27px);
}
.hba-about-hero .hba-about-hero__cols {
	display: grid;
	grid-template-columns: 722fr 740fr;
	gap: clamp(1.5rem, 2vw, 38px);
	align-items: center;
	margin: 0;
}
.hba-about-hero__cols > .wp-block-column {
	min-width: 0;
	align-self: start;
}
.hba-about-hero__body {
	padding-top: clamp(0.5rem, 1vw, 19px);
}
.hba-about-hero__body > * {
	margin-top: 0;
	margin-bottom: 0;
}
.hba-about-hero .hba-label {
	margin-bottom: 0;
	line-height: 1;
}
.hba-about-hero .hba-about-hero__title {
	font-size: var(--wp--preset--font-size--display);
	line-height: 1;
}
.hba-about-hero__quals {
	margin-top: clamp(0.75rem, 1.46vw, 28px) !important;
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 600;
	line-height: 1.1;
	color: var(--wp--preset--color--contrast);
}
.hba-about-hero .hba-about-hero__quote {
	margin: 6px 0 0 !important;
	padding: 0;
	border: 0;
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: var(--wp--preset--font-size--subheading);
	font-weight: 500;
	line-height: 1.25;
	color: var(--wp--preset--color--primary);
}
.hba-about-hero__quote p {
	margin: 0;
}
.hba-about-hero .wp-block-separator.is-style-hba-accent {
	width: 122px;
	max-width: 122px;
	margin-top: clamp(0.6rem, 0.63vw, 12px) !important;
	margin-bottom: clamp(0.6rem, 0.73vw, 14px) !important;
}
.hba-about-hero__text {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.72;
}
.hba-about-hero__buttons {
	margin-top: clamp(1rem, 1vw, 19px) !important;
}

/* Credentials list with round icons (icon chosen by class is-icon-*) */
.hba-about-hero .hba-creds {
	margin-top: clamp(0.4rem, 0.32vw, 6px) !important;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
}
.hba-creds li {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	margin-left: -2px;
}
.hba-creds li + li {
	margin-top: 5px;
}
.hba-creds li::before {
	content: "";
	flex: 0 0 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff url("../icons/cred-verified.svg") center / 32px 32px no-repeat;
	box-shadow: 0 1px 3px rgba(35, 35, 35, 0.06);
}
.hba-creds li.is-icon-graduate::before { background-image: url("../icons/cred-graduate.svg"); }
.hba-creds li.is-icon-member::before { background-image: url("../icons/cred-member.svg"); }
.hba-creds li.is-icon-accredited::before { background-image: url("../icons/cred-accredited.svg"); }
.hba-creds li.is-icon-faculty::before { background-image: url("../icons/cred-faculty.svg"); }
.hba-creds li.is-icon-volunteer::before { background-image: url("../icons/cred-volunteer.svg"); }
.hba-creds li.is-icon-verified::before { background-image: url("../icons/cred-verified.svg"); }

.hba-about-hero__image {
	margin: 0;
}
.hba-about-hero__image img {
	display: block;
	width: 100%;
	aspect-ratio: 740 / 865;
	object-fit: cover;
	object-position: center top;
}

/* ==========================================================================
   Statement quote + image (hba/about-statement)
   ========================================================================== */
.hba-statement-section {
	padding-top: clamp(3rem, 4.65vw, 89px);
}
.hba-statement-section .hba-statement-cols {
	display: grid;
	grid-template-columns: 930fr 507fr;
	gap: clamp(1.5rem, 3.3vw, 63px);
	align-items: start;
	margin: 0;
}
.hba-statement-cols > .wp-block-column {
	min-width: 0;
	align-self: start;
}
.hba-statement-cols > .wp-block-column > * {
	margin-top: 0;
	margin-bottom: 0;
}
.hba-statement-section .hba-label {
	margin-top: clamp(6px, 0.83vw, 16px);
	line-height: 1;
}
.hba-statement-section .hba-statement {
	margin: clamp(1rem, 1.8vw, 35px) 0 0 -6px !important;
	padding: 0 0 0 32px;
	border: 0;
	border-left: 8px solid var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: var(--wp--preset--font-size--statement);
	font-weight: 500;
	line-height: 1.25;
	color: var(--wp--preset--color--primary);
}
.hba-statement p {
	margin: 0;
}
.hba-statement__text {
	margin-top: clamp(1.25rem, 1.9vw, 37px) !important;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.68;
}
.hba-statement__image {
	margin: 0;
}
.hba-statement__image img {
	display: block;
	width: 100%;
	aspect-ratio: 507 / 695;
	object-fit: cover;
}

/* ==========================================================================
   My Story (hba/about-story)
   ========================================================================== */
.hba-story {
	padding-top: clamp(4rem, 8.6vw, 165px);
	padding-bottom: 21px;
}
.hba-story__intro > * {
	margin-top: 0;
	margin-bottom: 0;
}
.hba-story__intro .wp-block-separator.is-style-hba-accent {
	margin-top: clamp(1rem, 1.3vw, 25px) !important;
}
.hba-story .hba-story__grid {
	display: grid;
	grid-template-columns: 742fr 740fr;
	gap: 19px;
	align-items: stretch;
	margin: clamp(1.25rem, 1.46vw, 28px) 0 0;
}
.hba-story__grid > .wp-block-column {
	min-width: 0;
}
.hba-story .hba-story__cards {
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.hba-story__cards > * {
	margin: 0 !important;
}

/* Story card: sprig + numbered circle + vertical line with dot + text */
.hba-story .hba-story-card {
	position: relative;
	flex: 1 1 auto;
	padding: 15px 14px 19px 148px;
	border: 1px solid #d5d5d5;
	border-radius: 10px;
	background: #fff;
}
.hba-story-card::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 26px;
	width: 52px;
	height: 74px;
	background: url("../images/about-sprig.webp") center / contain no-repeat;
	pointer-events: none;
}
.hba-story .hba-story-card__num {
	position: absolute;
	left: 25px;
	top: 63px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin: 0;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 50%;
	background: #fff;
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: clamp(32px, calc(8.1px + 1.688vw), 40.5px);
	font-weight: 600;
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}
.hba-story-card__body::before {
	content: "";
	position: absolute;
	left: 116px;
	top: 24px;
	bottom: 24px;
	width: 2px;
	background: var(--wp--preset--color--primary);
}
.hba-story-card__body::after {
	content: "";
	position: absolute;
	left: 110.75px;
	top: 117px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}
.hba-story .hba-story-card > *,
.hba-story .hba-story-card__body > * {
	margin-top: 0;
	margin-bottom: 0;
}
.hba-story .hba-story-card .hba-story-card__title {
	margin-bottom: 16px;
	font-size: var(--wp--preset--font-size--card-quote);
	font-weight: 600;
	line-height: 1.1;
}
.hba-story-card__body p {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
}

/* Side column: quote card + image */
.hba-story .hba-story__side {
	display: flex;
	flex-direction: column;
	gap: 23px;
}
.hba-story__side > * {
	margin: 0 !important;
}
.hba-story .hba-story__quote-card {
	position: relative;
	overflow: hidden;
	padding: 32px 32px 22px 33px;
	border: 1px solid #f4e8e4;
	border-radius: var(--wp--custom--radius--card);
}
.hba-story__quote-card::after {
	content: "";
	position: absolute;
	right: 6px;
	bottom: 4px;
	width: 183px;
	height: 380px;
	background: url("../images/about-floral.webp") right bottom / contain no-repeat;
	pointer-events: none;
}
.hba-story__quote-card > * {
	position: relative;
	z-index: 1;
}
.hba-story .hba-story__quote {
	max-width: 520px;
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: var(--wp--preset--font-size--card-quote);
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--primary);
}
.hba-story__quote::before {
	content: "\201C";
	display: block;
	height: 0.42em;
	margin-bottom: 0.26em;
	font-size: 2.9em;
	font-weight: 700;
	line-height: 0.75;
}
.hba-story__quote p {
	margin: 0;
}
.hba-story__quote-card .wp-block-separator.is-style-hba-accent {
	width: 107px;
	max-width: 107px;
	margin: 36px 0 0 !important;
}
.hba-story__image {
	margin: 0;
}
.hba-story__image img {
	display: block;
	width: 100%;
	aspect-ratio: 740 / 607;
	object-fit: cover;
}

/* ==========================================================================
   Approach (hba/about-approach)
   ========================================================================== */
.hba-approach {
	padding-top: clamp(2rem, 2.4vw, 46px);
	padding-bottom: clamp(2rem, 2.5vw, 48px);
}
.hba-approach .hba-approach__cols {
	display: grid;
	grid-template-columns: 570fr 788fr;
	gap: clamp(1.5rem, 2.9vw, 56px);
	align-items: center;
	margin: 0;
}
.hba-approach__cols > .wp-block-column {
	min-width: 0;
}
.hba-approach__image {
	margin: 0;
}
.hba-approach__image img {
	display: block;
	width: 100%;
	aspect-ratio: 570 / 682;
	object-fit: cover;
	border-radius: 999px 999px 0 0;
}
.hba-approach__body > * {
	margin-top: 0;
	margin-bottom: 0;
}
.hba-approach__body h2.wp-block-heading {
	line-height: 1.1;
}
.hba-approach .wp-block-separator.is-style-hba-accent {
	margin-top: clamp(1rem, 1.9vw, 36px) !important;
	margin-bottom: clamp(1rem, 1.9vw, 36px) !important;
}
.hba-approach__text {
	max-width: 730px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
}
.hba-approach .hba-approach__buttons {
	gap: clamp(1rem, 2.3vw, 44px);
	margin-top: clamp(1.5rem, 2.5vw, 48px) !important;
}

/* ==========================================================================
   Booking box – blush variant (hba/booking-cta-blush)
   ========================================================================== */
.hba-booking-section {
	padding-top: clamp(3rem, 6.25vw, 120px);
	padding-bottom: clamp(3rem, 6.25vw, 120px);
}
.hba-booking-section .hba-choose--blush {
	padding: clamp(1.25rem, 1.35vw, 26px) var(--wp--preset--spacing--40) clamp(1.5rem, 1.5vw, 28px);
}
.hba-choose--blush::before,
.hba-choose--blush::after {
	top: 24%;
	bottom: 23%;
}
.hba-choose--blush > * {
	margin-top: 0;
	margin-bottom: 0;
}
.hba-choose--blush .hba-label {
	margin-bottom: 6px;
}
.hba-booking-section .hba-choose__title {
	font-size: var(--wp--preset--font-size--section);
	line-height: 1.1;
	margin-bottom: 8px !important;
}
.hba-choose--blush .hba-choose__lead {
	max-width: 920px;
	margin-left: auto !important;
	margin-right: auto !important;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.7;
}
.hba-choose--blush .wp-block-buttons {
	margin-top: clamp(1rem, 1.6vw, 30px) !important;
}
.hba-booking-section .hba-choose--blush .wp-block-separator.is-style-hba-dot {
	max-width: 934px;
	margin-top: clamp(1.5rem, 2.1vw, 40px) !important;
	margin-bottom: clamp(1.5rem, 2.1vw, 40px) !important;
}
.hba-choose--blush h2 + .hba-choose__lead {
	margin-top: 8px !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1099px) {
	.hba-about-hero .hba-about-hero__cols,
	.hba-statement-section .hba-statement-cols,
	.hba-story .hba-story__grid,
	.hba-approach .hba-approach__cols {
		grid-template-columns: minmax(0, 1fr);
	}
	.hba-about-hero__image,
	.hba-statement__image {
		max-width: 620px;
	}
	.hba-approach__image {
		max-width: 440px;
		margin: 0 auto;
	}
	.hba-story .hba-story__grid {
		gap: 23px;
	}
}
@media (max-width: 599px) {
	.hba-creds li {
		align-items: flex-start;
	}
	.hba-story .hba-story-card {
		padding: 18px 16px 18px 86px;
	}
	.hba-story-card::before {
		display: none;
	}
	.hba-story .hba-story-card__num {
		left: 14px;
		top: 18px;
		width: 48px;
		height: 48px;
		font-size: 30px;
	}
	.hba-story-card__body::before {
		left: 72px;
		top: 18px;
		bottom: 18px;
	}
	.hba-story-card__body::after {
		left: 67px;
		top: 36px;
		width: 11px;
		height: 11px;
	}
	.hba-story .hba-story__quote-card {
		padding: 26px 22px 22px;
	}
	.hba-story__quote-card::after {
		width: 110px;
		height: 230px;
		opacity: 0.55;
	}
	.hba-statement-section .hba-statement {
		padding-left: 18px;
		border-left-width: 5px;
		margin-left: 0 !important;
	}
}