/* ═══════════════════════════════════════════
   KEYCOACHPRO THEME — RESPONSIVE STYLES
   Author: Joshua Okposo
═══════════════════════════════════════════ */

/* ── Tablet: 900px ── */
@media (max-width: 900px) {

	/* Nav */
	.kcp-main-menu, .kcp-nav-actions { display: none; }
	.kcp-hamburger { display: flex; }
	.kcp-nav-inner { padding: 8px 24px; }
	.kcp-mobile-menu { top: 64px; }

	/* Hero */
	.kcp-hero { grid-template-columns: 1fr; min-height: auto; }
	.kcp-hero-right { display: none; }
	.kcp-hero-left { clip-path: none; padding: 48px 28px; }
	.kcp-hero-h1 { font-size: 60px; }
	.kcp-hero-h1 em { font-size: 52px; }

	/* Stats */
	.kcp-stats-strip { grid-template-columns: repeat(2, 1fr); }
	.kcp-stat-item:nth-child(2) { border-right: none; }
	.kcp-stat-item:nth-child(3) { border-top: 2px solid var(--kcp-ink); }
	.kcp-stat-item:nth-child(4) { border-top: 2px solid var(--kcp-ink); border-right: none; }

	/* Services */
	.kcp-services { padding: 56px 24px; }
	.kcp-section-h2 { font-size: 48px; }
	.kcp-service-row { grid-template-columns: 50px 1fr; gap: 16px; }
	.kcp-svc-right { display: none; }
	.kcp-svc-num { font-size: 36px; }
	.kcp-svc-title { font-size: 22px; }

	/* Keyboard section */
	.kcp-keyboard-section { grid-template-columns: 1fr; }
	.kcp-kb-left { padding: 40px 28px; border-right: none; border-bottom: 2.5px solid rgba(255,255,255,.1); }
	.kcp-kb-heading { font-size: 40px; }
	.kcp-kb-right { padding: 24px; }

	/* Map */
	.kcp-map-section { padding: 56px 24px; }
	.kcp-map-inner { flex-direction: column; }
	.kcp-map-img-side { min-height: 100px; }
	.kcp-map-content-side { border-left: none; border-top: 2.5px solid var(--kcp-ink); padding: 32px 28px; }
	.kcp-map-h { font-size: 34px; }

	/* Earn */
	.kcp-earn-section { padding: 56px 24px; }
	.kcp-earn-grid { grid-template-columns: 1fr; }
	.kcp-earn-h { font-size: 44px; }

	/* Blog */
	.kcp-blog-section { padding: 56px 24px; }
	.kcp-blog-grid { grid-template-columns: 1fr 1fr; }
	.kcp-blog-card.featured { grid-row: span 1; grid-column: span 2; }
	.kcp-blog-header { flex-direction: column; gap: 12px; align-items: flex-start; }

	/* CTA */
	.kcp-cta-section { padding: 56px 24px; flex-direction: column; gap: 32px; }
	.kcp-cta-left h2 { font-size: 44px; }
	.kcp-cta-right { width: 100%; }
	.kcp-cta-right .kcp-btn-gold,
	.kcp-cta-right .kcp-btn-white-outline { width: 100%; text-align: center; padding: 16px; }

	/* Footer */
	.kcp-footer-top { grid-template-columns: 1fr 1fr; padding: 40px 24px; gap: 28px; }
	.kcp-foot-brand { grid-column: span 2; }
	.kcp-footer-bottom { padding: 16px 24px; flex-direction: column; gap: 12px; text-align: center; }

	/* Inner pages */
	.kcp-page-wrap { grid-template-columns: 1fr; padding: 40px 24px; }
	.kcp-archive-wrap { padding: 40px 24px; }
	.kcp-posts-grid { grid-template-columns: repeat(2, 1fr); }
	.kcp-posts-grid .kcp-post-card:nth-child(3n) { border-right: 2px solid var(--kcp-ink); }
	.kcp-posts-grid .kcp-post-card:nth-child(2n) { border-right: none; }
	.kcp-page-title { font-size: 44px; }
	.kcp-post-title { font-size: 40px; }
	.kcp-archive-title { font-size: 44px; }
	.kcp-404-wrap { padding: 60px 24px; }
	.kcp-404-num { font-size: 120px; }

	/* Preloader */
	.kcp-pre-bg-text { font-size: 32vw; }
	.kcp-pre-badge { padding: 24px 32px; }
	.kcp-pre-wordmark { font-size: 42px; }
}

/* ── Mobile: 600px ── */
@media (max-width: 600px) {

	/* Nav */
	.kcp-nav-inner { min-height: 52px; padding: 8px 16px; }
	.kcp-nav-logo { font-size: 20px; }
	.kcp-mobile-menu { top: 56px; }
	.kcp-mobile-menu ul li a { font-size: 28px; }

	/* Hero */
	.kcp-hero-h1 { font-size: 46px; }
	.kcp-hero-h1 em { font-size: 38px; }
	.kcp-hero-sub { font-size: 14px; }
	.kcp-hero-kicker { font-size: 9px; }
	.kcp-hero-btns { flex-direction: column; }
	.kcp-hero-btns .kcp-btn-gold,
	.kcp-hero-btns .kcp-btn-white-outline { width: 100%; text-align: center; padding: 14px; }

	/* Stats */
	.kcp-stats-strip { grid-template-columns: 1fr 1fr; }
	.kcp-stat-num { font-size: 34px; }
	.kcp-stat-item { padding: 16px 16px; gap: 10px; }
	.kcp-stat-label { font-size: 11px; }

	/* Section headings */
	.kcp-section-h2 { font-size: 36px; }
	.kcp-section-kicker { font-size: 11px; letter-spacing: 3px; }

	/* Services */
	.kcp-services { padding: 40px 16px; }
	.kcp-service-row { padding: 20px 16px; gap: 12px; }
	.kcp-svc-title { font-size: 18px; }
	.kcp-svc-desc { font-size: 12px; }

	/* Keyboard */
	.kcp-kb-heading { font-size: 32px; }
	.kcp-kb-desc { font-size: 13px; }
	.kcp-kb-left { padding: 32px 20px; }

	/* Map */
	.kcp-map-section { padding: 40px 16px; }
	.kcp-map-h { font-size: 28px; }
	.kcp-map-p { font-size: 13px; }
	.kcp-map-content-side { padding: 24px 20px; }

	/* Earn */
	.kcp-earn-section { padding: 40px 16px; }
	.kcp-earn-h { font-size: 36px; }
	.kcp-earn-video-grid { grid-template-columns: 1fr 1fr; }
	.kcp-earn-steps { gap: 8px; }
	.kcp-earn-step { padding: 10px 12px; }
	.kcp-earn-step-num { font-size: 22px; }

	/* Blog */
	.kcp-blog-section { padding: 40px 16px; }
	.kcp-blog-grid { grid-template-columns: 1fr; }
	.kcp-blog-card { border-right: none; }
	.kcp-blog-card.featured { grid-column: span 1; }
	.kcp-blog-title { font-size: 18px; }
	.kcp-blog-thumb-placeholder { height: 160px; }
	.kcp-blog-card.featured .kcp-blog-thumb-placeholder { height: 180px; }

	/* CTA */
	.kcp-cta-section { padding: 40px 16px; }
	.kcp-cta-left h2 { font-size: 36px; }
	.kcp-cta-section::before { font-size: 100px; }

	/* Footer */
	.kcp-footer-top { grid-template-columns: 1fr; padding: 32px 20px; gap: 24px; }
	.kcp-foot-brand { grid-column: span 1; }
	.kcp-foot-logo { font-size: 22px; }
	.kcp-footer-bottom { padding: 14px 20px; }

	/* Inner pages */
	.kcp-page-wrap { padding: 32px 16px; }
	.kcp-page-title { font-size: 36px; }
	.kcp-post-title { font-size: 32px; }
	.kcp-archive-wrap { padding: 32px 16px; }
	.kcp-archive-title { font-size: 36px; }
	.kcp-posts-grid { grid-template-columns: 1fr; }
	.kcp-posts-grid .kcp-post-card { border-right: none; }
	.kcp-page-content h2 { font-size: 30px; }
	.kcp-page-content h3 { font-size: 24px; }
	.kcp-404-num { font-size: 90px; }
	.kcp-404-title { font-size: 32px; }
	.kcp-post-nav { grid-template-columns: 1fr; }

	/* Preloader */
	.kcp-pre-wordmark { font-size: 34px; letter-spacing: 3px; }
	.kcp-pre-badge { padding: 20px 24px; }
	.kcp-pre-tagline { font-size: 9px; letter-spacing: 2px; }
	.kcp-pre-bar { width: 140px; }
	.kcp-pre-bg-text { font-size: 40vw; letter-spacing: 4px; }
}

/* ── Small mobile: 380px ── */
@media (max-width: 380px) {
	.kcp-hero-h1 { font-size: 36px; }
	.kcp-hero-h1 em { font-size: 30px; }
	.kcp-section-h2 { font-size: 30px; }
	.kcp-stat-num { font-size: 28px; }
	.kcp-earn-h { font-size: 30px; }
	.kcp-earn-video-grid { grid-template-columns: 1fr; }
	.kcp-cta-left h2 { font-size: 30px; }
	.kcp-kb-heading { font-size: 26px; }
	.kcp-map-h { font-size: 24px; }
	.kcp-svc-title { font-size: 16px; }
	.kcp-blog-title { font-size: 16px; }
	.kcp-page-title { font-size: 30px; }
	.kcp-post-title { font-size: 28px; }
	.kcp-404-num { font-size: 70px; }
}

/* ═══════════════════════════════════════════
   NEW ELEMENTS — RESPONSIVE
═══════════════════════════════════════════ */

/* Hero (full-bg) */
@media (max-width: 900px) {
	.kcp-hero { grid-template-columns: 1fr; min-height: auto; padding: 100px 24px 60px; }
	.kcp-hero-left { padding: 0 0 32px; }
	.kcp-hero-right { padding: 0; justify-content: center; }
	.kcp-hero-keyboard-frame { max-width: 400px; margin: 0 auto; }
	.kcp-hero-h1 { font-size: 60px; }
	.kcp-hero-h1-typing { font-size: .88em; }
}
@media (max-width: 600px) {
	.kcp-hero { padding: 80px 20px 50px; }
	.kcp-hero-h1 { font-size: 44px; }
	.kcp-hero-keyboard-frame { max-width: 320px; }
	.kcp-hero-btns { flex-direction: column; }
	.kcp-hero-btns .kcp-btn-gold,
	.kcp-hero-btns .kcp-btn-white-outline { width: 100%; text-align: center; }
}

/* Heading inline variants */
@media (max-width: 900px) {
	.kcp-heading-inline-a .khi-outlined,
	.kcp-heading-inline-a .khi-filled,
	.kcp-heading-inline-a .khi-block { font-size: 36px; }
	.kcp-heading-inline-b .khib-w1 { font-size: 40px; }
	.kcp-heading-inline-b .khib-w2 { font-size: 30px; }
	.kcp-heading-inline-b .khib-w3 { font-size: 44px; }
	.khic-word { font-size: 30px !important; }
	.khic-cell:nth-child(3) .khic-word { font-size: 36px !important; }
}
@media (max-width: 600px) {
	.kcp-heading-inline { flex-direction: column; align-items: flex-start; gap: 4px; }
	.kcp-heading-inline-a .khi-sep { display: none; }
	.kcp-heading-cells { flex-direction: column; }
	.khic-cell { border-right: none !important; border-bottom: 2px solid var(--kcp-ink); }
	.khic-cell:last-child { border-bottom: none; }
}

/* Scroll progress */
@media (max-width: 600px) {
	.kcp-scroll-progress.kcp-sp-dots { right: 8px; }
	.kcp-sp-dot { width: 6px; height: 6px; }
}

/* Back to top */
@media (max-width: 600px) {
	.kcp-back-to-top { width: 40px; height: 40px; bottom: 16px; right: 16px; }
	.kcp-sp-circle ~ .kcp-back-to-top { bottom: 120px; }
}

/* ── Single post mobile: prevent horizontal overflow ── */
@media (max-width: 900px) {
	/* Contain overflow at wrap level — clip doesn't affect scroll position */
	.kcp-page-wrap {
		display: block;
		max-width: 100%;
		width: 100%;
		box-sizing: border-box;
	}
	/* All content children capped at 98% to prevent right overflow */
	.kcp-page-content *,
	.entry-content * {
		max-width: 100%;
		box-sizing: border-box;
	}
	/* Specific media elements scale to fit */
	.kcp-page-content img,
	.entry-content img,
	.kcp-page-content video,
	.entry-content video,
	.kcp-page-content iframe,
	.entry-content iframe,
	.kcp-page-content figure,
	.entry-content figure,
	.kcp-video-player,
	.kcp-video-player-wrap,
	.kcp-post-featured-img img {
		max-width: 100% !important;
		width: 100% !important;
		height: auto !important;
	}
	/* Tables: horizontal scroll within container */
	.kcp-page-content table,
	.entry-content table {
		display: block;
		overflow-x: auto;
		max-width: 100%;
		box-sizing: border-box;
	}
	/* Code blocks wrap */
	.kcp-page-content pre,
	.entry-content pre {
		white-space: pre-wrap;
		word-break: break-word;
		max-width: 100%;
	}
	/* Post nav: prevent cards overflowing */
	.kcp-post-nav-title {
		word-break: break-word;
	}
	/* Video counts bar wraps on small screens */
	.kcp-video-post-counts {
		flex-wrap: wrap;
		gap: 10px;
	}
}

/* ── Enforce equal left/right padding and prevent content overflow ── */
@media (max-width: 900px) {
	.kcp-page-wrap {
		padding: 32px 24px !important;
		width: 100% !important;
		max-width: 100vw !important;
		box-sizing: border-box !important;
	}
	/* Post nav cards must not exceed wrap width */
	.kcp-post-nav {
		width: 100% !important;
		box-sizing: border-box !important;
	}
	.kcp-post-nav-prev,
	.kcp-post-nav-next {
		min-width: 0 !important;
		word-break: break-word !important;
	}
}
@media (max-width: 600px) {
	.kcp-page-wrap {
		padding: 24px 16px !important;
		width: 100% !important;
		max-width: 100vw !important;
		box-sizing: border-box !important;
	}
}