/* layout.css — сетка, ритм секций и подложки. Оформление блоков — в blocks.css. */

.section {
  position: relative;
  padding-block: var(--section-y);
}

/* Чередование фона: ровно два тона, без плашек и полос */
.section--alt { background: var(--bg-2); }

/* Мягкое пятно света вместо сплошной заливки */
.sec-glow { position: relative; isolation: isolate; overflow: clip; }
.sec-glow::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(900px, 80vw);
  aspect-ratio: 1;
  left: 50%;
  top: -30%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 156, 49, .10), transparent 62%);
  filter: blur(24px);
}
/* Пятно смещено вбок, чтобы страница не читалась симметричным столбиком */
.sec-glow--left::after  { left: 8%;  transform: none; }
.sec-glow--right::after { left: auto; right: 6%; transform: none; }

.section__title { margin-bottom: var(--s-3); max-width: 22ch; }
.section__lead {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: 65ch;
  margin-bottom: var(--s-5);
}
.section__note {
  margin-top: var(--s-4);
  color: var(--text-muted);
  max-width: 70ch;
}
.section__disclaimer {
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-width: 75ch;
}
.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}

/* ---------- Сетки: число колонок подбирается само ---------- */

.grid-cards {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.grid-cards--tight {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.grid-cards--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.calc__custom {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
@media (min-width: 768px) {
  .calc__custom { grid-template-columns: 1.2fr 1.4fr 160px; }
}

.catalog__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}
.catalog__more { display: flex; justify-content: center; margin-top: var(--s-5); }
.catalog__cta { margin-top: var(--s-5); }

.two-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
@media (min-width: 768px) {
  .two-cols { grid-template-columns: 1.15fr 1fr; gap: var(--s-5); }
}

/* ---------- Подвал ---------- */

/* Подвал — ровно три колонки, на телефоне складываются в одну */
.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5) var(--s-4);
  padding-block: var(--section-y) var(--s-5);
}
@media (min-width: 700px) {
  .footer__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .footer__inner { grid-template-columns: 1.3fr 1fr 1fr; }
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2);
  padding-block: var(--s-3);
  border-top: 1px solid var(--hairline);
}

/* ---------- Запас снизу под нижнюю панель телефона ---------- */

@media (max-width: 767px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ---------- Текстовые страницы (политика, согласие) ---------- */

.prose h1 { margin-bottom: var(--s-3); }
.prose h2 { font-size: var(--fs-h3); margin-top: var(--s-5); margin-bottom: var(--s-2); }
.prose p { margin-bottom: var(--s-2); color: var(--text-muted); max-width: 75ch; }
.prose a { color: var(--accent-2); }
.prose__note {
  padding: var(--s-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-btn);
  background: var(--surface);
  font-size: var(--fs-small);
}
.prose .btn { margin-top: var(--s-5); }

/* ---------- Уважение к настройкам пользователя ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Страница товара: секции идут плотнее — от цены до оговорки про доплаты
   не должно требовать прокрутки. Другие страницы (главная и т.д.) не трогаем. */
.page-product .section { padding-block: calc(var(--section-y) * 0.67); }
@media (max-width: 480px) {
  .page-product .section { padding-block: calc(var(--section-y) * 0.5); }
}

/* Мобильная карточка товара: сверху до цены плотнее, чтобы оговорка про
   доплаты и кнопка попадали в первый экран вместе с ценой без прокрутки. */
@media (max-width: 480px) {
  .page-product .breadcrumbs { padding-top: 12px; }
  .page-product .product-hero { padding-top: 12px; }
  .page-product .product-hero__subtitle { margin-top: 6px; }
  .page-product .product-hero__objects { margin-top: 4px; }
  .page-product .product-hero__grid { margin-top: var(--s-2); gap: 12px; }
  /* фото чуть ниже, а не 3:2 — экономит место над ценой, сама фотография
     всё ещё нормально читается, просто на телефоне видно чуть меньше кадра */
  .page-product .product-hero__photo { aspect-ratio: 16 / 9; }
  .page-product .product-hero__included { margin-top: var(--s-2); }
}