/* RoamNex eSIM Theme — responsive.css
 * Mobile-first base lives in main.css; these are the upward breakpoints.
 * ------------------------------------------------------------------------- */

/* Small tablets */
@media (min-width:560px){
  .esimaccess-dh-grid,
  .rnx-cardgrid{grid-template-columns:repeat(3,1fr)}
  .rnx-feature-grid{grid-template-columns:repeat(2,1fr)}
  .rnx-postgrid{grid-template-columns:repeat(2,1fr)}
  .rnx-devicegrid{grid-template-columns:repeat(2,1fr)}
  .rnx-optgrid--lang,.rnx-optgrid--currency{grid-template-columns:repeat(2,1fr)}
}

/* Tablets */
@media (min-width:768px){
  .rnx-shell{padding-inline:24px}
  .rnx-modal{align-items:center}
  .rnx-modal__panel{border-radius:var(--rnx-r-xl);max-height:80vh}
  .rnx-steps{grid-template-columns:repeat(3,1fr)}
  .rnx-guide__cols{grid-template-columns:1fr 1fr}
  .rnx-pagehero__grid{grid-template-columns:1.4fr .6fr}
  .rnx-region-art,.rnx-globe-art{width:150px;height:150px}
}

/* Desktop: real top nav, no burger, no bottom nav */
@media (min-width:861px){
  :root{--rnx-header-h:76px}
  .rnx-header__nav{display:block;margin:0 8px}
  .rnx-hide-mobile{display:inline-flex}
  .rnx-burger{display:none}
  .rnx-bottomnav{display:none}
  body{padding-bottom:0!important}
  .rnx-drawer,.rnx-drawer-overlay{display:none!important}

  .esimaccess-dh-grid,
  .rnx-cardgrid{grid-template-columns:repeat(var(--rnx-cols,4),1fr);gap:14px}
  .rnx-cardgrid--regions{--rnx-cols:6}
  .rnx-cardgrid--global{--rnx-cols:3}
  .rnx-feature-grid{grid-template-columns:repeat(4,1fr)}
  .rnx-postgrid{grid-template-columns:repeat(3,1fr)}

  .rnx-footer__top{grid-template-columns:1.4fr 2fr}
  .rnx-footer__cols{grid-template-columns:repeat(4,1fr)}
  .rnx-footer__bottom{flex-direction:row;align-items:center;justify-content:space-between}
}

/* Mobile only: top icon switchers hidden (use drawer), burger visible */
@media (max-width:860px){
  .rnx-hide-mobile{display:none}
  .rnx-header__nav{display:none}
}

/* Large desktop */
@media (min-width:1100px){
  .rnx-hero__inner{padding-block:64px 56px}
  .rnx-section{padding-block:64px}
}