/**
 * responsive.css — Lumovex 2.0 mobile & tablet polish (Phase 9).
 *
 * The final file in the cascade, so it overrides anything below it at smaller
 * breakpoints. Earlier phases already made the collections responsive and dropped the
 * orbit/pipeline back to grids below 980px; this layer refines the experience for
 * phones and tablets: content-height scenes (instead of ten forced full viewports),
 * full-width hero buttons and comfortable tap targets, a mobile-safe theater close,
 * lighter card effects for performance, and a stacked footer.
 *
 * @package Lumovex_2
 * @since   2.0 (Phase 9)
 */

/* ---------------------------------------------------------------------------
 * <= 980px — large tablet
 * ------------------------------------------------------------------------- */
@media (max-width: 980px) {
	.lvx-scene {
		padding-block: var(--lvx-sp-60);
	}
}

/* ---------------------------------------------------------------------------
 * <= 768px — tablet portrait / large phones
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	:root {
		--lvx-header-h: 3.75rem;
	}

	/* Content-height scenes scroll far better than forced full viewports. */
	.lvx-scene {
		min-height: auto;
		padding-block: var(--lvx-sp-50);
	}
	.lvx-scene--gate {
		min-height: 86vh;
		min-height: 86svh;
	}

	.lvx-scene__title,
	.lvx-hero__title,
	.lvx-hero__sub,
	.lvx-scene__lead {
		max-width: 100%;
	}

	/* backdrop-filter blur is costly on mobile GPUs and can hurt legibility;
	   swap for a near-opaque panel on the cards. */
	.lvx-video-card,
	.lvx-pipeline-station,
	.lvx-project-card,
	.lvx-industry-card,
	.lvx-talent-card,
	.lvx-rights-card,
	.lvx-training-card,
	.lvx-tool-node,
	.lvx-tone-control {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: color-mix(in srgb, var(--lvx-panel) 96%, transparent);
	}
}

/* ---------------------------------------------------------------------------
 * <= 600px — phones
 * ------------------------------------------------------------------------- */
@media (max-width: 600px) {
	/* Full-width hero CTAs, stacked, with comfortable tap targets. */
	.lvx-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.lvx-hero__actions .wp-block-button,
	.lvx-hero__actions .wp-block-button__link {
		width: 100%;
	}

	/* WCAG-friendly minimum tap height for all buttons. */
	.lvx-btn .wp-block-button__link {
		min-height: 44px;
	}

	/* v2.7.0: center the theater on phones (the old bottom-sheet was tuned for
	   the removed 16:9 lock and left portrait clips sitting low with their
	   controls near the screen edge). Tight gutters give the clip the most
	   room; the close button lives just inside the dialog and stays tappable. */
	.lvx-theater {
		padding: var(--lvx-sp-20);
		align-items: center;
	}
	.lvx-theater__dialog {
		padding: var(--lvx-sp-20);
		width: 100%;
	}
	.lvx-theater__close {
		top: 6px;
		right: 6px;
		width: 44px;
		height: 44px;
	}

	/* Footer stacks. */
	.lvx-site-footer__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--lvx-sp-30);
	}

	/* Slightly tighter section rhythm. */
	.lvx-video-wall,
	.lvx-pipeline,
	.lvx-slate-wall,
	.lvx-rights-vault,
	.lvx-track-grid,
	.lvx-industry-stage,
	.lvx-casting-console,
	.lvx-tool-orbit {
		gap: var(--lvx-sp-30);
		margin-top: var(--lvx-sp-40);
	}
}

/* ---------------------------------------------------------------------------
 * <= 420px — small phones
 * ------------------------------------------------------------------------- */
@media (max-width: 420px) {
	.lvx-scene__content {
		padding-inline: var(--lvx-sp-30);
	}
	.lvx-eyebrow {
		letter-spacing: 0.16em;
	}
	.lvx-card,
	.lvx-video-card,
	.lvx-pipeline-station,
	.lvx-project-card,
	.lvx-industry-card,
	.lvx-talent-card,
	.lvx-rights-card,
	.lvx-training-card,
	.lvx-tool-node {
		padding: var(--lvx-sp-30);
	}
}

/* ---------------------------------------------------------------------------
 * Coarse-pointer (touch) — remove hover-only lifts so cards don't "stick"
 * ------------------------------------------------------------------------- */
@media (hover: none) {
	.lvx-video-card:hover,
	.lvx-pipeline-station:hover,
	.lvx-project-card:hover,
	.lvx-industry-card:hover,
	.lvx-talent-card:hover,
	.lvx-rights-card:hover,
	.lvx-training-card:hover,
	.lvx-tool-node:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * Cleanup pass — mobile Gate crop & always-reachable mute
 * ------------------------------------------------------------------------- */

/* Use the dedicated mobile Gate crop on phones instead of the desktop background.
   The editable desktop image block drives larger screens; on mobile it is hidden
   and the lighter 9:16 crop is painted as a background. (If you replace the Gate
   background in the editor, also replace lvx-gate-bg-mobile.webp on disk.) */
@media (max-width: 700px) {
	.lvx-scene--gate .lvx-scene__bg img {
		display: none;
	}
	.lvx-scene--gate .lvx-scene__bg {
		background: url("../img/scenes/gate/lvx-gate-bg-mobile.webp") center / cover no-repeat;
	}
}

/* The floating sound toggle is hidden on phones by default, but once sound is
   enabled the mute control must stay reachable — so reveal it whenever sound is on. */
@media (max-width: 680px) {
	body.lvx-sound-on .lvx-sound-toggle {
		display: inline-flex;
	}
}