/**
 * Pocket-Sommelier - Knowledge Module Styles
 * Wein-Wissen: Farben, Alkohol, Regionen, Rebsorten, Süßegrade
 * Design: Wine-Corporate (#722F37) + App Design System
 */

/* ==================== Container ==================== */
.kn-container {
    max-width: 32rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.kn-content {
    padding-top: 0.5rem;
    padding-bottom: 8rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ==================== Page Header ==================== */
.kn-page-header {
    padding: 1.5rem 1rem 0.5rem;
    max-width: 32rem;
    margin: 0 auto;
}

.kn-page-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: 1.625rem;
    color: var(--text-primary);
    margin: 0;
}

/* ==================== Sub-Page Header ==================== */
.kn-header-card {
    background: var(--wine-tint-subtle);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    border: 1px solid rgba(114, 47, 55, 0.12);
    margin-top: 0.5rem;
}

.kn-header-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    margin: 0 0 0.375rem;
}

.kn-header-text {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* ==================== Back Button (wie back-btn) ==================== */
.kn-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    color: var(--wine-corporate);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.75rem 0 0.25rem;
    transition: color 0.2s;
}

.kn-back-btn:hover {
    color: var(--wine-corporate-dark);
}

/* ==================== Category List (große, prominente Kacheln) ==================== */
.kn-cat-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.kn-cat-card {
    display: flex;
    align-items: center;
    gap: 1.125rem;
    padding: 1.25rem 1.25rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.kn-cat-card:hover {
    background: var(--wine-tint-subtle);
    border-color: var(--wine-corporate);
    box-shadow: 0 4px 16px rgba(114, 47, 55, 0.08);
}

.kn-cat-card:active {
    background: var(--wine-tint-medium);
    transform: scale(0.99);
}

.kn-cat-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-lg);
    background: var(--wine-tint-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.kn-cat-text {
    flex: 1;
    min-width: 0;
}

.kn-cat-title {
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--text-primary);
    margin: 0;
}

.kn-cat-desc {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin: 0.1875rem 0 0;
}

.kn-cat-arrow {
    color: var(--text-tertiary);
    flex-shrink: 0;
}

/* ==================== Generic Card ==================== */
.kn-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.kn-card-header {
    background: var(--bg-tertiary);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.kn-card-header--video {
    background: var(--wine-tint-subtle);
}

.kn-card-header-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin: 0;
}

.kn-card-body {
    padding: 1rem;
}

.kn-section-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
    padding: 1rem 1rem 0;
}

/* ==================== Text ==================== */
.kn-text {
    font-size: 0.8125rem;
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
    padding: 1rem 1rem 0.5rem;
}

.kn-text-muted {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    padding: 0 1rem 1rem;
}

/* ==================== Color Scale ==================== */
.kn-color-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.kn-color-row:hover {
    background: var(--bg-tertiary);
}

.kn-color-swatch {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.kn-color-info {
    display: flex;
    flex-direction: column;
}

.kn-color-name {
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--text-primary);
}

.kn-color-wines {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
}

/* ==================== Color Reveals ==================== */
.kn-reveal-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 1rem 1rem;
}

.kn-reveal-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.kn-reveal-icon { font-size: 1.125rem; flex-shrink: 0; }
.kn-reveal-title { font-weight: 600; font-size: 0.8125rem; color: var(--text-primary); margin-bottom: 0.125rem; }
.kn-reveal-text  { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.5; }

/* ==================== Taste Grades (Alcohol) ==================== */
.kn-taste-grades {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
}

.kn-grade {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-sm);
}

.kn-grade--dry    { background: rgba(34, 197, 94, 0.08); }
.kn-grade--offdry { background: rgba(234, 179, 8, 0.08); }
.kn-grade--medium { background: rgba(249, 115, 22, 0.08); }
.kn-grade--sweet  { background: rgba(236, 72, 153, 0.08); }

.kn-grade-name  { font-weight: 600; font-size: 0.8125rem; color: var(--text-primary); }
.kn-grade-sugar { font-size: 0.6875rem; color: var(--text-tertiary); }

.kn-grade-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.kn-grade-badge--green  { background: #16a34a; }
.kn-grade-badge--yellow { background: #ca8a04; }
.kn-grade-badge--orange { background: #ea580c; }
.kn-grade-badge--pink   { background: #db2777; }

/* ==================== Tears / Wine Legs ==================== */
.kn-tears-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.kn-tears-item {
    text-align: center;
    padding: 0.75rem;
    border-radius: var(--radius-sm);
}

.kn-tears-item--high { background: rgba(34, 197, 94, 0.08); }
.kn-tears-item--low  { background: rgba(59, 130, 246, 0.08); }

.kn-tears-emoji { font-size: 1.5rem; margin-bottom: 0.25rem; }
.kn-tears-label { font-weight: 600; font-size: 0.8125rem; color: var(--text-primary); }
.kn-tears-desc  { font-size: 0.6875rem; color: var(--text-secondary); margin-top: 0.25rem; }

/* ==================== Videos ==================== */
.kn-video-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.kn-video-wrap {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #000;
}

.kn-video-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ==================== Alcohol Examples ==================== */
.kn-alc-list {
    display: flex;
    flex-direction: column;
}

.kn-alc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color-light);
}

.kn-alc-row:last-child { border-bottom: none; }

.kn-alc-wine { display: flex; flex-direction: column; }
.kn-alc-wine-name   { font-weight: 500; font-size: 0.8125rem; color: var(--text-primary); }
.kn-alc-wine-region  { font-size: 0.6875rem; color: var(--text-tertiary); }

.kn-alc-badge {
    font-size: 0.6875rem;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* ==================== Tip Card ==================== */
.kn-tip-card {
    background: var(--wine-tint-subtle);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(114, 47, 55, 0.12);
    padding: 1rem 1.25rem;
}

.kn-tip-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.kn-tip-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.kn-tip-text {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ==================== Source ==================== */
.kn-source {
    text-align: center;
    font-size: 0.6875rem;
    color: var(--text-tertiary);
}

/* ==================== Climate Detail Cards (Regions) ==================== */
.kn-climate-detail-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.kn-climate-detail-card {
    border-radius: var(--radius-md);
    padding: 1rem;
    border: 1px solid;
}

.kn-climate-card--cool     { background: rgba(59, 130, 246, 0.06); border-color: rgba(59, 130, 246, 0.15); }
.kn-climate-card--moderate { background: rgba(217, 119, 6, 0.06); border-color: rgba(217, 119, 6, 0.15); }
.kn-climate-card--warm     { background: rgba(234, 88, 12, 0.06); border-color: rgba(234, 88, 12, 0.15); }

.kn-climate-detail-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.kn-climate-detail-emoji { font-size: 1.5rem; }
.kn-climate-detail-title { font-weight: 600; font-size: 0.875rem; color: var(--text-primary); margin: 0; }

.kn-climate-detail-traits {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.kn-climate-detail-regions {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin: 0;
}

/* ==================== Blind Tasting Tips ==================== */
.kn-bt-tips {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 1rem 1rem;
}

.kn-bt-tip {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.kn-bt-num {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--wine-tint-medium);
    color: var(--wine-corporate);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kn-bt-tip-title { font-weight: 600; font-size: 0.8125rem; color: var(--text-primary); }
.kn-bt-tip-text  { font-size: 0.75rem; color: var(--text-tertiary); }

/* ==================== Grape Cards ==================== */
.kn-grape-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.kn-grape-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.kn-grape-header {
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color-light);
}

.kn-grape-name  { font-weight: 600; font-size: 0.875rem; color: var(--text-primary); margin: 0; }
.kn-grape-emoji { font-size: 1.25rem; }

.kn-grape-body {
    padding: 0.75rem 1rem;
}

.kn-grape-profile {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0 0 0.375rem;
    line-height: 1.5;
}

.kn-grape-regions {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin: 0;
}

/* ==================== Sugar Levels ==================== */
.kn-sugar-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
}

.kn-sugar-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid;
}

.kn-sugar-dot {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Color utilities for sugar levels */
.bg-green-50  { background: rgba(34, 197, 94, 0.06); }
.bg-yellow-50 { background: rgba(234, 179, 8, 0.06); }
.bg-amber-50  { background: rgba(217, 119, 6, 0.06); }
.bg-orange-50 { background: rgba(249, 115, 22, 0.06); }
.bg-pink-50   { background: rgba(236, 72, 153, 0.06); }

.border-green-200  { border-color: rgba(34, 197, 94, 0.15); }
.border-yellow-200 { border-color: rgba(234, 179, 8, 0.15); }
.border-amber-200  { border-color: rgba(217, 119, 6, 0.15); }
.border-orange-200 { border-color: rgba(249, 115, 22, 0.15); }
.border-pink-200   { border-color: rgba(236, 72, 153, 0.15); }

.bg-green-500  { background: #22c55e; }
.bg-yellow-500 { background: #eab308; }
.bg-amber-500  { background: #d97706; }
.bg-orange-500 { background: #f97316; }
.bg-pink-500   { background: #ec4899; }

.bg-green-100  { background: rgba(34, 197, 94, 0.15); }
.bg-yellow-100 { background: rgba(234, 179, 8, 0.15); }
.bg-amber-100  { background: rgba(217, 119, 6, 0.15); }
.bg-orange-100 { background: rgba(249, 115, 22, 0.15); }
.bg-pink-100   { background: rgba(236, 72, 153, 0.15); }

.kn-sugar-info { flex: 1; min-width: 0; }
.kn-sugar-name { font-weight: 600; font-size: 0.8125rem; color: var(--text-primary); }
.kn-sugar-intl { font-weight: 400; font-size: 0.75rem; color: var(--text-tertiary); }
.kn-sugar-desc { font-size: 0.6875rem; color: var(--text-secondary); }

.kn-sugar-badge {
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    color: var(--text-primary);
}

/* ==================== Dark Mode ==================== */
[data-theme="dark"] .kn-header-card,
[data-theme="dark"] .kn-tip-card {
    background: var(--wine-tint-subtle);
    border-color: rgba(140, 41, 66, 0.2);
}

[data-theme="dark"] .kn-video-wrap { background: #1a1a2e; }
[data-theme="dark"] .kn-cat-icon   { background: var(--wine-tint-medium); }
[data-theme="dark"] .kn-bt-num     { color: #e8a0ae; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .kn-header-card,
    :root:not([data-theme="light"]) .kn-tip-card {
        background: var(--wine-tint-subtle);
        border-color: rgba(140, 41, 66, 0.2);
    }
    :root:not([data-theme="light"]) .kn-bt-num { color: #e8a0ae; }
    :root:not([data-theme="light"]) .kn-cat-icon { background: var(--wine-tint-medium); }
}