/* ==========================================================================
   Секция 03 · Сравнение вариантов
   ========================================================================== */

.stlk-compare {
  padding-block: var(--stlk-section-pad);
  background: linear-gradient(160deg, var(--stlk-bg-alt) 0%, color-mix(in srgb, var(--stlk-bg-alt) 88%, var(--stlk-wood-300)) 100%);
}

.stlk-compare__head { max-width: 60ch; margin-bottom: clamp(32px, 5vw, 56px); }
.stlk-compare__title { font-size: var(--stlk-fs-h2); margin-top: 16px; }
.stlk-compare__lead { margin-top: 14px; color: var(--stlk-wood-500); font-size: var(--stlk-fs-lead); }

.stlk-compare__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.stlk-compare__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--stlk-surface);
  border-radius: var(--stlk-radius-l);
  padding: 28px;
  box-shadow: var(--stlk-shadow-s);
  transition: transform var(--stlk-dur-standard) var(--stlk-ease-standard),
              box-shadow var(--stlk-dur-standard) var(--stlk-ease-standard);
}
.stlk-compare__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--stlk-shadow-m);
}

.stlk-compare__card--featured {
  background: var(--stlk-wood-900);
  color: var(--stlk-white);
  box-shadow: var(--stlk-shadow-l);
}
.stlk-compare__card--featured h3,
.stlk-compare__card--featured .stlk-compare__price { color: var(--stlk-white); }
.stlk-compare__card--featured .stlk-compare__checklist li { color: rgba(255,255,255,0.85); }
.stlk-compare__card--featured .stlk-compare__checklist li::before { background: var(--stlk-yellow); }

.stlk-compare__ribbon {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--stlk-yellow);
  color: var(--stlk-ink);
  font-size: var(--stlk-fs-small);
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--stlk-radius-pill);
}

.stlk-compare__img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--stlk-radius-m);
}

.stlk-compare__badge {
  align-self: flex-start;
  font-size: var(--stlk-fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--stlk-accent);
}
.stlk-compare__card--featured .stlk-compare__badge { color: var(--stlk-yellow); }

.stlk-compare__card h3 { font-size: var(--stlk-fs-h3); }

.stlk-compare__price {
  font-family: var(--stlk-font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--stlk-wood-900);
}

.stlk-compare__checklist { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.stlk-compare__checklist li {
  position: relative;
  padding-left: 28px;
  color: var(--stlk-wood-500);
  font-size: 0.9375rem;
}
.stlk-compare__checklist li::before {
  content: '';
  position: absolute;
  left: 0; top: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--stlk-green-light);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  background-color: var(--stlk-green);
}

.stlk-compare__card .stlk-cta { margin-top: 8px; width: 100%; }
.stlk-compare__card--featured .stlk-cta { --_bg: var(--stlk-yellow); --_bg-hover: #8C631F; color: var(--stlk-ink); }

@media (max-width: 900px) {
  .stlk-compare__grid { grid-template-columns: 1fr; }
  .stlk-compare__card--featured { order: -1; }
}