/* ============================================
   Saisonkalender - Bild-Ergänzungen
   DasSchmecktUns.de
   
   Diese Datei ergänzt saisonkalender.css
   für die Version mit Original-Bildern statt Emojis
   ============================================ */

/* ---- Card Visual Container ---- */
.sk-card-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.sk-card-visual img,
.sk-card-image {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.sk-card:hover .sk-card-visual img,
.sk-card:hover .sk-card-image {
    transform: scale(1.08);
}

/* SVG Placeholder Styling */
.sk-card-visual svg {
    width: 48px;
    height: 48px;
}

/* ---- Muted Card Visual ---- */
.sk-card-muted-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #f0f0f0;
}

.sk-card-muted-visual img,
.sk-card-muted-image {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 6px;
    opacity: 0.7;
    filter: grayscale(30%);
    transition: all 0.3s ease;
}

.sk-card-muted:hover .sk-card-muted-visual img,
.sk-card-muted:hover .sk-card-muted-image {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.1);
}

.sk-card-muted-visual svg {
    width: 24px;
    height: 24px;
    opacity: 0.5;
}

.sk-card-muted:hover .sk-card-muted-visual svg {
    opacity: 0.8;
}

/* ---- Table Item Image ---- */
.sk-table-item-image {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 8px;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

.sk-table-link:hover .sk-table-item-image {
    transform: scale(1.15);
}

.sk-table-item-name svg {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 8px;
}

/* ---- Filter Icons ---- */
.sk-filter-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 4px;
    flex-shrink: 0;
}

.sk-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---- Stats Icons ---- */
.sk-stats-icon svg {
    width: 32px;
    height: 32px;
}

.sk-stats-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sk-stats-row svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ---- Search Icon SVG ---- */
.sk-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sk-search-icon svg {
    width: 18px;
    height: 18px;
    stroke: #999;
}

/* ---- View Toggle Icons ---- */
.sk-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sk-view-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ---- Hero Icon with SVG ---- */
.sk-hero-icon svg {
    width: 80px;
    height: 80px;
}

/* ---- Responsive Adjustments ---- */
@media (max-width: 600px) {
    .sk-card-visual {
        width: 48px;
        height: 48px;
    }
    
    .sk-card-visual img,
    .sk-card-image {
        width: 48px;
        height: 48px;
    }
    
    .sk-card-visual svg {
        width: 36px;
        height: 36px;
    }
    
    .sk-hero-icon svg {
        width: 60px;
        height: 60px;
    }
}

/* ---- Loading State ---- */
.sk-card-visual img[src=""],
.sk-card-muted-visual img[src=""],
.sk-table-item-image[src=""] {
    visibility: hidden;
}

/* ---- Error Fallback ---- */
.sk-card-visual img.error,
.sk-card-muted-visual img.error,
.sk-table-item-image.error {
    display: none;
}