/* Qalamoun Market 3.1.6 — Mobile home slider hero hotfix
   Scope: homepage slider on phones only.
   Goal: make the slider appear like a real wide hero banner on mobile,
   keep the image visually rich, and show title + subtitle + CTA without hiding the content.
   No backend, PWA, database, or non-homepage pages are changed. */

@media (max-width:700px){
  body.home-v310 .home-slider{
    width:100vw!important;
    max-width:100vw!important;
    min-width:100vw!important;
    margin-inline:calc(50% - 50vw)!important;
    margin-top:0!important;
    border-radius:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    height:auto!important;
    min-height:206px!important;
    aspect-ratio:2.6 / 1!important;
    background:#dfe8e4!important;
    box-shadow:none!important;
    border:0!important;
  }

  body.home-v310 .home-slider-track,
  body.home-v310 .home-slide{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
  }

  body.home-v310 .home-slide-backdrop{
    display:none!important;
  }

  body.home-v310 .home-slide-media{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
    transform:none!important;
    animation:none!important;
    filter:saturate(.98) contrast(1.03)!important;
    z-index:1!important;
  }

  body.home-v310 .home-slide-shade{
    position:absolute!important;
    inset:0!important;
    z-index:2!important;
    background:linear-gradient(270deg,
      rgba(8,35,26,.60) 0%,
      rgba(8,35,26,.36) 22%,
      rgba(8,35,26,.18) 42%,
      rgba(8,35,26,.10) 60%,
      rgba(8,35,26,.16) 100%)!important;
  }

  body.home-v310 .home-slide-content{
    position:absolute!important;
    z-index:3!important;
    top:50%!important;
    bottom:auto!important;
    left:auto!important;
    right:14px!important;
    transform:translateY(-50%)!important;
    max-width:min(54%, 240px)!important;
    width:auto!important;
    padding:0!important;
    text-align:right!important;
  }

  body.home-v310 .home-slide-content .hero-mini-chip{
    display:inline-flex!important;
    align-items:center!important;
    gap:6px!important;
    font-size:8px!important;
    line-height:1!important;
    padding:5px 8px!important;
    border-radius:999px!important;
    white-space:nowrap!important;
  }

  body.home-v310 .home-slide-content h1{
    display:block!important;
    font-size:clamp(18px, 5.4vw, 30px)!important;
    line-height:1.08!important;
    margin:10px 0 7px!important;
    max-width:100%!important;
    color:#fff!important;
    text-shadow:0 2px 10px rgba(0,0,0,.24)!important;
    letter-spacing:-.025em!important;
  }

  body.home-v310 .home-slide-content p{
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
    font-size:10.5px!important;
    line-height:1.58!important;
    margin:0!important;
    max-width:100%!important;
    color:rgba(255,255,255,.93)!important;
    text-shadow:0 1px 6px rgba(0,0,0,.18)!important;
  }

  body.home-v310 .home-slide-content .hero-explore-btn{
    display:inline-flex!important;
    align-items:center!important;
    gap:6px!important;
    margin-top:11px!important;
    padding:8px 12px!important;
    border-radius:13px!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:900!important;
    background:rgba(255,255,255,.96)!important;
    color:#0f624a!important;
    box-shadow:0 10px 24px rgba(0,0,0,.10)!important;
    white-space:nowrap!important;
  }

  body.home-v310 .home-slide-content .hero-explore-btn svg{
    width:15px!important;
    height:15px!important;
    stroke-width:2.2!important;
  }

  body.home-v310 .home-slider-dots{
    bottom:8px!important;
    right:50%!important;
    transform:translateX(50%)!important;
    padding:4px 7px!important;
    gap:6px!important;
    z-index:4!important;
  }

  body.home-v310 .home-slider-dots button{
    width:6px!important;
    height:6px!important;
  }

  body.home-v310 .home-slider-dots button.active{
    width:18px!important;
  }

  body.home-v310 .home-slider-arrow{
    display:none!important;
  }
}

@media (max-width:390px){
  body.home-v310 .home-slider{
    aspect-ratio:2.45 / 1!important;
    min-height:194px!important;
  }

  body.home-v310 .home-slide-content{
    right:12px!important;
    max-width:min(56%, 220px)!important;
  }

  body.home-v310 .home-slide-content h1{
    font-size:clamp(17px, 5.8vw, 24px)!important;
    margin:9px 0 6px!important;
  }

  body.home-v310 .home-slide-content p{
    font-size:9.6px!important;
  }

  body.home-v310 .home-slide-content .hero-explore-btn{
    margin-top:9px!important;
    padding:7px 11px!important;
    font-size:9.3px!important;
  }
}