/*
 * Путь: /wp-content/themes/sml-theme/assets/css/materials.css
 * Описание: Стили модуля Materials.
 *           - /materials/: заголовок/подзаголовок + карточки (карточки/пагинация — layout.css).
 *           - /material/{slug}/: hero, композиция, типографика, цена, контакт-панель.
 * Версия: 1.0.0
 * Автор: NUVREN / Nuvren.com
 */

/* ─────────────────────────────────────────────────────────────
   Materials index (/materials/)
   ───────────────────────────────────────────────────────────── */

.sml-materials{
  padding-top: 6px;
  padding-bottom: clamp(48px, 6vw, 84px); /* чтобы листинг не прилипал к футеру */
}

.sml-materials-head{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
  max-width: 78ch;
}

.sml-materials-title{
  margin: 0;
  letter-spacing: -0.02em;
}

.sml-materials-sub{
  margin: 0;
  max-width: 72ch;
  color: var(--sml-muted);
  font-size: 16px;
  line-height: 1.7;
}

.sml-material-card__meta{
  display:flex;
  justify-content:flex-start;
}

/* ─────────────────────────────────────────────────────────────
   Material detail (/material/{slug}/)
   ───────────────────────────────────────────────────────────── */

.sml-material-detail{
  padding-top: 6px;
  padding-bottom: clamp(56px, 7vw, 96px); /* КЛЮЧ: низ секции, чтобы не сливалось с футером */
}

.sml-material-hero{
  position: relative;
  border-radius: var(--sml-radius-xl);
  overflow: hidden;
  border: 1px solid var(--sml-border);
  background:
    radial-gradient(900px 460px at 20% 18%, rgba(67,130,57,0.16), transparent 62%),
    linear-gradient(180deg, rgba(18,22,18,0.02), rgba(18,22,18,0.08));
  box-shadow: var(--sml-shadow-md);
  min-height: 220px;
}

/* Доп.воздух под hero (чтобы контент визуально не прилипал) */
.sml-material-hero{ margin-bottom: 16px; }

.sml-material-hero__media{ position:absolute; inset:0; }

.sml-material-hero__img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
}

.sml-material-hero__veil{
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 90% at 18% 18%, rgba(67,130,57,0.22), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,0.00), rgba(0,0,0,0.30));
}

.sml-material-hero__copy{
  position: relative;
  padding: 20px;
  max-width: 860px;
  color: #fff;
}

.sml-material-hero__price{
  display:inline-flex;
  align-items:center;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.22);
  backdrop-filter: blur(10px);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 850;
  color: rgba(255,255,255,0.92);
}

.sml-material-hero__title{
  margin: 10px 0 0;
  color:#fff;
  text-shadow: 0 10px 26px rgba(0,0,0,0.28);
}

.sml-material-hero__sub{
  margin: 10px 0 0;
  color: rgba(255,255,255,0.84);
  max-width: 72ch;
}

.sml-material-hero__actions{
  margin-top: 16px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sml-material-hero__actions .sml-btn{
  box-shadow: 0 18px 50px rgba(0,0,0,0.20);
}

.sml-material-hero .sml-btn{
  border-color: rgba(255,255,255,0.14);
}

.sml-material-hero .sml-btn--ghost{
  background: rgba(255,255,255,0.10);
  color: #fff;
}

.sml-material-hero .sml-btn--ghost:hover{
  background: rgba(255,255,255,0.16);
}

/* Layout: prose + aside */
.sml-material-layout{
  margin-top: 18px; /* КЛЮЧ: чтобы не слипалось с hero */
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 980px){
  .sml-material-layout{
    grid-template-columns: 1.35fr 0.65fr;
    gap: 18px;
    margin-top: 20px;
  }
}

/* Prose panel */
.sml-material-prose{
  background: var(--sml-surface-solid);
  border: 1px solid var(--sml-border);
  border-radius: var(--sml-radius-xl);
  box-shadow: var(--sml-shadow-sm);
  padding: 18px;
  min-height: 220px; /* чтобы блок выглядел завершенным */
}

/* Внутренний ритм текста (чтобы не было “слипшихся” заголовков и списков) */
.sml-material-prose > *:first-child{ margin-top: 0; }
.sml-material-prose > *:last-child{ margin-bottom: 0; }

.sml-material-prose p{ margin: 0 0 12px; line-height: 1.7; }
.sml-material-prose h2{ margin: 18px 0 10px; }
.sml-material-prose h3{ margin: 16px 0 8px; }
.sml-material-prose ul,
.sml-material-prose ol{ margin: 10px 0 14px; padding-left: 18px; }
.sml-material-prose li{ margin: 6px 0; }

@media (min-width: 980px){
  .sml-material-prose{
    padding: 20px;
    min-height: 260px;
  }
}

.sml-material-aside{ position: relative; }

/* Contact panel */
.sml-material-panel{
  position: sticky;
  top: 92px;
  background: rgba(var(--sml-surface-rgb), 0.92);
  border: 1px solid var(--sml-border);
  border-radius: var(--sml-radius-xl);
  box-shadow: var(--sml-shadow-sm);
  padding: 16px;
}

@media (max-width: 979px){
  .sml-material-panel{
    position: static;
    top:auto;
  }
}

.sml-material-panel__title{
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.sml-material-panel__row{
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(var(--sml-ink-rgb), 0.08);
}

.sml-material-panel__row:first-of-type{
  border-top: 0;
  padding-top: 0;
}

.sml-material-panel__label{
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(var(--sml-ink-rgb), 0.58);
}

.sml-material-panel__value{
  font-weight: 700;
  color: rgba(var(--sml-ink-rgb), 0.86);
}

@media (max-width: 560px){
  .sml-material-hero__copy{ padding: 18px; }
  .sml-material-panel{ padding: 14px; }
  .sml-material-layout{ margin-top: 16px; }
  .sml-material-detail{ padding-bottom: 64px; } /* чтобы точно был воздух до футера */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .sml-material-hero__img{
    transform: none !important;
  }
}