/* =========================================================
   MIRACLE LIQUORS – BENEFITS v1.0
   ========================================================= */

.ml-benefits { position: relative; min-width: 0; }

.ml-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ml-grid-gap-md);
}

.ml-benefits__item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ml-space-012);
}

.ml-benefits__icon {
  display: inline-grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: var(--ml-radius-pill);
  background: var(--ml-color-surface-tinted);
  color: var(--ml-color-primary);
}

.ml-benefits__icon svg {
  width: var(--ml-icon-lg);
  height: var(--ml-icon-lg);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.ml-benefits__title {
  margin: 0;
  color: var(--ml-color-heading);
  font-family: var(--ml-font-body);
  font-size: var(--ml-text-body-lg);
  font-weight: var(--ml-font-weight-bold);
  line-height: 1.45;
}

.ml-benefits__text {
  margin: 0;
  color: var(--ml-color-text-muted);
  font-family: var(--ml-font-body);
  font-size: var(--ml-text-body-sm);
  line-height: var(--ml-leading-body);
}

.ml-benefits--center .ml-benefits__item {
  align-items: center;
  text-align: center;
}

.ml-benefits--compact .ml-benefits__grid { gap: var(--ml-space-016); }
.ml-benefits--compact .ml-benefits__item { gap: var(--ml-space-008); }
.ml-benefits--compact .ml-benefits__icon { width: 38px; height: 38px; }

.ml-benefits--cards .ml-benefits__item {
  padding: var(--ml-space-024);
  border: 1px solid var(--ml-color-border);
  border-radius: var(--ml-radius-card);
  background: var(--ml-color-surface);
  box-shadow: var(--ml-shadow-xs);
}

.ml-benefits--dark {
  padding: var(--ml-space-032);
  border-radius: var(--ml-radius-panel);
  background: linear-gradient(135deg,
    var(--ml-color-surface-brand) 0%,
    var(--ml-color-surface-brand-strong) 100%);
}

.ml-benefits--dark .ml-benefits__icon {
  background: rgba(255,255,255,.08);
  color: var(--ml-color-accent-soft);
}
.ml-benefits--dark .ml-benefits__title { color: var(--ml-color-text-inverse); }
.ml-benefits--dark .ml-benefits__text { color: var(--ml-color-text-inverse-muted); }

.ml-benefits--horizontal .ml-benefits__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--ml-space-016);
}

.ml-benefits--3 .ml-benefits__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ml-benefits--2 .ml-benefits__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .ml-benefits__grid,
  .ml-benefits--3 .ml-benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .ml-benefits__grid,
  .ml-benefits--3 .ml-benefits__grid,
  .ml-benefits--2 .ml-benefits__grid {
    grid-template-columns: 1fr;
    gap: var(--ml-space-020);
  }
}