/* responsive.css — breakpoint overrides (768 / 1024 / 1280). */

/* Base — mobile-first is applied in the other 13 files. */

@media (max-width: 767px) {
	.section {
		padding-top: var(--s-48);
		padding-bottom: var(--s-48);
	}
	.section--spacious {
		padding-top: var(--s-80);
		padding-bottom: var(--s-80);
	}
	.hero--halfpage {
		min-height: auto;
	}
	.hero__photo-wrap {
		min-height: 280px;
		max-height: 50vh;
	}
	.hero__content {
		padding: var(--s-32) var(--s-16);
	}
	h1 {
		font-size: clamp(1.75rem, 7vw, 2.375rem);
	}
	h2 {
		font-size: clamp(1.375rem, 5vw, 1.75rem);
	}
	/* Buttons stack full-width on mobile */
	.btn-row {
		flex-direction: column;
		align-items: stretch;
	}
	.btn-row .btn-primary,
	.btn-row .btn-secondary,
	.btn-row .btn-tertiary {
		width: 100%;
		text-align: center;
	}
	/* Two-col image goes above text on mobile */
	.two-col--reversed .two-col__media {
		order: -1;
	}
	/* Footer stacks fully */
	.footer__cols {
		gap: var(--s-32);
	}
	.footer__disclaimer {
		padding: var(--s-16);
		font-size: 0.6875rem;
	}
	/* Filter bar scroll on narrow */
	.filter-bar {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: var(--s-8);
	}
	.filter-btn {
		flex-shrink: 0;
	}
	/* Tabs stack on mobile */
	.tabs {
		flex-direction: column;
		gap: 0;
		border-bottom: none;
	}
	.tab {
		border-bottom: 1px solid var(--c-border);
		text-align: left;
	}
	/* Leaderboard table horizontal scroll */
	.leaderboard-wrap {
		overflow-x: auto;
	}
	/* Steps stack */
	.steps {
		grid-template-columns: 1fr;
	}
	/* Gallery 1 col */
	.gallery-grid {
		grid-template-columns: 1fr;
	}
	/* Forms full width */
	.pr-form__row--2,
	.pr-form__row--3 {
		grid-template-columns: 1fr;
	}
	.pr-form__radio-group {
		grid-template-columns: 1fr;
	}
	/* Hours table wider */
	.hours-table {
		max-width: 100%;
	}
	/* Four-col to 1 col */
	.four-col {
		grid-template-columns: 1fr;
	}
	/* Zone card smaller padding */
	.zone-card {
		padding: var(--s-32) var(--s-24);
	}
	/* Fullbleed hero on mobile */
	.hero--fullbleed {
		min-height: 80vh;
	}
	.hero--fullbleed .hero__content {
		padding: var(--s-48) var(--s-16);
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.section {
		padding-top: var(--s-64);
		padding-bottom: var(--s-64);
	}
	.hero--halfpage {
		min-height: 72vh;
	}
}

@media (min-width: 1024px) {
	/* Desktop layout confirmed in hero/layout/cards files. */
}

@media (min-width: 1280px) {
	.container {
		padding-left: var(--s-32);
		padding-right: var(--s-32);
	}
}