/**
 * @file
 * MLT Modern — Warning sign card.
 *
 * Used in the "warning signs your home needs X" type sections — danger-red
 * left accent border, soft red icon background, h3 + description.
 *
 * Renders well in a grid (auto-fit minmax 260px) but the card itself is
 * grid-agnostic — use any container to lay them out.
 *
 * Markup:
 *   <div class="mlt-sign-grid">
 *     <div class="mlt-sign-card">
 *       <div class="mlt-sign-card__icon" aria-hidden="true">
 *         <svg>...</svg>
 *       </div>
 *       <h3>Old round-pin sockets or fabric-covered cables</h3>
 *       <p>If you've still got round-pin sockets...</p>
 *     </div>
 *     ...
 *   </div>
 */

.mlt-sign-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.mlt-sign-card {
  background: #fff;
  border: 1px solid var(--mlt-border);
  border-left: 4px solid var(--mlt-danger);
  padding: 24px;
  border-radius: var(--mlt-radius-md);
}

.mlt-sign-card__icon {
  width: 48px;
  height: 48px;
  background: var(--mlt-danger-soft);
  color: var(--mlt-danger);
  border-radius: var(--mlt-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.mlt-sign-card__icon svg {
  width: 26px;
  height: 26px;
}

.mlt-sign-card h3 {
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--mlt-text);
  font-weight: 700;
}

.mlt-sign-card p {
  font-size: 15px;
  color: var(--mlt-text-light);
  line-height: 1.55;
  margin: 0;
}