/* ====================================================
   Schnitzlbaumer Eventkalender – Frontend-Styles
   ==================================================== */

/* Grid */
.sb-grid {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}
.sb-cols-2 { grid-template-columns: repeat(2, 1fr); }
.sb-cols-3 { grid-template-columns: repeat(3, 1fr); }
.sb-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .sb-cols-3,
    .sb-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .sb-cols-2,
    .sb-cols-3,
    .sb-cols-4 { grid-template-columns: 1fr; }
}

/* Card – nur Bild mit Link */
.sb-card {
    display: block;
    overflow: hidden;
    border-radius: 4px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.sb-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

.sb-card__link {
    display: block;
    text-decoration: none;
}

.sb-card__link img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity .2s ease;
}
.sb-card:hover .sb-card__link img {
    opacity: .9;
}

/* Platzhalter wenn kein Bild */
.sb-card__no-image {
    aspect-ratio: 3 / 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #e8eef2;
    font-size: 3rem;
    color: #aac;
    gap: .5rem;
}

/* Kategorien-Badges */
.sb-card__cats {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: .4rem;
}
.sb-card__cat {
    display: inline-block;
    background: #e8f4f8;
    color: #2a7a9b;
    font-size: .72rem;
    font-weight: 600;
    padding: .15rem .5rem;
    border-radius: 20px;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* Statusmeldungen */
.sb-no-events,
.sb-error,
.sb-loading {
    text-align: center;
    color: #888;
    padding: 2rem;
    font-style: italic;
}
.sb-error { color: #c00; }