/* PresagoDS — Landing
 * Stili della home page (principi, do/don't).
 * Caricato solo da index.html. */

/* ─── Principles ─────────────────────────────────────── */
.lumia-principles__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-200);
}

.lumia-principles__grid > * {
  flex: 1 1 240px;
  min-width: 0;
}

.lumia-principle-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-200);
}

.lumia-do-dont {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-200);
}

/* The title takes a row of its own above the columns. */
.lumia-do-dont > .lumia-heading {
  flex-basis: 100%;
}

.lumia-do-dont__column {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-150);
  min-width: 0;
}

.lumia-do-dont__label {
  width: fit-content;
  padding: var(--spacing-050) var(--spacing-100);
  border-radius: var(--radius-full);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}

.lumia-do-dont__label--do {
  background-color: var(--color-item-success-idle);
  color: var(--color-text-on-item-success);
}

.lumia-do-dont__label--dont {
  background-color: var(--color-item-danger-idle);
  color: var(--color-text-on-item-danger);
}

.lumia-do-dont__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-150);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body);
}

.lumia-do-dont__list li {
  padding-inline-start: var(--spacing-200);
  border-inline-start: var(--border-width-medium) solid var(--color-border-default);
}

.lumia-do-dont__list strong {
  color: var(--color-text-default);
  font-weight: var(--font-weight-semibold);
}

/* ─── Responsive ────────────────────────────────────── */
@media (max-width: 767px) {
  .lumia-do-dont > :first-child,
  .lumia-do-dont__grid,
  .lumia-do-dont__grid > * {
    flex-basis: 100%;
  }
}