/* ============================================================
   ADAPTIVE LAYER — one design system, four presentations
   Modes are driven by BOTH fluid breakpoints and the
   capability attributes set by js/device.js:
     html[data-device="mobile|tablet|desktop|tv"]
     html[data-input="touch|mouse|hybrid"]
     html[data-orientation="portrait|landscape"]
     html[data-density="sd|hd|4k"]
     html[data-spatial="1"]
   ============================================================ */

/* ---------- FLUID CARD DENSITY ---------- */
:root { --cpv: 2; --cpvw: 1.45; --gcols: 2; }

@media (min-width: 480px) {
  :root { --cpv: 2.35; --cpvw: 1.7; --gcols: 3; }
}
@media (min-width: 768px) {
  :root { --cpv: 3.2; --cpvw: 2.35; --gcols: 4; --header-h: 64px; }
}
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape),
       (min-width: 900px) and (max-width: 1023px) {
  :root { --cpv: 4.3; --cpvw: 3; }
}
@media (min-width: 1024px) { :root { --cpv: 5; --cpvw: 3.4; --gcols: 5; } }
@media (min-width: 1280px) { :root { --cpv: 6; --gcols: 6; } }
@media (min-width: 1440px) { :root { --cpv: 7; --gcols: 7; } }
@media (min-width: 1920px) { :root { --cpv: 8; --cpvw: 3.8; --gcols: 8; } }

/* ---------- MOBILE (presentation <= 767px) ---------- */
@media (max-width: 899px) {
  .header__nav { display: none; }
  .burger { display: inline-flex; }
}

@media (max-width: 767px) {
  :root {
    --header-h: 58px;
    --fs-hero-min: 1.75rem;
    --fs-hero-max: 2.6rem;
    --gutter: 18px;
    --rail-gap: 12px;
  }

  .bottom-nav { display: grid; }
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }

  .logo__icon { width: 31px; height: 31px; border-radius: 8px; }
  .logo__icon svg { width: 17px; height: 17px; }
  .avatar-btn svg.chev { display: none; }
  .icon-btn { width: 41px; height: 41px; }

  .hero { height: clamp(440px, calc(100svh - var(--header-h)), 660px); }
  .hero__content { bottom: 0; padding-bottom: 30px; }
  .hero__desc { -webkit-line-clamp: 3; margin-bottom: 18px; }
  .hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero__actions > .btn:first-child { grid-column: 1 / -1; }
  .hero__dots {
    position: static; flex-direction: row; justify-content: center;
    padding: 14px 0 4px;
  }
  .hero__dot { width: 18px; }
  .hero__dot.is-active { width: 30px; }

  .pcard--wide { max-width: 340px; }
  .section { margin-block: 26px; }
  .toasts { bottom: calc(74px + env(safe-area-inset-bottom)); }

  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s6); }
  .feature-strip { grid-template-columns: 1fr; gap: var(--s5); padding-block: var(--s6); }

  .ep-card { grid-template-columns: 1fr; }
  .ep-info { padding: 0 var(--s4) var(--s4); }
}

/* Large-phone refinement */
@media (min-width: 480px) and (max-width: 767px) {
  :root { --gutter: 22px; }
}

/* Phone landscape — reclaim vertical space */
@media (max-height: 460px) and (orientation: landscape) {
  :root { --header-h: 50px; --cpv: 2.6; }
  .bottom-nav { height: 52px; padding-bottom: 0; }
  body { padding-bottom: 52px; }
  .bnav-item span { display: none; }
  .bnav-item svg { width: 21px; height: 21px; }
  .hero { height: clamp(380px, 100svh, 620px); }
  .hero__content { padding-bottom: 22px; max-width: none; padding-right: 130px; }
  .hero__title { margin-bottom: 8px; }
  .hero__desc { -webkit-line-clamp: 2; margin-bottom: 14px; }
  .hero__actions { display: flex; }
  .hero__dots { position: absolute; right: 22px; bottom: 30px; flex-direction: column; }
  .section { margin-block: 18px; }
}

/* ---------- TABLET (768 – 1023) ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --gutter: 28px; --fs-hero-min: 2.1rem; --fs-hero-max: 3.4rem; }
  .hero { height: clamp(500px, calc(100svh - var(--header-h)), 760px); }
  .hero__desc { -webkit-line-clamp: 3; }
  .nav-link { padding: 9px 11px; font-size: var(--fs-xs); }
  .header__inner { gap: var(--s3); }
  .feature-strip { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) and (max-width: 1023px) {
  .nav-link { padding: 10px 14px; font-size: var(--fs-sm); }
}

/* ---------- DESKTOP (1024 – 1919) ---------- */
@media (min-width: 1024px) {
  :root { --fs-hero-min: 2.3rem; --fs-hero-max: 4.25rem; }
  .hero { height: clamp(520px, calc(100vh - var(--header-h)), 900px); }
  .detail-wrap { grid-template-columns: auto 1fr; align-items: end; }
}

/* ---------- LARGE DESKTOP (1440 – 1919) ---------- */
@media (min-width: 1440px) {
  :root { --gutter: clamp(32px, 3vw, 64px); }
}

/* ---------- LARGE SCREEN / TV (>=1920 or detected) ---------- */
@media (min-width: 1920px) {
  :root {
    --rail-gap: 16px;
    --gutter: clamp(48px, 3.4vw, 96px);
  }
  .logo { font-size: 1.65rem; }
  .nav-link { font-size: var(--fs-md); padding: 11px 18px; }
  .section__title { font-size: var(--fs-2xl); }
  .pcard__name { font-size: var(--fs-md); }
  .pcard__sub { font-size: var(--fs-xs); }
  .hero__meta, .hero__desc { font-size: var(--fs-lg); }
}

html[data-device="tv"] {
  --safe-l: clamp(28px, 2.6vw, 80px);
  --safe-r: clamp(28px, 2.6vw, 80px);
  --safe-b: clamp(20px, 2.2vh, 44px);
  --gutter: calc(clamp(48px, 3.6vw, 104px));
  --header-h: 84px;
  font-size: 18px;
  scroll-padding-top: calc(var(--header-h) + 24px);
}
html[data-device="tv"] body { overscroll-behavior: none; }
html[data-device="tv"] .header,
html[data-device="tv"] .search-layer { padding-left: var(--safe-l); padding-right: var(--safe-r); }
html[data-device="tv"] .hero__content { padding-left: calc(var(--gutter) + var(--safe-l)); padding-right: calc(var(--gutter) + var(--safe-r)); padding-bottom: clamp(60px, 11vh, 120px); }
html[data-device="tv"] .section__head,
html[data-device="tv"] .page-head,
html[data-device="tv"] .browse-toolbar,
html[data-device="tv"] .result-count,
html[data-device="tv"] .chip-row,
html[data-device="tv"] .mini-rail,
html[data-device="tv"] .grid,
html[data-device="tv"] .search-section h3,
html[data-device="tv"] .kv-note,
html[data-device="tv"] .detail-wrap,
html[data-device="tv"] .detail-body,
html[data-device="tv"] .feature-strip,
html[data-device="tv"] .footer__grid,
html[data-device="tv"] .footer__base { padding-left: calc(var(--gutter) + var(--safe-l)); padding-right: calc(var(--gutter) + var(--safe-r)); }
html[data-device="tv"] .rail { padding-left: calc(var(--gutter) + var(--safe-l)); padding-right: calc(var(--gutter) + var(--safe-r)); padding-top: 30px; padding-bottom: 38px; }
html[data-device="tv"] .hero__arrow,
html[data-device="tv"] .rail-arrow { display: none !important; }
html[data-device="tv"] .hero { height: clamp(620px, 88vh, 1120px); }
html[data-device="tv"] .hero__dot { width: 42px; height: 7px; }
html[data-device="tv"] .hero__dot.is-active { width: 62px; }
html[data-device="tv"] :focus-visible { outline-offset: 5px; }
html[data-device="tv"] .pcard:focus-visible { outline: none; }
html[data-device="tv"] .pcard:focus-visible .pcard__frame {
  transform: scale(1.045);
  box-shadow: var(--sh-tv-focus);
}
html[data-device="tv"] .pcard:focus-visible .pcard__hover { opacity: 1; }
html[data-device="tv"] .pcard:focus-visible .pcard__play { background: #fff; }
html[data-device="tv"] .btn { min-height: 54px; padding: 0 30px; font-size: var(--fs-lg); }
html[data-device="tv"] .btn--lg { min-height: 64px; padding: 0 42px; font-size: var(--fs-xl); }
html[data-device="tv"] .icon-btn { width: 52px; height: 52px; }
html[data-device="tv"] .menu { min-width: 400px; }
html[data-device="tv"] .menu__item { padding: 15px 18px; font-size: var(--fs-md); }
html[data-device="tv"] .ep-card:hover, html[data-device="tv"] .ep-card:focus-visible { border-color: var(--brand-500); box-shadow: var(--sh-tv-focus); }

/* ---------- 4K / ULTRA DENSITY ---------- */
@media (min-width: 3000px) {
  html { font-size: 21px; }
  :root {
    --header-h: 100px;
    --rail-gap: 24px;
    --gutter: clamp(80px, 4vw, 200px);
    --fs-hero-min: 3rem;
    --fs-hero-max: 6rem;
  }
  html[data-device="tv"] { --header-h: 116px; }
  .logo__icon { width: 48px; height: 48px; }
  .avatar { width: 44px; height: 44px; }
  .btn { min-height: 58px; }
  .hero { height: clamp(700px, 86vh, 1250px); }
  .rail { padding-top: 36px; padding-bottom: 44px; }
}
html[data-density="4k"] { font-size: 21px; }
html[data-density="4k"] :root,
html[data-density="4k"] { --header-h: 100px; --rail-gap: 24px; }

/* ---------- TOUCH INPUT MODE ---------- */
html[data-input="touch"] .pcard__hover { display: none; }
html[data-input="touch"] .pcard__frame::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
html[data-input="touch"] .btn, html[data-input="touch"] .chip { -webkit-tap-highlight-color: rgba(229,9,20,.25); }

/* ---------- SPATIAL / KEYBOARD MODE ---------- */
html[data-spatial="1"] .pcard:focus-visible .pcard__frame { transform: scale(1.04); box-shadow: var(--sh-tv-focus); }
html[data-spatial="1"] .pcard:focus-visible .pcard__hover { opacity: 1; }

/* ---------- SHORT DESKTOPS / SMALL LAPTOPS ---------- */
@media (min-width: 1024px) and (max-height: 700px) {
  .hero { height: clamp(460px, 92vh, 700px); }
  .hero__content { padding-bottom: 40px; }
  .hero__desc { -webkit-line-clamp: 2; }
}

/* ---------- HIGH CONTRAST ---------- */
@media (prefers-contrast: more) {
  :root { --line: rgba(255,255,255,.4); --tx-2: #e8e8ee; --tx-3: #c3c3cc; }
  .pcard__frame::after { box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
  :focus-visible { outline-width: 4px; }
}

/* ---------- PRINT ---------- */
@media print {
  .header, .bottom-nav, .drawer, .drawer-scrim, .search-layer, .player-layer,
  .modal-layer, .toasts, .hero__dots, .hero__arrow, .rail-arrow, .feature-strip { display: none !important; }
  body { background: #fff; color: #000; }
  .page { padding-top: 0; }
}