/* ==========================================================
   SÄRMÄ LIVE CALENDAR
   Version 5.0

========================================================== */

/* ==========================================================
   VARIABLES
========================================================== */

:root{

    --bg:#0f0f10;

    --surface:#181818;

    --card:#fbfbfb;

    --text:#ffffff;

    --text-dark:#202020;

    --muted:#777;

    --primary:#d91f2f;

    --primary-dark:#99121d;

    --primary-light:#ff566f;

    --radius:22px;

    --shadow:

        0 15px 35px rgba(0,0,0,.18);

    --transition:.25s ease;

    --max-width:1180px;

}

/* ==========================================================
   RESET
========================================================== */

#sarma-keikat,
#sarma-keikat *{

    box-sizing:border-box;

}

#sarma-keikat{

    width:100%;

    color:var(--text);

    font-family:

        Inter,

        Arial,

        Helvetica,

        sans-serif;

}

/* ==========================================================
   WRAPPER
========================================================== */

#sarma-keikat .wrap{

    max-width:var(--max-width);

    margin:auto;

    padding:60px 24px;

}

/* ==========================================================
   HERO
========================================================== */

#sarma-keikat .page-header{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    min-height:560px;

    border-radius:30px;

    margin-bottom:60px;

    background:

        linear-gradient(

            rgba(0,0,0,.25),

            rgba(0,0,0,.72)

        ),

        url("images/hero.webp")

        center center /

        cover no-repeat;

    box-shadow:

        0 25px 60px rgba(0,0,0,.40);

}

#sarma-keikat .page-header::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at top right,

            rgba(217,31,47,.25),

            transparent 55%

        );

}

#sarma-keikat .heroOverlay{

    position:relative;

    z-index:2;

    text-align:center;

    max-width:850px;

    padding:50px;

}

#sarma-keikat .heroOverlay *{

    color:#fff;

}

#sarma-keikat .page-header h2{

    margin:0;

    font-size:clamp(2rem,4vw,3.3rem);

    font-weight:800;

    letter-spacing:.02em;

    text-transform:uppercase;

    text-shadow:

        0 4px 15px rgba(0,0,0,.45);

}

#sarma-keikat .page-header p{

    margin-top:16px;

    font-size:1.15rem;

    opacity:.92;

}

/* ==========================================================
   NEXT GIG
========================================================== */

#sarma-keikat #nextGig{

    margin-bottom:55px;

}

#sarma-keikat .next-card{

    position:relative;

    overflow:hidden;

    padding:42px;

    border-radius:28px;

    color:white;

    background:

        linear-gradient(

            135deg,

            var(--primary),

            var(--primary-dark)

        );

    box-shadow:

        0 20px 50px rgba(0,0,0,.35);

}

#sarma-keikat .next-card::after{

    content:"";

    position:absolute;

    top:-110px;

    right:-110px;

    width:290px;

    height:290px;

    border-radius:50%;

    background:

        rgba(255,255,255,.08);

}

#sarma-keikat .next-card h2{

    margin:0 0 24px;

    font-size:.82rem;

    font-weight:800;

    letter-spacing:.30em;

    text-transform:uppercase;

}

#sarma-keikat .next-grid{

    display:grid;

    grid-template-columns:120px 1fr;

    gap:34px;

    align-items:center;

}

#sarma-keikat .heroContent h3{

    margin:0 0 8px;

    font-size:2.2rem;

    font-weight:800;

}

#sarma-keikat .heroContent p{

    margin:4px 0;

    opacity:.95;

}

#sarma-keikat .heroButtons{

    display:flex;

    gap:14px;

    margin-top:24px;

    flex-wrap:wrap;

}
/* ==========================================================
   KEIKKAKORTIT
========================================================== */

#sarma-keikat .grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(285px,1fr));

    gap:20px;

}

#sarma-keikat .card{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    min-height:250px;

    border-radius:18px;

    background:

        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafafa 100%
        );

    border:1px solid rgba(0,0,0,.06);

    box-shadow:

        0 8px 24px rgba(0,0,0,.12);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}

#sarma-keikat .card:hover{

    transform:translateY(-6px);

    border-color:rgba(217,31,47,.18);

    box-shadow:

        0 18px 36px rgba(0,0,0,.18);

}

#sarma-keikat .card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at top right,

            rgba(217,31,47,.04),

            transparent 60%

        );

    pointer-events:none;

}

#sarma-keikat .bar{

    height:5px;

    background:

        linear-gradient(
            90deg,
            var(--primary-light),
            var(--primary)
        );

}

#sarma-keikat .card.private .bar{

    background:#9d9d9d;

}

#sarma-keikat .inner{

    flex:1;

    display:flex;

    flex-direction:column;

    padding:18px;

}

/* ==========================================================
   YLÄOSA
========================================================== */

#sarma-keikat .cardLayout{

    display:grid;

    grid-template-columns:72px 1fr;

    gap:16px;

    align-items:flex-start;

}

/* ==========================================================
   PÄIVÄMÄÄRÄ
========================================================== */

#sarma-keikat .dateMini{

    text-align:center;

    border-radius:14px;

    padding:10px 6px;

    background:
        linear-gradient(
            #ffffff,
            #f5f5f5
        );

    border:1px solid rgba(0,0,0,.06);

    box-shadow:
        0 8px 18px rgba(0,0,0,.10);

}

/* Päivä */

#sarma-keikat .dateMini .day{

    color:#202020;

    font-size:2rem;

    font-weight:900;

    line-height:1;

}

/* Kuukausi */

#sarma-keikat .dateMini .month{

    margin-top:4px;

    color:#333;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

/* Viikonpäivä */

#sarma-keikat .dateMini .weekday{

    display:none;

}

/* Vuosi */

#sarma-keikat .dateMini .year{

    margin-top:6px;

    color:#888;

    font-size:.68rem;

    font-weight:700;

}

/* ==========================================================
   SISÄLTÖ
========================================================== */

#sarma-keikat .place{

    margin:0 0 8px;

    color:#222;

    font-size:1.05rem;

    font-weight:800;

    line-height:1.2;

}

#sarma-keikat .city{

    margin:4px 0;

    color:#666;

    font-size:.95rem;

}

#sarma-keitat .cardContent{

    min-width:0;

}

/* ==========================================================
   PAINIKKEET
========================================================== */

#sarma-keikat .cardButtons{

    display:flex;

    gap:8px;

    flex-wrap:wrap;

    margin-top:14px;

    margin-bottom:14px;

}

#sarma-keikat .cardButtons a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    padding:8px 14px;

    border-radius:10px;

    background:#f4f4f4;

    color:#333;

    text-decoration:none;

    font-size:.85rem;

    font-weight:700;

    transition:.2s;

}

#sarma-keikat .cardButtons a:hover{

    background:var(--primary);

    color:#fff;

}

/* ==========================================================
   LISÄTIEDOT
========================================================== */

#sarma-keikat .toggle{

    margin-top:auto;

    padding:10px;

    border:none;

    border-radius:10px;

    background:#f3f3f3;

    color:var(--primary);

    font-size:.9rem;

    font-weight:700;

    cursor:pointer;

    transition:.2s;

}

#sarma-keikat .toggle:hover{

    background:var(--primary);

    color:#fff;

}

#sarma-keikat .details{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

}

#sarma-keikat .details.open{

    max-height:200px;

}

#sarma-keikat .details div{

    padding:12px 0 0;

    color:#666;

    font-size:.92rem;

}
/* ==========================================================
   HERO PAINIKKEET
========================================================== */

#sarma-keikat .heroTicket,
#sarma-keikat .heroMap{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-width:110px;

    min-height:44px;

    padding:10px 18px;

    border-radius:12px;

    text-decoration:none;

    font-size:.9rem;

    font-weight:700;

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease;

}

#sarma-keikat .heroTicket{

    background:#fff;

    color:#222;

    box-shadow:

        0 10px 18px rgba(0,0,0,.18);

}

#sarma-keikat .heroMap{

    background:rgba(255,255,255,.14);

    color:#fff;

    border:1px solid rgba(255,255,255,.18);

}

#sarma-keikat .heroTicket:hover{

    transform:translateY(-2px);

    background:#f4f4f4;

}

#sarma-keikat .heroMap:hover{

    transform:translateY(-2px);

    background:rgba(255,255,255,.22);

}

/* ==========================================================
   VIEW SWITCHER
========================================================== */

#sarma-keikat .viewSwitcher{

    display:flex;

    justify-content:center;

    gap:10px;

    margin:35px 0;

}

#sarma-keikat .viewButton{

    min-width:96px;

    border:none;

    border-radius:999px;

    padding:12px 24px;

    background:#232323;

    color:#d2d2d2;

    font-size:.92rem;

    font-weight:700;

    cursor:pointer;

    transition:.2s;

}

#sarma-keikat .viewButton:hover{

    background:#353535;

    color:#fff;

}

#sarma-keikat .viewButton.active{

    color:#fff;

    background:

        linear-gradient(
            135deg,
            var(--primary-light),
            var(--primary)
        );

    box-shadow:

        0 8px 20px rgba(217,31,47,.35);

}

/* ==========================================================
   OTSIKKO
========================================================== */

#sarma-keikat .section-title{

    margin:0 0 24px;

    color:#fff;

    font-size:2rem;

    font-weight:800;

}

/* ==========================================================
   PRIVATE
========================================================== */

#sarma-keikat .card.private{

    opacity:.88;

}

#sarma-keikat .card.private .place{

    color:#444;

}

#sarma-keikat .card.private .cardButtons{

    display:none;

}

/* ==========================================================
   ANIMAATIOT
========================================================== */

#sarma-keikat .card{

    animation:

        fadeUp .45s ease both;

}

#sarma-keikat .card:nth-child(2){

    animation-delay:.05s;

}

#sarma-keikat .card:nth-child(3){

    animation-delay:.10s;

}

#sarma-keikat .card:nth-child(4){

    animation-delay:.15s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:900px){

    #sarma-keikat .grid{

        grid-template-columns:1fr 1fr;

    }

}

@media (max-width:768px){

    #sarma-keikat .wrap{

        padding:30px 18px;

    }

    #sarma-keikat .page-header{

        min-height:360px;

        border-radius:22px;

    }

    #sarma-keikat .next-card{

        padding:28px;

    }

    #sarma-keikat .next-grid{

        grid-template-columns:1fr;

        text-align:center;

        gap:24px;

    }

    #sarma-keikat .dateBox{

        margin:auto;

    }

    #sarma-keikat .heroButtons{

        justify-content:center;

    }

    #sarma-keikat .grid{

        grid-template-columns:1fr;

    }

    #sarma-keikat .cardLayout{

        grid-template-columns:64px 1fr;

        gap:14px;

    }

    #sarma-keikat .dateMini{

        width:64px;

    }

}
/* ==========================================================
   TYPOGRAPHY
========================================================== */

#sarma-keikat h2,
#sarma-keikat h3{

    margin:0;

    font-weight:800;

}

#sarma-keikat p{

    margin:0;

}

#sarma-keikat a{

    color:inherit;

}

/* ==========================================================
   PRIVATE EVENTS
========================================================== */

#sarma-keikat .card.private{

    opacity:.88;

}

#sarma-keikat .card.private .dateMini{

    background:

        linear-gradient(
            #f4f4f4,
            #ebebeb
        );

}

#sarma-keikat .card.private .place{

    color:#555;

}

#sarma-keikat .card.private .cardButtons{

    display:none;

}

#sarma-keikat .card.private .toggle{

    color:#777;

}

#sarma-keikat .card.private .toggle:hover{

    background:#999;

    color:#fff;

}

/* ==========================================================
   HIDDEN
========================================================== */

#sarma-keikat .hidden{

    display:none;

}

/* ==========================================================
   SCROLLBAR
========================================================== */

#sarma-keikat ::-webkit-scrollbar{

    width:8px;

}

#sarma-keikat ::-webkit-scrollbar-track{

    background:#1a1a1a;

}

#sarma-keikat ::-webkit-scrollbar-thumb{

    background:#555;

    border-radius:20px;

}

#sarma-keikat ::-webkit-scrollbar-thumb:hover{

    background:#777;

}

/* ==========================================================
   IMAGE SAFETY
========================================================== */

#sarma-keikat img{

    display:block;

    max-width:100%;

}

/* ==========================================================
   FOCUS
========================================================== */

#sarma-keikat a:focus-visible,
#sarma-keikat button:focus-visible{

    outline:3px solid rgba(217,31,47,.6);

    outline-offset:3px;

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    #sarma-keikat .wrap{

        padding:24px 18px;

    }

    #sarma-keikat .page-header{

        min-height:340px;

        border-radius:22px;

        margin-bottom:40px;

    }

    #sarma-keikat .heroOverlay{

        padding:30px;

    }

    #sarma-keikat .page-header h2{

        font-size:2rem;

    }

    #sarma-keikat .page-header p{

        font-size:1rem;

    }

    #sarma-keikat .next-card{

        padding:28px 22px;

    }

    #sarma-keikat .next-grid{

        grid-template-columns:1fr;

        text-align:center;

        gap:22px;

    }

    #sarma-keikat .dateBox{

        margin:auto;

    }

    #sarma-keikat .heroButtons{

        justify-content:center;

    }

    #sarma-keikat .grid{

        grid-template-columns:1fr;

    }

    #sarma-keikat .cardLayout{

        grid-template-columns:64px 1fr;

        gap:14px;

    }

    #sarma-keikat .dateMini{

        width:64px;

        padding:8px 4px;

    }

    #sarma-keikat .dateMini .day{

        font-size:1.7rem;

    }

    #sarma-keikat .place{

        font-size:1rem;

    }

}

/* ==========================================================
   DESKTOP LARGE
========================================================== */

@media (min-width:1400px){

    #sarma-keikat .wrap{

        max-width:1280px;

    }

}