/* ═══════════════════════════════════════════════════
   ROYAL POS — Responsive v2
   ═══════════════════════════════════════════════════ */

/* ── XL ─────────────────────────────── */
@media(min-width:1400px){
  :root{--sec-py:100px;--cont:1300px}
}

/* ── LG → MD (tablet landscape) ────── */
@media(max-width:1199px){
  :root{--sec-py:72px}
  .hero-h1{font-size:clamp(2rem,4vw,3rem)}
  .counter-grid{grid-template-columns:repeat(4,1fr)}
}

/* ── MD (≤991px) ────────────────────── */
@media(max-width:991px){
  :root{--sec-py:60px;--nav-h:64px}
  .nav-links{display:none}
  .nav-actions{display:none}
  .nav-hamburger{display:flex}
  .hero-visual{display:none!important}
  .hero-h1{font-size:clamp(1.9rem,5vw,2.8rem)}
  .hero-stats{gap:20px}
  .hero-stat-num{font-size:1.5rem}
  .counter-grid{grid-template-columns:repeat(2,1fr)}
  .counter-item:nth-child(2){border-right:none}
  .counter-item:nth-child(2),.counter-item:nth-child(4){border-bottom:none}
  .counter-item{border-bottom:1px solid rgba(255,255,255,0.1)}
  .about-video-wrap{margin-top:40px}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .g-item:nth-child(1){grid-column:span 1}
  #rp-footer .row>[class*="col"]{margin-bottom:36px}

  /* ── HERO: switch from absolute-stacked slides to relative flow ──
     Root cause of the broken mobile hero: .hero-slide is position:absolute
     with height coming only from the parent .hero, which has no explicit
     height on mobile (min-height:auto collapses to 0 since all children
     are absolutely positioned). Forcing the active slide into normal flow
     lets the section grow to fit its real content. */
  .hero{min-height:auto;height:auto;display:block}
  .hero-slider{position:relative;inset:auto}
  .hero-slide{position:relative;inset:auto;display:none;opacity:1;transition:none}
  .hero-slide.active{display:block}
  .hero-bg{position:absolute;inset:0}
  .hero-content{position:relative;padding:calc(var(--nav-h) + 28px) 0 56px}
}

/* ── SM (≤767px) ────────────────────── */
@media(max-width:767px){
  :root{--sec-py:50px}
  .sec-title{font-size:1.8rem}
  .sec-sub{font-size:.95rem}
  .page-banner{padding:90px 0 50px}
  .page-banner h1{font-size:1.75rem}

  .hero{padding-bottom:0}
  .hero-content{padding-top:calc(var(--nav-h) + 24px);padding-bottom:44px}
  .hero-eyebrow{font-size:10px;margin-bottom:14px}
  .hero-h1{font-size:1.85rem;margin-bottom:16px}
  .hero-p{font-size:.95rem;margin-bottom:24px;max-width:none}
  .hero-actions{gap:10px}
  .hero-badge{margin-top:20px;font-size:11px;padding:6px 14px}
  .hero-stats{flex-wrap:wrap;gap:16px;margin-top:28px;padding-top:20px}
  .hero-stat{flex:1 1 40%}
  .hero-orb-1,.hero-orb-2{filter:blur(50px)}
  .hero-orb-1{width:280px;height:280px}
  .hero-orb-2{width:220px;height:220px}

  .btn-rp{padding:12px 24px;font-size:13px}
  .btn-rp.lg{padding:14px 30px;font-size:14px}
  .about-video-thumb{height:280px}
  .counter-item{padding:20px 16px}
  .counter-num{font-size:2.4rem}
  .hero-arrows{bottom:16px;right:16px}
  .hero-dots{bottom:18px}
  .scroll-indicator{display:none}
  .rating-score{font-size:4rem}
  #backToTop,
  .whatsapp-float{bottom:16px;right:16px}
  .whatsapp-float{bottom:68px}
  #cookieBanner{left:12px;right:12px;max-width:none}
  .gallery-grid{grid-template-columns:1fr 1fr;gap:10px}
  .notice-bar{font-size:11px;padding:8px 36px}
}

/* ── XS (≤575px) ────────────────────── */
@media(max-width:575px){
  :root{--sec-py:44px}
  .hero-content{padding-top:calc(var(--nav-h) + 18px);padding-bottom:36px}
  .hero-eyebrow{font-size:9.5px;letter-spacing:2px}
  .hero-h1{font-size:1.6rem;line-height:1.2}
  .hero-p{font-size:.9rem}
  .hero-actions{flex-direction:column;align-items:flex-start;gap:10px}
  .hero-actions .btn-rp{width:100%;justify-content:center}
  .hero-badge{display:flex;flex-wrap:wrap;text-align:left;line-height:1.5}
  .hero-stats{display:flex;flex-wrap:wrap;gap:14px 18px;margin-top:22px;padding-top:16px}
  .hero-stat-num{font-size:1.3rem}
  .hero-stat-lbl{font-size:10.5px}
  .hero-arrows{display:none}
  .hero-dots{bottom:10px}
  .sec-title{font-size:1.6rem}
  .counter-grid{grid-template-columns:repeat(2,1fr)}
  .counter-num{font-size:2rem}
  .gallery-grid{grid-template-columns:1fr;gap:8px}
  .g-item:nth-child(1){grid-column:1}
  .footer-bottom .d-flex{flex-direction:column;gap:6px;text-align:center}
  .rp-container{padding:0 16px}
}

/* ── Print ── */
@media print{
  #rp-nav,.whatsapp-float,#backToTop,#preloader,#cookieBanner,.notice-bar,.hero-arrows,.hero-dots,.scroll-indicator{display:none!important}
  .hero{min-height:auto;height:auto}
  body{padding-top:0!important}
}