/* ==========================================================================
   آلنیدو — صفحهٔ نخست (فقط همین‌جا بارگذاری می‌شود)

   موبایل‌اول طراحی شده: در گوشی، کاربر باید پیش از هر اسکرولی یک آگهی
   واقعی ببیند. پس هیرو فشرده است، دسته‌ها شبکه‌ای‌اند و ردیف‌های آگهی
   افقی می‌چرخند تا هر بخش فقط یک صفحه عرض بگیرد.
   ========================================================================== */

/* ============================================================== هیرو */
.hero {
  position: relative;
  padding-block: var(--sp-6) var(--sp-5);
  background:
    radial-gradient(900px 300px at 78% -20%, rgb(var(--surface-brand-default) / 12%), transparent 70%),
    rgb(var(--surface-neutral-base));
  border-bottom: 1px solid rgb(var(--border-neutral-default));
  overflow: hidden;
}

.hero__title {
  font-size: clamp(24px, 6.2vw, 40px);
  line-height: 1.45;
  font-weight: 700;
  max-width: 20ch;
  letter-spacing: -0.01em;
}
.hero__sub {
  margin-top: var(--sp-2);
  font-size: var(--fs-label);
  line-height: 1.85;
  color: rgb(var(--content-neutral-secondary));
  max-width: 52ch;
}

/* ---------------------------------------------------- نوار جستجو
   در گوشی دو ردیف: عبارت بالا، شهر و دکمه پایین — به‌جای سه بلوک
   روی هم که تقریباً نیم صفحه ارتفاع می‌گرفت. */
.searchbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0;
  max-width: 780px;
  margin-top: var(--sp-5);
  background: rgb(var(--surface-neutral-base));
  border: 1px solid rgb(var(--border-neutral-default));
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.searchbar__seg {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-inline: var(--sp-4);
  min-width: 0;
}
.searchbar__seg + .searchbar__seg {
  border-inline-start: 1px solid rgb(var(--border-neutral-default));
}
.searchbar__seg--place { flex: none; }
.searchbar__seg input,
.searchbar__seg select {
  width: 100%;
  height: 54px;
  border: 0;
  background: none;
  font-size: var(--fs-body);
  min-width: 0;
}
.searchbar__seg select { max-width: 168px; }
.searchbar__seg input:focus,
.searchbar__seg select:focus { outline: none; }

.searchbar__go {
  height: 46px;
  margin: var(--sp-1);
  padding-inline: var(--sp-5);
  border-radius: var(--r-md);
  flex: none;
}

.hero__geo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
  font-size: var(--fs-meta);
}

/* آمار کوتاه — سیگنال اعتماد، نه تزیین */
.herostats {
  display: flex;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  flex-wrap: wrap;
}
.herostat strong {
  display: block;
  font-size: var(--fs-h2);
  line-height: 1.3;
  color: rgb(var(--content-brand-default));
}
.herostat span { font-size: var(--fs-meta); color: rgb(var(--content-neutral-tertiary)); }

/* ========================================================== دسته‌ها */
.catgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: var(--sp-2);
  padding-block: var(--sp-5);
}
.cattile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-1);
  border-radius: var(--r-lg);
  text-align: center;
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1.5;
  transition: background-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.cattile:hover { background: rgb(var(--surface-neutral-muted)); transform: translateY(-2px); }
.cattile__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-lg);
  background: rgb(var(--tint, var(--content-neutral-tertiary)) / 14%);
  color: rgb(var(--content-neutral-primary));
}

/* ==================================================== ردیف‌های آگهی */
.section { padding-block: var(--sp-5); }
.section--tint { background: rgb(var(--surface-neutral-base)); }

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.section__head h2 { font-size: clamp(18px, 4.4vw, 22px); }
.section__link {
  font-size: var(--fs-label);
  font-weight: 500;
  color: rgb(var(--content-brand-default));
  white-space: nowrap;
}

/* چرخانِ افقی با اسنپ. در دسکتاپ به شبکهٔ معمولی برمی‌گردد. */
.hstrip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 74%;
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--sp-4);
  padding-bottom: var(--sp-2);
  margin-inline: calc(var(--sp-4) * -1);
  padding-inline: var(--sp-4);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.hstrip::-webkit-scrollbar { display: none; }
.hstrip > * { scroll-snap-align: start; }

/* ============================================== جانشین تصویر کارت
   کارت بدون عکس نباید یک مستطیل خاکستری خالی باشد؛ روی صفحهٔ فرود
   حس «سایت خراب» می‌دهد. */
.card__img--empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg,
      rgb(var(--surface-brand-default) / 7%),
      rgb(var(--surface-neutral-muted)) 60%);
  color: rgb(var(--content-neutral-tertiary));
}

/* ======================================================= نوار اعتماد */
.trustbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: rgb(var(--surface-neutral-base));
  border: 1px solid rgb(var(--border-neutral-default));
  border-radius: var(--r-lg);
}
.trustbar__item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.trustbar__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border-radius: var(--r-md);
  background: rgb(var(--surface-brand-subtle));
  color: rgb(var(--content-brand-default));
}

/* =========================================================== شهرها */
.citygrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3);
}
.citycard {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-4);
  background: rgb(var(--surface-neutral-base));
  border: 1px solid rgb(var(--border-neutral-default));
  border-radius: var(--r-lg);
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.citycard:hover {
  border-color: rgb(var(--border-brand-default));
  transform: translateY(-2px);
}

/* ============================================ فراخوان ثبت آگهی */
.homecta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background:
    radial-gradient(600px 200px at 85% 0%, rgb(var(--surface-brand-vivid) / 22%), transparent 70%),
    rgb(var(--surface-brand-default));
  color: #fff;
}
.homecta h2 { font-size: clamp(19px, 4.6vw, 24px); }
.homecta p { margin-top: var(--sp-2); opacity: .9; font-size: var(--fs-label); }
.homecta .btn {
  background: #fff;
  color: rgb(var(--surface-brand-default));
  border-color: #fff;
}
.homecta .btn:hover { background: rgb(255 255 255 / 90%); }

/* ========================================================= ریسپانسیو */
@media (min-width: 560px) { .hstrip { grid-auto-columns: 45%; } }
@media (min-width: 900px) { .hstrip { grid-auto-columns: 31%; } }

@media (min-width: 1200px) {
  /* در دسکتاپ چرخاندن لازم نیست؛ همه‌چیز یک‌جا دیده می‌شود */
  .hstrip {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    gap: var(--sp-4);
  }
  .section { padding-block: var(--sp-6); }
  .hero { padding-block: var(--sp-8) var(--sp-7); }
}

/* کاشی «همه» فقط در گوشی معنا دارد؛ در دسکتاپ همهٔ دسته‌ها جا می‌شوند */
.cattile--more { display: none; }

@media (max-width: 767px) {
  /* نوار جستجو: عبارت در یک ردیف، شهر و دکمه در ردیف بعد */
  .searchbar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "q q"
      "city go";
  }
  .searchbar__seg:first-child { grid-area: q; }
  .searchbar__seg--place {
    grid-area: city;
    border-inline-start: 0;
    border-top: 1px solid rgb(var(--border-neutral-default));
  }
  .searchbar__go {
    grid-area: go;
    margin: var(--sp-2);
    margin-inline-start: 0;
  }
  .searchbar__seg input { height: 50px; }
  .searchbar__seg select { height: 46px; max-width: none; }

  .hero__sub { display: none; }          /* تیتر خودش پیام را می‌رساند */
  .herostats { gap: var(--sp-4); }
  .herostat strong { font-size: var(--fs-h3); }

  /* دو ردیف دقیق: هفت دسته + کاشی «همه». سه ردیف، اولین آگهی را
     زیر خط تا می‌برد و صفحهٔ فرود باید آگهی نشان بدهد نه آیکون. */
  .catgrid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-1);
    padding-block: var(--sp-3);
  }
  .cattile { padding: var(--sp-2) 2px; font-size: 11px; gap: var(--sp-1); }
  .cattile__icon { width: 44px; height: 44px; }
  .cattile__icon svg { width: 22px; height: 22px; }

  /* هفت دستهٔ اول می‌مانند و کاشی «همه» جای هشتم را می‌گیرد.
     ویژگی انتخابگر باید هم‌وزن قاعدهٔ پنهان‌سازی باشد وگرنه خودش هم پنهان می‌شود. */
  /* کاشی «همه» را از قاعدهٔ پنهان‌سازی کنار می‌گذاریم، وگرنه چون
     فرزند یازدهم است خودش هم پنهان می‌شود. */
  .catgrid .cattile:not(.cattile--more):nth-child(n+8) { display: none; }
  .catgrid .cattile--more { display: flex; }

  /* هیرو فشرده‌تر */
  .hero { padding-block: var(--sp-5) var(--sp-4); }
  .hero__title { line-height: 1.4; }
  .searchbar { margin-top: var(--sp-4); }
  .herostats { margin-top: var(--sp-4); }

  .trustbar { padding: var(--sp-4); gap: var(--sp-3); }
  .citygrid { grid-template-columns: repeat(2, 1fr); }
  .homecta { padding: var(--sp-5); }
}