/* ==========================================================================
   PAGES-STATIC — стили для статических внутренних страниц:
   contacts, ceny, dostavka, otzyvy, portfolio, kalkulyator, production,
   404, politika-konfidencialnosti, polzovatelskoe-soglashenie, about.
   Подключается ПОСЛЕ pages.css. Опирается на компоненты из components.css
   (.grid-12, .specimen, .spec-list, .quote, .price-table, .timeline, .form,
   .stamp, .caption, .bleed-*). Ничего инлайново — все стили здесь.
   ========================================================================== */

/* ── Точечные переопределения унаследованных из pages.css компонентов ──
   pages-static.css подключается последним — можно снять скругления и
   декоративные точки у переиспользуемых блоков (cat-item, faq), не трогая
   сам pages.css (его правит другой агент). */
.cat-item__img { border-radius: 0; }
.faq { border-radius: 0; }

/* Мелкие утилиты — вместо inline style="" в разметке */
.caption-label { display: block; margin-bottom: var(--space-4); }
.table-scroll { overflow-x: auto; }
.section-note { max-width: 60ch; color: var(--color-text-muted); margin: 0 0 var(--space-8); }
.contact-managers { margin-top: var(--space-10); }
.about-photo { aspect-ratio: 21 / 9; }

/* ── Секция окончания страницы: форма, один раз, после доказательств ──── */
.end-form {
  padding-block: var(--section-default);
  border-top: 1px solid var(--color-divider);
}
.end-form__head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}
.end-form__head .section__title { grid-column: span 7; }
.end-form__head p {
  grid-column: span 5;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.6;
  align-self: end;
}
@media (max-width: 780px) {
  .end-form__head, .end-form__head .section__title, .end-form__head p {
    display: block;
  }
  .end-form__head p { margin-top: var(--space-4); }
}
.end-form .form { max-width: 760px; }

/* ══════════════════════════════════════════════════════════════════════
   PORTFOLIO
   ══════════════════════════════════════════════════════════════════════ */
.portfolio-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
  padding-bottom: var(--space-4);
}
.portfolio-tabs a {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.portfolio-tabs a:hover,
.portfolio-tabs a.is-active {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}

/* Крупные развороты-кейсы — чередование сторон, ни один не зеркалит соседа */
.spread {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-8);
  align-items: center;
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
  border-bottom: 1px solid var(--color-divider);
}
.spread:first-of-type { padding-top: 0; }
.spread__photo { grid-column: span 8; aspect-ratio: 4 / 3; }
.spread__spec { grid-column: span 4; }
.spread--right .spread__photo { order: 2; grid-column-start: 5; }
.spread--right .spread__spec { order: 1; }
.spread--tall .spread__photo { aspect-ratio: 3 / 4; }
.spread__num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text-faint);
  margin: 0 0 var(--space-4);
}
.spread__brand {
  font-family: var(--font-display);
  font-size: var(--text-section);
  line-height: 1.02;
  margin: 0 0 var(--space-6);
}
@media (max-width: 900px) {
  .spread { grid-template-columns: 1fr; }
  .spread__photo, .spread__spec,
  .spread--right .spread__photo, .spread--right .spread__spec {
    grid-column: auto; order: initial;
  }
}

/* Разворот на всю ширину — фото bleed-full сверху, спецификация в 2 колонки снизу.
   Не наследует grid .spread (12 колонок) — работает как блочный поток. */
.spread--full { display: block; }
.spread__photo--full {
  height: 60vh;
  min-height: 360px;
}
.spread__photo--full img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.spread__spec--full { margin-top: clamp(var(--space-8), 4vw, var(--space-10)); }
.spread__spec--full .spec-list--2col { max-width: 64ch; }

/* Masonry-лента остальных работ: CSS grid с dense-заполнением — каждая 5-я
   плитка растянута на 2 колонки, чтобы разбить ровную сетку одинаковых фото. */
.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  gap: var(--space-6);
  margin-top: clamp(var(--space-16), 8vw, var(--space-20));
}
.masonry .specimen { margin: 0; }
.masonry .specimen img { height: auto; }
.masonry .specimen:nth-child(5n) { grid-column: span 2; }
@media (max-width: 1100px) {
  .masonry { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .masonry { grid-template-columns: 1fr; }
  .masonry .specimen:nth-child(5n) { grid-column: span 1; }
}

/* ══════════════════════════════════════════════════════════════════════
   OTZYVY
   ══════════════════════════════════════════════════════════════════════ */
.quotes-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-10);
}
.quotes-row .quote { grid-column: span 8; }
@media (max-width: 900px) { .quotes-row .quote { grid-column: 1 / -1; } }

.reviews-widget {
  margin-top: clamp(var(--space-12), 6vw, var(--space-20));
}
.reviews-widget__frame {
  border: 1px solid var(--color-border);
  border-radius: 0;
  overflow: hidden;
}
.reviews-widget__frame iframe { display: block; width: 100%; height: 720px; border: 0; }
.reviews-widget .caption { display: block; margin-top: var(--space-3); }

/* ══════════════════════════════════════════════════════════════════════
   CONTACTS
   ══════════════════════════════════════════════════════════════════════ */
.contact-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-10);
  align-items: start;
}
.contact-layout__info { grid-column: span 5; }
.contact-layout__map { grid-column: span 7; }
.contact-layout__map .map-frame {
  border: 1px solid var(--color-border);
  border-radius: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.contact-layout__map .map-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.contact-layout .caption { display: block; margin-top: var(--space-3); }
.contact-layout__form { grid-column: span 7; }
.contact-layout__next { grid-column: span 5; }
@media (max-width: 900px) {
  .contact-layout__info, .contact-layout__map,
  .contact-layout__form, .contact-layout__next { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════════════════════════
   CENY
   ══════════════════════════════════════════════════════════════════════ */
.price-block { margin-bottom: clamp(var(--space-12), 6vw, var(--space-20)); }
.price-block__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin: 0 0 var(--space-6);
}
.price-terms { max-width: 720px; margin-top: clamp(var(--space-10), 5vw, var(--space-16)); }
.price-block__note { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-4); max-width: 70ch; }
.price-block__after { color: var(--color-text-faint); font-size: var(--text-xs); margin: var(--space-3) 0 0; max-width: 70ch; }
.price-table--tiers td:last-child,
.price-table--tiers th:last-child { background: var(--color-primary-highlight); color: var(--color-text-muted); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════
   DOSTAVKA
   ══════════════════════════════════════════════════════════════════════ */
.dostavka-timeline { margin-block: var(--space-6) clamp(var(--space-12), 6vw, var(--space-16)); }
.dostavka-columns {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-10);
}
.dostavka-columns .spec-list { grid-column: span 7; }
.dostavka-columns .payment-note { grid-column: span 5; align-self: start; }
.payment-note { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; }
.payment-note h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
@media (max-width: 900px) {
  .dostavka-columns .spec-list, .dostavka-columns .payment-note { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════════════════════════
   KALKULYATOR
   ══════════════════════════════════════════════════════════════════════ */
.calc-layout-static {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-12);
  align-items: start;
}
@media (max-width: 900px) { .calc-layout-static { grid-template-columns: 1fr; } }

.calc-steps { gap: 0; }
.calc-step {
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-divider);
}
.calc-step:last-of-type { border-bottom: 1px solid var(--color-divider); }
.calc-step__num { display: block; color: var(--color-primary); margin-bottom: var(--space-4); }
.calc-step__label { display: block; font-size: var(--text-caption); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-faint); margin-bottom: var(--space-2); }

.calc-static-qty {
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  width: 100%;
  padding: var(--space-3) 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.calc-static-qty:focus { outline: none; border-bottom-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-highlight); }

.calc-result-static {
  border: 1px solid var(--color-divider);
  padding: clamp(var(--space-8), 4vw, var(--space-10));
}
.calc-result-static__label { display: block; margin-bottom: var(--space-4); }
.calc-result-static__price {
  font-family: var(--font-display);
  font-size: var(--text-section);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--space-2);
}
.calc-result-static__days { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-6); }
.calc-result-static .btn { width: 100%; }
.calc-result-static__note { margin-top: var(--space-6); font-size: var(--text-xs); color: var(--color-text-faint); line-height: 1.5; }

.calc-includes { margin-top: clamp(var(--space-4), 3vw, var(--space-6)); }

/* ══════════════════════════════════════════════════════════════════════
   PRODUCTION
   ══════════════════════════════════════════════════════════════════════ */
.shop-photo {
  position: relative;
  aspect-ratio: 21 / 9;
}
.shop-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-photo__plate {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--color-bg);
  padding: var(--space-4) var(--space-6);
  max-width: 34ch;
  border-top: 1px solid var(--color-divider);
  border-right: 1px solid var(--color-divider);
}
.shop-photo__plate h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin: 0 0 var(--space-1);
}
.shop-photo__plate p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

.spec-list--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-10);
}
.spec-list--2col .spec-list__row:nth-child(2) { border-top: 1px solid var(--color-divider); }
@media (max-width: 700px) { .spec-list--2col { grid-template-columns: 1fr; } }

.shop-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
  margin-top: clamp(var(--space-12), 6vw, var(--space-16));
}
.shop-gallery .specimen:nth-child(1) { grid-column: span 5; aspect-ratio: 4/5; }
.shop-gallery .specimen:nth-child(2) { grid-column: span 4; aspect-ratio: 1/1; align-self: end; }
.shop-gallery .specimen:nth-child(3) { grid-column: span 3; aspect-ratio: 3/4; }
@media (max-width: 900px) {
  .shop-gallery .specimen { grid-column: 1 / -1 !important; aspect-ratio: 4/3 !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   ABOUT
   ══════════════════════════════════════════════════════════════════════ */
.about-facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  margin-top: var(--space-8);
}
.about-facts__item { min-width: 8ch; }
.about-facts__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1;
  display: block;
}
.about-facts__label { font-size: var(--text-caption); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-faint); }

.about-text {
  columns: 2;
  column-gap: var(--space-10);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-top: clamp(var(--space-12), 6vw, var(--space-16));
}
.about-text p { margin: 0 0 var(--space-5); break-inside: avoid; }
.about-text strong { color: var(--color-text); }
@media (max-width: 780px) { .about-text { columns: 1; } }

.about-priorities {
  margin-top: clamp(var(--space-12), 6vw, var(--space-16));
}

.about-clients {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-8);
  margin-top: clamp(var(--space-10), 5vw, var(--space-14));
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}
.about-clients span {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text-faint);
}

/* ══════════════════════════════════════════════════════════════════════
   404
   ══════════════════════════════════════════════════════════════════════ */
.notfound {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-6);
}
.misprint {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(6rem, 22vw, 14rem);
  line-height: 0.9;
  margin: 0;
  color: var(--color-text);
}
.misprint em { color: var(--color-primary); font-style: italic; }
.misprint::after {
  content: attr(data-text);
  position: absolute;
  left: 2px; top: 2px;
  color: var(--color-primary);
  mix-blend-mode: multiply;
  z-index: -1;
}
.notfound__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin: 0;
}
.notfound__title em { color: var(--color-primary); font-style: italic; }
.notfound .caption { font-size: var(--text-sm); }
.notfound__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-2);
}
.notfound__links {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}
.notfound__links a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.notfound__links a:hover { color: var(--color-primary); }

/* ══════════════════════════════════════════════════════════════════════
   PROSE — политика конфиденциальности / соглашение
   ══════════════════════════════════════════════════════════════════════ */
.prose {
  columns: 1;
  max-width: none;
}
.prose__date { font-size: var(--text-caption); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-faint); margin: 0 0 var(--space-12); }
.prose-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.prose-grid > .prose { grid-column: 3 / span 8; }
@media (max-width: 900px) { .prose-grid > .prose { grid-column: 1 / -1; } }

.prose section + section { margin-top: clamp(var(--space-10), 5vw, var(--space-14)); }
.prose h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.15;
  margin: 0 0 var(--space-4);
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}
.prose h2 .caption { color: var(--color-primary); flex-shrink: 0; }
.prose p { color: var(--color-text-muted); line-height: 1.7; margin: 0 0 var(--space-4); }
.prose ul { margin: 0 0 var(--space-4); padding-left: 1.2em; color: var(--color-text-muted); line-height: 1.7; }
.prose li { margin-bottom: var(--space-2); }
.prose a { color: var(--color-primary); }

/* Мобильный: гасим колоночный gap 12-колоночных сеток — 11 отступов
   по 2.5rem дают 440px минимальной ширины и режут содержимое. */
@media (max-width: 900px) {
  .end-form__head,
  .spread,
  .quotes-row,
  .contact-layout,
  .dostavka-columns,
  .shop-gallery,
  .prose-grid { column-gap: 0; }
}