/* ==========================================================
   ARTICLE INFO CARDS (tip / warning / expert / mistake / pros / cons)
========================================================== */

.article-info-card {
    border-radius: var(--radius-md);
    padding: 18px 20px;
    margin: 24px 0;
    border-left: 4px solid currentColor;
}

.article-info-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.article-info-card__icon { font-size: 18px; flex-shrink: 0; }

.article-info-card__title {
    font-size: 15px;
    font-weight: 700;
}

.article-info-card__body {
    font-size: 15px;
    line-height: 1.7;
    color: inherit;
}
.article-info-card__body p { margin: 0; }

/* Type colours */
.article-info-card--tip     { background: var(--badge-success-bg); color: var(--badge-success-text); border-color: var(--color-success); }
.article-info-card--warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); border-color: var(--brand-accent); }
.article-info-card--expert  { background: var(--badge-info-bg);    color: var(--link);               border-color: var(--link); }
.article-info-card--mistake { background: var(--badge-danger-bg);  color: var(--badge-danger-text);  border-color: var(--color-danger); }
.article-info-card--pros    { background: var(--badge-success-bg); color: var(--badge-success-text); border-color: var(--color-success); }
.article-info-card--cons    { background: var(--badge-danger-bg);  color: var(--badge-danger-text);  border-color: var(--color-danger); }

/* Article products grid */
.article-products { margin: 36px 0; }

.article-products__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 20px;
}

.article-products__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}