/* =========================================================================
   LUMA — responsive
   Breakpoints are chosen around the layouts, then checked at the target
   widths: 375, 430, 768, 1024, 1280, 1440+.
   Layouts are rebuilt per breakpoint rather than scaled down.
   ========================================================================= */

/* --------------------------------------------------- 1440px and wider */
@media (min-width: 90rem) {
	:root {
		--logo-h: 4.25rem;
		--header-h: 5.75rem;
	}

	.hero__inner {
		gap: 5rem;
	}
}

/* ------------------------------------------- ≤ 1023px (small laptop / tablet) */
@media (max-width: 63.99rem) {
	:root {
		--logo-h: 3.5rem;
		--header-h: 4.875rem;
	}

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

	.section-head--split {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	.section-head--split .section-lead {
		grid-column: 1;
		padding-block-end: 0;
	}

	.contact__inner,
	.newsletter__panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.newsletter__panel {
		gap: var(--space-l);
	}

	.hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
		gap: var(--space-l);
	}

	.hero__title {
		max-inline-size: 20ch;
	}
}

/* ------------------------------------------ ≤ 899px: stack hero, mobile nav */
@media (max-width: 56.24rem) {
	.site-header__inner {
		flex-wrap: nowrap;
	}

	.nav-toggle {
		display: inline-flex;
	}

	/* The panel is closed by default and revealed by [data-open="true"]. */
	.site-nav {
		position: fixed;
		inset-block-start: var(--header-h);
		inset-inline: 0;
		z-index: 90;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		max-block-size: calc(100dvh - var(--header-h));
		padding: var(--space-s) var(--container-pad) var(--space-l);
		background-color: var(--color-background);
		border-block-start: 1px solid var(--color-border);
		box-shadow: var(--shadow-m);
		overflow-y: auto;
		overscroll-behavior: contain;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-0.75rem);
		transition:
			opacity var(--dur) var(--ease),
			transform var(--dur) var(--ease),
			visibility var(--dur) var(--ease);
	}

	.site-nav[data-open="true"] {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
	}

	/* Stop the page behind the panel from scrolling. */
	body.luma-nav-open {
		overflow: hidden;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.site-nav__item + .site-nav__item {
		border-block-start: 1px solid var(--color-border);
	}

	.site-nav__link {
		display: block;
		padding-block: 0.9375rem;
		font-size: var(--step-1);
	}

	.site-nav__link::after {
		display: none;
	}

	.lang-switch {
		align-self: flex-start;
		margin-block-start: var(--space-m);
	}

	/* --- hero stacks, image first for a strong mobile opening --- */
	.hero {
		padding-block-start: var(--space-l);
	}

	.hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-l);
	}

	.hero__media {
		order: -1;
	}

	.hero__copy {
		max-inline-size: 40rem;
	}

	.hero__frame {
		aspect-ratio: 4 / 3;
		max-block-size: none;
	}

	.hero__caption {
		display: none;
	}

	.hero__notes {
		margin-block-start: var(--space-l);
	}

	.products__head {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-m);
	}

	.carousel__controls {
		justify-content: flex-start;
	}
}

/* Between the two-column hero appearing and the viewport getting roomy, the
   copy column is too narrow for three side-by-side notes. */
@media (min-width: 56.25rem) and (max-width: 71.24rem) {
	.hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
	}

	.hero__notes {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-2xs);
	}

	.hero__note {
		flex-direction: row;
		align-items: baseline;
		gap: var(--space-2xs);
		padding-inline-end: 0;
	}

	.hero__note + .hero__note {
		border-inline-start: 0;
		padding-inline-start: 0;
		padding-block-start: var(--space-2xs);
		border-block-start: 1px solid var(--color-border);
	}
}

/* --------------------------------------------------- ≤ 767px (phones) */
@media (max-width: 47.99rem) {
	:root {
		--logo-h: 3.125rem;
		--header-h: 4.5rem;
	}

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

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

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

	.benefit__title,
	.benefit__text {
		max-inline-size: 40ch;
	}

	.hero__notes {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-s);
	}

	.hero__note {
		flex-direction: row;
		align-items: baseline;
		gap: var(--space-2xs);
		padding-inline-end: 0;
	}

	.hero__note + .hero__note {
		border-inline-start: 0;
		padding-inline-start: 0;
		padding-block-start: var(--space-s);
		border-block-start: 1px solid var(--color-border);
	}

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

	.field--half {
		grid-column: 1;
	}

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

	.newsletter__submit {
		grid-column: 1;
		justify-content: center;
	}

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

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

	.to-top {
		display: none;
	}
}

/* ------------------------------------------------- ≤ 480px (small phones) */
@media (max-width: 30rem) {
	.hero__title {
		max-inline-size: none;
	}

	.hero__actions .btn {
		flex: 1 1 100%;
		justify-content: center;
	}

	.product {
		inline-size: min(82vw, 18rem);
	}

	.site-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-l);
	}

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

	.contact__form-wrap {
		padding-inline: var(--space-s);
	}

	.btn {
		padding-inline: 1.25rem;
	}
}

/* ------------------------------------------- carousel slide sizing steps */
@media (min-width: 48rem) {
	.product {
		inline-size: min(42vw, 20rem);
	}
}

@media (min-width: 64rem) {
	.product {
		inline-size: min(30vw, 21rem);
	}
}

@media (min-width: 80rem) {
	.product {
		inline-size: min(24vw, 22rem);
	}
}

/* --------------------------------------- pointer-precision refinements */
@media (hover: none) {
	.carousel__track {
		cursor: auto;
	}

	.product__card:hover .product__image {
		transform: none;
	}
}

/* ------------------------------------------------------- forced colours */
@media (forced-colors: active) {
	.site-header,
	.contact__form-wrap,
	.benefits__grid,
	.field__control {
		border: 1px solid CanvasText;
	}

	.btn {
		border: 1px solid ButtonText;
	}
}