/* /MainPage/Modules/HealthAndWellBeing/Food/Knowledges/Knowledges.css */

.KnowledgesContentArea {
    --knowledge-accent: #58d68d;
    --knowledge-surface: rgba(255, 255, 255, .055);
    display: grid;
    gap: 24px;
    padding: clamp(16px, 3vw, 34px);
}

.KnowledgeHero,
.KnowledgeNotice {
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(88, 214, 141, .13), rgba(255, 255, 255, .035));
    padding: clamp(20px, 4vw, 38px);
}

.KnowledgeEyebrow {
    margin: 0 0 8px;
    color: var(--knowledge-accent);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.KnowledgeHero h3 { margin: 0 0 10px; font-size: clamp(1.7rem, 4vw, 2.6rem); }
.KnowledgeHero > p:not(.KnowledgeEyebrow) { max-width: 850px; margin: 0; line-height: 1.65; opacity: .82; }

.KnowledgeSearch { display: grid; gap: 7px; max-width: 560px; margin-top: 24px; font-size: .82rem; font-weight: 700; }
.KnowledgeSearch input {
    width: 100%; box-sizing: border-box; border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
    background: rgba(0,0,0,.18); color: inherit; padding: 12px 14px; font: inherit;
}
.KnowledgeSearch input:focus { outline: 2px solid var(--knowledge-accent); outline-offset: 2px; }

.KnowledgeFilters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.KnowledgeFilters button {
    border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(255,255,255,.04);
    color: inherit; padding: 8px 13px; cursor: pointer; font: inherit; font-size: .82rem;
}
.KnowledgeFilters button:hover, .KnowledgeFilters button.is-active { border-color: var(--knowledge-accent); background: rgba(88,214,141,.16); }

.KnowledgeSection { display: grid; gap: 15px; }
.KnowledgeSectionHeader { display: flex; align-items: center; gap: 12px; }
.KnowledgeSectionHeader > span { color: var(--knowledge-accent); font-size: .76rem; font-weight: 800; }
.KnowledgeSectionHeader h4 { margin: 0; font-size: 1.2rem; }
.KnowledgeSectionHeader p { margin: 3px 0 0; font-size: .84rem; opacity: .62; }
.KnowledgeGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px; }

.KnowledgeCard {
    min-height: 118px; border: 1px solid rgba(255,255,255,.09); border-radius: 15px;
    background: var(--knowledge-surface); padding: 17px; transition: transform .18s ease, border-color .18s ease;
}
.KnowledgeCard:hover { transform: translateY(-2px); border-color: rgba(88,214,141,.45); }
.KnowledgeCard h5 { margin: 0 0 9px; color: var(--knowledge-accent); font-size: .98rem; }
.KnowledgeCard h5 small { color: inherit; opacity: .65; font-size: .68rem; font-weight: 600; }
.KnowledgeCard p { margin: 0; line-height: 1.52; font-size: .86rem; opacity: .78; }
.KnowledgeCard[hidden], .KnowledgeSection[hidden], .KnowledgeEmptyState[hidden] { display: none; }
.KnowledgeEmptyState { padding: 24px; text-align: center; opacity: .7; }

.KnowledgeNotice { background: rgba(255,255,255,.04); }
.KnowledgeNotice strong { color: var(--knowledge-accent); }
.KnowledgeNotice p { margin: 8px 0 0; line-height: 1.55; opacity: .78; }
.KnowledgeNotice .KnowledgeSources { font-size: .76rem; opacity: .52; }

@media (max-width: 767px) {
    .KnowledgesContentArea { padding: 12px; gap: 18px; }
    .KnowledgeHero, .KnowledgeNotice { border-radius: 15px; padding: 18px; }
    .KnowledgeGrid { grid-template-columns: 1fr; }
    .KnowledgeCard { min-height: 0; }
}