/* Sawah — phone-first responsive override v5
   Loaded after all legacy and inline page styles. Desktop is untouched. */

@media (max-width: 820px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important;-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}
  *,*::before,*::after{box-sizing:border-box!important}
  body{margin:0!important}
  img,video,svg,canvas,iframe{max-width:100%!important}
  img,video{height:auto}
  iframe{width:100%!important}
  main,section,header,footer,article,nav,div{min-width:0}
  .container,.wrap{width:100%!important;max-width:none!important;margin-inline:auto!important;padding-inline:12px!important}

  /* Header */
  .site-header,.topbar,.top{width:100%!important;max-width:100%!important}
  .nav,.site-header .nav,.topbar .nav,.top .nav{width:100%!important;min-height:66px!important;height:auto!important;padding:8px 0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;flex-wrap:nowrap!important}
  .nav-links{display:none!important}
  .brand,.site-header .brand,.topbar .brand,.top .brand{width:auto!important;min-width:0!important;max-width:44vw!important;flex:0 1 auto!important;font-size:27px!important;line-height:1!important;letter-spacing:-1px!important}
  .brand-logo{max-width:100%!important}
  .brand-logo strong,.brand strong{font-size:30px!important;letter-spacing:-2px!important}
  .brand-logo small,.brand small{font-size:6px!important;letter-spacing:2.2px!important;margin-top:4px!important}
  .brand-plane{font-size:16px!important;top:-7px!important;right:-1px!important}
  .nav-toggle{display:flex!important;align-items:center!important;justify-content:center!important;width:40px!important;height:40px!important;padding:7px!important;flex:0 0 40px!important}
  .site-header .btn-light,.nav>.btn,.book,.back{max-width:48vw!important;min-height:38px!important;padding:8px 10px!important;font-size:10px!important;line-height:1.25!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

  /* Hero */
  .hero{min-height:0!important;height:auto!important;padding:80px 0 48px!important;display:block!important;background-position:center!important}
  .hero-grid,.hero-inner{display:block!important;width:100%!important;min-height:0!important;max-width:100%!important;padding-top:18px!important;padding-bottom:8px!important}
  .hero-copy{width:100%!important;max-width:100%!important;padding-top:10px!important}
  .hero h1,.hero-copy h1{font-size:clamp(34px,11vw,48px)!important;line-height:1.08!important;letter-spacing:-1px!important;margin:8px 0 12px!important;max-width:100%!important}
  .hero p,.hero-copy>p{font-size:13px!important;line-height:1.85!important;max-width:100%!important;margin-bottom:18px!important}
  .eyebrow,.kicker,.hero-kicker{font-size:10px!important}
  .hero-note{display:none!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;width:100%!important;margin-bottom:18px!important}
  .hero-actions .btn,.hero-actions a,.hero-actions button{width:100%!important;min-height:44px!important;justify-content:center!important;padding:10px 14px!important}
  .hero-points{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;width:100%!important}
  .hero-points>div{padding:11px 12px!important;border-radius:14px!important}
  .hero-points strong{font-size:12px!important}.hero-points span{font-size:10px!important}
  .hero-tags{display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin-top:13px!important}
  .hero-tags span{font-size:9px!important;padding:5px 8px!important}
  .hero-wave{height:32px!important}

  /* General spacing */
  .section,.content,main>.section{padding-top:28px!important;padding-bottom:42px!important}
  .heading,.section-heading{margin-bottom:17px!important;padding-inline:2px!important}
  .heading h2,.section-heading h2{font-size:26px!important;line-height:1.3!important;margin:4px 0 7px!important}
  .heading p,.section-heading p{font-size:11px!important;line-height:1.75!important;max-width:100%!important}
  .signature,.city-signature{padding:18px 0 10px!important}
  .signature h2,.city-signature h2{font-size:34px!important;line-height:1.15!important}

  /* Major grids — one column on phones */
  .grid,.cards-grid,.guide-grid,.hotel-grid,.destination-grid,.benefits-grid,.zones-grid,.zone-grid,.mall-grid,.restaurant-grid,.restaurants-grid,.parks-grid,.events-grid,.activity-grid,.activities-grid,.experience-grid,.cta-grid,.footer-grid,.city-guide-hero,.map-card,.weather-current,.spb-live-panels,.moscow-live-panels,.sochi-live-panels{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  .featured,.full,.card.full,.gallery-big{grid-column:auto!important}

  /* Cards */
  .card,.hotel-card,.hotel-zone,.zone-card,.mall-card,.restaurant-card,.guide-card,.destination-card,.activity-card,.experience-card,.article,.benefit{width:100%!important;max-width:100%!important;min-width:0!important;border-radius:18px!important;overflow:hidden!important}
  .media,.card-media,.hotel-media,.zone-media,.mall-image,.activity-photo,.restaurant-image,.guide-card img{height:210px!important;min-height:0!important;object-fit:cover!important}
  .body,.card-body,.hotel-body,.zone-body,.activity-body,.guide-card-body{padding:15px!important}
  .body h3,.card h3,.hotel-name,.zone-body h3,.activity-title,.guide-card h3{font-size:20px!important;line-height:1.35!important;margin-top:5px!important}
  .body p,.card p,.activity-desc,.guide-card p{font-size:11px!important;line-height:1.75!important}
  .meta,.tags,.guide-tags{gap:5px!important}
  .meta span,.tags span,.guide-tags span,.badge,.tag,.photo-tag{font-size:9px!important;padding:5px 7px!important}
  .enter,.enter-link{font-size:11px!important}

  /* Homepage destinations */
  .destination-card,.destination-card:last-child{min-height:330px!important;height:330px!important;grid-column:auto!important}
  .destination-card>img{width:100%!important;height:100%!important;object-fit:cover!important}
  .destination-content{inset:auto 14px 14px!important;padding:0!important}
  .destination-content h3{font-size:25px!important}
  .destination-content p{font-size:10.5px!important;margin-bottom:10px!important}
  .chip-link{font-size:10px!important;padding:7px 10px!important}

  /* City guide */
  .city-guide-copy{padding:18px!important;border-radius:18px!important}
  .city-guide-copy h3{font-size:24px!important;line-height:1.35!important}
  .city-guide-copy p{font-size:11px!important;line-height:1.75!important}
  .city-guide-image{min-height:205px!important;border-radius:18px!important}
  .city-guide-image img{width:100%!important;height:205px!important;object-fit:cover!important}
  .guide-card img{height:190px!important}

  /* Route and maps */
  .route{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin:22px 0!important}
  .route-card img{width:98px!important;height:98px!important}
  .route-flight{justify-content:center!important;transform:rotate(90deg)!important;height:24px!important;font-size:20px!important}
  .map-card{padding:15px!important;border-radius:18px!important}
  .map-card h3{font-size:23px!important}
  .map-card p{font-size:11px!important}
  .map-dots{height:180px!important;border-radius:15px!important}

  /* Benefits */
  .benefit{padding:18px 14px!important}
  .benefit .icon{width:48px!important;height:48px!important;font-size:22px!important;margin-bottom:10px!important}
  .benefit h3{font-size:15px!important}.benefit p{font-size:11px!important}

  /* Galleries */
  .gallery-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .gallery-grid figure,.gallery-item{min-height:0!important;height:150px!important;border-radius:12px!important}
  .gallery-grid figure img,.gallery-item img{width:100%!important;height:100%!important;object-fit:cover!important}
  .gallery-grid figcaption{font-size:11px!important;inset:auto 9px 7px!important}
  .gallery-head{display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;gap:8px!important}
  .gallery-head h2{font-size:21px!important}
  .lightbox{grid-template-columns:36px minmax(0,1fr) 36px!important;padding:7px!important}
  .lightbox img{max-height:76vh!important;max-width:100%!important;border-radius:10px!important}
  .lightbox-btn{width:32px!important;height:32px!important;font-size:18px!important}
  .lightbox-close{width:34px!important;height:34px!important;top:8px!important;right:8px!important}

  /* Detail facts and CTAs */
  .facts{padding:0!important}
  .facts li{display:grid!important;grid-template-columns:1fr!important;gap:2px!important;padding:9px 0!important}
  .facts span{font-size:10px!important}.facts strong{font-size:13px!important;overflow-wrap:anywhere!important}
  .cta-grid{margin:16px 0!important}
  .cta{min-height:0!important;padding:18px!important;border-radius:18px!important}
  .cta h2,.cta h3{font-size:20px!important;line-height:1.4!important}
  .cta p{font-size:11px!important}
  .cta-wrap{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important}
  .cta-wrap .btn,.cta .btn,.cta-btn{width:100%!important;min-height:44px!important}

  /* Lists/actions */
  .actions{display:flex!important;flex-direction:column!important;gap:7px!important}
  .actions .btn,.actions a,.actions button{width:100%!important;min-height:43px!important}
  .count{margin-inline:auto!important}
  .activity-actions,.quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .activity-actions .booking{grid-column:1/-1!important}

  /* Weather */
  .weather-panel{padding:14px 11px!important;border-radius:18px!important}
  .weather-head{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:6px!important}
  .weather-current{grid-template-columns:1fr!important}
  .current-main{padding:14px!important;gap:9px!important;border-radius:16px!important}
  .current-temp{font-size:40px!important}.weather-icon{font-size:44px!important}.current-condition{font-size:12px!important}
  .current-details{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;padding:8px!important}
  .weather-stat{padding:8px 4px!important}.weather-stat span{font-size:8px!important}.weather-stat strong{font-size:10px!important}
  .forecast-grid,.spb-forecast-row,.moscow-forecast-row,.sochi-forecast-row{display:flex!important;grid-template-columns:none!important;gap:7px!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;-webkit-overflow-scrolling:touch!important;padding-bottom:7px!important;scrollbar-width:none!important}
  .forecast-grid::-webkit-scrollbar,.spb-forecast-row::-webkit-scrollbar,.moscow-forecast-row::-webkit-scrollbar,.sochi-forecast-row::-webkit-scrollbar{display:none!important}
  .forecast-day,.spb-day,.moscow-day,.sochi-day{flex:0 0 82px!important;min-width:82px!important;scroll-snap-align:start!important}

  /* Live city weather/prayer shells */
  .spb-live,.moscow-live,.sochi-live{padding:4px 0 38px!important}
  .spb-live .container,.moscow-live .container,.sochi-live .container{padding-inline:7px!important}
  .spb-live-shell,.moscow-live-shell,.sochi-live-shell{min-height:0!important;padding:14px 10px!important;border-radius:20px!important}
  .spb-live-top,.moscow-live-top,.sochi-live-top{display:block!important;margin-bottom:75px!important}
  .spb-live-city h2,.moscow-live-city h2,.sochi-live-city h2{font-size:31px!important}
  .spb-live-quote,.moscow-live-quote,.sochi-live-quote{display:none!important}
  .spb-glass,.moscow-glass,.sochi-glass{min-width:0!important;border-radius:16px!important}
  .spb-current,.moscow-current,.sochi-current,.spb-forecast,.moscow-forecast,.sochi-forecast,.spb-prayer,.moscow-prayer,.sochi-prayer{padding:13px!important}

  /* Forms / modals */
  .modal,.booking-modal,.dialog,.popup,.lightbox{max-width:100vw!important}
  .modal-content,.booking-card,.dialog-card,.popup-card{width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;max-height:88vh!important;overflow:auto!important;border-radius:18px!important;padding:16px!important}
  form,.form-grid{max-width:100%!important}
  .form-grid{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  input,select,textarea{width:100%!important;font-size:16px!important}

  /* Tables / long content */
  table{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  pre,code{max-width:100%!important;white-space:pre-wrap!important;overflow-wrap:anywhere!important}
  h1,h2,h3,h4,p,a,span,strong,small,li{overflow-wrap:break-word}

  /* Footer */
  .footer{padding:32px 0 18px!important}
  .footer-grid{gap:18px!important}
  .footer-row,.footer-bottom{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;gap:7px!important}
  .footer-logo{align-items:center!important}
}

@media (max-width: 390px){
  .container,.wrap{padding-inline:9px!important}
  .brand,.site-header .brand,.topbar .brand,.top .brand{max-width:42vw!important;font-size:25px!important}
  .brand-logo strong,.brand strong{font-size:27px!important}
  .site-header .btn-light,.nav>.btn,.book,.back{font-size:9px!important;padding:7px 8px!important;max-width:50vw!important}
  .hero{padding-top:76px!important;padding-bottom:42px!important}
  .hero h1,.hero-copy h1{font-size:33px!important}
  .heading h2,.section-heading h2{font-size:24px!important}
  .media,.card-media,.hotel-media,.zone-media,.mall-image,.activity-photo,.restaurant-image{height:195px!important}
  .gallery-grid{gap:5px!important}.gallery-grid figure,.gallery-item{height:135px!important}
  .current-details{grid-template-columns:1fr!important}
}