/* =========================================================
   RideGo — Desktop Layer v1
   ---------------------------------------------------------
   Fișier ADITIV. Nu modifică nimic sub 1200px.
   Se încarcă DUPĂ ridego-w2.css.
   Zero schimbări de conținut, culori sau componente —
   doar așezare, spațiere și dimensiuni pentru ecrane mari.
   ========================================================= */

@media (min-width:1200px){

  /* --- 1. Container mai lat pe monitoare mari ------------- */
  .container,.container-xxl{--bs-gutter-x:2.5rem}
  .container-xxl{max-width:1400px}

  /* --- 2. Bara mobilă de jos: ascunsă pe desktop ---------- */
  /* Cele 4 linkuri (Start / App / Planuri / Ghid) există deja
     în meniul din header. Pe desktop ocupa 104px permanent.
     Prefixul `html` e OBLIGATORIU: blocurile <style> din
     rgw2_footer() se încarcă după <head> și au !important.  */
  html .rg-bottom-nav-v054{display:none!important}
  html body{padding-bottom:0!important}

  /* Bula Suport AI coboară pe locul eliberat */
  html .rg-ai-bubble-direct-v054{bottom:28px!important}

  /* --- 3. Ritm vertical pentru desktop -------------------- */
  .section{padding:96px 0}
  .hero{padding:70px 0 84px}
  .hero-grid{min-height:600px}

  /* --- 4. Hero ------------------------------------------- */
  .hero h1{max-width:840px;font-size:clamp(58px,4.2vw,80px)}
  .hero-copy>p{max-width:600px;font-size:18.5px}
  .button-row{margin-top:34px}
  .proof-grid{max-width:600px;margin-top:30px}
  .proof{padding:17px 18px}
  .product-shot{width:min(100%,455px)}

  /* --- 5. Secțiunea 01 — Demo ---------------------------- */
  /* Coloana media are ~740px; cardul era 455px -> gol lateral */
  .demo-card{width:min(100%,570px)}
  .split-grid{--bs-gutter-x:3.5rem}

  /* --- 6. Secțiunea 02 — Video --------------------------- */
  /* Video portret; 330px era prea mic într-o coloană de 640px */
  .video-frame{width:min(100%,400px)}
  .video-frame video{max-height:700px}
  .video-grid{--bs-gutter-x:3.5rem}

  /* --- 7. HeatMap ---------------------------------------- */
  /* GIF-ul e 700x1500 (portret). Fără limită ar ajunge la
     ~1200px înălțime și ar rupe alinierea cu cele 3 carduri. */
  .heatmap-showcase-grid{
    grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
    gap:clamp(2rem,3vw,3.25rem);
  }
  .heatmap-gif-card{width:min(100%,400px);margin-inline:auto}
  .heatmap-showcase-copy{gap:18px}
  .heatmap-info-card{padding:26px 26px 24px}

  /* --- 8. Secțiunea 03 — Funcții ------------------------- */
  .feature-card{min-height:238px}

  /* --- 9. Secțiunea 04 — Planuri ------------------------- */
  #plans .row{--bs-gutter-x:1.5rem}
  .plan-card{padding:28px}

  /* --- 10. Cerere țară nouă: formular pe 2 coloane ------- */
  /* Aceleași 4 câmpuri, doar așezate 2x2 în loc de 4x1.     */
  .global-grid{--bs-gutter-x:3.5rem}
  .request-card{padding:32px}
  .request-form{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
  }
  .request-form label{margin:0}
  .request-form .hp-field{display:none}
  .request-form .button{grid-column:1/-1;margin-top:4px}

  /* --- 11. Ghiduri --------------------------------------- */
  .guide-grid a{min-height:150px}

  /* --- 12. Footer ---------------------------------------- */
  .site-footer{padding:60px 0 30px}
  .footer-grid{grid-template-columns:minmax(300px,1.7fr) repeat(4,minmax(140px,.6fr));gap:40px}

  /* --- 13. Header ---------------------------------------- */
  .header-inner{gap:32px}

  /* --- 15. Scena cinematică într-un cadru de telefon ------
     Pe desktop scena ocupa toată lățimea ecranului, iar
     cardurile erau la 650px / 610px — enorme. Acum toată
     scena rulează într-un cadru de telefon centrat.
     Aceleași imagini, aceeași animație, doar încadrate.    */
  .cinematic-scroll{
    height:230svh;
    min-height:1500px;
    background:transparent;
  }
  .cinematic-sticky{
    /* Înălțimea disponibilă, plafonată. Lățimea se DERIVĂ din ea
       la raport 9:19.5 — deci cadrul rămâne mereu de telefon,
       indiferent cât de scundă e fereastra.                     */
    --rg-phone-h:min(calc(100svh - var(--rg-header) - 76px),800px);
    top:calc(var(--rg-header) + 38px);
    height:var(--rg-phone-h);
    width:calc(var(--rg-phone-h) * .4615);
    min-height:0;
    max-width:88vw;
    margin-inline:auto;
    border:11px solid #0b1220;
    border-radius:calc(var(--rg-phone-h) * .07);
    box-shadow:
      0 0 0 2px rgba(255,255,255,.07),
      0 46px 110px rgba(0,0,0,.62),
      0 10px 30px rgba(0,0,0,.5),
      inset 0 0 0 1px rgba(255,255,255,.06);
  }
  /* difuzorul telefonului — pur decorativ */
  .cinematic-sticky::before{
    content:"";
    position:absolute;
    left:50%;
    top:1.4%;
    z-index:9;
    width:26%;
    height:6px;
    border-radius:999px;
    background:rgba(5,9,17,.82);
    transform:translateX(-50%);
    pointer-events:none;
  }
  /* cardurile se scalează la lățimea ecranului telefonului */
  .cinematic-ridego-wrap{width:86%!important;top:7%!important}
  .cinematic-uber{width:80%;bottom:6%}
  .cinematic-floor{width:88%;bottom:-4%}
  .cinematic-vignette{box-shadow:inset 0 0 70px rgba(2,5,12,.5)}
}

/* --- 14. Monitoare foarte late (1720px+) ----------------- */
@media (min-width:1720px){
  .container-xxl{max-width:1560px}
  .section{padding:110px 0}
  .hero-grid{min-height:660px}
  .product-shot{width:min(100%,500px)}
  .demo-card{width:min(100%,620px)}
  .video-frame{width:min(100%,430px)}
  .heatmap-gif-card{width:min(100%,430px)}
  .cinematic-sticky{--rg-phone-h:min(calc(100svh - var(--rg-header) - 80px),880px)}
}
