/* ==========================================================================
   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; }
}

/* ---------- ≥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-sports__grid { grid-template-columns: 1fr 1.15fr; 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.5fr 1fr 1fr 1fr; }
	.p8k-hero__inner { max-width: 720px; }
}

/* ---------- <1024px: mobile navigation (slide-in panel, see main.css §17) ---------- */
@media (max-width: 1023.98px) {
	.p8k-nav-toggle { display: inline-flex; align-items: center; justify-content: center; order: 3; }
	.p8k-header__inner { gap: 16px; }
	/* The slide-in panel carries its own full-width CTA; hiding the bar CTA
	   keeps brand + hamburger comfortably fittable on small screens. */
	.p8k-header__cta { display: none; }
	.p8k-brand { margin-right: auto; }
	.p8k-nav--desktop { display: none; }
	/* Compact language trigger on mobile: globe icon only (brand + trigger +
	   hamburger must fit 360px viewports). */
	.p8k-langswitch__code { display: none; }
	.p8k-langswitch__trigger { padding: 11px 12px; }
}

/* No-JS fallback: the toggle does nothing without JS, so hide it; the
   mobile panel renders as a plain stacked list (see main.css §17). */
html:not(.js) .p8k-nav-toggle { display: none; }
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-genre { width: 112px; }
	.p8k-plan--featured { order: -1; }
	.p8k-hero__ctas .p8k-btn { flex: 1 1 100%; }
	.p8k-devices__badges { justify-content: flex-start; }
	.p8k-devices__badge { padding: 8px 18px; font-size: 14px; }
}

/* ---------- <1024px: pricing — featured card sits flush, popular still first ---------- */
@media (max-width: 1023.98px) {
	.p8k-plan--featured { transform: none; }
}
@media (max-width: 1023.98px) and (hover: hover) {
	.p8k-plan--featured:hover { transform: translateY(-6px); }
}

/* ---------- <1024px: photo hero — deepen overlays for readability ---------- */
@media (max-width: 1023.98px) {
	.p8k-hero--cinematic { min-height: 0; }
	.p8k-hero--photo { background-position: center 20%; }
	.p8k-hero--photo .p8k-hero__shade {
		background:
			linear-gradient(180deg, rgba(10, 10, 15, 0.55) 0%, rgba(10, 10, 15, 0.25) 26%, rgba(10, 10, 15, 0.35) 52%, #0a0a0f 100%),
			linear-gradient(90deg, rgba(10, 10, 15, 0.96) 0%, rgba(10, 10, 15, 0.88) 40%, rgba(10, 10, 15, 0.78) 70%, rgba(10, 10, 15, 0.74) 100%);
	}
	.p8k-hero--cinematic .p8k-hero__stats { max-width: none; }
	.p8k-hero--cinematic .p8k-hero__stat { padding: 0 12px; }
	.p8k-hero--cinematic .p8k-hero__stat:first-child { padding-left: 0; }
}

/* ---------- Sports: gentle float is translateY-only on all viewports ---------- */
@media (prefers-reduced-motion: reduce) {
	.p8k-sports__frame { animation: none; }
}

/* ==========================================================================
   v3.18.0 — Next-level mobile design
   Desktop untouched: everything below is max-width guarded.
   ========================================================================== */

/* ---------- <640px: base typography & rhythm ---------- */
@media (max-width: 639.98px) {
	:root { --p8k-radius: 14px; }
	body { font-size: 16px; line-height: 1.65; -webkit-text-size-adjust: 100%; }
	.p8k-container { padding-left: 18px; padding-right: 18px; }
	.p8k-section { padding-block: 44px; }
	.p8k-section__title { font-size: clamp(28px, 8.5vw, 36px); margin-bottom: 12px; line-height: 1.08; }
	.p8k-section__lede { font-size: 16px; line-height: 1.6; margin-bottom: 26px; }
	.p8k-eyebrow { font-size: 12px; letter-spacing: 0.14em; margin-bottom: 12px; }

	/* Buttons: generous touch targets, smart stacking */
	.p8k-btn { min-height: 52px; font-size: 16px; padding: 14px 24px; }
	.p8k-btn--lg { min-height: 56px; font-size: 17px; }
	.p8k-btn--small { min-height: 44px; font-size: 15px; }

	/* Forms: 16px+ prevents iOS auto-zoom */
	input, select, textarea { font-size: 16px !important; }

	/* ---------- Header ---------- */
	.p8k-announcement { font-size: 13px; padding: 8px 12px; line-height: 1.4; }
	.p8k-header__inner { min-height: 64px; padding-block: 10px; gap: 12px; }
	.p8k-brand__text, .p8k-footer__logo { font-size: 24px; }
	.p8k-nav-toggle { width: 46px; height: 46px; }
	.p8k-langswitch__trigger { padding: 10px 11px; min-height: 44px; }

	/* ---------- Hero ---------- */
	.p8k-hero__title { font-size: clamp(2rem, 11vw, 3rem); margin-bottom: 16px; line-height: 1.04; }
	.p8k-hero__sub { font-size: 16.5px; line-height: 1.6; margin-bottom: 24px; }
	.p8k-hero__ctas { gap: 12px; margin-bottom: 22px; }
	.p8k-hero__trust { gap: 8px 14px; font-size: 14px; }
	.p8k-hero__stats { gap: 0; margin-top: 26px; }
	.p8k-hero__stat-number { font-size: clamp(26px, 7.5vw, 34px); }
	.p8k-hero__stat-label { font-size: 12.5px; line-height: 1.4; }

	/* ---------- Pricing cards ---------- */
	.p8k-plans { gap: 18px; }
	.p8k-plan { padding: 26px 22px; border-radius: 18px; }
	.p8k-plan__name { font-size: 21px; margin-bottom: 8px; }
	.p8k-plan__amount { font-size: clamp(34px, 10vw, 42px); }
	.p8k-plan__was { font-size: 15px; }
	.p8k-plan__permonth { font-size: 14px; margin-bottom: 14px; }
	.p8k-plan__desc { font-size: 14.5px; line-height: 1.6; margin-bottom: 16px; }
	.p8k-plan__features { gap: 10px; margin-bottom: 20px; }
	.p8k-plan__features li { font-size: 14.5px; line-height: 1.55; }
	.p8k-plan__cta { min-height: 52px; font-size: 16px; }
	.p8k-plan--featured { order: -1; }
	.p8k-pricing__included-list { gap: 12px; }
	.p8k-pricing__included-list li { font-size: 14.5px; }

	/* ---------- FAQ accordions ---------- */
	.p8k-accordion__button, .p8k-faqblock__btn { padding: 16px; font-size: 15.5px; min-height: 56px; }
	.p8k-accordion__panel-body, .p8k-faqblock__panel-body { padding: 0 16px 16px; font-size: 15px; }

	/* ---------- Content pages ---------- */
	.p8k-entry__content { font-size: 16px; line-height: 1.7; }
	.p8k-entry__content h2 { font-size: clamp(24px, 7vw, 30px); margin: 1.8em 0 0.7em; line-height: 1.15; }
	.p8k-entry__content h3 { font-size: 19px; line-height: 1.35; }
	.p8k-entry__content p, .p8k-entry__content li { font-size: 16px; }
	.p8k-pagehero { padding: 30px 0 22px; }
	.p8k-pagehero__title { font-size: clamp(30px, 9vw, 40px); line-height: 1.06; }
	.p8k-pagehero__lede { font-size: 16px; }
	.p8k-breadcrumbs { font-size: 13px; margin-bottom: 20px; }

	/* ---------- Footer ---------- */
	.p8k-footer { padding-top: 40px; }
	.p8k-footer__grid { gap: 28px; }
	.p8k-footer__heading { font-size: 15px; margin-bottom: 12px; }
	.p8k-footer__nav a { padding: 8px 0; font-size: 15px; min-height: 40px; display: inline-flex; align-items: center; }
	.p8k-footer__bottom { flex-direction: column; gap: 10px; text-align: center; padding: 20px 0; }

	/* ---------- FAB & back-to-top ---------- */
	.p8k-wa-fab { width: 56px; height: 56px; bottom: 18px; right: 18px; }
	.p8k-to-top { width: 46px; height: 46px; bottom: 86px; right: 23px; }

	/* ---------- Tables: horizontal scroll, no breakage ---------- */
	.p8k-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -18px; padding: 0 18px; }
	.p8k-table { font-size: 14px; min-width: 560px; }

	/* ---------- Misc polish ---------- */
	.p8k-split__grid, .p8k-sports__grid { gap: 28px; }
	.p8k-trust__grid { gap: 14px; }
	.p8k-trust__card { padding: 22px 18px; }
	.p8k-devices__badges { gap: 8px; }
	.p8k-cta__panel { padding: 32px 22px; border-radius: 20px; }
	.p8k-cta__title { font-size: clamp(26px, 8vw, 34px); }
}

/* ---------- <380px: very small phones ---------- */
@media (max-width: 379.98px) {
	.p8k-container { padding-left: 14px; padding-right: 14px; }
	.p8k-hero__title { font-size: clamp(1.75rem, 10.5vw, 2.5rem); }
	.p8k-plan { padding: 22px 18px; }
	.p8k-section__title { font-size: clamp(25px, 8vw, 30px); }
}

/* ---------- v3.18.3: mobile hero top space + equal-width content CTAs (mobile only) ---------- */
@media (max-width: 639.98px) {
	/* Hero: reduce top space */
	.p8k-hero--cinematic .p8k-hero__stage {
		padding-top: 56px;
		padding-bottom: 32px;
	}
	.p8k-hero--cinematic { min-height: 0; }

	/* Inner pages: inline WhatsApp + email buttons (e.g. free-trial page)
	   get equal full width on mobile, stacked vertically. */
	.p8k-entry__content p > a[href*="wa.me"],
	.p8k-entry__content p > a[href^="mailto:"] {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box;
		text-align: center !important;
		margin: 0 0 12px !important;
	}
	.p8k-entry__content p > a[href^="mailto:"]:last-child {
		margin-bottom: 0 !important;
	}
}