/* ============================================================
   03 — КОМПОНЕНТЫ
   Кнопки, карточки, бейджи, теги, рейтинг
   ============================================================ */

/* ---------- ТЕКСТ С ТЕКСТУРОЙ КАМНЯ (clip-fill) ----------
   Буквы «вырезаны» из потрескавшегося камня. Есть безопасный
   fallback: если background-clip:text не поддержан — обычная кость. */
.stone-text { color: var(--bone); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .stone-text {
    background-image: url("../img/stone-text.png");
    background-size: 300px auto;
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
  }
  /* Красные акценты внутри stone-text остаются красными */
  .stone-text .keep-red,
  .footer__big.stone-text b {
    -webkit-text-fill-color: var(--red);
    color: var(--red);
  }
}

/* ---------- КНОПКИ ---------- */
.btn {
  --btn-bg: var(--ink-3);
  --btn-fg: var(--bone);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7ch;
  padding: 1.05rem 1.7rem;
  min-height: 56px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 2px solid var(--line-strong);
  box-shadow: var(--shadow-hard);
  transition: transform 0.18s var(--ease-out),
              box-shadow 0.18s var(--ease-out),
              background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:hover {
  transform: translate(-3px, -3px);
  box-shadow: 11px 11px 0 var(--ink);
}
.btn:active {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0 var(--ink);
}

.btn--primary {
  --btn-bg: var(--red);
  --btn-fg: #fff;
  border-color: var(--red-bright);
  box-shadow: 8px 8px 0 var(--red-deep);
}
.btn--primary:hover { box-shadow: 11px 11px 0 var(--red-deep); }
.btn--primary:active { box-shadow: 2px 2px 0 var(--red-deep); }

.btn--ghost {
  --btn-bg: transparent;
  box-shadow: none;
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  --btn-bg: var(--ink-3);
  box-shadow: 6px 6px 0 var(--ink);
  border-color: var(--rust);
}

.btn--block { width: 100%; }
.btn--lg { min-height: 64px; padding: 1.25rem 2rem; font-size: 0.9rem; }

.btn .ico { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- ТЕГ / ПИЛЮЛЯ ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6ch;
  padding: 0.45rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
  border: 1px solid var(--line-strong);
  background: var(--ink-2);
}
.tag .dot {
  width: 7px; height: 7px;
  background: var(--rust-2);
  flex: none;
}

/* ---------- КАРТОЧКА (общая) ---------- */
.card {
  position: relative;
  background: var(--ink-2);
  border: 2px solid var(--line);
  padding: clamp(1.4rem, 1rem + 1vw, 2.1rem);
  transition: border-color 0.25s ease, background 0.25s ease,
              transform 0.25s var(--ease-out);
  overflow: hidden;
}
.card::after {
  /* красная полоса-вспышка слева при hover */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s var(--ease-out);
}
.card:hover {
  border-color: var(--line-strong);
  background: var(--ink-3);
}
.card:hover::after { transform: scaleY(1); }

/* ---------- КАРТОЧКА УСЛУГИ ---------- */
.service {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100%;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}
a.service {
  text-decoration: none;
  color: inherit;
}
.service__idx {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--rust-3);
}
.service__title {
  font-size: var(--step-1);
  line-height: 1;
}
.service__desc {
  color: var(--bone-dim);
  font-size: var(--step--1);
  flex: 1;
}
.service__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6ch;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
  transition: gap 0.2s ease, color 0.2s ease;
}
.service:hover .service__cta { gap: 1.2ch; color: var(--rust-3); }
.service__cta .arr { transition: transform 0.25s var(--ease-out); }
.service:hover .service__cta .arr { transform: translateX(4px); }

/* ---------- БЕЙДЖ РЕЙТИНГА ---------- */
.rating {
  display: inline-flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.2rem 1.5rem;
  background: var(--ink-2);
  border: 2px solid var(--line-strong);
}
.rating__top { display: flex; align-items: baseline; gap: 0.6ch; }
.rating__val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--bone);
}
.rating__stars { color: var(--hazard); letter-spacing: 0.1em; font-size: 1.1rem; }
.rating__meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--bone-dim);
  text-transform: uppercase;
}

/* ---------- ПРЕИМУЩЕСТВО ---------- */
.feature {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.6rem;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.5s var(--ease-out),
    border-color 0.5s var(--ease-out),
    box-shadow 0.5s var(--ease-out);
}
.feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(145deg, var(--ink-3) 0%, var(--ink-2) 55%, rgba(181, 73, 31, 0.08) 100%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  pointer-events: none;
}
.feature > * { position: relative; z-index: 1; }
.feature:hover {
  border-color: var(--rust);
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
.feature:hover::before { opacity: 1; }
.feature__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--red);
  -webkit-text-stroke: 1px var(--red);
}
.feature__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
}
.feature__desc { color: var(--bone-dim); font-size: var(--step--1); }

/* ---------- АККОРДЕОН FAQ ---------- */
.faq {
  border-top: 1px solid var(--line);
}
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  text-align: left;
  padding: 1.5rem 0.4rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.5rem);
  letter-spacing: 0.01em;
  color: var(--bone);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease, padding-left 0.25s var(--ease-out);
}
.faq__q:hover { color: var(--rust-3); padding-left: 1.2rem; }
.faq__q:active { color: var(--rust-2); }
.faq__sign {
  flex: none;
  width: 2rem; height: 2rem;
  position: relative;
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  background: var(--red);
  inset: 0;
  margin: auto;
}
.faq__sign::before { width: 100%; height: 2px; }
.faq__sign::after  { width: 2px; height: 100%; transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1); }
.faq__item.is-open .faq__sign::after { transform: rotate(90deg); }
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.37s cubic-bezier(0.33, 1, 0.68, 1);
}
.faq__item.is-open .faq__panel { grid-template-rows: 1fr; }
.faq__panel[hidden] { display: none; }
.faq__panel-inner { overflow: hidden; min-height: 0; }
.faq__a {
  padding: 0 0.4rem 1.7rem;
  max-width: 70ch;
  color: var(--bone-dim);
  font-size: var(--step-0);
  user-select: text;
  -webkit-user-select: text;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s cubic-bezier(0.33, 1, 0.68, 1) 0.04s,
              transform 0.37s cubic-bezier(0.33, 1, 0.68, 1) 0.03s;
}
.faq__item.is-open .faq__a {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- ФОРМА ---------- */
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.field input,
.field textarea,
.field select {
  background: var(--ink);
  border: 2px solid var(--line-strong);
  padding: 0.95rem 1rem;
  color: var(--bone);
  font-size: var(--step-0);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--red);
  background: var(--ink-2);
  box-shadow: 4px 4px 0 var(--red-deep);
}
.field textarea { resize: vertical; min-height: 110px; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea,
.field[data-invalid="true"] select { border-color: var(--red-bright); }
.field__err {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--red-bright);
  min-height: 1em;
}
.consent {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.8rem;
  color: var(--bone-dim);
}
.consent input { width: 20px; height: 20px; accent-color: var(--red); flex: none; margin-top: 2px; }

.form-success {
  display: none;
  border: 2px solid var(--rust);
  background: var(--ink-2);
  padding: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--rust-3);
}
.form-success[data-show="true"] { display: block; animation: faqReveal 0.4s var(--ease-out); }