/* ==========================================================================
   Shared by two content pages that both extend base.html and use its
   head_extra block to pull this in: /care (service selector + expandable
   guide panel) and /booking (reuses .care-hero/.section-head for its
   header, adds .booking-page__panel below for the form card).
   ========================================================================== */

.care-hero {
	position: relative;
	padding-block: calc(var(--space-9, 6rem) + 3rem) var(--space-8);
	overflow: hidden;
}

.care-hero__glow {
	position: absolute;
	top: -10%;
	inset-inline-end: -10%;
	width: 46vw;
	height: 46vw;
	border-radius: 50%;
	background: var(--gradient-radial-glow);
	filter: blur(10px);
	opacity: 0.5;
	pointer-events: none;
}

/* ---- Service selector ---------------------------------------------------- */
.care-selector {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-block: var(--space-6) var(--space-7);
	position: relative;
	z-index: 1;
}

.care-selector__item {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-family: var(--font-body);
	font-size: var(--fs-small);
	letter-spacing: 0.02em;
	color: var(--color-gray);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-pill);
	padding: 0.65em 1.3em;
	background: var(--glass-bg);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	cursor: pointer;
	transition: color calc(var(--dur-fast) * var(--motion-scale)) var(--ease-soft),
		border-color calc(var(--dur-fast) * var(--motion-scale)) var(--ease-soft),
		background calc(var(--dur-fast) * var(--motion-scale)) var(--ease-soft),
		box-shadow calc(var(--dur-fast) * var(--motion-scale)) var(--ease-soft),
		transform calc(var(--dur-fast) * var(--motion-scale)) var(--ease-spring);
}

.care-selector__icon {
	display: inline-flex;
	color: var(--color-gold);
	opacity: 0.75;
	transition: opacity calc(var(--dur-fast) * var(--motion-scale)) var(--ease-soft),
		transform calc(var(--dur-fast) * var(--motion-scale)) var(--ease-spring);
}

.care-selector__item:hover {
	color: var(--color-white);
	border-color: var(--glass-border);
	background: var(--glass-bg-strong);
	transform: translate3d(0, -2px, 0);
}

.care-selector__item.is-active {
	color: var(--color-on-gold);
	background: var(--gradient-gold);
	border-color: transparent;
	box-shadow: 0 10px 28px -12px rgba(198, 164, 108, 0.55);
}

.care-selector__item.is-active .care-selector__icon {
	color: var(--color-on-gold);
	opacity: 1;
}

/* ---- Guide panel ----------------------------------------------------------- */
.care-panel {
	position: relative;
	z-index: 1;
	border-radius: var(--radius-lg);
	padding: var(--space-7);
}

.care-panel__content {
	display: none;
}

.care-panel__content.is-active {
	display: block;
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition: opacity calc(var(--dur-mid) * var(--motion-scale)) var(--ease-out-expo),
		transform calc(var(--dur-mid) * var(--motion-scale)) var(--ease-out-expo);
}

.care-panel__content.is-active.is-entering {
	opacity: 0;
	transform: translate3d(0, var(--dist-sm), 0);
	transition: none;
}

.care-panel__summary {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	color: var(--color-white);
	max-width: 60ch;
	margin: 0 0 var(--space-6);
}

.care-panel__sections {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}

.care-panel__section h3 {
	font-family: var(--font-display);
	font-size: var(--fs-body-lg);
	color: var(--color-gold-light);
	margin: 0 0 var(--space-3);
}

.care-panel__section ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.care-panel__section li {
	position: relative;
	padding-inline-start: 1.1em;
	font-size: var(--fs-small);
	color: var(--color-gray);
	line-height: 1.8;
}

.care-panel__section li::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: 0.65em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--color-gold);
}

/* ---- Disclaimer / CTA strip ------------------------------------------------ */
.care-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-top: var(--space-6);
	padding: var(--space-5) var(--space-6);
	border-radius: var(--radius-lg);
}

.care-cta p {
	font-size: var(--fs-xs);
	color: var(--color-gray-dim);
	margin: 0;
	max-width: 52ch;
}

@media (max-width: 880px) {
	.care-panel__sections {
		grid-template-columns: 1fr;
	}

	.care-cta {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---- /booking's form card -------------------------------------------------- */
.booking-page__panel {
	max-width: 480px;
	margin-inline: auto;
	padding: var(--space-7);
	border-radius: var(--radius-lg);
}

.booking-page__panel .booking-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}