/* ============================================================
   Home page Anti-Inflammatory / Mediterranean teaser
   ------------------------------------------------------------
   Two-card block on the homepage just above the FAQ, surfacing
   the anti-inflammatory pillar and the Mediterranean diet
   guide. The block markup lives in the home page body_html and
   is set up via content/setup/setup-home-ai-teaser.php.

   Loaded automatically by lib/CustomAssets.php.
   ============================================================ */
.home-ai-teaser {
    margin: 2rem auto;
    max-width: 960px;
    padding: 0 1rem;
}
.home-ai-teaser-h {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light, #6b7280);
    margin: 0 0 0.7rem;
}
.home-ai-teaser-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 720px) {
    .home-ai-teaser-grid { grid-template-columns: 1fr 1fr; }
}
.home-ai-teaser-card {
    display: block;
    padding: 1.25rem 1.4rem;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-left: 4px solid #d97706;
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--text-color);
    transition: box-shadow 0.15s ease;
}
.home-ai-teaser-card.med { border-left-color: #14713c; }
.home-ai-teaser-card:hover {
    color: var(--text-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}
[data-theme="dark"] .home-ai-teaser-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
.home-ai-teaser-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #d97706;
    margin: 0 0 0.4rem;
}
.home-ai-teaser-card.med .home-ai-teaser-label { color: #14713c; }
[data-theme="dark"] .home-ai-teaser-label { color: #fcd34d; }
[data-theme="dark"] .home-ai-teaser-card.med .home-ai-teaser-label { color: #86efac; }
.home-ai-teaser-card h3 {
    margin: 0 0 0.45rem;
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--text-color);
}
.home-ai-teaser-card p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-light, #6b7280);
    line-height: 1.5;
}
.home-ai-teaser-card-cta {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #d97706;
}
.home-ai-teaser-card.med .home-ai-teaser-card-cta { color: #14713c; }
[data-theme="dark"] .home-ai-teaser-card-cta { color: #fcd34d; }
[data-theme="dark"] .home-ai-teaser-card.med .home-ai-teaser-card-cta { color: #86efac; }