/**
 * Aurea — responsive layer.
 * Layout is intrinsic/fluid first (clamp, minmax, container queries). These
 * breakpoints only handle structural shifts that fluid rules can't express.
 *
 * Named breakpoints (min-width unless noted):
 *   xs   360px  small phone
 *   sm   480px  large phone
 *   md   768px  tablet portrait
 *   lg   1024px tablet landscape / small laptop
 *   xl   1280px laptop / desktop
 *   2xl  1600px large desktop / ultrawide
 *
 * @package Aurea
 */

/* Container-query components: cards adapt to their own width, not the viewport. */
.fse-cq .fse-card-inner {
	display: grid;
	gap: 1rem;
}
@container (min-width: 480px) {
	.fse-cq .fse-card-inner--split {
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}
}

/* Mobile: collapse vertical-divider columns to stacked with top rules. */
@media (max-width: 781px) {
	.wp-block-columns.is-style-aurea-dividers > .wp-block-column + .wp-block-column {
		border-left: 0;
		border-top: 1px solid var(--fse-line);
		padding-left: 0;
		padding-top: 1.5rem;
	}

	/* Tighten sticky offset on small screens where header is shorter. */
	.fse-sticky {
		position: static;
	}

	/* Header CTA can hide on very small screens if flagged. */
	.fse-hide-on-mobile {
		display: none !important;
	}
}

/* Large phone and up: eyebrow line grows. */
@media (min-width: 480px) {
	.fse-eyebrow::before {
		width: 2.5rem;
	}
}

/* Tablet portrait: 2-up service/portfolio grids handled by block columns;
   ensure floating shapes shrink so they don't overflow. */
@media (max-width: 1023px) {
	.fse-floating-shape {
		max-width: 50vw;
		max-height: 50vw;
	}
}

/* Ultrawide: cap decorative glows so they don't wash out huge viewports. */
@media (min-width: 1600px) {
	body {
		background-size: 1600px 900px, 1600px 900px;
	}
}

/* High-DPI: nudge hairlines so 1px borders don't disappear. */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.fse-header,
	.fse-footer {
		border-color: rgba(255,255,255,0.14);
	}
}

/* Coarse pointer (touch): remove hover-only lifts to avoid sticky states. */
@media (hover: none) and (pointer: coarse) {
	.fse-card:hover,
	.wp-block-button__link:hover {
		transform: none;
	}
	.wp-block-image.is-style-aurea-tilt:hover img {
		transform: none;
	}
}

/* Print: strip decoration, force readable dark-on-light. */
@media print {
	body {
		background: #fff !important;
		color: #000 !important;
	}
	.fse-header,
	.fse-footer,
	.fse-floating-shape,
	.wp-block-button {
		display: none !important;
	}
}