/* ============================================================
   MATERIALS — манифест о ткани поверх макро-съёмки ткани
   Монохром + тёмный оверлей для читаемости (Brand OS §8, §13).
   Фолбэк: пока нет картинки — секция выглядит как тёмный градиент.
   ============================================================ */

.materials {
  position: relative;
  background:
    linear-gradient(180deg,
      rgba(10, 10, 10, 0.93) 0%,
      rgba(10, 10, 10, 0.80) 50%,
      rgba(10, 10, 10, 0.94) 100%),
    url('../../assets/img/materials-bg.jpg') center / cover no-repeat;
}

/* Лёгкий параллакс — только десктоп с мышью */
@media (pointer: fine) and (min-width: 821px) {
  .materials {
    background-attachment: fixed, fixed;
  }
}

.materials-head {
  max-width: var(--container-narrow);
  margin-bottom: var(--space-4);
}

.materials-sub {
  margin-top: var(--space-2);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  color: var(--c-stone);
  line-height: 1.6;
}

/* --- 4 карточки: полупрозрачные, текстура чуть просвечивает --- */
.materials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  margin-bottom: var(--space-4);
}

.material-card {
  background: rgba(10, 10, 10, 0.62);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: background 0.4s var(--ease);
}

.material-card:hover {
  background: rgba(10, 10, 10, 0.8);
}

.material-num {
  font-size: var(--fs-micro);
  color: var(--c-sand);
}

.material-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.1;
  color: var(--c-white);
}

.material-text {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  line-height: 1.6;
}

/* --- Палитра цветов (Brand OS §13) --- */
.materials-palette {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--c-line);
  background: rgba(10, 10, 10, 0.62);
}

.palette-label {
  font-size: var(--fs-micro);
  color: var(--c-sand);
}

.palette-swatches {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.swatch {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  cursor: default;
  transition: transform 0.3s var(--ease);
}

.swatch:hover {
  transform: scale(1.15);
}

.palette-note {
  font-size: var(--fs-micro);
  color: var(--c-text-muted);
  text-align: center;
  letter-spacing: 0.08em;
}