/* ==========================================================================
   Elite Dental Clinic — responsive.css
   Breakpoints (from the reference audit; custom properties can't be used in
   media queries, so they are written out):
     tablet   ≥ 810px  (50.625rem)
     desktop  ≥ 1200px (75rem)
     wide     ≥ 1440px (90rem) — inline navigation replaces the menu toggle
   Test widths: 1440 / 1024 / 768 / 390.
   ========================================================================== */

/* Tablet ------------------------------------------------------------------ */

@media (min-width: 50.625rem) {
	/* Reference keeps 128px opening padding from tablet up (64px on phones). */
	:root {
		--section-space-lg: 8rem;
		--text-display: 2.8125rem;
		--text-heading: 2.3125rem;
		--text-heading-sm: 1.9375rem;
		--text-title: 1.375rem;
		--text-feature: 1.125rem;
		--text-lede: 1.1875rem;
		--text-eyebrow: 1.1875rem;
		--text-reading: 1.1875rem;
	}

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

	.page-hero {
		grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
		column-gap: var(--grid-gap);
	}

	.page-hero > * {
		grid-column: 2 / span 8;
	}

	/* Homepage sections */
	.section-grid {
		grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
		align-items: start;
	}

	/* 39px tall incl. border, as measured on the reference hero. */
	.button--lg {
		min-height: 0;
		padding: 0.6875rem 1.5rem;
	}

	.hero__inner {
		grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
		padding-bottom: 6rem;
	}

	.hero__content {
		grid-column: 2 / span 6;
	}

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

	.home-intro__copy {
		grid-column: 2 / span 5;
		grid-row: 1;
	}

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

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

	.home-intro__media {
		grid-column: 7 / -1;
		grid-row: 1;
		margin-top: 0;
	}

	.section-head {
		grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
	}

	.section-head__label {
		grid-column: 2 / span 8;
	}

	.gallery-controls {
		grid-column: 11 / -1;
		justify-self: end;
	}

	.section-head__title {
		grid-column: 2 / span 8;
	}

	.section-head__link {
		grid-column: 10 / -1;
		grid-row: 2;
		justify-self: end;
		align-self: end;
		margin-top: 0;
	}

	.gallery__track {
		grid-auto-columns: calc((100% - 2 * var(--grid-gap)) / 3);
	}

	/* Content from column 2 = one column + one gap in. */
	.reassurance,
	.treatments {
		margin-left: calc((100% - 11 * var(--grid-gap)) / 12 + var(--grid-gap));
	}

	.reassurance {
		gap: var(--space-l) var(--space-m);
		margin-top: var(--space-l);
	}

	/* Treatments side by side: the 4:5 image holds in columns 2–5 while the list scrolls in 7–12. */
	.treatments {
		display: grid;
		grid-template-columns: repeat(11, minmax(0, 1fr));
		column-gap: var(--grid-gap);
		align-items: start;
		margin-top: var(--space-l);
	}

	.treatments__media {
		grid-column: 1 / span 4;
		top: calc(var(--header-height) + var(--admin-offset, 0px) + var(--space-l));
		aspect-ratio: 4 / 5;
		max-height: none;
		margin: 0;
	}

	.treatments__list {
		grid-column: 6 / -1;
		border-top: var(--border-width) solid var(--edc-border);
	}

	.treatment {
		min-height: 38vh;
	}

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

	.home-doctors__copy {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		grid-column: 2 / span 4;
		grid-row: 1;
		align-self: stretch;
	}

	.home-doctors__list {
		grid-column: 6 / -1;
		grid-row: 1;
		margin-top: 0;
	}

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

	.footer-mark {
		display: block;
		grid-column: 1;
		grid-row: 1;
		width: 1.25rem;
		color: var(--edc-on-dark-soft);
	}

	.footer-mark .icon {
		width: 1.25rem;
		height: 1.25rem;
	}

	.footer-booking {
		padding-block: var(--space-2xl) var(--space-xl);
	}

	.footer-booking__copy {
		grid-column: 2 / span 6;
		grid-row: 1;
		padding-top: 0;
	}

	.footer-booking__action {
		grid-column: 9 / -1;
		grid-row: 1;
		align-self: end;
		margin-top: 0;
	}

	.footer-col--visit {
		grid-column: 2 / span 4;
	}

	.footer-col--contact {
		grid-column: 6 / span 4;
	}

	.footer-col--nav {
		grid-column: 2 / -1;
	}

	.footer-legal__copy {
		grid-column: 2 / span 4;
	}

	.footer-legal__nav {
		grid-column: 6 / -1;
	}

	.site-header__actions {
		gap: var(--space-s);
	}

	.button.site-header__cta {
		--button-line: 2rem;
	}

	.site-brand {
		letter-spacing: 0.02em;
	}

	/* Phase 3: archives and detail pages */
	.card-grid--treatments,
	.card-grid--doctors,
	.card-grid--doctors-lead,
	.card-grid--doctors-three {
		margin-left: calc((100% - 11 * var(--grid-gap)) / 12 + var(--grid-gap));
	}

	/* Two lead portraits: capped so a pair never fills the screen height (was ~633×791 at 1440). */
	.card-grid--doctors-lead {
		grid-template-columns: repeat(2, minmax(0, 26rem));
		column-gap: var(--space-l);
	}

	/* Treatments index: the column gap widens to one grid column. */
	.card-grid--treatments:not(.card-grid--three) {
		column-gap: calc((100% - 11 * var(--grid-gap)) / 12 + var(--grid-gap));
	}

	.card-grid--three {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Exactly four (a doctor with four treatments): one row of four, no orphan. */
	.card-grid--three:has(> :nth-child(4):last-child) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.card-grid--doctors,
	.card-grid--doctors-three {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.treatment-card__media {
		aspect-ratio: 4 / 5;
	}

	.detail-hero {
		height: 25.4375rem;
	}

	.detail-hero__inner {
		grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
		padding-bottom: 2.625rem;
	}

	.detail-hero__content {
		grid-column: 2 / span 7;
	}

	.detail-layout {
		grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
	}

	/* Sections share the page grid: index in column 1, copy in columns 2–7. */
	.detail-main {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / span 7;
		align-content: start;
	}

	.detail-section {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / -1;
		padding-bottom: var(--space-xl);
	}

	.detail-section__body {
		grid-column: 2 / -1;
	}

	/* Aside sticks below the header while the sections scroll (reference: top 64 + 64 padding). */
	/* Reference: 420px card, right-aligned in its column (full width below 810). */
	.booking-card {
		max-width: 26.25rem;
		margin-left: auto;
	}

	.detail-aside {
		grid-column: 9 / -1;
		align-self: start;
		position: sticky;
		top: var(--header-height);
		padding-block: var(--space-xl);
	}

	.profile-hero {
		grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
		align-items: end;
		padding-top: 10rem;
		padding-bottom: var(--space-xl);
	}

	.profile-hero__copy {
		grid-column: 2 / span 6;
		grid-row: 1;
	}

	.profile-hero__media {
		grid-column: 8 / -1;
		grid-row: 1;
		order: 0;
	}
}

/* Desktop ----------------------------------------------------------------- */

@media (min-width: 75rem) {
	:root {
		--text-display: 3.5625rem;
		--text-heading: 2.875rem;
		--text-heading-sm: 2.3125rem;
		--text-title: 1.4375rem;
		--text-feature: 1.1875rem;
		--text-prose: 1.3125rem;
		--text-reading: 1.3125rem;
	}

	.card-grid--doctors {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.detail-hero {
		height: 26.1875rem;
	}

	.detail-hero__content {
		grid-column: 2 / span 6;
	}

	.booking-card__body {
		padding: var(--space-m);
	}

	.booking-card__title {
		font-size: 1.8125rem;
	}

	.profile-hero__copy {
		grid-column: 2 / span 5;
	}

	.page-hero > * {
		grid-column: 2 / span 6;
	}

	.hero__inner {
		align-items: center;
		padding-block: var(--header-height);
	}

	.hero__content {
		grid-column: 2 / span 6;
	}

	/* The homepage statement: one step above the shared display size, still two lines. */
	.hero__title {
		font-size: 4.5rem;
	}

	.hero__cta {
		margin-top: var(--space-l);
	}

	.home-intro__copy {
		grid-column: 2 / span 4;
		align-self: stretch;
	}

	/* Link rests on the image's bottom edge. */
	.home-intro__link {
		margin-top: auto;
		padding-top: var(--space-m);
	}

	.home-intro__media {
		grid-column: 6 / -1;
	}

	.reassurance {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.home-doctors__link {
		margin-top: auto;
		padding-top: var(--space-m);
	}

	.footer-booking__copy {
		grid-column: 2 / span 5;
	}

	.footer-booking__action {
		grid-column: 10 / -1;
	}

	.footer-col--visit {
		grid-column: 2 / span 3;
	}

	.footer-col--contact {
		grid-column: 5 / span 3;
	}

	.footer-col--nav {
		grid-column: 10 / -1;
		grid-row: 1;
	}
}

/* Wide: inline navigation ------------------------------------------------- */

@media (min-width: 90rem) {
	.site-nav {
		display: block;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.menu-toggle,
	.site-menu {
		display: none;
	}
}

/* ==========================================================================
   Phase 4: Clinic, Contact, Journal, articles (content.css)
   ========================================================================== */

@media (min-width: 37.5rem) {
	.clinic-space {
		--rail-card: clamp(15rem, 40vw, 22rem);
	}

	/* Approach steps: photograph and text side by side. */
	.approach__step {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
		gap: var(--space-s);
	}

	.approach__step-body {
		margin-top: 0;
	}
}

@media (min-width: 50.625rem) {
	.clinic-row {
		padding-block: var(--space-xl);
	}

	.clinic-intro__body {
		grid-column: 2 / span 7;
	}

	.clinic-space__text,
	.clinic-approach__text,
	.approach,
	.clinic-tech__copy,
	.clinic-tech__collage,
	.clinic-team__grid {
		margin-left: calc((100% - 11 * var(--grid-gap)) / 12 + var(--grid-gap));
	}

	/* The rail starts on column 2 and bleeds off the right edge. */
	.clinic-space__viewport {
		margin-left: calc((100% - 11 * var(--grid-gap)) / 12 + var(--grid-gap));
		scroll-padding-left: 0;
	}

	.clinic-space__grid {
		padding-left: 0;
	}

	.clinic-approach__text {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Layered collage: square, 3:2 and wide frames set on one baseline. */
	.clinic-tech__collage {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.78fr);
		align-items: end;
	}

	.clinic-tech__image--1 {
		aspect-ratio: 1;
	}

	.clinic-tech__image--2 {
		aspect-ratio: 1.5;
	}

	.clinic-tech__image--3 {
		aspect-ratio: 1.78;
	}

	.clinic-history__head {
		grid-column: 2 / span 4;
		grid-row: 1;
		align-self: start;
		position: sticky;
		top: calc(var(--header-height) + var(--space-m));
	}

	.timeline {
		grid-column: 6 / -1;
		grid-row: 1;
		margin-top: 0;
	}

	.timeline__item {
		grid-template-columns: 9rem minmax(0, 1fr);
	}
}

@media (min-width: 75rem) {
	.clinic-hero > * {
		grid-column: 2 / span 7;
	}

	/* The space: intro on columns 2–5, the rail beside it to the screen edge, cards gently staggered. */
	.clinic-space {
		--rail-card: clamp(17.5rem, 24vw, 25rem);
	}

	.clinic-space__inner {
		--col: calc((100% - 11 * var(--grid-gap)) / 12);
		display: flex;
		align-items: center;
		column-gap: calc(var(--col) + 2 * var(--grid-gap));
	}

	.clinic-space__intro {
		flex: 0 0 calc(4 * var(--col) + 3 * var(--grid-gap));
		margin-left: calc(var(--col) + var(--grid-gap));
	}

	.clinic-space__intro .section-head {
		display: block;
	}

	.clinic-space__intro .clinic-space__text {
		margin-left: 0;
	}

	.clinic-space__viewport {
		flex: 1 1 0;
		min-width: 0;
		margin: 0 calc((100% - 100vw) / 2) 0 0;
	}

	.clinic-space__item:nth-child(even) {
		margin-top: var(--space-xl);
	}
}

/* Pinned rail (clinic.js adds .is-pinned and the section height): vertical scroll glides the cards
   sideways while the stage holds. Only with room to spare and motion welcome; otherwise native swipe. */
@media (min-width: 75rem) and (min-height: 43.75rem) and (prefers-reduced-motion: no-preference) {
	.clinic-space.is-pinned {
		padding-block: 0;
	}

	.clinic-space.is-pinned .clinic-space__stage {
		position: sticky;
		top: 0;
		display: flex;
		align-items: center;
		height: 100vh;
		padding-top: var(--header-height);
	}

	.clinic-space.is-pinned .clinic-space__inner {
		width: 100%;
	}

	.clinic-space.is-pinned .clinic-space__viewport {
		overflow: hidden;
		mask-image: linear-gradient(90deg, transparent, currentColor var(--space-l));
	}

	.clinic-space.is-pinned .clinic-space__grid {
		will-change: transform;
	}

	/* Approach: the frame holds beside the steps; each step wipes its photograph in. */
	.approach {
		display: grid;
		grid-template-columns: repeat(11, minmax(0, 1fr));
		column-gap: var(--grid-gap);
		align-items: start;
	}

	.approach__media {
		display: block;
		grid-column: 1 / span 6;
		grid-row: 1;
		position: sticky;
		top: calc(var(--header-height) + var(--space-l));
		aspect-ratio: 1.58;
	}

	.approach__frame {
		position: absolute;
		inset: 0;
		clip-path: inset(100% 0 0 0);
		transition: clip-path 1.1s var(--ease-mask);
	}

	.approach__frame.is-shown {
		clip-path: inset(0);
	}

	.approach__frame img {
		transform: scale(var(--reveal-scale));
		transition: transform 1.6s var(--ease-editorial);
	}

	.approach__frame.is-shown img {
		transform: none;
	}

	.approach__steps {
		grid-column: 8 / -1;
		grid-row: 1;
		gap: 0;
	}

	.approach__step {
		display: block;
		min-height: 50vh;
	}

	.approach__step:last-child {
		min-height: 0;
		padding-bottom: var(--space-xl);
	}

	.approach__step-media {
		display: none;
	}

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

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

@media (min-width: 37.5rem) {
	.form-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 50.625rem) {
	/* Contact opens 128px below the hero (reference), map aligned with it. */
	.contact-page .detail-section:first-child,
	.contact-page .detail-aside {
		padding-top: var(--space-2xl);
	}

	.contact__details {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.map-panel__media {
		aspect-ratio: 0.75;
	}
}

@media (min-width: 75rem) {
	.map-panel__body {
		padding: var(--space-m);
	}
}

@media (min-width: 50.625rem) {
	.journal-filter,
	.card-grid--journal,
	.page-prose {
		margin-left: calc((100% - 11 * var(--grid-gap)) / 12 + var(--grid-gap));
	}

	/* The newest article leads: a wide photograph with its caption set low beside it. */
	.card-grid--journal > :first-child .journal-card__link {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
		grid-template-rows: 1fr repeat(4, auto);
		column-gap: calc((100% - 11 * var(--grid-gap)) / 12 + var(--grid-gap));
	}

	.card-grid--journal > :first-child .journal-card__media {
		grid-row: 1 / -1;
		aspect-ratio: 3 / 2;
	}

	.card-grid--journal > :first-child :is(.journal-card__meta, .journal-card__title, .journal-card__excerpt, .journal-card__more) {
		grid-column: 2;
	}

	.card-grid--journal > :first-child .journal-card__meta {
		grid-row: 2;
	}

	.card-grid--journal > :first-child .journal-card__title {
		font-size: var(--text-heading-sm);
		letter-spacing: var(--tracking-heading);
	}

	.article__media {
		margin-top: 3.3125rem;
	}

	.article__body {
		padding-top: 6rem;
	}

	.next-article__link {
		min-height: 29rem;
	}
}