/*
 * Advice - donkere kaart (shell: .dark-card) met pluspunten-rij.
 */

.advice {
  padding:    var(--space-24) 0;
  background: var(--color-bg-section);
}

.advice__inner {
  max-width: var(--container-max);
  margin:    0 auto;
  padding:   0 var(--section-padding-x);
}

.advice__grid {
  position:              relative;
  display:               grid;
  grid-template-columns: 1.2fr 1fr;
  gap:                   var(--space-16);
  align-items:           center;
}

/* Eyebrow-kleur op donker → .dark-card .sec-head__eyebrow (dark-card.css) */

.advice__stats {
  display: grid;
  gap:     var(--space-4);
}

/* ----------------------------------------
 * Veel pluspunten (5+): tekst boven, pluspunten in een grid eronder
 * (i.p.v. een lange kolom rechts).
 * ---------------------------------------- */

.advice__grid--stacked {
  grid-template-columns: 1fr;
  align-items:           start;
}

.advice__grid--stacked .advice__text {
  max-width: 760px;
}

.advice__grid--stacked .advice__stats {
  grid-template-columns: repeat(3, 1fr);
}

.advice-stat {
  display:       flex;
  align-items:   center;
  gap:           var(--space-5);
  padding:       var(--space-6);
  background:    rgba(255, 255, 255, 0.06);
  border:        1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
}

.advice-stat__icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           48px;
  height:          48px;
  flex-shrink:     0;
  border-radius:   var(--radius-full);
  background:      rgba(168, 204, 79, 0.15);
  color:           var(--color-icon-green);
}

.advice-stat__icon svg {
  width:  22px;
  height: 22px;
}

.advice-stat__title {
  margin-bottom: 3px;
  font-size:     var(--text-base);
  font-weight:   var(--font-bold);
  color:         var(--color-text-light);
}

.advice-stat__text {
  font-size:   var(--text-sm);
  line-height: 1.5;
  color:       rgba(255, 255, 255, 0.65);
}

@media (max-width: 960px) {
  .advice__grid {
    grid-template-columns: 1fr;
    gap:                   var(--space-10);
  }
  .advice__grid--stacked .advice__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .advice__grid--stacked .advice__stats {
    grid-template-columns: 1fr;
  }
}