/* ==========================================================================
   Elite Dental Clinic — sections.css
   Homepage sections. Mobile-first; ≥810 / ≥1200 overrides in responsive.css.
   Measurements: docs/homepage-visual-audit.md
   ========================================================================== */

/* Shared scaffolding ------------------------------------------------------ */

.home-section {
	padding-block: var(--section-space);
}

.section-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--grid-gap);
}

.media-frame {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-image);
	background: var(--edc-surface-alt);
}

.media-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hero -------------------------------------------------------------------- */

.hero {
	position: relative;
	display: flex;
	height: 100vh;
	height: 100svh;
	min-height: 34rem;
	overflow: hidden;
	background: var(--edc-dark);
	color: var(--edc-on-dark);
	isolation: isolate;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

/* Scrim keeps the copy legible on any slide: left and bottom only. */
.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--edc-dark) 50%, transparent) 0%, color-mix(in srgb, var(--edc-dark) 12%, transparent) 55%, transparent 80%),
		linear-gradient(0deg, color-mix(in srgb, var(--edc-dark) 45%, transparent) 0%, transparent 50%);
}

.hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.6s var(--ease-in-out);
}

.hero__slide.is-active {
	opacity: 1;
	animation: edc-hero-drift 9s cubic-bezier(0.2, 0.6, 0.3, 1) both;
}

@keyframes edc-hero-drift {
	from {
		transform: scale(1.08);
	}

	to {
		transform: scale(1);
	}
}

.hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
	column-gap: var(--grid-gap);
	padding-block: calc(var(--header-height) + var(--space-l)) var(--space-xl);
}

.hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.hero__title {
	--lines-delay: 150ms;
}

.hero__lede {
	--reveal-delay: 400ms;
	--reveal-distance: 2rem;
	max-width: 25rem;
	margin-top: var(--space-xs);
	color: var(--edc-on-dark-soft);
}

.hero__cta {
	--reveal-delay: 500ms;
	display: flex;
	--reveal-distance: 4rem;
	margin-top: var(--space-s);
}

/* 01 Intro ---------------------------------------------------------------- */

.home-intro {
	padding-block: var(--section-space-lg) var(--section-space);
}

.home-intro__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.home-intro__copy .eyebrow {
	margin-bottom: var(--space-m);
}

.home-intro__text {
	margin-top: var(--space-2xs);
	color: var(--edc-text-soft);
}

.home-intro__link {
	margin-top: var(--space-xs);
}

.home-intro__media {
	aspect-ratio: 1.615;
	margin-top: var(--space-m);
}

/* Section head (label + optional title/link/controls) ---------------------- */

.section-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--grid-gap);
}

.section-head__title {
	grid-column: 1 / -1;
	margin-top: var(--space-m);
}

.section-head__link {
	grid-column: 1 / -1;
	justify-self: start;
	margin-top: var(--space-xs);
}

/* 02 Gallery -------------------------------------------------------------- */

.gallery-controls {
	display: flex;
	gap: var(--space-3xs);
}

.gallery-controls__button {
	position: relative;
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius-chip);
	background: var(--edc-button-bg);
	color: var(--edc-button-text);
	cursor: pointer;
	transition: background-color var(--duration-normal) var(--ease-standard), opacity var(--duration-normal) var(--ease-standard);
}

.gallery-controls__button .icon {
	width: 1rem;
	height: 1rem;
	stroke-width: 1.5;
}

.gallery-controls__button:hover:not(:disabled) {
	background: var(--edc-button-hover);
}

.gallery-controls__button:disabled {
	opacity: 0.25;
	cursor: default;
}

/* Comfortable hit area on touch without changing the 24px square. */
@media (pointer: coarse) {
	.gallery-controls__button::after {
		content: "";
		position: absolute;
		inset: -0.625rem -0.125rem;
	}
}

.gallery__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - var(--grid-gap)) / 2);
	gap: var(--grid-gap);
	margin: var(--space-m) calc(var(--gutter) * -1) 0;
	padding: 0 var(--gutter);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.gallery__track::-webkit-scrollbar {
	display: none;
}

.gallery__track:focus-visible {
	outline-offset: -2px;
}

.gallery__slide {
	scroll-snap-align: start;
}

.gallery__media {
	aspect-ratio: 1;
}

.gallery__caption {
	margin-top: var(--space-xs);
}

/* 03 Reassurance ---------------------------------------------------------- */

.reassurance {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-l) var(--space-s);
	margin: var(--space-m) 0 0;
	padding: 0;
	list-style: none;
}

/* Editorial statements on a hairline: no icons, no feature-list look. */
.reassurance__item {
	padding-top: var(--space-s);
	border-top: var(--border-width) solid var(--edc-border-strong);
}

.reassurance__title {
	font-size: var(--text-title);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-title);
}

.reassurance__text {
	margin-top: var(--space-2xs);
	color: var(--edc-text-soft);
}

/* 04 Treatments ----------------------------------------------------------- */
/* One sticky image frame beside (≥810) or above (<810) a list that scrolls natively. main.js activates the
   row crossing the middle of the screen and its photograph fades in. Every description stays open, so rows
   never resize under the activation line. No snapping, no locking: only the image is sticky. */

.treatments {
	margin-top: var(--space-m);
}

/* Phones and tablets: a compact landscape frame held just below the fixed header (and the admin bar,
   using the same variable as the header), so the active text stays visible beneath it. */
.treatments__media {
	position: sticky;
	top: calc(var(--header-height) + var(--admin-offset, 0px));
	z-index: 1;
	aspect-ratio: 4 / 3;
	max-height: 38vh;
	margin-inline: calc(var(--gutter) * -1);
}

/* Layered cross-fade: the incoming image fades in on top while the outgoing one stays fully opaque
   underneath (.is-previous), so there is never a blank or half-transparent frame. */
.treatments__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	transform: scale(1.02);
	transition:
		opacity 550ms var(--ease-editorial),
		transform 900ms var(--ease-editorial);
}

.treatments__image.is-previous {
	z-index: 1;
	opacity: 1;
	transform: none;
	transition: none;
}

.treatments__image.is-active {
	z-index: 2;
	opacity: 1;
	transform: none;
}

.treatments__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.treatment {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 30vh;
	padding: var(--space-m) 0;
	border-bottom: var(--border-width) solid var(--edc-border);
}

.js .treatment {
	opacity: 0.35;
	transition: opacity var(--duration-slow) var(--ease-editorial);
}

.js .treatment.is-active {
	opacity: 1;
}

.treatment__title {
	font-size: var(--text-title);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-title);
}

/* The title is a button so keyboard focus (and a tap) can bring its photograph forward. */
.treatment__trigger {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	letter-spacing: inherit;
	text-align: left;
	cursor: pointer;
}

.treatment__trigger:focus-visible {
	outline-offset: 6px;
}

.treatment__text {
	max-width: 30rem;
	padding-top: var(--space-2xs);
	color: var(--edc-text-soft);
}

.treatment__link {
	margin-top: var(--space-s);
}

/* 05 Doctors -------------------------------------------------------------- */

.home-doctors {
	padding-block: var(--section-space) var(--section-space);
}

/* Phone: copy children join the section grid so the link can follow the portraits. */
.home-doctors__copy {
	display: contents;
}

.home-doctors__copy .eyebrow {
	margin-bottom: var(--space-m);
}

.home-doctors__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-l) var(--grid-gap);
	margin: var(--space-m) 0 0;
	padding: 0;
	list-style: none;
}

.home-doctors__link {
	order: 1;
	justify-self: start;
	margin-top: var(--space-m);
}

/* From tablet the portraits share one row, top-aligned, same 4:5 frame. */
@media (min-width: 37.5rem) {
	.home-doctors__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.doctor__media {
	aspect-ratio: 4 / 5;
}

.doctor__name {
	margin-top: var(--space-xs);
}

.doctor__role {
	margin-top: var(--space-3xs);
	color: var(--edc-text-soft);
}

/* 06 Footer: booking + details + legal ------------------------------------ */

.site-footer {
	/* A faint plum glow in the lower right, the only gradient on the page. */
	background:
		radial-gradient(60% 80% at 78% 85%, color-mix(in srgb, var(--edc-glow) 42%, transparent), transparent 70%),
		var(--edc-dark);
	color: var(--edc-on-dark);
}

.footer-row {
	padding-block: var(--space-l);
}

.footer-row + .footer-row {
	border-top: var(--border-width) solid var(--edc-dark-line);
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-l) var(--space-s);
}

.footer-grid > * {
	grid-column: 1 / -1;
}

.footer-mark {
	display: none;
}

.footer-booking__copy {
	padding-top: var(--space-l);
}

/* The closing invitation: section-heading scale and generous air, the last full stop of every page. */
.footer-booking {
	padding-block: var(--space-xl);
}

.footer-booking__title {
	max-width: 14em;
	margin-top: var(--space-m);
}

.footer-booking__text {
	margin-top: var(--space-xs);
	color: var(--edc-on-dark-soft);
}

.button--block {
	width: 100%;
	justify-content: center;
	text-align: center;
}

.footer-booking__action {
	margin-top: calc(var(--space-l) * -1 + var(--space-m));
}

.footer-block__label {
	margin-bottom: var(--space-xs);
}

.footer-block__body,
.footer-links {
	margin: 0;
	padding: 0;
	font-style: normal;
	color: var(--edc-on-dark-soft);
	list-style: none;
}

.footer-col--visit > .footer-block + .footer-block {
	margin-top: var(--space-m);
}

.footer-hours div + div {
	margin-top: var(--space-2xs);
}

.footer-hours dd {
	margin: 0;
}

.footer-links li + li {
	margin-top: var(--space-2xs);
}

.footer-links a {
	overflow-wrap: anywhere; /* long e-mail addresses must not widen the page on phones */
	text-decoration: none;
	transition: color var(--duration-normal) var(--ease-standard);
}

.footer-links a:hover,
.footer-links a:focus-visible {
	color: var(--edc-on-dark);
}

.footer-col--visit {
	grid-column: 1;
}

.footer-col--contact {
	grid-column: 2;
}

.footer-links--columns {
	columns: 2;
	column-gap: var(--space-s);
}

.footer-links--columns li {
	break-inside: avoid;
}

.footer-links--inline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2xs) var(--space-s);
}

.footer-links--inline li + li {
	margin-top: 0;
}

.footer-legal {
	font-size: var(--text-small);
	color: var(--edc-on-dark-soft);
}

.footer-legal .footer-grid {
	row-gap: var(--space-xs);
	align-items: baseline;
}

/* GTranslate appends its native <select> to the footer menu; undo the form-field styling and dress it as
   a footer utility. The open list is browser UI, so options get the footer's own dark/ivory pair. */
.footer-links .menu-item-gtranslate {
	position: relative;
}

.footer-links .gt_selector {
	width: auto;
	field-sizing: content; /* size to the chosen language, not the longest option */
	min-height: 2.5rem;
	padding: 0 2rem 0 0.75rem;
	border-color: color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 0;
	background: transparent;
	color: var(--edc-on-dark-soft);
	color-scheme: dark;
	font-family: var(--font-display);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	cursor: pointer;
	appearance: none;
	transition: color var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard);
}

.footer-links .gt_selector:hover,
.footer-links .gt_selector:focus-visible {
	border-color: currentColor;
	color: var(--edc-on-dark);
}

.footer-links .gt_selector option {
	background: var(--edc-dark);
	color: var(--edc-on-dark);
	text-transform: none;
}

/* Chevron in the text colour; clicks pass through to the select. */
.footer-links .menu-item-gtranslate::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.875rem;
	width: 0.375rem;
	height: 0.375rem;
	border-right: var(--border-width) solid var(--edc-on-dark-soft);
	border-bottom: var(--border-width) solid var(--edc-on-dark-soft);
	transform: translateY(-75%) rotate(45deg);
	pointer-events: none;
}

/* Slow, slight zoom on image hover (mouse only, motion allowed). Reuses the reveal transition. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.js .gallery__slide.is-revealed:hover img,
	.js .doctor:hover [data-reveal-image].is-revealed img {
		transform: scale(1.04);
	}
}

/* Touch: grow hit areas of text links and treatment titles without moving the layout. */
@media (pointer: coarse) {
	.treatment__trigger {
		padding-block: 0.75rem;
		margin-block: -0.75rem;
	}

	/* Pseudo hit area: text links keep their own margins. */
	.button--text {
		position: relative;
	}

	.button--text::before {
		content: "";
		position: absolute;
		inset: -0.75rem 0;
	}
}