/**
 * RANVYX Notebook / Laptop fit
 * เฉพาะจอโน้ตบุ๊ก — ไม่แตะ PC จอใหญ่/จอสูง
 * - data-device=notebook (768–1023)
 * - หรือ desktop ที่ความสูงจอสั้น (แล็ปท็อป ≥1024 แต่สูง ≤950)
 */

/* ── Notebook 768–1023: หน้าเกต/ฮีโร่พอดีจอ ── */
@media (min-width: 768px) and (max-width: 1023px) {
  html[data-device="notebook"].gate-locked .hero,
  html.gate-locked .hero {
    padding: 4.5rem 1.75rem 1.5rem !important;
  }

  html[data-device="notebook"] .hero-content,
  html.gate-locked .hero-content {
    max-width: min(640px, 92vw) !important;
    max-height: calc(100svh - 5.5rem) !important;
  }

  html[data-device="notebook"] .hero-logo-wrap {
    width: min(108px, 18vw) !important;
    margin-bottom: 1.1rem !important;
  }

  html[data-device="notebook"] .hero-eyebrow {
    font-size: 0.58rem !important;
    letter-spacing: 0.28em !important;
    padding: 0.28rem 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }

  html[data-device="notebook"] .hero-title {
    font-size: clamp(2.1rem, 5.2vw, 3.4rem) !important;
    letter-spacing: 0.08em !important;
    line-height: 1.02 !important;
  }

  html[data-device="notebook"] .hero-sub {
    font-size: clamp(0.72rem, 1.4vw, 0.92rem) !important;
    letter-spacing: 0.28em !important;
    margin-top: 0.4rem !important;
  }

  html[data-device="notebook"] .hero-desc {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    margin-top: 0.85rem !important;
    max-width: 480px !important;
  }

  html[data-device="notebook"] .hero-cta {
    margin-top: 1.5rem !important;
    gap: 0.65rem !important;
  }

  html[data-device="notebook"] .hero-cta .btn {
    padding: 0.72rem 1.45rem !important;
    font-size: 0.85rem !important;
  }

  html[data-device="notebook"] .gate-login-hint {
    font-size: 0.78rem !important;
    margin-top: 0.75rem !important;
  }
}

/* ── Laptop กว้าง ≥1024 แต่จอเตี้ย (ไม่กระทบ PC จอสูง) ── */
@media (min-width: 1024px) and (max-height: 900px) {
  html.gate-locked .hero {
    padding: 4.25rem 2rem 1.35rem !important;
  }

  html.gate-locked .hero-content {
    max-width: min(700px, 88vw) !important;
    max-height: calc(100svh - 5rem) !important;
  }

  html.gate-locked .hero-logo-wrap {
    width: min(112px, 12vw) !important;
    margin-bottom: 1rem !important;
  }

  html.gate-locked .hero-eyebrow {
    font-size: 0.6rem !important;
    margin-bottom: 0.7rem !important;
    padding: 0.3rem 0.8rem !important;
  }

  html.gate-locked .hero-title {
    font-size: clamp(2.4rem, 4.5vw, 4rem) !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
  }

  html.gate-locked .hero-sub {
    font-size: clamp(0.75rem, 1.2vw, 0.95rem) !important;
    letter-spacing: 0.3em !important;
    margin-top: 0.35rem !important;
  }

  html.gate-locked .hero-desc {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin-top: 0.75rem !important;
    max-width: 500px !important;
  }

  html.gate-locked .hero-cta {
    margin-top: 1.35rem !important;
  }

  html.gate-locked .hero-cta .btn {
    padding: 0.75rem 1.6rem !important;
  }
}

/* จอเตี้ยมาก */
@media (min-width: 768px) and (max-height: 720px) {
  html.gate-locked .hero-logo-wrap {
    width: min(88px, 14vw) !important;
    margin-bottom: 0.65rem !important;
  }
  html.gate-locked .hero-title {
    font-size: clamp(1.9rem, 4vw, 3rem) !important;
  }
  html.gate-locked .hero-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.5rem !important;
  }
  html.gate-locked .hero-cta {
    margin-top: 1rem !important;
  }
}