/* ======================================================
   PRIVOZ — QUALITY
   BLOCK 04: RISKS
====================================================== */

/* ОСНОВНАЯ СЕКЦИЯ */

.quality-page .quality-risks {
  padding: 120px 0;
  background: #ffffff;
}

.quality-page .quality-risks,
.quality-page .quality-risks *,
.quality-page .quality-risks *::before,
.quality-page .quality-risks *::after {
  box-sizing: border-box;
}

/* ======================================================
   ДВЕ КОЛОНКИ
====================================================== */

.quality-page .quality-risks-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  gap: 100px;
  align-items: start;
}

/* ======================================================
   ЛЕВАЯ КОЛОНКА
====================================================== */

.quality-page .quality-risks-copy {
  min-width: 0;
}

/* ФИРМЕННАЯ ПЛАШКА */

.quality-page .quality-risks-copy .quality-section-label {
  margin-bottom: 25px;
}

/* ЗАГОЛОВОК */

.quality-page .quality-risks-copy h2 {
  margin: 0 0 30px;

  color: var(--quality-text-dark);

  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 500;

  line-height: 1;
  letter-spacing: -0.06em;
}

.quality-page .quality-risks-copy h2 span {
  display: block;

  color: var(--quality-accent);
}

/* ОПИСАНИЕ */

.quality-page .quality-risks-copy p {
  max-width: 570px;
  margin: 0;

  color: var(--quality-text-soft);

  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
}

/* ======================================================
   ПРАВАЯ КОЛОНКА — СПИСОК РИСКОВ
====================================================== */

.quality-page .quality-risks-list {
  min-width: 0;

  border-top: 1px solid var(--quality-border);
}

/* ОДНА СТРОКА */

.quality-page .quality-risk-item {
  display: grid;
  grid-template-columns: 65px minmax(0, 1fr);

  align-items: center;

  min-height: 82px;
  padding: 0 8px;

  border-bottom: 1px solid var(--quality-border);

  transition:
    padding 0.25s ease,
    background 0.25s ease;
}

/* НАВЕДЕНИЕ */

.quality-page .quality-risk-item:hover {
  padding-left: 20px;

  background: rgba(var(--quality-accent-rgb), 0.05);
}

/* НОМЕР */

.quality-page .quality-risk-item span {
  color: var(--quality-accent);

  font-size: 10px;
  font-weight: 700;
}

/* НАЗВАНИЕ РИСКА */

.quality-page .quality-risk-item strong {
  color: var(--quality-text-dark);

  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
}

/* ======================================================
   ПЛАНШЕТ
====================================================== */

@media (max-width: 1120px) {

  .quality-page .quality-risks {
    padding: 95px 0 105px;
  }

  .quality-page .quality-risks-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 50px;
  }
}

/* ======================================================
   МОБИЛЬНАЯ ВЕРСИЯ
====================================================== */

@media (max-width: 768px) {

  .quality-page .quality-risks {
    padding: 75px 0 85px;
  }

  .quality-page .quality-risks-layout {
    gap: 40px;
  }

  .quality-page .quality-risks-copy h2 {
    font-size: clamp(39px, 10vw, 54px);
    line-height: 1.03;
  }

  .quality-page .quality-risks-copy p {
    font-size: 15px;
    line-height: 1.7;
  }

  .quality-page .quality-risk-item {
    grid-template-columns: 48px minmax(0, 1fr);

    min-height: 75px;
    padding: 12px 5px;
  }

  .quality-page .quality-risk-item strong {
    font-size: 18px;
  }
}

/* ======================================================
   МАЛЕНЬКИЕ ТЕЛЕФОНЫ
====================================================== */

@media (max-width: 430px) {

  .quality-page .quality-risks-copy h2 {
    font-size: clamp(35px, 9vw, 44px);
  }

  .quality-page .quality-risk-item strong {
    font-size: 17px;
  }
}

/* ======================================================
   REDUCED MOTION
====================================================== */

@media (prefers-reduced-motion: reduce) {

  .quality-page .quality-risk-item {
    transition: none;
  }
}