/* =========================================================
   RASOOKH Mobile Compatibility Patch
   Purpose: mobile/tablet layout fixes only.
   Desktop design is untouched because all rules are scoped
   to max-width media queries.
========================================================= */

@media (max-width: 1180px){
  html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body{
    -webkit-text-size-adjust:100%;
  }

  img, video, iframe{
    max-width:100%;
  }

  .container,
  .header-inner{
    width:min(100% - 32px, 1120px);
  }

  .header{
    height:74px;
  }

  .header-inner{
    gap:14px;
  }

  .nav{
    display:none !important;
  }

  .menu-btn{
    display:grid !important;
    place-items:center;
    flex:0 0 auto;
  }

  .header-actions{
    margin-inline-start:auto;
    gap:8px;
    flex-wrap:nowrap;
  }

  .header-actions .phone,
  .interest-pill{
    display:none !important;
  }

  .header-circle,
  .login-icon{
    width:38px;
    height:38px;
    min-width:38px;
  }

  .lang-circle{
    font-size:12px;
  }

  .mobile-menu{
    width:min(390px, 88vw);
    max-width:88vw;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    box-shadow:-24px 0 70px rgba(0,0,0,.35);
  }

  .section{
    padding:82px 0;
  }

  .section-head,
  .page-intro,
  .about-grid,
  .community-layout,
  .map-grid,
  .form-grid,
  .news-grid,
  .news-page-grid,
  .contact-layout,
  .service-wide,
  .cta-premium{
    grid-template-columns:1fr !important;
  }

  .section-head{
    align-items:flex-start;
  }

  .services-grid,
  .values-grid,
  .features-grid,
  .jobs-grid,
  .contact-cards,
  .projects-list,
  .culture-grid,
  .timeline-premium{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .footer-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .timeline-premium:before{
    display:none !important;
  }

  .contact-layout .premium-card{
    position:relative !important;
    top:auto !important;
  }

  .news-list .news-card{
    grid-template-columns:1fr !important;
  }

  .news-list .news-card img{
    height:230px !important;
    width:100%;
  }
}

@media (max-width: 760px){
  :root{
    --container:calc(100% - 28px);
    --radius:22px;
  }

  .container,
  .header-inner{
    width:calc(100% - 28px) !important;
  }

  .header{
    height:70px !important;
    background:rgba(3,10,16,.56);
    backdrop-filter:blur(14px);
  }

  .header.scrolled{
    height:66px !important;
  }

  .logo{
    font-size:24px !important;
    line-height:1 !important;
    white-space:nowrap;
  }

  .logo small{
    font-size:9px !important;
    letter-spacing:3px !important;
    margin-top:4px !important;
  }

  .header-circle,
  .login-icon{
    width:35px !important;
    height:35px !important;
    min-width:35px !important;
  }

  .header-circle i,
  .login-icon i{
    font-size:14px !important;
  }

  .lang-circle{
    display:none !important;
  }

  .menu-btn{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    border-radius:50% !important;
  }

  .mobile-menu{
    width:86vw !important;
    max-width:86vw !important;
    padding:24px 22px !important;
  }

  .mobile-menu a{
    font-size:16px;
    padding:16px 0;
  }

  .close-menu{
    font-size:34px;
    padding:0;
  }

  .hero-projects{
    min-height:100svh !important;
    height:100svh;
  }

  .hero-project-content{
    right:20px !important;
    left:20px !important;
    bottom:30vh !important;
    width:auto !important;
    max-width:none !important;
  }

  .hero-project-content .project-title{
    font-size:clamp(36px, 11vw, 56px) !important;
    line-height:1.05 !important;
    margin-bottom:8px !important;
  }

  .project-city{
    font-size:20px !important;
    margin-bottom:24px !important;
  }

  .project-stats{
    width:100%;
    max-width:100%;
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px !important;
    overflow:visible !important;
  }

  .project-stats div{
    min-width:0 !important;
    padding:10px 8px !important;
    border-radius:14px !important;
  }

  .project-stats span{
    font-size:11px !important;
    margin-bottom:5px !important;
  }

  .project-stats strong{
    font-size:13px !important;
    white-space:normal !important;
    line-height:1.35;
  }

  .hero-thumbs{
    left:18px !important;
    right:18px !important;
    bottom:7vh !important;
    max-width:none !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:0 0 8px !important;
    gap:10px !important;
    scrollbar-width:none;
  }

  .hero-thumbs::-webkit-scrollbar{
    display:none;
  }

  .hero-thumb{
    min-width:150px !important;
    width:150px !important;
    height:78px !important;
    padding:0 12px 11px !important;
    border-radius:12px !important;
  }

  .hero-thumb.active{
    min-width:165px !important;
    width:165px !important;
    height:88px !important;
  }

  .hero-thumb span{
    font-size:15px !important;
  }

  .hero-thumb small{
    font-size:12px !important;
  }

  .hero-arrow{
    display:none !important;
  }

  .project-slide{
    background-position:center !important;
  }

  .section{
    padding:64px 0 !important;
  }

  .section-title{
    font-size:clamp(28px, 8vw, 38px) !important;
    line-height:1.25 !important;
  }

  .section-lead{
    font-size:16px !important;
    line-height:1.9 !important;
  }

  .section-head{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
    margin-bottom:28px !important;
  }

  .section-head .btn{
    width:100%;
  }

  .about-grid{
    border-radius:22px !important;
  }

  .about-media{
    min-height:300px !important;
  }

  .about-content{
    padding:28px 20px !important;
  }

  .about-content .section-title{
    font-size:30px !important;
  }

  .stats,
  .dark-stats,
  .hero-kpis,
  .services-grid,
  .values-grid,
  .features-grid,
  .jobs-grid,
  .contact-cards,
  .projects-list,
  .culture-grid,
  .timeline-premium,
  .footer-grid{
    grid-template-columns:1fr !important;
  }

  .stats{
    gap:12px !important;
    margin:26px 0 !important;
  }

  .stat{
    padding:12px 14px !important;
    border:1px solid #eadcc0 !important;
    border-radius:16px !important;
  }

  .stat strong{
    font-size:26px !important;
  }

  .community-layout,
  .map-grid,
  .form-grid,
  .news-grid,
  .news-page-grid,
  .page-intro,
  .contact-layout{
    gap:18px !important;
  }

  .community-card,
  .project-card{
    min-height:360px !important;
    border-radius:20px !important;
  }

  .community-card.large{
    min-height:410px !important;
  }

  .community-info{
    padding:24px 20px !important;
  }

  .community-info h3{
    font-size:25px !important;
  }

  .saudi-map{
    min-height:360px !important;
    border-radius:22px !important;
  }

  .saudi-shape{
    inset:52px 34px !important;
  }

  .pin span{
    font-size:12px !important;
    line-height:1.45 !important;
  }

  .city-projects-panel{
    left:14px !important;
    right:14px !important;
    bottom:14px !important;
    width:auto !important;
    max-height:72%;
    overflow-y:auto;
    border-radius:18px !important;
  }

  .dark-stats{
    gap:12px !important;
    margin-top:40px !important;
    padding-top:28px !important;
  }

  .dark-stats strong{
    font-size:36px !important;
  }

  .lifestyle{
    min-height:430px !important;
    background-attachment:scroll !important;
  }

  .life-features{
    gap:12px !important;
    margin-top:24px !important;
  }

  .life-features div{
    width:100%;
    min-width:0 !important;
  }

  .service-card,
  .premium-card,
  .value-card,
  .feature-card,
  .job-card,
  .contact-card,
  .culture-card,
  .timeline-item{
    padding:22px !important;
    border-radius:20px !important;
  }

  .service-card{
    min-height:auto !important;
  }

  .news-card,
  .news-card.main{
    border-radius:20px !important;
  }

  .news-card img,
  .news-card.main img,
  .news-grid .small-stack .news-card img,
  .news-list .news-card img{
    height:230px !important;
    width:100% !important;
    object-fit:cover !important;
  }

  .news-body{
    padding:20px !important;
  }

  .news-body h3{
    font-size:22px !important;
    line-height:1.45;
  }

  .careers{
    min-height:auto;
  }

  .form-box{
    padding:22px !important;
    border-radius:20px !important;
  }

  .form-box input,
  .form-box select,
  .form-box textarea{
    height:52px !important;
    font-size:16px !important;
  }

  .form-box textarea{
    height:120px !important;
  }

  .btn{
    min-height:50px !important;
    padding:0 22px !important;
  }

  .footer{
    padding:48px 0 20px !important;
  }

  .footer-grid{
    gap:20px !important;
  }

  .copyright{
    margin-top:28px !important;
    font-size:13px;
  }

  .floating-whatsapp{
    width:52px !important;
    height:52px !important;
    left:16px !important;
    bottom:16px !important;
  }

  .floating-whatsapp i{
    font-size:23px !important;
  }

  .inner-hero{
    min-height:46vh !important;
  }

  .inner-hero .container{
    padding-top:82px !important;
  }

  .inner-hero h1{
    font-size:clamp(38px, 11vw, 58px) !important;
  }

  .breadcrumb{
    flex-wrap:wrap;
    font-size:13px;
  }

  .project-filters{
    overflow-x:auto;
    flex-wrap:nowrap !important;
    padding-bottom:8px;
    scrollbar-width:none;
  }

  .project-filters::-webkit-scrollbar{
    display:none;
  }

  .project-filters button{
    white-space:nowrap;
    flex:0 0 auto;
  }

  .service-wide{
    padding:22px !important;
  }

  .service-number{
    font-size:52px !important;
  }

  .cta-premium{
    padding:26px !important;
    border-radius:22px !important;
  }

  .news-ticker{
    border-radius:16px !important;
    padding:14px !important;
  }

  .news-ticker span{
    animation-duration:18s !important;
  }

  .map-placeholder{
    min-height:280px !important;
    border-radius:20px !important;
  }
}

@media (max-width: 420px){
  .header-actions{
    gap:6px !important;
  }

  .header-circle,
  .login-icon{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
  }

  .menu-btn{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
  }

  .logo{
    font-size:22px !important;
  }

  .hero-project-content{
    bottom:32vh !important;
  }

  .project-stats{
    grid-template-columns:1fr 1fr 1fr;
  }

  .project-stats div{
    padding:9px 6px !important;
  }

  .project-stats strong{
    font-size:12px !important;
  }

  .hero-thumb{
    min-width:136px !important;
    width:136px !important;
  }

  .hero-thumb.active{
    min-width:152px !important;
    width:152px !important;
  }

  .community-card,
  .project-card{
    min-height:330px !important;
  }
}