/* skin-pages.css — единый шаблон кожных карточек для родителей */
.skin-page {
  display: grid;
  gap: clamp(28px, 4vw, 46px);
}

.parents-hero.skin-article-hero {
  min-height: auto !important;
  padding-top: 0 !important;
  margin: 0 0 clamp(28px, 4vw, 46px) !important;
}

.skin-article-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

.skin-article-hero > div {
  display: grid;
  align-content: start;
  gap: clamp(12px, 1.7vw, 18px);
  min-width: 0;
}

.skin-article-hero :is(.eyebrow, .h-display, .lede) {
  margin: 0 !important;
}

.skin-article-hero .h-display {
  max-width: 800px;
  line-height: 1.05 !important;
}

.skin-article-hero .lede {
  max-width: 72ch;
  line-height: 1.62 !important;
}

.skin-side {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-deep) 82%, white 18%);
  padding: clamp(20px, 2.2vw, 26px);
}

.skin-marker {
  margin: 0;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.skin-answer,
.skin-card {
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-deep) 84%, white 16%);
  padding: clamp(20px, 2.2vw, 26px);
}

.skin-answer {
  display: grid;
  gap: 12px;
}

.skin-answer :is(h2, p),
.skin-card :is(h2, h3, p, ul) {
  margin: 0;
}

.skin-answer h2,
.skin-card h2,
.skin-card h3 {
  color: var(--text);
  font-family: var(--font-display);
  line-height: 1.12;
}

.skin-answer p,
.skin-card p,
.skin-card li {
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.6;
}

.skin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}

.skin-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.skin-card--wide {
  grid-column: span 2;
}

.skin-card--danger {
  border-color: color-mix(in srgb, #e75a5a 56%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, #e75a5a 12%, transparent), transparent 58%),
    color-mix(in srgb, var(--bg-deep) 84%, white 16%);
}

.skin-card--watch {
  border-color: color-mix(in srgb, #f5c850 56%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, #f5c850 12%, transparent), transparent 58%),
    color-mix(in srgb, var(--bg-deep) 84%, white 16%);
}

.skin-card ul {
  padding-left: 20px;
}

.article-source {
  margin: 0;
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .skin-article-hero,
  .skin-grid {
    grid-template-columns: 1fr;
  }

  .skin-card--wide {
    grid-column: auto;
  }
}