/**
 * Responsive — breakpoint overrides.
 *
 * The design is desktop-first in intent but built mobile-first in code: the
 * base styles describe the small screen, and these queries add complexity as
 * space allows. Breakpoints are in rem so they respect the user's font size.
 *
 * Scale:
 *   40rem  (640px)   large phone / small tablet
 *   56rem  (896px)   tablet — the editorial split becomes possible
 *   62rem  (992px)   desktop navigation appears
 *   75rem  (1200px)  wide desktop
 *   100rem (1600px)  very wide
 *
 * @package FlorenStyle
 */

/* -------------------------------------------------------------------------
 * Below 30rem — small phones
 *
 * The eyebrow tracking that reads as couture on a wide screen forces awkward
 * wrapping on a narrow one, so it is eased back.
 * ---------------------------------------------------------------------- */

@media (max-width: 29.999rem) {

	:root {
		--fs-tracking-eyebrow: 0.2em;
	}

	.fs-page-hero__content,
	.fs-hero__content {
		padding-block-end: var(--fs-space-xl);
	}
}

/* -------------------------------------------------------------------------
 * 40rem — large phone
 * ---------------------------------------------------------------------- */

@media (min-width: 40rem) {

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

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

	.fs-hero__actions,
	.fs-error__actions {
		gap: var(--fs-space-m);
	}
}

/* -------------------------------------------------------------------------
 * 56rem — the editorial split
 * ---------------------------------------------------------------------- */

@media (min-width: 56rem) {

	.fs-header__phone {
		display: inline-block;
	}

	/* The detail image overlaps the primary one on the Services page. */
	.fs-service__detail {
		display: block;
		position: absolute;
		z-index: 2;
		inline-size: 34%;
		max-inline-size: 15rem;
		right: -2.5rem;
		bottom: -3rem;
		box-shadow: var(--fs-shadow-lift);
	}

	/* On reversed rows the detail moves to the opposite corner. */
	.fs-split.is-reversed .fs-service__detail {
		right: auto;
		left: -2.5rem;
	}

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

	.fs-workshop__item--large {
		grid-column: span 3;
	}

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

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

	.fs-single__header {
		padding-block: var(--fs-section-y-tight) var(--fs-space-2xl);
	}
}

/* -------------------------------------------------------------------------
 * 62rem — desktop navigation
 * ---------------------------------------------------------------------- */

@media (min-width: 62rem) {

	.fs-nav {
		display: block;
	}

	.fs-nav-toggle {
		display: none;
	}

	.fs-header__cta {
		display: inline-flex;
	}

	.fs-mobile-nav {
		display: none !important;
	}

	.fs-hero__scroll {
		display: flex;
	}

	/* The projects mosaic gains its uneven rhythm. */
	.fs-projects__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-flow: dense;
	}

	.fs-projects__item--wide {
		grid-column: span 2;
	}

	.fs-projects__item--tall {
		grid-row: span 2;
	}

	.fs-projects__item--tall .fs-project {
		block-size: 100%;
	}

	.fs-projects__item--tall .fs-project__frame {
		aspect-ratio: auto;
	}

	/* The featured collection piece spans two columns and two rows. */
	.fs-collections__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.fs-collections__item--feature {
		grid-column: span 2;
		grid-row: span 2;
	}

	.fs-workshop__item--large {
		grid-column: span 2;
		grid-row: span 2;
	}

	.fs-workshop__gallery {
		grid-template-rows: repeat(2, minmax(0, 1fr));
	}

	.fs-workshop__item--large .fs-media__frame {
		block-size: 100%;
	}

	.fs-footer__top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
		gap: var(--fs-space-3xl);
	}

	.fs-pillars__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--fs-space-2xl) var(--fs-grid-gap);
	}
}

/* -------------------------------------------------------------------------
 * 75rem — wide desktop
 * ---------------------------------------------------------------------- */

@media (min-width: 75rem) {

	.fs-hero__content {
		padding-block: var(--fs-space-4xl) var(--fs-space-3xl);
	}

	.fs-service__detail {
		inline-size: 30%;
		right: -3.5rem;
		bottom: -4rem;
	}

	.fs-split.is-reversed .fs-service__detail {
		left: -3.5rem;
	}

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

/* -------------------------------------------------------------------------
 * 100rem — very wide
 * ---------------------------------------------------------------------- */

@media (min-width: 100rem) {

	.fs-hero {
		max-block-size: 66rem;
	}
}

/* -------------------------------------------------------------------------
 * Short viewports
 *
 * On a landscape phone a full-height hero leaves no room for the content
 * beneath it, so the minimum height is relaxed.
 * ---------------------------------------------------------------------- */

@media (max-height: 34rem) and (orientation: landscape) {

	.fs-hero {
		min-block-size: 34rem;
	}

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

/* -------------------------------------------------------------------------
 * Coarse pointers
 *
 * Hover-only affordances are removed, and the hit areas that matter are
 * enlarged to meet the 44px minimum target guidance.
 * ---------------------------------------------------------------------- */

@media (hover: none) {

	.fs-media--zoom:hover .fs-media__frame img,
	.fs-project:hover .fs-project__frame img,
	a:hover .fs-media--zoom .fs-media__frame img {
		transform: none;
	}

	.fs-nav-toggle,
	.fs-back-to-top {
		min-inline-size: 44px;
		min-block-size: 44px;
	}

	.fs-social a {
		inline-size: 2.75rem;
		block-size: 2.75rem;
	}
}

/* -------------------------------------------------------------------------
 * Forced colours (Windows high contrast)
 * ---------------------------------------------------------------------- */

@media (forced-colors: active) {

	.fs-button,
	.fs-social a,
	.fs-back-to-top {
		border: 1px solid ButtonBorder;
	}

	.fs-button__line,
	.fs-hero__scrim,
	.fs-page-hero__scrim,
	.fs-error__scrim {
		display: none;
	}

	.fs-hero__title,
	.fs-page-hero__title,
	.fs-error__title {
		text-shadow: none;
	}
}