/* ========================================
   ZD EVENTS – OSNOVNE NASTAVITVE
======================================== */

.zd-events {
    --zd-navy: #0e0a33;
    --zd-orange: #EF6A3D;
    --zd-yellow: #EF6A3D;

    background: none;
    color: #0e0a33;
    padding: 0;
    font-family: Montserrat;
    border-radius: 0px;
    box-sizing: border-box;
    max-width: 1200px;
    margin: auto;
}

.zd-events * {
    box-sizing: border-box;
}


/* ========================================
   NASLOV IN UVOD
======================================== */

.zd-events .zd-eyebrow {
    color: var(--zd-orange);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .19em;
}

.zd-events h2 {
    color: #fff;
    font-size: clamp(28px, 4.5vw, 55px);
    font-weight: 850;
    letter-spacing: -.04em;
    line-height: 1.1;
    margin: 12px 0 18px;
}

.zd-intro {
    font-size: clamp(15px, 1.8vw, 19px);
    line-height: 1.5;
    margin: 0 0 26px;
    padding-left: 18px;
    border-left: 4px solid var(--zd-orange);
    color: #fff;
}


/* ========================================
   SEZNAM DOGODKOV
======================================== */

.zd-list {
    border-top: 1px solid #EF6A3D;
}

.zd-item {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 155px 76px 136px;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border-bottom: 1px solid #EF6A3D;
    position: relative;
}


/* ========================================
   DATUM
======================================== */

.zd-date {
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
}

.zd-date strong {
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
}

.zd-date span {
    font-size: 12px;
    color: #EF6A3D;
}


/* ========================================
   LOKACIJA IN VRSTA DOGODKA
======================================== */

.zd-place {
    font-weight: 650;
    font-size: 16px;
    line-height: 1.35;
    min-width: 0;
}

.zd-kind {
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .12em;
    color: var(--zd-yellow);
}

.zd-kind-soocenje,
.zd-kind-radijsko {
    color: var(--zd-orange);
}


/* ========================================
   URA DOGODKA
======================================== */

.zd-time {
    color: var(--zd-yellow);
    font-size: 21px;
    font-weight: 800;
    text-align: right;
    /*font-variant-numeric: tabular-nums;*/
}


/* ========================================
   KOLEDAR – GUMB
======================================== */

.zd-calendar {
    position: relative;
    justify-self: end;
    min-width: 0;
}

.zd-calendar summary {
    cursor: pointer;
    list-style: none;
    border: 1px solid #0e0a33;
    border-radius: 7px;
    padding: 9px 11px;
    font-weight: 700;
    font-size: 12px;
    color: #0e0a33;
    white-space: nowrap;
    display: flex;
    gap: 6px;
    align-items: center;
    transition: background .15s ease;
}

.zd-calendar summary::-webkit-details-marker {
    display: none;
}

.zd-calendar summary:hover,
.zd-calendar[open] summary {
    background: #ffffff18;
}

.zd-calendar summary:focus-visible,
.zd-calendar-menu a:focus-visible {
    outline: 2px solid var(--zd-yellow);
    outline-offset: 3px;
}

.zd-calendar-icon {
    font-size: 17px;
}


/* ========================================
   KOLEDAR – SPUSTNI MENI
======================================== */

.zd-calendar-menu {
    position: absolute;
    z-index: 10;
    top: calc(100% + 6px);
    right: 0;
    min-width: 190px;
    background: #fff;
    color: var(--zd-navy);
    padding: 6px;
    border-radius: 8px;
    box-shadow: 0 12px 28px #0006;
}

.zd-calendar-menu a {
    display: block;
    text-decoration: none !important;
    color: var(--zd-navy) !important;
    padding: 10px 12px;
    border-radius: 5px;
    font-weight: 650;
    font-size: 13px;
}

.zd-calendar-menu a:hover {
    background: #f4f1ed;
}


/* ========================================
   PRETEKLI DOGODKI
======================================== */

.zd-past {
    opacity: .72;
}


/* ========================================
   SPODNJI DEL
======================================== */

.zd-bottom {
    padding-top: 25px;
}

.zd-bottom p {
    margin: 0 0 25px;
    padding-left: 16px;
    border-left: 3px solid var(--zd-yellow);
    line-height: 1.55;
}

.zd-bottom p strong {
    color: var(--zd-yellow);
}

.zd-bottom-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.zd-bottom-footer span {
    display: inline-block;
    padding: 12px 22px;
    background: linear-gradient(
        100deg,
        var(--zd-yellow),
        var(--zd-orange)
    );
    color: var(--zd-navy);
    border-radius: 30px;
    font-weight: 850;
}

.zd-bottom-footer a {
    color: var(--zd-yellow) !important;
    font-weight: 800;
    text-decoration: none !important;
}


/* ========================================
   TABLET – DO 900px
======================================== */

@media (max-width: 900px) {

    .zd-item {
        grid-template-columns: 100px minmax(0, 1fr) 110px 65px;
        gap: 10px;
    }

    .zd-calendar {
        grid-column: 2 / -1;
        justify-self: start;
    }

    .zd-calendar-menu {
        left: 0;
        right: auto;
    }

    .zd-place {
        font-size: 16px;
    }

    .zd-kind {
        font-size: 10px;
    }

    .zd-time {
        font-size: 19px;
    }

}


/* ========================================
   MOBILE – DO 600px
======================================== */

@media (max-width: 600px) {

    /* Osnovni okvir */

    .zd-events {
        padding: 0;
        border-radius: 0px;
    }

    .zd-events h2 {
        font-size: 34px;
    }

    /* Postavitev dogodka */

    .zd-item {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 14px;
        row-gap: 7px;
        padding: 18px 0;
    }

    /* Datum */

    .zd-date {
        grid-column: 1;
        grid-row: 1;
    }

    .zd-date strong {
        font-size: 21px;
    }

    /* Lokacija */

    .zd-place {
        grid-column: 1 / -1;
        grid-row: 2;
        font-size: 17px;
    }

    /* Vrsta dogodka */

    .zd-kind {
        grid-column: 1;
        grid-row: 3;
    }

    /* Ura */

    .zd-time {
        grid-column: 2;
        grid-row: 1;
        font-size: 22px;
    }

    /* Koledar */

    .zd-calendar {
        grid-column: 1 / -1;
        grid-row: 4;
        margin-top: 4px;
        justify-self: start;
    }

    .zd-calendar summary {
        padding: 7px 11px;
    }

    /* Spodnji del */

    .zd-bottom-footer span {
        font-size: 14px;
    }

    .zd-bottom-footer a {
        font-size: 15px;
    }

}


/* ========================================
   1.0.3 – MOBILNE KARTICE (<=600px)
   Desktop in tablet ostaneta v izvirni postavitvi.
======================================== */
@media screen and (min-width: 601px) {
    .zd-actions { display: contents; }
}
@media screen and (max-width: 600px) {
    .zd-list { border-top: 0; display: grid; gap: 12px; }
    .zd-item {
        display: grid;
        grid-template-columns: 78px minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        column-gap: 0; row-gap: 0; padding: 0;
        border: 1px solid #e6e4e9; border-radius: 10px;
        background: #fff; align-items: stretch; min-width: 0;
    }
    .zd-date {
        grid-column: 1; grid-row: 1 / 4;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        align-self: stretch; gap: 3px; margin: 0; padding: 12px 5px;
        background: var(--zd-navy); border-radius: 9px 0 0 9px;
        color: #fff; text-align: center; white-space: normal;
    }
    .zd-date strong { font-size: 31px; line-height: 1; color: #fff; }
    .zd-date span { color: var(--zd-orange); font-size: 12px; font-weight: 800; }
    .zd-kind { grid-column: 2; grid-row: 1; padding: 13px 13px 0; font-size: 10px; }
    .zd-place { grid-column: 2; grid-row: 2; padding: 5px 13px 12px; font-size: 16px; line-height: 1.4; }
    .zd-actions {
        grid-column: 2; grid-row: 3; display: flex; align-items: center;
        justify-content: space-between; flex-wrap: wrap; gap: 8px;
        margin: 0 13px; padding: 10px 0 13px; border-top: 1px solid #eceaf0;
        min-width: 0;
    }
    .zd-time { grid-column: auto; grid-row: auto; text-align: left; font-size: 20px; color: var(--zd-navy); }
    .zd-calendar { grid-column: auto; grid-row: auto; justify-self: auto; margin: 0; }
    .zd-calendar summary { padding: 7px 9px; font-size: 11px; }
    .zd-calendar-menu { left: auto; right: 0; min-width: 180px; }
}
@media screen and (max-width: 360px) {
    .zd-item { grid-template-columns: 67px minmax(0, 1fr); }
    .zd-date strong { font-size: 27px; }
    .zd-kind { padding: 11px 10px 0; }
    .zd-place { padding: 5px 10px 10px; }
    .zd-actions { margin: 0 10px; }
}

/* 1.0.4: mobilni datum in dan v tednu. Desktop/tablet brez sprememb. */
.zd-date-mobile, .zd-date-month-mobile, .zd-weekday-mobile { display: none; }
@media screen and (max-width: 600px) {
    .zd-date .zd-date-desktop, .zd-date .zd-date-weekday-desktop { display: none; }
    .zd-date .zd-date-mobile { display: block; font-size: 31px; line-height: 1; color: #fff; }
    .zd-date .zd-date-month-mobile { display: block; color: var(--zd-orange); font-size: 12px; font-weight: 800; }
    .zd-item { position: relative; }
    .zd-kind { padding-right: 105px; }
    .zd-weekday-mobile { display: block; position: absolute; top: 13px; right: 13px; color: #8a8a94; font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; text-align: right; }
}
@media screen and (max-width: 360px) {
    .zd-date .zd-date-mobile { font-size: 27px; }
    .zd-kind { padding-right: 91px; }
    .zd-weekday-mobile { top: 11px; right: 10px; font-size: 9px; }
}

/* ========================================
   1.0.5 – PRETEKLI DOGODKI
   Ločena sekcija, brez koledarskega gumba.
======================================== */
.zd-past-section { margin-top: 38px; margin-bottom: 14px; }
.zd-past-heading {
    display: flex; align-items: center; gap: 16px;
    margin: 0 0 6px; padding: 0; color: #666970;
    font-family: inherit; font-size: 20px; font-weight: 800;
    line-height: 1.3; letter-spacing: .035em;
}
.zd-past-heading::after { content: ""; flex: 1; height: 1px; background: #d6d6d6; }
.zd-past-description { margin: 0; color: #85858b; font-size: 13px; }
.zd-list-past { border-top-color: #d6d6d6; }
.zd-list-past .zd-item {
    opacity: 1; background: #f7f7f7; border-bottom-color: #d6d6d6;
    color: #77777d;
}
.zd-list-past .zd-date,
.zd-list-past .zd-date strong,
.zd-list-past .zd-date span,
.zd-list-past .zd-place,
.zd-list-past .zd-kind,
.zd-list-past .zd-time,
.zd-list-past .zd-weekday-mobile { color: #88888e; }
@media screen and (max-width: 600px) {
    .zd-past-section { margin-top: 32px; }
    .zd-list-past .zd-item { background: #f5f5f5; border-color: #ddd; }
    .zd-list-past .zd-date { background: #d4d4d6; }
    .zd-list-past .zd-date .zd-date-mobile { color: #6b6b73; }
    .zd-list-past .zd-date .zd-date-month-mobile { color: #898990; }
    .zd-list-past .zd-actions { border-top-color: #ddd; }
}