/* Afghan Eats homepage final layout system — 2026-09-07
   One consistent customer-first composition across header, hero, restaurants and cuisines. */

.premium-home .header>.container,
.premium-home .hero>.container,
.premium-home main>.section>.container,
.premium-home .community-band>.container,
.premium-home .footer>.container{
  width:min(1520px,calc(100% - 64px))!important;
  max-width:none!important;
  margin-inline:auto!important;
}

.premium-home .header{min-height:76px!important}
.premium-home .header .nav{min-height:76px!important;gap:26px!important}
.premium-home .brand-home{gap:10px!important}
.premium-home .brand-home .brand-emblem{width:42px!important;height:42px!important}
.premium-home .brand-home .brand-wordmark{font-size:1.28rem!important;font-weight:900!important;letter-spacing:-.02em!important}
.premium-home .navlinks{gap:26px!important}
.premium-home .navlinks a{font-size:.92rem!important;font-weight:800!important}
.premium-home .actions{gap:10px!important}
.premium-home .actions .btn,.premium-home .actions .lang{min-height:42px!important}

.premium-home main{display:flex!important;flex-direction:column!important}
.premium-home main>.hero{order:1!important}
.premium-home main>.section.soft{order:2!important}
.premium-home main>.section:not(.soft){order:3!important}
.premium-home main>.community-band{order:4!important}

.premium-home .hero{
  min-height:0!important;
  padding:48px 0 52px!important;
  display:block!important;
  background:
    radial-gradient(circle at 13% 18%,rgba(244,182,63,.10),transparent 26rem),
    radial-gradient(circle at 84% 78%,rgba(229,72,60,.07),transparent 30rem),
    linear-gradient(116deg,#072a23 0%,#0b3a30 52%,#072b24 100%)!important;
}
.premium-home .hero-grid{
  display:grid!important;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;
  grid-template-areas:"copy media"!important;
  gap:clamp(48px,4vw,72px)!important;
  align-items:center!important;
  width:100%!important;
  direction:ltr!important;
}
.premium-home.rtl .hero-grid{
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important;
  grid-template-areas:"media copy"!important;
  direction:ltr!important;
}
.premium-home .hero-copy{
  grid-area:copy!important;
  width:100%!important;
  max-width:620px!important;
  margin:0!important;
  padding:8px 0!important;
  align-self:center!important;
  justify-self:start!important;
}
.premium-home.rtl .hero-copy{
  direction:rtl!important;
  text-align:right!important;
  justify-self:end!important;
  max-width:630px!important;
}
.premium-home .hero-carousel{
  grid-area:media!important;
  width:100%!important;
  max-width:none!important;
  height:455px!important;
  min-height:455px!important;
  margin:0!important;
  border-radius:28px!important;
  border:1px solid rgba(255,216,120,.28)!important;
  box-shadow:0 26px 64px rgba(1,16,13,.28)!important;
  overflow:hidden!important;
}
.premium-home .hero-carousel:hover{box-shadow:0 26px 64px rgba(1,16,13,.28)!important}
.premium-home .hero-slide-overlay{padding:32px 34px 34px!important}
.premium-home .hero-slide-overlay>div{max-width:500px!important}
.premium-home .hero-slide h2{max-width:15ch!important;font-size:clamp(2.15rem,2.5vw,2.8rem)!important;line-height:1.12!important}
.premium-home.rtl .hero-slide h2{line-height:1.22!important}

.premium-home .hero-order{width:100%!important;max-width:610px!important;margin-top:4px!important}
.premium-home.rtl .hero-order{margin-left:auto!important;margin-right:0!important}
.premium-home .mode-tabs{margin-bottom:12px!important}
.premium-home.rtl .mode-tabs{margin-left:auto!important;margin-right:0!important}
.premium-home .address-box{
  width:100%!important;
  max-width:610px!important;
  min-height:62px!important;
  padding:6px!important;
  border-radius:17px!important;
  box-shadow:0 14px 34px rgba(1,16,13,.10)!important;
}
.premium-home.rtl .address-box{margin-left:auto!important;margin-right:0!important;direction:rtl!important}
.premium-home .address-box input{min-height:48px!important;font-size:.98rem!important;padding-inline:18px!important}
.premium-home.rtl .address-box input{direction:rtl!important;text-align:right!important}
.premium-home .address-box .btn{min-width:138px!important;min-height:48px!important;border-radius:11px!important;font-size:.93rem!important}
.premium-home .hero-order::after,.premium-home.rtl .hero-order::after{
  content:""!important;
  display:block!important;
  width:62px!important;
  height:3px!important;
  margin-top:16px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#e5483c,#f3b23d)!important;
  opacity:.9!important;
}
.premium-home.rtl .hero-order::after{margin-left:auto!important;margin-right:0!important}

.premium-home main>.section.soft{padding:64px 0 70px!important;background:#fffaf1!important}
.premium-home main>.section.soft .section-head{margin-bottom:28px!important}
.premium-home main>.section.soft .section-head h2{font-size:clamp(2rem,2.3vw,2.65rem)!important;color:#123c32!important;letter-spacing:-.025em!important}
.premium-home.rtl main>.section.soft .section-head{direction:rtl!important;text-align:right!important}
.premium-home .restaurant-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:20px!important;
  width:100%!important;
}
.premium-home .restaurant-card{
  min-width:0!important;
  border-radius:20px!important;
  overflow:hidden!important;
  background:#fff!important;
  border:1px solid rgba(18,60,50,.10)!important;
  box-shadow:0 10px 28px rgba(18,60,50,.06)!important;
}
.premium-home .restaurant-image{aspect-ratio:16/10!important;min-height:0!important}

.premium-home main>.section:not(.soft){
  padding:58px 0 68px!important;
  background:
    radial-gradient(circle at 88% 12%,rgba(229,72,60,.055),transparent 22rem),
    linear-gradient(180deg,#fff7e8 0%,#fff3df 100%)!important;
}
.premium-home main>.section:not(.soft) .section-head{margin-bottom:24px!important}
.premium-home main>.section:not(.soft) .section-head h2{font-size:clamp(1.9rem,2.1vw,2.45rem)!important;color:#123c32!important}
.premium-home.rtl main>.section:not(.soft) .section-head{direction:rtl!important;text-align:right!important}
.premium-home .cuisine-photo-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
  width:100%!important;
}
.premium-home .cuisine-photo-card{
  min-height:168px!important;
  border-radius:18px!important;
  overflow:hidden!important;
  box-shadow:0 12px 30px rgba(18,60,50,.08)!important;
}
.premium-home .cuisine-photo-card b{font-size:1rem!important;padding:16px!important}

.premium-home .community-band{padding:58px 0!important}
.premium-home .join-strip{gap:36px!important}

@media (max-width:1280px){
  .premium-home .header>.container,
  .premium-home .hero>.container,
  .premium-home main>.section>.container,
  .premium-home .community-band>.container,
  .premium-home .footer>.container{width:min(1180px,calc(100% - 48px))!important}
  .premium-home .hero-grid,.premium-home.rtl .hero-grid{gap:44px!important}
  .premium-home .hero-carousel{height:410px!important;min-height:410px!important}
  .premium-home .restaurant-grid,.premium-home .cuisine-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media (max-width:1000px){
  .premium-home .header>.container,
  .premium-home .hero>.container,
  .premium-home main>.section>.container,
  .premium-home .community-band>.container,
  .premium-home .footer>.container{width:min(920px,calc(100% - 36px))!important}
  .premium-home .hero{padding:38px 0 44px!important}
  .premium-home .hero-grid,.premium-home.rtl .hero-grid{
    grid-template-columns:1fr!important;
    grid-template-areas:"copy" "media"!important;
    gap:30px!important;
  }
  .premium-home .hero-copy,.premium-home.rtl .hero-copy{justify-self:stretch!important;max-width:700px!important}
  .premium-home .hero-carousel{height:360px!important;min-height:360px!important}
  .premium-home .restaurant-grid,.premium-home .cuisine-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media (max-width:720px){
  .premium-home .header>.container,
  .premium-home .hero>.container,
  .premium-home main>.section>.container,
  .premium-home .community-band>.container,
  .premium-home .footer>.container{width:calc(100% - 28px)!important}
  .premium-home .header,.premium-home .header .nav{min-height:64px!important}
  .premium-home .brand-home .brand-wordmark{font-size:1rem!important}
  .premium-home .hero{padding:30px 0 34px!important}
  .premium-home .hero-carousel{height:275px!important;min-height:275px!important;border-radius:20px!important}
  .premium-home .address-box{min-height:58px!important}
  .premium-home .address-box .btn{min-width:116px!important}
  .premium-home .restaurant-grid,.premium-home .cuisine-photo-grid{grid-template-columns:1fr!important}
  .premium-home main>.section.soft,.premium-home main>.section:not(.soft){padding:44px 0 50px!important}
}

/* 2026-09-07 — final restaurant marketplace treatment.
   Restaurant cards and photography are intentionally static: no translate, scale,
   pointer-following glow or reveal movement. Interaction is expressed only through
   border/shadow/color so the card never shakes under the pointer. */
.premium-home main>.section.soft{
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 10% 10%,rgba(243,178,61,.08),transparent 28rem),
    radial-gradient(circle at 92% 88%,rgba(229,72,60,.055),transparent 30rem),
    linear-gradient(180deg,#fffaf1 0%,#fff7eb 100%)!important;
  border-top:1px solid rgba(18,60,50,.06)!important;
}
.premium-home main>.section.soft::before{
  display:none!important;
}
.premium-home main>.section.soft .section-head{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:28px!important;
  margin-bottom:30px!important;
}
.premium-home.rtl main>.section.soft .section-head{
  direction:rtl!important;
}
.premium-home main>.section.soft .section-head>div{
  max-width:760px!important;
}
.premium-home main>.section.soft .section-head h2{
  margin:0!important;
  color:#0b332a!important;
  font-weight:950!important;
  line-height:1.12!important;
}
.premium-home main>.section.soft .section-head h2::after{
  width:62px!important;
  height:3px!important;
  margin-top:12px!important;
  background:linear-gradient(90deg,#e5483c,#f3b23d)!important;
}
.premium-home main>.section.soft .section-head p{
  max-width:680px!important;
  margin-top:10px!important;
  color:#66756f!important;
  font-size:.98rem!important;
  line-height:1.7!important;
}
.premium-home main>.section.soft .section-head .btn.btn-light{
  flex:0 0 auto!important;
  min-height:44px!important;
  padding:0 18px!important;
  border:1px solid rgba(18,60,50,.16)!important;
  border-radius:13px!important;
  background:#fff!important;
  color:#123c32!important;
  box-shadow:0 6px 18px rgba(18,60,50,.05)!important;
  font-size:.9rem!important;
  font-weight:850!important;
  opacity:1!important;
}
.premium-home main>.section.soft .section-head .btn.btn-light:hover{
  transform:none!important;
  border-color:rgba(18,60,50,.30)!important;
  background:#f8f2e7!important;
  color:#0b332a!important;
  box-shadow:0 8px 20px rgba(18,60,50,.07)!important;
}

.premium-home main>.section.soft #homeRestaurants.restaurant-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))!important;
  gap:24px!important;
  align-items:stretch!important;
  width:100%!important;
}
.premium-home main>.section.soft #homeRestaurants .restaurant-card,
.premium-home main>.section.soft #homeRestaurants .restaurant-card:hover,
.premium-home main>.section.soft #homeRestaurants .restaurant-card:focus,
.premium-home main>.section.soft #homeRestaurants .restaurant-card:focus-within,
.premium-home main>.section.soft #homeRestaurants .restaurant-card.ae-reveal,
.premium-home main>.section.soft #homeRestaurants .restaurant-card.ae-reveal.is-revealed{
  position:relative!important;
  display:block!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  opacity:1!important;
  transform:none!important;
  translate:none!important;
  scale:none!important;
  rotate:none!important;
  overflow:hidden!important;
  border:1px solid rgba(18,60,50,.11)!important;
  border-radius:22px!important;
  background:#fffdf8!important;
  box-shadow:0 12px 30px rgba(18,60,50,.075)!important;
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease!important;
  will-change:auto!important;
  contain:layout paint!important;
}
.premium-home main>.section.soft #homeRestaurants .restaurant-card:hover,
.premium-home main>.section.soft #homeRestaurants .restaurant-card:focus-within{
  transform:none!important;
  border-color:rgba(18,60,50,.23)!important;
  background:#fff!important;
  box-shadow:0 16px 38px rgba(18,60,50,.105)!important;
}
.premium-home main>.section.soft #homeRestaurants .restaurant-card::after{
  display:none!important;
  content:none!important;
}
.premium-home main>.section.soft #homeRestaurants .restaurant-card-link{
  display:flex!important;
  height:100%!important;
  flex-direction:column!important;
  color:inherit!important;
  text-decoration:none!important;
  transform:none!important;
}
.premium-home main>.section.soft #homeRestaurants .restaurant-image{
  position:relative!important;
  width:100%!important;
  aspect-ratio:16/10!important;
  min-height:0!important;
  overflow:hidden!important;
  border-radius:0!important;
  background:
    radial-gradient(circle at 18% 15%,rgba(243,178,61,.18),transparent 12rem),
    linear-gradient(135deg,#123c32,#0b2c24)!important;
  transform:none!important;
  contain:paint!important;
}
.premium-home main>.section.soft #homeRestaurants .restaurant-image img,
.premium-home main>.section.soft #homeRestaurants .restaurant-card:hover .restaurant-image img,
.premium-home main>.section.soft #homeRestaurants .restaurant-card:focus-within .restaurant-image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  opacity:1!important;
  transform:none!important;
  translate:none!important;
  scale:none!important;
  rotate:none!important;
  filter:saturate(1.02) contrast(1.01)!important;
  transition:filter .18s ease!important;
  animation:none!important;
  will-change:auto!important;
  backface-visibility:hidden!important;
}
.premium-home main>.section.soft #homeRestaurants .restaurant-card:hover .restaurant-image img{
  filter:saturate(1.055) contrast(1.02)!important;
}
.premium-home main>.section.soft #homeRestaurants .restaurant-photo-placeholder.restaurant-specific-placeholder{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:22px!important;
  text-align:center!important;
  color:#fff8ed!important;
  background:
    radial-gradient(circle at 22% 18%,rgba(243,178,61,.20),transparent 10rem),
    linear-gradient(135deg,#174b3e 0%,#0b332a 58%,#082820 100%)!important;
  background-image:
    radial-gradient(circle at 22% 18%,rgba(243,178,61,.20),transparent 10rem),
    linear-gradient(135deg,#174b3e 0%,#0b332a 58%,#082820 100%)!important;
  transform:none!important;
  animation:none!important;
}
.premium-home main>.section.soft #homeRestaurants .restaurant-photo-placeholder[hidden]{
  display:none!important;
}
.premium-home main>.section.soft #homeRestaurants .restaurant-placeholder-mark{
  display:grid!important;
  place-items:center!important;
  width:58px!important;
  height:58px!important;
  border:1px solid rgba(255,226,159,.35)!important;
  border-radius:18px!important;
  background:rgba(255,248,237,.10)!important;
  color:#ffd878!important;
  font-size:1.15rem!important;
  font-weight:950!important;
  letter-spacing:.03em!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08)!important;
}
.premium-home main>.section.soft #homeRestaurants .restaurant-photo-placeholder b{
  color:#fff8ed!important;
  font-size:1rem!important;
  font-weight:850!important;
}
.premium-home main>.section.soft #homeRestaurants .restaurant-photo-placeholder small{
  color:rgba(255,248,237,.66)!important;
  font-size:.78rem!important;
}
.premium-home main>.section.soft #homeRestaurants .status-pill{
  position:absolute!important;
  top:14px!important;
  inset-inline-start:14px!important;
  z-index:3!important;
  min-height:28px!important;
  padding:5px 10px!important;
  border:1px solid rgba(255,255,255,.30)!important;
  border-radius:999px!important;
  background:rgba(8,40,32,.82)!important;
  color:#fff!important;
  font-size:.7rem!important;
  font-weight:850!important;
  backdrop-filter:blur(10px)!important;
  transform:none!important;
}
.premium-home main>.section.soft #homeRestaurants .restaurant-body{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  gap:8px!important;
  min-height:142px!important;
  padding:18px 18px 19px!important;
  background:#fffdf8!important;
  transform:none!important;
}
.premium-home main>.section.soft #homeRestaurants .title-row{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:12px!important;
}
.premium-home main>.section.soft #homeRestaurants .restaurant-body h3{
  margin:0!important;
  color:#123c32!important;
  font-size:1.08rem!important;
  font-weight:900!important;
  line-height:1.35!important;
}
.premium-home main>.section.soft #homeRestaurants .tagline{
  color:#6a7772!important;
  font-size:.83rem!important;
  line-height:1.5!important;
}
.premium-home main>.section.soft #homeRestaurants .browse-card-meta{
  margin-top:auto!important;
  color:#344f46!important;
  font-size:.82rem!important;
  font-weight:750!important;
  line-height:1.45!important;
}
.premium-home main>.section.soft #homeRestaurants .rating{
  flex:0 0 auto!important;
  padding:5px 8px!important;
  border-radius:999px!important;
  background:#e8f2ed!important;
  color:#123c32!important;
  font-size:.74rem!important;
  font-weight:900!important;
}
.premium-home main>.section.soft #homeRestaurants .fav{
  top:14px!important;
  inset-inline-end:14px!important;
  z-index:5!important;
  width:36px!important;
  height:36px!important;
  border:1px solid rgba(18,60,50,.10)!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.94)!important;
  color:#123c32!important;
  box-shadow:0 5px 14px rgba(18,60,50,.10)!important;
  transform:none!important;
  transition:background .18s ease,color .18s ease,border-color .18s ease!important;
}
.premium-home main>.section.soft #homeRestaurants .fav:hover{
  transform:none!important;
  background:#fff3e6!important;
  border-color:rgba(229,72,60,.20)!important;
  color:#e5483c!important;
}

.premium-home main>.section.soft #homeRestaurants .ae-loading-card{
  overflow:hidden!important;
  border:1px solid rgba(18,60,50,.08)!important;
  border-radius:22px!important;
  background:#fffdf8!important;
  box-shadow:0 10px 26px rgba(18,60,50,.05)!important;
}
.premium-home main>.section.soft #homeRestaurants .ae-loading-media{
  aspect-ratio:16/10!important;
  min-height:0!important;
  background:linear-gradient(110deg,#edf1ee 20%,#f7f4ec 38%,#edf1ee 56%)!important;
  background-size:220% 100%!important;
}

@media (max-width:1000px){
  .premium-home main>.section.soft #homeRestaurants.restaurant-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media (max-width:720px){
  .premium-home main>.section.soft .section-head{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:16px!important;
  }
  .premium-home.rtl main>.section.soft .section-head{
    align-items:flex-end!important;
  }
  .premium-home main>.section.soft #homeRestaurants.restaurant-grid{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
  .premium-home main>.section.soft #homeRestaurants .restaurant-body{
    min-height:0!important;
  }
}