/* ==========================================================================
   Prime8KTV Premium v3 — responsive.css
   Mobile-first base lives in main.css. Two deliberate breakpoints:
   640px (large phones / small tablets), 1024px (laptops / desktops).
   No horizontal overflow at any width. Touch targets >= 48px.
   ========================================================================== */

/* ---------- ≥640px ---------- */
@media (min-width: 640px) {
	.p8k-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.p8k-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.p8k-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.p8k-grid--6 { grid-template-columns: repeat(3, 1fr); }
	.p8k-footer__grid { grid-template-columns: 1fr 1fr; }
	.p8k-banner__collage { grid-template-columns: repeat(8, 1fr); }
}

/* ---------- ≥1024px ---------- */
@media (min-width: 1024px) {
	.p8k-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.p8k-grid--4 { grid-template-columns: repeat(4, 1fr); }
	.p8k-grid--6 { grid-template-columns: repeat(6, 1fr); }
	.p8k-split__grid { grid-template-columns: 1fr 1fr; gap: 64px; }
	.p8k-split--flip .p8k-split__copy { order: 2; }
	.p8k-split--flip .p8k-split__visual { order: 1; }
	.p8k-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
	.p8k-hero__inner { max-width: 720px; }
}

/* ---------- <1024px: mobile navigation ---------- */
@media (max-width: 1023.98px) {
	.p8k-nav-toggle { display: inline-flex; align-items: center; justify-content: center; order: 3; }
	.p8k-header__inner { gap: 16px; }
	.p8k-header__cta { order: 2; padding: 12px 20px; font-size: 14px; margin-left: auto; }
	.p8k-brand { margin-right: 0; }
	.p8k-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: rgba(10, 10, 15, 0.98);
		border-bottom: 1px solid var(--p8k-border);
		padding: 16px 24px 24px;
		display: none;
	}
	.p8k-nav.is-open { display: block; }
	.p8k-nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
	.p8k-nav__link { padding: 14px 12px; font-size: 17px; }
	/* CTA duplicated inside the mobile menu via CSS order is not possible;
	   the header CTA reappears as a menu footer link (see header.php note). */
	.p8k-nav.is-open::after {
		content: "";
		display: block;
	}
}

/* No-JS fallback: without JS the toggle never appears (hidden by default
   in markup? No — toggle is always in markup). Instead: if JS is absent,
   .js is missing so the nav stays visible as a stacked list. */
html:not(.js) .p8k-nav-toggle { display: none; }
html:not(.js) .p8k-nav { display: block; position: static; border: 0; padding: 0; background: transparent; }
html:not(.js) .p8k-nav__list { flex-direction: column; }

/* ---------- Small phones: tighten hero collage ---------- */
@media (max-width: 639.98px) {
	.p8k-collage { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(6, 1fr); opacity: 0.35; }
	.p8k-banner__collage { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 96px; }
	.p8k-hero__ctas .p8k-btn { flex: 1 1 100%; }
	.p8k-devices__badges { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
	.p8k-devices__badge { flex-shrink: 0; }
}