/* css/home.css — стили экрана «home». Классы — с префиксом .home-… .
 * Палитра — только токены styles.css (+ color-mix от них). */

/* ── баннер-карусель: CSS-градиенты и эмодзи, без картинок ── */
.home-banner-wrap { padding-top: 4px; }
.home-banner {
  display: flex; gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 14px;
  scrollbar-width: none;
}
.home-banner::-webkit-scrollbar { display: none; }
.home-slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  border-radius: var(--r-l);
  padding: 22px 128px 20px 18px;
  min-height: 148px;
  color: #fff;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  box-shadow: var(--shadow);
}
.home-slide::before {
  /* мягкий «шар света» — интерьерная деталь */
  content: '';
  position: absolute; right: -34px; top: -44px;
  width: 150px; height: 150px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.home-slide--pink {
  background: linear-gradient(135deg, var(--pink), color-mix(in oklab, var(--pink) 45%, var(--orange)));
}
.home-slide--sun {
  background: linear-gradient(135deg, var(--sun), var(--orange));
}
.home-slide--cobalt {
  background: linear-gradient(135deg, var(--cobalt), color-mix(in oklab, var(--cobalt) 55%, var(--pink)));
}
.home-slide-emoji {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%) rotate(8deg);
  font-size: 64px; line-height: 1;
  filter: drop-shadow(0 8px 14px rgba(36, 26, 46, 0.22));
}
.home-slide h2 {
  font-size: 19px; line-height: 1.2; color: #fff;
}
.home-slide p {
  font-size: 13px; line-height: 1.4; font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}
.home-slide-btn {
  align-self: flex-start; margin-top: 8px;
  background: var(--surface); color: var(--text);
  font-weight: 800; font-size: 13px;
  padding: 9px 16px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(36, 26, 46, 0.18);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.home-slide-btn:active { transform: scale(0.94); }
.home-dots {
  display: flex; justify-content: center; gap: 6px;
  padding: 10px 0 2px;
}
.home-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: color-mix(in oklab, var(--pink) 25%, white);
  padding: 0;
  transition: width 0.25s, background 0.25s;
}
.home-dot.on { width: 20px; background: var(--pink); }

/* ── мозаика-презентация «Тумбочки» (G09/G16): обложка дерзко, страхи — тихо.
 * Таск 12: разметка владельца — большой баннер «Кто мы» во всю ширину,
 * под ним два поменьше в ряд; всё видно одним экраном, свайпа и точек нет. ── */
.home-promo { padding: 8px 14px 0; }
.home-promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.home-promo-slide {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-l);
  padding: 14px;
  min-height: clamp(150px, 21vh, 210px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  box-shadow: var(--shadow);
  overflow: hidden;
  color: inherit; text-decoration: none; /* плитка бывает ссылкой */
  cursor: pointer;
}
/* большой баннер «Кто мы» — во всю ширину, ~58% высоты мозаики */
.home-promo-grid > :first-child {
  grid-column: 1 / -1;
  min-height: clamp(220px, 30vh, 300px);
  padding: 18px 16px 16px;
  gap: 8px;
}
.home-promo-tag {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pink);
  background: var(--pink-soft);
  padding: 4px 10px; border-radius: 999px;
}
.home-promo-emoji {
  margin: auto 0; /* эмодзи плавает между тегом и заголовком */
  font-size: 30px; line-height: 1;
  filter: drop-shadow(0 6px 10px rgba(36, 26, 46, 0.16));
}
.home-promo-grid > :first-child .home-promo-emoji { font-size: clamp(48px, 8vh, 72px); }
.home-promo-slide h2 { font-size: 15px; line-height: 1.25; }
.home-promo-grid > :first-child h2 { font-size: 22px; line-height: 1.2; }
.home-promo-slide p {
  color: var(--muted); font-size: 12px; line-height: 1.45; font-weight: 600;
}
.home-promo-grid > :first-child p { font-size: 14px; line-height: 1.5; }
.home-promo-btn {
  margin-top: auto;
  background: var(--pink-soft); color: var(--pink);
  font-weight: 800; font-size: 12px;
  padding: 8px 13px; border-radius: 999px;
  text-decoration: none;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.home-promo-slide:active .home-promo-btn { transform: scale(0.94); }
/* обложка — дерзкая: градиент токенов, белый текст */
.home-promo-slide--cover {
  background: linear-gradient(135deg, var(--pink), color-mix(in oklab, var(--pink) 50%, var(--orange)));
}
.home-promo-slide--cover h2 { color: #fff; }
.home-promo-slide--cover p { color: rgba(255, 255, 255, 0.92); }
.home-promo-slide--cover .home-promo-tag {
  color: #fff; background: rgba(255, 255, 255, 0.22);
}

/* ── чипсы категорий ── */
.home-chips {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding: 12px 14px 4px;
  scrollbar-width: none;
}
.home-chips::-webkit-scrollbar { display: none; }
.home-chip {
  flex: none;
  display: flex; align-items: center; gap: 6px;
  background: var(--surface);
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 700; font-size: 13px;
  box-shadow: var(--shadow);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.home-chip:active { transform: scale(0.93); }
.home-chip span { font-size: 15px; }

/* ── волнистый разделитель (интерьер-дофамин): цвет токеном через маску ── */
.home-wave {
  height: 14px;
  margin: 20px 14px 4px;
  background: var(--pink-soft);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q15 0 30 8 T60 8 T90 8 T120 8 L120 16 L0 16 Z'/%3E%3C/svg%3E") 0 0 / 120px 14px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q15 0 30 8 T60 8 T90 8 T120 8 L120 16 L0 16 Z'/%3E%3C/svg%3E") 0 0 / 120px 14px repeat-x;
}
.home-wave--sun { background: color-mix(in oklab, var(--sun) 45%, white); }

/* ── полки по намерению ── */
.home-shelves { scroll-margin-top: calc(var(--topbar-h) + 4px); } /* «к полкам» не ныряет под шапку */
.home-shelf { margin-top: 16px; }
.home-shelf-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 0 14px;
}
.home-shelf-sticker {
  flex: none;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow);
  transform: rotate(-6deg);
}
.home-shelf-titles h2 { font-size: 17px; line-height: 1.25; }
.home-shelf-titles p {
  color: var(--muted); font-size: 12.5px; font-weight: 600;
  margin-top: 2px; line-height: 1.4;
}
.home-shelf-row {
  display: flex; gap: 10px;
  overflow-x: auto;
  padding: 12px 14px 6px;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 14px; /* снап держит боковое поле ряда */
  scrollbar-width: none;
}
.home-shelf-row::-webkit-scrollbar { display: none; }
.home-shelf-row > .pcard {
  /* G17 «по линиям»: ровно 2 полных карточки на ширину контейнера,
     краешек третьей выглядывает из-под правого поля — намёк на скролл */
  flex: 0 0 calc(50% - 5px);
  scroll-snap-align: start;
}

/* ── лента: сетка порциями по 20 ── */
.home-feed { margin-top: 4px; }
.home-feed-head { padding: 8px 14px 12px; }
.home-feed-head h2 { font-size: 18px; }
.home-feed-head p { color: var(--muted); font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.home-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 14px;
}
.home-more { height: 40px; }

/* ── планшет 600–1023: 3 колонки, полки чуть шире ── */
@media (min-width: 600px) {
  .home-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  /* G17: карточка полки не раздувается — разумная фиксированная ширина */
  .home-shelf-row > .pcard { flex-basis: 220px; }
  .home-slide { min-height: 170px; padding-right: 150px; }
  .home-slide h2 { font-size: 22px; }
  /* мозаика: большой баннер слева, два поменьше — стопкой справа */
  .home-promo-grid {
    grid-template-columns: 1.6fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
  }
  .home-promo-grid > :first-child {
    grid-column: 1; grid-row: 1 / 3;
    min-height: 340px;
  }
  .home-promo-slide { min-height: 0; padding: 16px; }
  .home-promo-slide h2 { font-size: 16px; }
  .home-promo-grid > :first-child h2 { font-size: 24px; }
  .home-promo-slide p { font-size: 12.5px; }
  .home-promo-grid > :first-child p { font-size: 14.5px; }
}

/* ── десктоп ≥1024: 4 колонки, полки шире, витрина просторнее ── */
@media (min-width: 1024px) {
  .home-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .home-shelf-row > .pcard { flex-basis: 248px; }
  .home-slide { min-height: 200px; padding-left: 28px; padding-right: 190px; }
  .home-slide h2 { font-size: 26px; }
  .home-slide p { font-size: 14.5px; }
  .home-slide-emoji { font-size: 92px; right: 34px; }
  .home-shelf-titles h2 { font-size: 20px; }
  .home-promo-grid > :first-child { min-height: 380px; }
  .home-promo-slide { padding: 20px; }
  .home-promo-slide h2 { font-size: 18px; }
  .home-promo-grid > :first-child h2 { font-size: 26px; }
  .home-promo-emoji { font-size: 38px; }
  .home-promo-grid > :first-child .home-promo-emoji { font-size: 84px; }
  .home-promo-btn { font-size: 13px; padding: 9px 15px; }
}