/**
 * ZORA Academy — responsive behaviour.
 *
 * Most grids in this theme use intrinsic `auto-fit` tracks and therefore adapt
 * without media queries. The rules below handle the cases that need an actual
 * change of composition rather than a change of size:
 *
 *   900px  — navigation swaps to the mobile menu and the dialog becomes a
 *            bottom sheet (matches the design's own `narrow` breakpoint).
 *   1024px — the four-stage journey drops from 4 columns to 2, then to 1.
 */

/* ------------------------------------------------- Journey stage borders */
/*
 * Column count is pinned so the dividing rules stay predictable: an
 * `auto-fit` track count cannot be targeted from CSS, which would leave
 * stray left borders at the start of wrapped rows.
 */

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

@media (max-width: 1024px) {
	.z-journey {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Start of each row must not carry a left rule. */
	.z-journey__stage:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	.z-journey__stage:nth-child(even) {
		padding-right: 0;
	}

	/* Second row needs a top rule to stay separated. */
	.z-journey__stage:nth-child(n + 3) {
		margin-top: 28px;
		padding-top: 28px;
		border-top: 1px solid var(--z-border);
	}
}

@media (max-width: 700px) {
	.z-journey {
		grid-template-columns: minmax(0, 1fr);
	}

	.z-journey__stage {
		padding: 28px 0 0;
		border-left: 0;
	}

	.z-journey__stage:nth-child(n + 2) {
		margin-top: 0;
		padding-top: 28px;
		border-top: 1px solid var(--z-border);
	}
}

/* ------------------------------------------------- Navigation @ < 900px */

@media (max-width: 899px) {
	.z-nav {
		display: none;
	}

	.z-burger {
		display: flex;
	}

	/* The dialog becomes a bottom sheet, as in the source design. */
	.z-modal {
		align-items: flex-end;
		padding: 16px;
	}

	.z-modal__dialog {
		max-width: 100%;
		max-height: calc(100vh - 32px);
	}
}

@media (min-width: 900px) {
	/* The mobile panel must never linger once the desktop nav is back. */
	.z-mobile-nav {
		display: none;
	}
}

/* ------------------------------------------------------------- < 768px  */

@media (max-width: 768px) {
	.z-header__bar {
		gap: 16px;
	}

	.z-audience__head,
	.z-audience__foot {
		align-items: start;
	}

	.z-audience__foot {
		flex-direction: column;
		align-items: stretch;
	}

	.z-audience__foot .z-btn {
		align-self: flex-start;
	}

	.z-quote-card {
		padding: 28px 24px;
	}

	.z-map {
		height: 320px;
	}
}

/* -------------------------------------------------------------- < 560px */

@media (max-width: 560px) {
	.z-audience__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.z-carousel__controls {
		flex-wrap: wrap;
	}

	.z-entry__meta {
		gap: 12px;
	}
}

/* -------------------------------------------------------------- < 400px */

@media (max-width: 480px) {
	.z-statbar__cell {
		padding: 18px 20px;
	}

	.z-card {
		padding: 22px 20px 20px;
	}

	.z-map__card {
		position: static;
		max-width: none;
		border-top: 0;
	}
}

@media (max-width: 400px) {
	/*
	 * Full-width actions below 400px. The source design keeps the hero
	 * buttons on one line, which overflows a 360px viewport; stacking them
	 * preserves the intent without a horizontal scrollbar.
	 */
	.z-hero__actions .z-btn,
	.z-audience__foot .z-btn {
		width: 100%;
	}

	.z-hero__meta {
		gap: 14px 24px;
	}

	.z-btn {
		padding-inline: 22px;
	}

	.z-modal__head,
	.z-modal__body {
		padding-inline: 20px;
	}

	.z-card--form {
		padding: 24px 20px;
	}
}

/* ------------------------------------------------------ Coarse pointers */

@media (hover: none) {
	/* Hover-only affordances should not stick on touch devices. */
	.z-audience__row:hover {
		background: none;
	}
}

/* ------------------------------------------- No-JavaScript navigation */
/*
 * The burger is a disclosure control and does nothing without scripts, so
 * when they are unavailable it is hidden and the menu simply stays open.
 * The inline head script swaps `no-js` for `js` before paint, so this never
 * flashes on a normal page load.
 */

@media (max-width: 899px) {
	.no-js .z-burger {
		display: none;
	}

	.no-js .z-mobile-nav[hidden] {
		display: block;
	}
}