/* ============================================================
 * LUMEN — Global responsive hardening (loaded last, site-wide).
 * Only contains mobile/tablet rules; desktop layout untouched.
 * ============================================================ */

/* ---- Removed: home hero top eyebrow bar (per request) ---- */
.lh-hero-top { display: none !important; }

/* ---- Global safety: no sideways scroll, fluid media ---- */
html, body { overflow-x: clip; }
img, svg, video { max-width: 100%; }
.kgal img, .la-about img, .lh-work-item img, .lac-left img { height: auto; }

/* Prevent iOS auto-zoom on focus (any field < 16px) */
@media (max-width: 782px) {
	.lac-form-wrap input, .lac-form-wrap textarea, .lac-form-wrap select,
	.nife-booking input, .nife-booking select, .nife-booking textarea,
	.woocommerce form .form-row input.input-text, .woocommerce textarea,
	.search-field, input[type="search"] { font-size: 16px !important; }
}

/* ============================================================
 * TABLET  (<= 1024px)
 * ============================================================ */
@media (max-width: 1024px) {
	/* portfolio masonry: 3 -> 2 columns */
	.kg-grid { column-count: 2; }
	/* shop / about / home work grids ease down */
	.la-shop .la-prodgrid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
 * STACK POINT  (<= 900px) — collapse 2-col splits that never did
 * ============================================================ */
@media (max-width: 900px) {
	.lh-hero-grid { grid-template-columns: 1fr; gap: clamp(26px, 5vw, 40px); }
	.lh-hero-visual { max-width: 460px; margin: 0 auto; width: 100%; }
	.la-about .la-hero { grid-template-columns: 1fr; gap: 32px; }
	.la-book .la-hero { grid-template-columns: 1fr; gap: 28px; }
	.lac-grid { grid-template-columns: 1fr; }
	/* Nife booking layout (session list + form) stacks */
	.booking-grid--page, .booking-grid { grid-template-columns: 1fr !important; display: block; }
	.booking-grid--page .bk-left, .booking-grid--page .bk-right { width: auto; }
}

/* ============================================================
 * PHONE  (<= 600px)
 * ============================================================ */
@media (max-width: 600px) {
	/* portfolio masonry: single column */
	.kg-grid { column-count: 1; }

	/* tame oversized display headings (clamp minimums too large for phones) */
	.lh-h1 { font-size: clamp(2.15rem, 9.5vw, 3.1rem); line-height: 1.02; }
	.lh-cta-title { font-size: clamp(2rem, 8.5vw, 3rem); }
	.lh-disc-name { font-size: clamp(1.7rem, 8vw, 2.4rem); }
	.lh-work-title { font-size: clamp(1.8rem, 8vw, 2.6rem); }
	.kg-title { font-size: clamp(2.2rem, 11vw, 3.4rem); }
	.la-about .la-head { font-size: clamp(2.1rem, 9.5vw, 3.1rem); }
	.la-book .la-head { font-size: clamp(2.15rem, 9.5vw, 3.1rem); }
	.la-shop .la-shero-title { font-size: clamp(2.2rem, 9.5vw, 3.2rem); }
	.lcat-title { font-size: clamp(2.1rem, 9.5vw, 3.3rem); }
	.lac-head { font-size: clamp(1.9rem, 8.5vw, 2.8rem); }

	/* tighten oversized section padding a touch */
	.lac { padding-left: 16px; padding-right: 16px; }
	.lcat-hero-inner { padding-left: 20px; padding-right: 20px; }

	/* stat row stays readable */
	.la-about .la-meta { gap: 14px; }
	.la-about .la-meta-item strong { font-size: clamp(1.05rem, 6vw, 1.4rem); }
}

/* ============================================================
 * SMALL PHONE  (<= 400px)
 * ============================================================ */
@media (max-width: 400px) {
	.lac-details { grid-template-columns: 1fr; }
	.la-about .la-meta { grid-template-columns: 1fr 1fr; }
	.lh-hero-actions { gap: 12px; }
}

/* ============================================================
 * FILTER TABS — fix the sliding indicator when tabs wrap.
 * The .kg-ind / .la-ind pill is height:100%; once tabs wrap to
 * multiple rows it becomes a tall oval behind the buttons.
 * On wrapped layouts: hide it and fill the active tab directly.
 * ============================================================ */
@media (max-width: 1024px) {
	.kg-ind, .la-book .la-ind { display: none !important; }
	.kg-tab.is-active, .la-book .la-tab.is-active {
		background: linear-gradient(135deg, #5C6B50, #37362F) !important;
		border-color: #37362F !important;
		color: #F4EFE6 !important;
		border-radius: 9999px;
	}
}

/* ============================================================
 * MOBILE NAV — let parent items (e.g. "Shop") navigate, and
 * show their submenus expanded inline instead of a tap-toggle.
 * ============================================================ */
@media (max-width: 1100px) {
	.v-links .sub-menu {
		display: block !important;
		position: static !important;
		transform: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		box-shadow: none !important;
		background: transparent !important;
		min-width: 0 !important;
		padding: 0 0 6px 16px !important;
	}
	.v-links .menu-item-has-children > a::after { display: none !important; }
}

/* ============================================================
 * DESKTOP — rebalance the home hero: tame the oversized heading
 * and give the gloss image more presence. (>900px only.)
 * ============================================================ */
@media (min-width: 901px) {
	.lh-h1 { font-size: clamp(2.6rem, 4.2vw, 4.4rem); }
	.lh-hero-grid {
		grid-template-columns: 1.02fr 0.98fr;
		gap: clamp(30px, 4vw, 64px);
		max-width: 1340px;        /* match the other home sections; stop edge-to-edge spread */
		margin-left: auto;
		margin-right: auto;
	}
	.lh-hero-visual { max-width: 620px; }
}

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; }
	/* hero slider still cycles, but swaps instantly (no fade) */
	.lh-slide { transition-duration: 0.001ms !important; }
}