/*
 * Immersive front-page sections: day story, moments gallery and family confidence.
 * Kept separate so the additions can be removed or iterated without changing the
 * established theme stylesheet.
 */

.day-story {
	position: relative;
	padding: clamp(88px, 10vw, 152px) 0;
	background: var(--cream);
}

.day-story::before {
	position: absolute;
	top: 5%;
	right: -120px;
	width: 340px;
	height: 340px;
	border: 1px dashed rgba(25, 114, 87, .2);
	border-radius: 50%;
	content: "";
	pointer-events: none;
}

.day-story__heading {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(280px, .7fr);
	align-items: end;
	gap: clamp(32px, 7vw, 100px);
	margin-bottom: clamp(54px, 7vw, 92px);
}

.day-story__heading h2 {
	max-width: 13ch;
	margin-bottom: 0;
}

.day-story__heading > p {
	max-width: 56ch;
	margin-bottom: .45em;
	color: var(--muted);
}

.day-story__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(360px, .85fr);
	align-items: start;
	gap: clamp(42px, 7vw, 104px);
}

.day-story__visual {
	position: sticky;
	top: 124px;
	height: min(67vh, 660px);
	min-height: 520px;
	overflow: hidden;
	border: 10px solid var(--white);
	border-radius: clamp(28px, 4vw, 52px) clamp(28px, 4vw, 52px) clamp(90px, 10vw, 150px) clamp(28px, 4vw, 52px);
	background: var(--sage-200);
	box-shadow: var(--shadow);
}

.day-story__visual::after {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(180deg, transparent 57%, rgba(5, 45, 36, .66));
	content: "";
	pointer-events: none;
}

.day-story__scene {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
	border-radius: inherit;
	opacity: 0;
	transition: opacity .7s var(--ease), transform 1.1s var(--ease);
	transform: scale(1.035);
}

.day-story__scene.is-active {
	opacity: 1;
	transform: scale(1);
}

.day-story__scene img {
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
}

.day-story__scene figcaption {
	position: absolute;
	right: 28px;
	bottom: 25px;
	left: 28px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--white);
	font-family: var(--font-display);
	font-size: clamp(1rem, 1.7vw, 1.28rem);
	font-weight: 800;
}

.day-story__scene figcaption span {
	padding: 6px 9px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, .91);
	color: var(--forest-950);
	font-family: var(--font-body);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .02em;
}

.day-story__counter {
	position: absolute;
	top: 22px;
	right: 22px;
	z-index: 4;
	display: flex;
	align-items: baseline;
	gap: 4px;
	padding: 9px 13px;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: var(--radius-pill);
	background: rgba(7, 61, 49, .78);
	color: rgba(255, 255, 255, .7);
	font-size: .72rem;
	font-weight: 700;
	backdrop-filter: blur(8px);
}

.day-story__counter span:first-child {
	color: var(--white);
	font-family: var(--font-display);
	font-size: 1rem;
}

.day-story__steps {
	position: relative;
	display: grid;
	gap: 0;
	padding: 0;
	margin: 0;
	list-style: none;
}

.day-story__steps::before {
	position: absolute;
	top: 42px;
	bottom: 42px;
	left: 31px;
	width: 2px;
	background: linear-gradient(180deg, var(--gold), var(--sage-300) 45%, var(--forest-700));
	content: "";
}

.day-story__steps li {
	position: relative;
	display: grid;
	min-height: 40vh;
	grid-template-columns: 64px minmax(0, 1fr);
	align-content: center;
	align-items: start;
	gap: 21px;
	padding: 42px 24px 42px 0;
	color: var(--muted);
	transition: color .35s ease;
}

.day-story__steps li > div {
	padding: 19px 21px;
	border: 1px solid transparent;
	border-radius: 22px;
	transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s var(--ease);
}

.day-story__steps li.is-active > div {
	border-color: rgba(10, 74, 58, .1);
	background: var(--white);
	box-shadow: var(--shadow-soft);
	transform: translateX(7px);
}

.day-story__number {
	position: relative;
	z-index: 2;
	display: grid;
	width: 64px;
	height: 64px;
	place-items: center;
	border: 7px solid var(--cream);
	border-radius: 50%;
	background: var(--sage-200);
	color: var(--forest-800);
	font-family: var(--font-display);
	font-size: .78rem;
	font-weight: 900;
	transition: background-color .35s ease, color .35s ease, transform .35s var(--ease);
}

.day-story__steps li.is-active .day-story__number {
	background: var(--gold);
	color: var(--forest-950);
	transform: scale(1.08);
}

.day-story__time {
	margin-bottom: 4px;
	color: var(--forest-700);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.day-story__steps h3 {
	margin-bottom: 7px;
	color: var(--forest-800);
	font-size: clamp(1.3rem, 2vw, 1.62rem);
}

.day-story__steps li > div > p:last-child {
	margin-bottom: 0;
	font-size: .94rem;
}

.moments-section {
	position: relative;
	overflow: hidden;
	padding: clamp(80px, 9vw, 136px) 0;
	background: var(--sky-200);
}

.moments-section::before {
	position: absolute;
	top: -42px;
	right: -5%;
	left: -5%;
	height: 72px;
	border-radius: 50%;
	background: var(--cream);
	content: "";
}

.moments-section__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 32px;
	margin-bottom: 42px;
}

.moments-section__header h2 {
	max-width: 16ch;
	margin-bottom: 0;
}

.moments-section__controls {
	display: none;
	gap: 10px;
}

.js .moments-section__controls {
	display: flex;
}

.moments-section__controls button {
	display: grid;
	width: 52px;
	height: 52px;
	place-items: center;
	border: 1px solid rgba(10, 74, 58, .16);
	border-radius: 50%;
	background: var(--white);
	box-shadow: 0 8px 22px rgba(7, 61, 49, .08);
	cursor: pointer;
	transition: background-color .22s ease, color .22s ease, transform .22s var(--ease), opacity .22s ease;
}

.moments-section__controls button:hover:not(:disabled) {
	background: var(--forest-800);
	color: var(--white);
	transform: translateY(-2px);
}

.moments-section__controls button:disabled {
	opacity: .38;
	cursor: default;
}

.moments-section__controls svg {
	width: 23px;
	height: 23px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.moments-gallery {
	display: flex;
	gap: clamp(18px, 2.2vw, 30px);
	padding: 6px max(20px, calc((100vw - 1180px) / 2)) 32px;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-behavior: smooth;
	scroll-padding-inline: max(20px, calc((100vw - 1180px) / 2));
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: rgba(10, 74, 58, .28) transparent;
}

.moments-gallery::-webkit-scrollbar {
	height: 7px;
}

.moments-gallery::-webkit-scrollbar-thumb {
	border-radius: var(--radius-pill);
	background: rgba(10, 74, 58, .28);
}

.moments-card {
	position: relative;
	width: clamp(286px, 31vw, 420px);
	height: clamp(400px, 44vw, 560px);
	flex: 0 0 auto;
	margin: 0;
	overflow: hidden;
	border: 8px solid rgba(255, 255, 255, .92);
	border-radius: 38px 38px 92px 38px;
	background: var(--sage-200);
	box-shadow: var(--shadow-soft);
	scroll-snap-align: start;
}

.moments-card--wide {
	width: clamp(340px, 45vw, 620px);
	border-radius: 38px 92px 38px 38px;
}

.moments-card--tall {
	width: clamp(280px, 28vw, 380px);
	border-radius: 92px 38px 38px 38px;
}

.moments-card::after {
	position: absolute;
	inset: 38% 0 0;
	background: linear-gradient(180deg, transparent, rgba(5, 45, 36, .82));
	content: "";
	pointer-events: none;
}

.moments-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--ease);
}

.moments-card:hover img {
	transform: scale(1.035);
}

.moments-card .media-label {
	top: 18px;
	right: 18px;
}

.moments-card figcaption {
	position: absolute;
	right: 26px;
	bottom: 24px;
	left: 26px;
	z-index: 2;
	color: var(--white);
}

.moments-card figcaption strong,
.moments-card figcaption span {
	display: block;
}

.moments-card figcaption strong {
	margin-bottom: 4px;
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2.3vw, 1.7rem);
	line-height: 1.1;
}

.moments-card figcaption span {
	color: rgba(255, 255, 255, .78);
	font-size: .84rem;
}

.family-confidence {
	position: relative;
	overflow: hidden;
	padding: clamp(92px, 8vw, 120px) 0 clamp(86px, 7vw, 104px);
	background:
		radial-gradient(circle at 12% 26%, rgba(96, 165, 130, .2), transparent 30%),
		radial-gradient(circle at 85% 70%, rgba(13, 91, 69, .48), transparent 38%),
		linear-gradient(135deg, #073d31 0%, #0a5a43 48%, #074233 100%);
	background-color: #073d31;
	color: var(--white);
}

.family-confidence::before,
.family-confidence::after {
	position: absolute;
	border: 1px solid rgba(242, 184, 75, .22);
	border-radius: 50%;
	box-shadow: 0 0 0 34px rgba(242, 184, 75, .045), 0 0 0 70px rgba(242, 184, 75, .025);
	content: "";
	pointer-events: none;
}

.family-confidence::before {
	top: -320px;
	right: -210px;
	width: 670px;
	height: 670px;
}

.family-confidence::after {
	bottom: -260px;
	left: -190px;
	width: 470px;
	height: 470px;
}

.family-confidence__layout,
.visit-guide {
	position: relative;
	z-index: 2;
	width: min(1420px, calc(100% - 72px));
}

.family-confidence__layout {
	display: grid;
	grid-template-columns: minmax(0, .82fr) minmax(460px, 1.08fr);
	align-items: center;
	gap: clamp(52px, 6vw, 92px);
}

.family-confidence__intro h2 {
	max-width: 12ch;
	margin-bottom: 30px;
	color: var(--white);
	font-size: clamp(3.2rem, 5.7vw, 5.35rem);
	line-height: .93;
	letter-spacing: -.045em;
}

.family-confidence__intro > p:not(.eyebrow) {
	max-width: 47ch;
	margin-bottom: 32px;
	color: rgba(255, 255, 255, .76);
	font-size: 1rem;
	line-height: 1.7;
}

.family-confidence__points {
	position: relative;
	display: grid;
	gap: 22px;
	padding-left: 64px;
}

.family-confidence__journey {
	position: absolute;
	top: 2%;
	bottom: 2%;
	left: 0;
	width: 70px;
	height: 96%;
	overflow: visible;
	color: var(--gold);
	filter: drop-shadow(0 0 10px rgba(242, 184, 75, .16));
	pointer-events: none;
}

.family-confidence__journey circle {
	fill: currentColor;
}

.family-confidence__points article {
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr);
	align-items: center;
	gap: 22px;
	min-height: 118px;
	padding: 24px 30px 24px 20px;
	border: 1px solid rgba(255, 255, 255, .17);
	border-radius: 28px;
	background: linear-gradient(112deg, rgba(255, 255, 255, .135), rgba(255, 255, 255, .072));
	box-shadow: 0 22px 54px rgba(2, 35, 27, .15), inset 0 1px 0 rgba(255, 255, 255, .045);
	backdrop-filter: blur(12px);
	transition: background-color .3s ease, border-color .3s ease, transform .45s var(--ease), box-shadow .3s ease;
}

.family-confidence__points article:nth-of-type(2) {
	margin-left: 24px;
}

.family-confidence__points article:nth-of-type(3) {
	margin-left: 10px;
}

.family-confidence__points article:hover {
	border-color: rgba(242, 184, 75, .34);
	background: linear-gradient(112deg, rgba(255, 255, 255, .175), rgba(255, 255, 255, .095));
	box-shadow: 0 28px 68px rgba(2, 35, 27, .22), inset 0 1px 0 rgba(255, 255, 255, .07);
	transform: translateX(7px);
}

.family-confidence__points article > span {
	display: grid;
	width: 68px;
	height: 68px;
	place-items: center;
	border-radius: 50%;
	background: linear-gradient(145deg, #ffd16b, var(--gold));
	box-shadow: 0 10px 28px rgba(242, 184, 75, .2);
	color: var(--forest-950);
	font-family: var(--font-display);
	font-size: .86rem;
	font-weight: 900;
}

.family-confidence__points h3 {
	margin-bottom: 5px;
	color: var(--white);
	font-size: 1.24rem;
}

.family-confidence__points p {
	margin-bottom: 0;
	color: rgba(255, 255, 255, .68);
	font-size: .92rem;
	line-height: 1.55;
}

.visit-guide {
	margin-top: clamp(42px, 5vw, 64px);
	padding-top: 30px;
	border-top: 1px solid rgba(255, 255, 255, .16);
}

.visit-guide > p {
	margin-bottom: 16px;
	font-family: var(--font-display);
}

.visit-guide ul {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	list-style: none;
}

.visit-guide li {
	padding: 10px 16px;
	border: 1px solid rgba(255, 255, 255, .17);
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, .07);
	color: rgba(255, 255, 255, .82);
	font-size: .8rem;
	font-weight: 600;
	transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}

.visit-guide li:hover {
	border-color: rgba(242, 184, 75, .34);
	background: rgba(255, 255, 255, .11);
	transform: translateY(-2px);
}

@media (max-width: 900px) {
	.day-story__heading,
	.family-confidence__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.day-story__heading {
		gap: 20px;
	}

	.day-story__heading h2,
	.family-confidence__intro h2 {
		max-width: 16ch;
	}

	.day-story__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.day-story__visual {
		top: 88px;
		z-index: 3;
		height: min(50vh, 480px);
		min-height: 360px;
	}

	.day-story__steps li {
		min-height: 34vh;
	}

	.family-confidence__layout {
		gap: 48px;
	}

	.family-confidence__layout,
	.visit-guide {
		width: var(--wrap);
	}

	.family-confidence__intro h2 {
		font-size: clamp(3rem, 9vw, 5.2rem);
	}
}

@media (max-width: 600px) {
	.day-story::before {
		display: none;
	}

	.day-story__heading {
		margin-bottom: 42px;
	}

	.day-story__visual {
		height: 43vh;
		min-height: 310px;
		border-width: 6px;
		border-radius: 24px 24px 70px 24px;
	}

	.day-story__scene figcaption {
		right: 18px;
		bottom: 17px;
		left: 18px;
		align-items: flex-start;
		flex-direction: column;
		gap: 6px;
	}

	.day-story__counter {
		top: 14px;
		right: 14px;
	}

	.day-story__steps li {
		min-height: max(300px, 42vh);
		grid-template-columns: 54px minmax(0, 1fr);
		gap: 12px;
		padding: 34px 0;
	}

	.day-story__steps::before {
		left: 26px;
	}

	.day-story__number {
		width: 54px;
		height: 54px;
		border-width: 6px;
	}

	.day-story__steps li > div {
		padding: 16px;
	}

	.day-story__steps li.is-active > div {
		transform: none;
	}

	.moments-section__header {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.moments-card,
	.moments-card--wide,
	.moments-card--tall {
		width: min(82vw, 350px);
		height: min(116vw, 490px);
		border-width: 6px;
	}

	.family-confidence__points article {
		grid-template-columns: 52px minmax(0, 1fr);
		gap: 14px;
		min-height: 0;
		margin-left: 0 !important;
		padding: 17px 16px 17px 12px;
	}

	.family-confidence__points article > span {
		width: 52px;
		height: 52px;
	}

	.family-confidence__points {
		gap: 14px;
		padding-left: 0;
	}

	.family-confidence__journey {
		display: none;
	}

	.visit-guide ul {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	.day-story__scene,
	.day-story__steps li > div,
	.day-story__number,
	.moments-card img,
	.family-confidence__points article {
		transition: none;
	}

	.moments-gallery {
		scroll-behavior: auto;
	}
}