/* ==========================================================================
   Kojira Control — device layer for the Kojira theme (tablets, touch, notches,
   landscape phones, small phones). Loaded after the theme; never edits it.
   ========================================================================== */

/* ---------- Notched devices (viewport-fit=cover is set by the theme) ---------- */
.kj-header__inner,
.kj-container,
.kj-menu__grid {
	padding-left: max(var(--kj-gutter), env(safe-area-inset-left));
	padding-right: max(var(--kj-gutter), env(safe-area-inset-right));
}
.kj-footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.kj-drawer__panel { padding-bottom: max(20px, env(safe-area-inset-bottom)); }

/* ---------- Touch input: 44px targets, no sticky hover states ---------- */
@media (pointer: coarse) {
	.kj-hbtn,
	.kj-burger,
	.kj-filter,
	.kj-drawer__close,
	.kj-totop,
	.kj-pass__tabs button,
	.kj-btn--cart { min-height: 44px; }
	.kj-hbtn, .kj-drawer__close { min-width: 44px; }
	.kj-password__toggle { min-width: 56px; }
	.kj-menu__sublink { padding-block: 12px; }
	.kj-check input { width: 22px; height: 22px; }
	.kj-filters { scroll-snap-type: x proximity; }
	.kj-filter { scroll-snap-align: start; }
}

@media (hover: none) {
	.kj-card:hover { filter: none; }
	.kj-card:hover .kj-card__img { transform: none; }
	.kj-card:hover .kj-card__glare { opacity: 0; }
	.kj-card:hover .kj-card__scan::after { animation: none; }
	.kj-btn--grad:hover, .kj-btn--cart:hover { filter: none; }
	.kj-hbtn:hover { box-shadow: none; }
	/* Tap feedback instead of hover */
	.kj-card:active { filter: drop-shadow(0 0 18px rgba(var(--accent-rgb), 0.45)); }
	.kj-btn:active, .kj-filter:active, .kj-hbtn:active { transform: translateY(1px) scale(0.98); }
}

/* ---------- Tablets: portrait (iPad mini / Air / 11") ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
	.kj-hero__lead { max-width: 620px; }
	.kj-pillars__track { gap: 24px; }
	.kj-panel__icon { width: clamp(140px, 22vw, 200px); }
	.kj-access__grid { gap: 48px; }
	.kj-pass { max-width: 720px; margin-inline: auto; width: 100%; }
}

/* 3 product columns on wider portrait tablets (iPad Air 820px, 11" 834px) */
@media (min-width: 800px) and (max-width: 899px) {
	.kj-grid,
	.woocommerce ul.products.kj-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
	.kj-card__body { padding: 14px; }
	.kj-card__title { font-size: 16px; }
	.kj-card__excerpt { display: none; }
}

/* ---------- Large tablets in portrait (iPad Pro 12.9": 1024×1366) ----------
   The theme pins "three worlds" horizontally from 1024px; on a tall touch screen
   show one large panel at a time instead of three small ones. */
@media (min-width: 1024px) and (orientation: portrait) and (pointer: coarse) {
	.kj-panel { width: min(80vw, 760px); }
	.kj-panel__inner { min-height: min(58vh, 760px); padding: 40px; }
	.kj-panel__icon { width: clamp(180px, 26vw, 260px); }
	.kj-panel__title { font-size: 48px; }
	.kj-panel__desc { font-size: 18px; }
	.kj-access__grid { grid-template-columns: 1fr; }
	.kj-pass { max-width: 820px; margin-inline: auto; }
}

/* ---------- Tablets in landscape (1024–1366 wide, short height) ---------- */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) and (pointer: coarse) {
	.kj-pillars__pin { padding-block: calc(var(--kj-header-h) + 8px) 24px; }
	.kj-panel__inner { min-height: min(60vh, 520px); }
	.kj-menu__label { font-size: clamp(34px, 7vw, 80px); }
}

/* ---------- Landscape phones (short viewports) ---------- */
@media (max-height: 520px) and (orientation: landscape) {
	.kj-hero { min-height: 100vh; padding-block: calc(var(--kj-header-h) + 12px) 56px; }
	.kj-hero__content { gap: 12px; }
	.kj-hero__pillars, .kj-hero__scroll { display: none; }
	.kj-menu__label { font-size: clamp(26px, 9vh, 48px); }
	.kj-menu__grid { grid-template-columns: 1fr; padding-top: calc(var(--kj-header-h) + 4px); }
	.kj-menu__aside { display: none; }
	.kj-drawer__panel { width: min(420px, 70%); }
}

/* ---------- Small phones (≤ 380px) ---------- */
@media (max-width: 380px) {
	:root { --kj-gutter: 14px; }
	.kj-hero__cta { display: grid; width: 100%; }
	.kj-hero__cta .kj-btn { width: 100%; }
	.kj-roles__grid { grid-template-columns: 1fr; }
	.kj-role__box { grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; text-align: start; padding: 10px 12px; }
	.kj-card__foot { flex-direction: column; align-items: stretch; }
	.kj-card__foot .kj-btn { width: 100%; }
	.kj-hbtn--pass { display: none; }
}

/* ---------- Very large screens ---------- */
@media (min-width: 1800px) {
	:root { --kj-max: 1520px; }
}