/* ============================================================
   ИП Долгушев И.А. — Полевской мрамор оптом
   Кастомные стили поверх Tailwind (CDN)
   ============================================================ */

/* --- Базовое --- */
:root {
  --stone-50:  #f6f6f5;
  --stone-100: #edeeef;
  --stone-200: #dde0e2;
  --stone-300: #c2c7cb;
  --stone-400: #9ba2a8;
  --stone-500: #7c838a;
  --stone-600: #5a6066;
  --stone-700: #3a3e42;
  --stone-800: #2a2d30;
  --stone-900: #1c1e20;
  --bronze:    #b08d57;
  --bronze-soft: #c6a664;
  --bronze-ink: #7a5c28;
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.font-display { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; }

/* Денежные строки: в кириллическом подмножестве Cormorant Garamond знак ₽ (U+20BD)
   отрисован устаревшим малоголовым глифом, поэтому суммы набираем Inter. */
.price-display {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}

/* Плавное появление секций */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- Фоновые текстуры мрамора (растеризованы из SVG в JPEG: рендер в разы быстрее) ---
   ВАЖНО: текстура и затемняющая вуаль задаются ОДНИМ background-image (два слоя).
   Шорткат `background:` здесь перебил бы background-image из .marble-*-bg. */
.marble-dark-bg {
  background-color: var(--stone-900);
  background-image:
    linear-gradient(180deg, rgba(28,30,32,.72) 0%, rgba(28,30,32,.58) 40%, rgba(28,30,32,.88) 100%),
    url('../img/marble-dark.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.marble-grey-bg {
  background-color: var(--stone-200);
  background-image: url('../img/marble-grey.jpg');
  background-size: cover;
  background-position: center;
}

/* Вуаль — маркерные классы. Визуально задаются в .marble-dark-bg выше,
   чтобы не перебивать background-image текстуры шорткатом `background:`. */
.veil-dark, .veil-light { /* no-op, см. .marble-dark-bg */ }

/* Ниже — только затемнение, когда вуаль нужна поверх произвольного фона */
.veil-standalone-dark {
  background-image: linear-gradient(180deg, rgba(28,30,32,.90) 0%, rgba(28,30,32,.80) 42%, rgba(28,30,32,.94) 100%);
}

/* --- Шапка --- */
#site-header { transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease; }
#site-header.is-scrolled {
  background-color: rgba(246,246,245,.92);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom-color: var(--stone-200);
  box-shadow: 0 1px 24px rgba(28,30,32,.07);
}

/* Прозрачная шапка лежит поверх тёмного экрана-героя — инвертируем текст в светлый.
   Селекторы с # перебивают utility-классы Tailwind по специфичности. */
#site-header:not(.is-scrolled) :is(.text-stone-900, .text-stone-800, .text-stone-700, .text-stone-600) { color: var(--stone-50); }
#site-header:not(.is-scrolled) :is(.text-stone-500, .text-stone-400) { color: var(--stone-300); }
#site-header:not(.is-scrolled) #logo-mark { background: var(--bronze); color: var(--stone-900); }
#site-header:not(.is-scrolled) .btn-bronze { color: #fff; }
#site-header:not(.is-scrolled) a:not(.btn):hover { color: var(--bronze-soft); }

/* --- Золотая линия-акцент --- */
.rule-bronze { height: 1px; background: linear-gradient(90deg, transparent, var(--bronze), transparent); }

/* --- Кнопки --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-weight: 500; letter-spacing: .01em;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn-bronze { background: var(--bronze-ink); color: #fff; }
.btn-bronze:hover { background: #66491d; }
.btn-ghost-dark { border: 1px solid rgba(246,246,245,.28); color: #f6f6f5; }
.btn-ghost-dark:hover { border-color: var(--bronze-soft); color: var(--bronze-soft); }
.btn-ghost-light { border: 1px solid var(--stone-300); color: var(--stone-800); }
.btn-ghost-light:hover { border-color: var(--stone-700); background: var(--stone-900); color: #fff; }

/* --- Карточки --- */
.card-stone {
  background: #fff;
  border: 1px solid var(--stone-200);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.card-stone:hover {
  transform: translateY(-3px);
  border-color: var(--stone-300);
  box-shadow: 0 18px 44px -22px rgba(28,30,32,.3);
}
.card-dark {
  background: rgba(246,246,245,.035);
  border: 1px solid rgba(246,246,245,.10);
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease, background-color .3s ease;
}
.card-dark:hover {
  transform: translateY(-3px);
  border-color: rgba(176,141,87,.55);
  background: rgba(246,246,245,.06);
}

/* --- Нумерация разделов --- */
.sec-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.5rem; line-height: 1;
  color: var(--stone-500);
  user-select: none;
}
@media (min-width: 768px) { .sec-num { font-size: 4.5rem; } }
.sec-num.on-dark { color: rgba(246,246,245,.35); }

/* --- Таблица прайса --- */
.price-table { border-collapse: collapse; width: 100%; }
.price-table th {
  font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--stone-500); font-weight: 500; text-align: left;
  padding: .75rem .9rem; border-bottom: 1px solid var(--stone-300);
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.price-table td { padding: .7rem .9rem; border-bottom: 1px solid var(--stone-100); font-size: .875rem; vertical-align: middle; }
.price-table tbody tr { transition: background-color .15s ease; }
.price-table tbody tr:hover { background: var(--stone-50); }
.price-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Аккордеон FAQ --- */
.acc-body { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.16,1,.3,1); }
.acc-item.is-open .acc-body { max-height: 520px; }
.acc-item.is-open .acc-icon { transform: rotate(45deg); }
.acc-icon { transition: transform .35s cubic-bezier(.16,1,.3,1); }

/* --- Форма --- */
.field {
  width: 100%;
  background: #fff;
  border: 1px solid var(--stone-300);
  padding: .8rem 1rem;
  font-size: .95rem;
  color: var(--stone-900);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field::placeholder { color: var(--stone-400); }
.field:focus { outline: none; border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(176,141,87,.16); }
.field-label { display:block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--stone-600); margin-bottom: .4rem; }

/* Нативный select: убираем стандартную стрелку */
select.field {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a6066' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* --- Мобильная фиксированная панель --- */
#mobile-bar { transform: translateY(100%); transition: transform .35s cubic-bezier(.16,1,.3,1); }
#mobile-bar.is-visible { transform: translateY(0); }

/* --- Мобильное меню --- */
#mobile-menu { transition: opacity .3s ease, visibility .3s ease; }
#mobile-menu.is-open { opacity: 1; visibility: visible; }
#mobile-menu .mm-panel { transition: transform .35s cubic-bezier(.16,1,.3,1); }
#mobile-menu.is-open .mm-panel { transform: translateY(0); }

/* --- Счётчик --- */
.tnum { font-variant-numeric: tabular-nums; }

/* Мелкий текст-метка */
.eyebrow {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 500;
}

/* --- Юридическая страница (policy.html) --- */
.list-policy { list-style: none; padding-left: 0; }
.list-policy li {
  position: relative;
  padding-left: 1.1rem;
  margin-top: .5rem;
}
.list-policy li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: .38rem; height: .38rem;
  background: var(--bronze);
}

/* --- Якорная навигация: заголовок не должен уезжать под липкий хедер --- */
section[id], div[id] { scroll-margin-top: 76px; }
@media (max-width: 767px) { section[id], div[id] { scroll-margin-top: 64px; } }

/* --- Сертификаты на материал --- */
.cert-shot {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid var(--stone-200, #e7e5e4);
  background: #fff;
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color .18s ease;
}
.cert-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.42;
  object-fit: cover;
  object-position: top center;
  filter: contrast(1.06) brightness(1.02);
  transition: filter .18s ease, transform .18s ease;
}
.cert-shot:hover { border-color: var(--bronze); }
.cert-shot:hover img,
.cert-shot:focus-visible img { filter: contrast(1.12) brightness(1.04); transform: scale(1.012); }
.cert-shot:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

.cert-zoom {
  position: absolute;
  left: .5rem; bottom: .5rem;
  padding: .25rem .55rem;
  background: rgba(28,30,32,.82);
  color: #f5f5f4;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
@media (max-width: 639px) {
  .cert-shot img { aspect-ratio: 1 / 1.3; }
}