/* ---------------------------------------------------------
   ALGEMENE STYLING
--------------------------------------------------------- */
body {
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    color: #222;
    line-height: 1.6;
}

/* ---------------------------------------------------------
   GRID (DAGOVERZICHT + SHOW SCHEDULE)
--------------------------------------------------------- */
.sp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin: 35px 0;
}

.sp-card {
    background: #1a1a1a;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sp-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}

.sp-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ---------------------------------------------------------
   LIVE & NEXT SHOW — FLEXIBELE KAART
--------------------------------------------------------- */

.sp-current,
.sp-next-show {
    position: relative;
    display: block;
    width: 600px;
    max-width: 100%;
    background: #1a1a1a;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    transition: transform 0.25s ease;
    margin: 25px auto;
}

.sp-current:hover,
.sp-next-show:hover {
    transform: translateY(-6px);
}

.sp-current::before,
.sp-next-show::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1;
}

.sp-current img,
.sp-next-show img {
    width: 100%;
    height: auto;
    object-fit: cover;
    position: relative;
    z-index: 2;
}

.sp-current-inner,
.sp-next-inner {
    padding: 15px 18px 18px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---------------------------------------------------------
   LABELS (NU LIVE / STRAKS)
--------------------------------------------------------- */

.sp-live-label,
.sp-next-label {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.sp-live-label {
    background: #ff3b3b;
    animation: sp-pulse 1.2s infinite;
}

.sp-next-label {
    background: #0073ff;
}

@keyframes sp-pulse {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,59,59,0.7); }
    70%  { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255,59,59,0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,59,59,0); }
}

/* ---------------------------------------------------------
   TEKST
--------------------------------------------------------- */

.sp-title {
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 600;
}

.sp-presenter {
    font-size: clamp(13px, 1.8vw, 15px);
    color: #e0e0e0;
}

.sp-slogan {
    font-style: italic;
    color: #cccccc;
    font-size: clamp(13px, 1.8vw, 15px);
}

.sp-time {
    margin-top: auto;
    font-weight: bold;
    color: #f5f5f5;
    font-size: clamp(14px, 2vw, 16px);
}

/* ---------------------------------------------------------
   DROPDOWN (SHOW SCHEDULE)
--------------------------------------------------------- */

.sp-schedule-form {
    margin: 20px 0 10px;
    text-align: center;
}

.sp-schedule-dropdown {
    padding: 12px 18px;
    font-size: 17px;
    border-radius: 10px;
    border: 2px solid #444;
    background: #1a1a1a;
    color: #fff;
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.sp-schedule-dropdown:hover {
    border-color: #ff3b3b;
    box-shadow: 0 0 8px rgba(255,59,59,0.4);
}

/* ---------------------------------------------------------
   STICKY LIVE BAR
--------------------------------------------------------- */

.sp-live-bar {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #111;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 3px solid #ff3b3b;
}

.sp-live-bar img {
    width: 60px !important;
    height: auto !important;
    border-radius: 6px;
}

.sp-live-bar .sp-current-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 700px) {
    .sp-grid {
        grid-template-columns: 1fr;
    }

    .sp-current,
    .sp-next-show {
        width: 100%;
    }
}

/* LABELS ALTIJD KLEIN HOUDEN */
.sp-live-label,
.sp-next-label {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    max-width: max-content !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    font-weight: 600;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    
}

/* voorkom dat flex ze oprekt */
.sp-current-inner,
.sp-next-inner {
    align-items: flex-start !important;
}