/* Baseline 2 — saved 2025-09-28
   Purpose: All card styling (base card, badges, countdown, themes: Xmas, Easter, Summer, Calm, Party). */
.card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: 20px;
    transition: .26s;
    position: relative;
    overflow: hidden;
}

    .card:hover {
        transform: translateY(-4px);
        border-color: rgba(124,92,255,.45);
    }

.date-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.date-label {
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* === Badges (color coded) === */
.badge {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
}

    .badge.half-term {
        background: rgba(124,92,255,.12);
        border-color: rgba(124,92,255,.35);
    }

    .badge.christmas {
        background: rgba(16,185,129,.14);
        border-color: rgba(16,185,129,.40);
    }

    .badge.easter {
        background: rgba(234,179,8,.16);
        border-color: rgba(234,179,8,.45);
    }

    .badge.students-leave {
        background: rgba(244,63,94,.12);
        border-color: rgba(244,63,94,.38);
    }

    .badge.summer {
        background: rgba(59,130,246,.14);
        border-color: rgba(59,130,246,.40);
    }

    .badge.default {
        background: rgba(100,116,139,.14);
        border-color: rgba(100,116,139,.40);
    }

/* === Countdown text === */
.diff {
    font-size: 1.5rem;
    font-weight: 800;
}

    .diff .hm {
        font-size: .7em;
        color: var(--muted);
    }
/* hours/minutes smaller & lighter */

.status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
}

    .status .dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--accent);
    }

    .status.future .dot {
        background: var(--ok);
    }

    .status.today .dot {
        background: var(--warn);
    }

    .status.past .dot {
        background: var(--past);
    }

.footnote {
    font-size: 12px;
    color: var(--muted);
}

/* === Themes === */

/* -- Christmas (19 Dec 2025) -- */
.card.xmas-card {
    background: linear-gradient(135deg, rgba(220,38,38,.18), rgba(16,185,129,.18)), var(--card);
    border-color: rgba(244,63,94,.45);
    box-shadow: 0 16px 40px rgba(220,38,38,.10), var(--shadow);
}

    .card.xmas-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 20px;
        pointer-events: none;
        z-index: 0;
        /* Candy stripes + tiny tree in bottom-right */
        background-image: repeating-linear-gradient( 45deg, rgba(255,255,255,.10) 0 14px, rgba(244,63,94,.12) 14px 28px, rgba(34,197,94,.12) 28px 42px ), url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<polygon points='32,6 35,12 42,13 36.5,17 38,24 32,20.5 26,24 27.5,17 22,13 29,12' fill='%23facc15'/>\
<polygon points='32,12 48,30 16,30' fill='%2316a34a'/>\
<polygon points='32,22 52,42 12,42' fill='%2310b981'/>\
<polygon points='32,32 56,54 8,54' fill='%2334d399'/>\
<rect x='28' y='54' width='8' height='8' rx='1.5' fill='%238b5e3c'/>\
</svg>");
        background-repeat: repeat, no-repeat;
        background-size: auto, 28px 28px;
        background-position: 0 0, right 12px bottom 12px;
        opacity: .45;
    }
    /* Large, few, slow snow */
    .card.xmas-card::after {
        content: "";
        position: absolute;
        inset: -40px 0 0 0;
        border-radius: 20px;
        pointer-events: none;
        z-index: 1;
        background-image: radial-gradient(rgba(255,255,255,.9) 2.6px, transparent 2.6px), radial-gradient(rgba(255,255,255,.85) 3px, transparent 3px), radial-gradient(rgba(255,255,255,.8) 3.4px, transparent 3.4px);
        background-size: 28px 28px, 36px 36px, 44px 44px;
        background-position: 0 -60px, 0 -80px, 0 -100px;
        animation: snowDrift 40s linear infinite;
    }

@keyframes snowDrift {
    to {
        background-position: 0 720px, 0 880px, 0 1040px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .card.xmas-card::after {
        animation: none !important;
    }
}

/* -- Easter (2 Apr 2026) -- */
.card.easter-card {
    background: linear-gradient(135deg, rgba(250,232,255,.55), rgba(219,234,254,.55)), var(--card);
    border-color: rgba(168,85,247,.35);
    box-shadow: 0 16px 40px rgba(99,102,241,.12), var(--shadow);
}

    .card.easter-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 20px;
        pointer-events: none;
        z-index: 0;
        background-image: repeating-linear-gradient( 45deg, rgba(236,72,153,.08) 0 14px, rgba(139,92,246,.08) 14px 28px, rgba(59,130,246,.08) 28px 42px ), url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0%' stop-color='%23fde68a'/><stop offset='100%' stop-color='%23fbcfe8'/></linearGradient></defs>\
<path d='M32 8c-9 0-18 14-18 26a18 18 0 0036 0C50 22 41 8 32 8z' fill='url(%23g)'/>\
<path d='M18 36c4-2 8 2 12 0s8-4 16 1' fill='none' stroke='%23ec4899' stroke-width='2' stroke-linecap='round' opacity='.85'/>\
<path d='M22 28c2 0 3 2 5 2s4-3 7-3 6 3 9 1' fill='none' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round' opacity='.75'/>\
</svg>");
        background-repeat: repeat, no-repeat;
        background-size: auto, 28px 28px;
        background-position: 0 0, right 12px bottom 12px;
        opacity: .95;
    }

    .card.easter-card::after {
        content: "";
        position: absolute;
        inset: -40px 0 0 0;
        border-radius: 20px;
        pointer-events: none;
        z-index: 1;
        background-image: radial-gradient(rgba(236,72,153,.85) 2.2px, transparent 2.2px), radial-gradient(rgba(59,130,246,.85) 2.6px, transparent 2.6px), radial-gradient(rgba(16,185,129,.85) 2.6px, transparent 2.6px);
        background-size: 30px 30px, 38px 38px, 46px 46px;
        background-position: 0 -60px, 0 -80px, 0 -100px;
        animation: easterFloat 34s linear infinite;
    }

@keyframes easterFloat {
    to {
        background-position: 0 680px, 0 820px, 0 960px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .card.easter-card::after {
        animation: none !important;
    }
}

/* -- Summer (10 Jul 2026) -- */
.card.summer-card {
    background: linear-gradient(160deg, rgba(253,224,71,.35), rgba(56,189,248,.35)), var(--card);
    border-color: rgba(59,130,246,.40);
    box-shadow: 0 16px 40px rgba(59,130,246,.15), var(--shadow);
}
    /* brighter sun with glow + grain */
    .card.summer-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 20px;
        pointer-events: none;
        z-index: 0;
        background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1.2px), /* grain */
        radial-gradient(closest-side, rgba(254,240,138,.55), rgba(254,240,138,0) 70%), /* glow */
        url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<circle cx='32' cy='32' r='11' fill='%23fef08a' stroke='%23facc15' stroke-width='2'/>\
<g fill='%23fdba74'>\
<rect x='31' y='5' width='2' height='10' rx='1'/>\
<rect x='31' y='5' width='2' height='10' rx='1' transform='rotate(30 32 32)'/>\
<rect x='31' y='5' width='2' height='10' rx='1' transform='rotate(60 32 32)'/>\
<rect x='31' y='5' width='2' height='10' rx='1' transform='rotate(90 32 32)'/>\
<rect x='31' y='5' width='2' height='10' rx='1' transform='rotate(120 32 32)'/>\
<rect x='31' y='5' width='2' height='10' rx='1' transform='rotate(150 32 32)'/>\
<rect x='31' y='5' width='2' height='10' rx='1' transform='rotate(180 32 32)'/>\
<rect x='31' y='5' width='2' height='10' rx='1' transform='rotate(210 32 32)'/>\
<rect x='31' y='5' width='2' height='10' rx='1' transform='rotate(240 32 32)'/>\
<rect x='31' y='5' width='2' height='10' rx='1' transform='rotate(270 32 32)'/>\
<rect x='31' y='5' width='2' height='10' rx='1' transform='rotate(300 32 32)'/>\
<rect x='31' y='5' width='2' height='10' rx='1' transform='rotate(330 32 32)'/>\
</g></svg>");
        background-repeat: repeat, no-repeat, no-repeat;
        background-size: 8px 8px, 72px 72px, 30px 30px; /* grain | glow | sun */
        background-position: 0 0, right 6px bottom 6px, right 12px bottom 12px;
    }

    .card.summer-card::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -6px;
        height: 40%;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        pointer-events: none;
        z-index: 1;
        background: radial-gradient(100% 60% at 50% 120%, rgba(2,132,199,.20) 20%, transparent 60%), repeating-linear-gradient(-6deg, rgba(2,132,199,.30) 0 10px, rgba(56,189,248,.30) 10px 20px);
        -webkit-mask-image: linear-gradient(to top, black, black, transparent 70%);
        mask-image: linear-gradient(to top, black, black, transparent 70%);
        animation: waveDrift 28s linear infinite;
    }

@keyframes waveDrift {
    to {
        background-position: 0 60px, 240px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .card.summer-card::after {
        animation: none !important;
    }
}

/* -- Calm/Restful (24 Oct 2025, 13 Feb 2026, 22 May 2026) -- */
.card.calm-card {
    background: linear-gradient(160deg, rgba(203,213,225,.45), rgba(186,230,253,.45)), var(--card);
    border-color: rgba(100,116,139,.30);
    box-shadow: 0 12px 32px rgba(15,23,42,.10), var(--shadow);
}

    .card.calm-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 20px;
        pointer-events: none;
        z-index: 0;
        background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1.2px);
        background-size: 10px 10px;
        opacity: .25;
    }
    /* inner glow + tiny bed icon (bottom-right) */
    .card.calm-card::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 20px;
        pointer-events: none;
        z-index: 1;
        background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
  <rect x='6' y='28' width='8' height='22' rx='2' fill='%2364748b'/>\
  <rect x='10' y='34' width='48' height='16' rx='3' fill='%2394a3b8'/>\
  <rect x='12' y='36' width='44' height='12' rx='3' fill='%23e2e8f0'/>\
  <rect x='14' y='36' width='12' height='8' rx='2' fill='%23ffffff'/>\
  <rect x='10' y='50' width='4' height='6' rx='1' fill='%236b7280'/>\
  <rect x='54' y='50' width='4' height='6' rx='1' fill='%236b7280'/>\
</svg>"), radial-gradient(120% 120% at 50% 40%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%), radial-gradient(140% 140% at 50% 120%, rgba(15,23,42,.06), rgba(15,23,42,0) 60%);
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-size: 30px 30px, cover, cover;
        background-position: right 12px bottom 12px, center, center;
    }

/* -- Party (30 Jun 2026) -- */
.card.party-card {
    background: linear-gradient(135deg, rgba(192,132,252,.35), rgba(244,114,182,.35), rgba(250,204,21,.30) ), var(--card);
    border-color: rgba(217,70,239,.40);
    box-shadow: 0 16px 40px rgba(217,70,239,.15), var(--shadow);
}

    .card.party-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 20px;
        pointer-events: none;
        z-index: 0;
        background-image: repeating-linear-gradient( -35deg, rgba(255,255,255,.10) 0 10px, rgba(99,102,241,.12) 10px 20px, rgba(244,114,182,.12) 20px 30px, rgba(34,197,94,.10) 30px 40px ), url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<defs><linearGradient id='b1' x1='0' y1='0' x2='0' y2='1'><stop offset='0%' stop-color='%23fde68a'/><stop offset='100%' stop-color='%23f59e0b'/></linearGradient>\
<linearGradient id='b2' x1='0' y1='0' x2='0' y2='1'><stop offset='0%' stop-color='%23fbcfe8'/><stop offset='100%' stop-color='%23ec4899'/></linearGradient>\
<linearGradient id='b3' x1='0' y1='0' x2='0' y2='1'><stop offset='0%' stop-color='%23bae6fd'/><stop offset='100%' stop-color='%233b82f6'/></linearGradient></defs>\
<ellipse cx='20' cy='20' rx='8' ry='10' fill='url(%23b1)'/>\
<ellipse cx='36' cy='18' rx='7.5' ry='9.5' fill='url(%23b2)'/>\
<ellipse cx='48' cy='24' rx='7' ry='9' fill='url(%23b3)'/>\
<path d='M20 30c0 8-10 4-8 14' stroke='%23f59e0b' stroke-width='2' fill='none'/>\
<path d='M36 28c0 8-10 4-8 14' stroke='%23ec4899' stroke-width='2' fill='none'/>\
<path d='M48 34c0 8-10 4-8 14' stroke='%233b82f6' stroke-width='2' fill='none'/>\
</svg>");
        background-repeat: repeat, no-repeat;
        background-size: auto, 32px 32px;
        background-position: 0 0, right 12px bottom 12px;
        opacity: 1.85;
    }

    .card.party-card::after {
        content: "";
        position: absolute;
        inset: -40px 0 0 0;
        border-radius: 20px;
        pointer-events: none;
        z-index: 1;
        background-image: radial-gradient(#f59e0b 2.2px, transparent 2.2px), radial-gradient(#ef4444 2.6px, transparent 2.6px), radial-gradient(#10b981 2.2px, transparent 2.2px), radial-gradient(#3b82f6 2.2px, transparent 2.2px), radial-gradient(#a78bfa 2.4px, transparent 2.4px);
        background-size: 30px 30px, 36px 36px, 34px 34px, 38px 38px, 32px 32px;
        background-position: 0 -60px, 0 -90px, 0 -75px, 0 -85px, 0 -95px;
        animation: confettiFall 32s linear infinite;
    }

@keyframes confettiFall {
    to {
        background-position: 0 680px, 0 860px, 0 780px, 0 900px, 0 820px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .card.party-card::after {
        animation: none !important;
    }
}