/**
 * HBA – FAQs page section styles (patterns hba/faq-hero, hba/faq-accordion,
 * hba/faq-still-question). Measured from the 1920px design (content area
 * 1500px); values scale fluidly below that. Loaded only on pages that use
 * these patterns.
 */

/* ==========================================================================
   FAQ hero (hba/faq-hero)
   ========================================================================== */
.hba-faq-hero {
	position: relative;
	overflow: hidden;
	padding-top: clamp(2rem, 3.125vw, 60px);
	padding-bottom: clamp(2.5rem, 6vw, 115px);
	background: #f9f0ef url("../images/faq-hero-bg-v2.webp") center bottom / cover no-repeat;
}
.hba-faq-hero .hba-faq-hero__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) min(523px, 27.24vw);
	gap: clamp(1.5rem, 3vw, 60px);
	margin: 0;
}
.hba-faq-hero__cols > .wp-block-column {
	min-width: 0;
}
.hba-faq-hero__body {
	padding-top: clamp(0.25rem, 0.3vw, 6px);
}
.hba-faq-hero__body > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.hba-sections .hba-faq-hero p.is-style-hba-eyebrow {
	margin-bottom: 0;
	line-height: 1.2;
}
.hba-faq-hero .hba-faq-hero__title {
	max-width: 8.3em;
	margin-top: clamp(0.25rem, 0.3vw, 6px) !important;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.105;
}
.hba-faq-hero .wp-block-separator.is-style-hba-accent {
	width: 122px;
	max-width: 122px;
	margin-top: clamp(1rem, 1.6vw, 31px) !important;
}
.hba-faq-hero__text {
	margin-top: clamp(1.25rem, 1.6vw, 30px) !important;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
	color: #232323;
}
.hba-faq-hero__buttons {
	margin-top: clamp(1.5rem, 2.1vw, 40px) !important;
}

/* WhatsApp button: white logo before the label */
.hba-button-whatsapp .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	padding-left: 34px;
	padding-right: 34px;
}
.hba-button-whatsapp .wp-block-button__link::before {
	content: "";
	flex: 0 0 30px;
	height: 30px;
	margin: -4px 0;
	background: url("../icons/faq-whatsapp.svg") center / contain no-repeat;
}

/* Arch-framed photo with a thin white border */
.hba-faq-hero__photo {
	margin: 0;
}
.hba-faq-hero__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 523.6 / 626.8;
	object-fit: cover;
	border: 6px solid #fff;
	border-radius: 999px 999px 0 0;
	box-shadow: 0 18px 40px rgba(102, 0, 51, 0.06);
}

/* ==========================================================================
   Frequently asked questions (hba/faq-accordion)
   ========================================================================== */
.hba-faq-section {
	padding-top: clamp(3.5rem, 5.8vw, 111px);
}
.hba-faq-section > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.hba-sections .hba-faq-section p.is-style-hba-eyebrow {
	margin-bottom: 0;
	line-height: 1.2;
}
.hba-faq-section .hba-faq-section__title {
	margin-top: 7px !important;
	font-size: var(--wp--preset--font-size--section);
	line-height: 1.2;
	text-transform: uppercase;
}
.hba-faq-section .hba-faq-section__rule {
	width: 97px;
	max-width: 97px;
	margin: clamp(1rem, 1.5vw, 28px) auto 0 !important;
	border: 0;
	border-top: 2px solid #232323;
	opacity: 1;
}
.hba-faq-section__text {
	margin-top: clamp(1.25rem, 1.85vw, 36px) !important;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.4;
	color: #232323;
}
.hba-faq-section .hba-faq-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 36px;
	align-items: start;
	margin-top: clamp(2.5rem, 3.5vw, 67px) !important;
}
.hba-faq-cols > .wp-block-column {
	display: flex;
	flex-direction: column;
	gap: 34px;
	min-width: 0;
}
.hba-faq-cols > .wp-block-column > * {
	margin: 0 !important;
}

/* One question (core/details) */
.hba-faq.wp-block-details {
	overflow: hidden;
	border: 1.5px solid var(--wp--preset--color--primary);
	border-radius: 8px;
	background: #fff;
	transition: border-color 0.3s ease;
}
.hba-faq > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	box-sizing: border-box;
	min-height: 86px;
	padding: 8px 23px 8px 25px;
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: var(--wp--preset--font-size--card-title);
	font-weight: 600;
	line-height: 1.2;
	text-transform: capitalize;
	color: var(--wp--preset--color--primary);
	list-style: none;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.hba-faq > summary::-webkit-details-marker {
	display: none;
}
.hba-faq > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -4px;
}
/* Round +/− toggle: two bars, the vertical one collapses when open */
.hba-faq > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border: 1.5px solid #ece0e6;
	border-radius: 50%;
	background:
		linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) center / 18.6px 3.6px no-repeat,
		linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) center / 3.6px 18.6px no-repeat,
		#fff;
	transition: background-size 0.3s ease;
}
.hba-faq[open] > summary::after {
	background-size: 18.6px 3.6px, 3.6px 0, auto;
}
.hba-faq[open] {
	border-color: #ece0e6;
}
.hba-faq[open] > summary {
	border-bottom: 1.5px solid #ece0e6;
	background: #f9efed;
}
.hba-faq > p {
	margin: 0;
	padding: 0 20px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.72;
	color: #232323;
}
.hba-faq > summary + p {
	padding-top: 15px;
}
.hba-faq > p:last-child {
	padding-bottom: 13px;
}
.hba-faq > p a {
	color: var(--wp--preset--color--primary);
	text-underline-offset: 3px;
}

/* Smooth open/close where supported (Chrome/Edge 131+); instant elsewhere */
@supports (interpolate-size: allow-keywords) {
	.hba-faq {
		interpolate-size: allow-keywords;
	}
	.hba-faq::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), content-visibility 0.4s allow-discrete;
	}
	.hba-faq[open]::details-content {
		block-size: auto;
	}
}

/* ==========================================================================
   Still have a question? (hba/faq-still-question)
   ========================================================================== */
.hba-question-section {
	padding-top: clamp(3.5rem, 6.25vw, 120px);
	padding-bottom: clamp(3.5rem, 6.25vw, 120px);
}
.hba-question-section > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.hba-question {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	min-height: clamp(360px, 22.66vw, 435px);
	padding: clamp(2.5rem, 3.4vw, 65px) clamp(1.5rem, 5vw, 96px) clamp(2.5rem, 4.3vw, 83px);
	border-radius: 20px;
	background:
		url("../images/faq-cta-vase.webp") right bottom / auto 100% no-repeat,
		linear-gradient(to top, #f6e6db 0 13.1%, #f8ebe4 13.1%);
}
.hba-question > * {
	position: relative;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	max-width: min(760px, 60%);
}
.hba-question__label {
	font-size: var(--wp--preset--font-size--eyebrow);
	line-height: 1.2;
	color: #111;
}
.hba-question .hba-question__title {
	margin-top: 5px !important;
	font-size: var(--wp--preset--font-size--section);
	line-height: 1.2;
}
.hba-question .wp-block-separator.is-style-hba-accent {
	width: 97px;
	max-width: 97px;
	margin-top: clamp(0.5rem, 1vw, 19px) !important;
}
.hba-question__text {
	margin-top: clamp(1.25rem, 1.45vw, 28px) !important;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
	color: #232323;
}
.hba-question .wp-block-buttons {
	margin-top: clamp(1.5rem, 1.6vw, 31px) !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1099px) {
	.hba-faq-hero .hba-faq-hero__cols {
		grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
	}
	.hba-faq > summary {
		min-height: 72px;
		padding: 10px 16px 10px 20px;
	}
	.hba-faq > summary::after {
		width: 46px;
		height: 46px;
	}
}

@media (max-width: 899px) {
	.hba-faq-section .hba-faq-cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		max-width: 720px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.hba-faq-cols > .wp-block-column {
		gap: 20px;
	}
}

@media (max-width: 781px) {
	.hba-faq-hero {
		padding-top: 2.5rem;
		padding-bottom: 3rem;
		background-position: left bottom;
	}
	.hba-faq-hero .hba-faq-hero__cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}
	.hba-faq-hero__media {
		justify-self: center;
		width: min(100%, 400px);
	}
	.hba-faq-hero__photo img {
		border-width: 5px;
	}
	.hba-button-whatsapp .wp-block-button__link {
		padding-left: 24px;
		padding-right: 24px;
	}

	.hba-faq > summary {
		gap: 14px;
		min-height: 64px;
		padding: 10px 14px 10px 18px;
		font-size: clamp(20px, 5.4vw, 24px);
	}
	.hba-faq > summary::after {
		width: 40px;
		height: 40px;
		background-size: 14px 3px, 3px 14px, auto;
	}
	.hba-faq[open] > summary::after {
		background-size: 14px 3px, 3px 0, auto;
	}
	.hba-faq > p {
		padding-left: 18px;
		padding-right: 18px;
		font-size: 16px;
	}
	.hba-faq > summary + p {
		padding-top: 16px;
	}
	.hba-faq > p:last-child {
		padding-bottom: 18px;
	}

	/* Card: text on top, vase along the bottom right */
	.hba-question {
		min-height: 0;
		padding: 2.25rem 1.5rem 200px;
		border-radius: 16px;
		background:
			url("../images/faq-cta-vase.webp") right bottom / auto 230px no-repeat,
			linear-gradient(to top, #f6e6db 0 30px, #f8ebe4 30px);
	}
	.hba-question > * {
		max-width: 100%;
	}
	.hba-question .wp-block-buttons,
	.hba-question .wp-block-button {
		width: 100%;
	}
	.hba-question .wp-block-button__link {
		width: 100%;
	}
}