/* Главная: первый экран, преимущества, призыв. Основа (токены, кнопки, поля, сетка) — в main.css. */

/* ───────── герой ───────── */
/* Компактный: на телефоне без картинки — не выше ~480px, чтобы первая подборка начиналась на первом экране. */
.hero { padding-block: clamp(24px, 5vw, 48px) clamp(24px, 5vw, 56px); overflow: hidden; }
.hero__grid { display: grid; gap: clamp(20px, 4vw, 56px); align-items: center; }
.hero .eyebrow { margin-bottom: .75rem; }
.hero__title { font-size: clamp(2.1rem, 7.4vw, 4.4rem); line-height: 1.04; font-weight: 500; max-width: 18ch; text-wrap: balance; }
.hero__lead { margin: 14px 0 0; font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--c-muted); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: clamp(18px, 3vw, 28px); }
.hero__media { position: relative; }
.hero__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-l); background: var(--c-tint); }

/* товары первой подборки вместо картинки — только на десктопе */
.hero__picks { display: none; }
.pick { display: grid; gap: 6px; color: var(--c-ink); text-decoration: none; }
.pick__media { display: block; aspect-ratio: 4 / 5; border-radius: var(--r-m); overflow: hidden; background: #eef0e8; }
.pick__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pick:hover .pick__media img { transform: scale(1.035); }
.pick__name {
  margin-top: 4px; font-size: .9rem; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.pick:hover .pick__name { color: var(--c-primary); }
.pick__price { font-weight: 700; font-variant-numeric: tabular-nums; }

@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.05fr 1fr; }
  .hero__media img { aspect-ratio: 5 / 4; max-height: 560px; }
  .hero__picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .hero__picks > li:nth-child(2) { margin-top: 32px; }
}

/* ───────── подборки лентой на телефоне ───────── */
@media (max-width: 719px) {
  .section--rail { padding-block: 32px; }
  .rail { margin-inline: calc(-1 * var(--gutter)); }
  .rail > .grid-cards {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    padding: 4px var(--gutter) 8px; scrollbar-width: none;
  }
  .rail > .grid-cards::-webkit-scrollbar { display: none; }
  /* ~1,5 карточки на экране: край следующей виден, высота блока около 560px */
  .rail > .grid-cards > li { flex: 0 0 min(54vw, 260px); scroll-snap-align: start; }
}

/* ───────── «Выбрать по задаче» ───────── */
.section--tight { padding-block: clamp(32px, 5vw, 64px); }
.set-rows { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 720px) { .set-rows { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } }
.set-tile {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "icon name arrow" "icon count arrow";
  align-items: center; column-gap: 14px; min-height: 64px; padding: 14px 18px;
  border-radius: var(--r-m); background: var(--c-primary-soft); color: var(--c-ink); text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.set-tile:hover { background: var(--c-primary); color: #fff; }
.set-tile__icon { grid-area: icon; width: 28px; height: 28px; color: var(--c-leaf); }
.set-tile:hover .set-tile__icon, .set-tile:hover .set-tile__count { color: inherit; }
.set-tile__name { grid-area: name; font: 600 1.4rem/1.1 var(--f-display); }
.set-tile__count { grid-area: count; font-size: .85rem; color: var(--c-muted); }
.set-tile__arrow { grid-area: arrow; width: 20px; height: 20px; }
@media (min-width: 720px) { .set-tile { min-height: 96px; padding: 20px 22px; } .set-tile__name { font-size: 1.6rem; } }

/* ───────── категории: на телефоне первые 6 и ссылка на все ───────── */
.home-cats__all { display: none; margin-top: 20px; }
@media (max-width: 719px) {
  .home-cats .tiles > :nth-child(n+7) { display: none; }
  .home-cats .tiles:has(> :nth-child(7)) + .home-cats__all { display: flex; }
}

/* ───────── преимущества, CTA ───────── */
.benefits { display: grid; gap: 28px; }
@media (min-width: 720px) { .benefits { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; } }
.benefit { border-top: 1px solid var(--c-ink); padding-top: 20px; }
.benefit__n { display: block; font: 500 1.1rem/1 var(--f-display); color: var(--c-accent-deep); margin-bottom: 16px; }
.benefit__title { font: 600 1.55rem/1.15 var(--f-display); margin-bottom: 10px; }
.benefit p { color: var(--c-muted); }

.cta {
  display: grid; gap: 24px; align-items: center; padding: clamp(28px, 5vw, 64px);
  border-radius: var(--r-l); background: var(--c-primary); color: #f3efe6;
  background-image: radial-gradient(circle at 100% 0, rgb(91 133 102 / .45), transparent 55%);
}
.cta__title { font-size: clamp(2rem, 4.5vw, 3rem); color: #fff; max-width: 18ch; }
.cta__text { margin-top: 12px; max-width: 50ch; color: #dfe7df; }
@media (min-width: 840px) { .cta { grid-template-columns: 1fr auto; } }

/* Категории на главной — не больше двух рядов; остальные по ссылке «Все категории». */
@media (min-width: 720px) and (max-width: 1099px) { .home-cats .tiles > :nth-child(n+7) { display: none; } }
@media (min-width: 1100px) { .home-cats .tiles > :nth-child(n+9) { display: none; } }