/* =========================
   RESPONSIVE – MOBILE FIRST
   (korrastatud: järjekord, dubleeritud blokid eemaldatud)
========================= */

/*@media (min-width: 1201px) {*/
/*    .header-navbar {*/
/*        position: sticky;*/
/*        top: 12px;*/
/*        z-index: 1000;*/
/*        border-radius: 0.3rem;*/

/*        background: #fff;*/
/*        transition: background-color .2s ease, box-shadow .2s ease;*/
/*    }*/

/*    .header-navbar.is-stuck {*/
/*        background: var(--blue);*/
/*        box-shadow: 0 2px 10px rgba(0,0,0,.10);*/
/*    }*/

/*    .header-navbar .main-menu > li > a {*/
/*        color: var(--text-color);*/
/*        padding: .9rem 1rem;*/
/*    }*/

/*    .header-navbar.is-stuck .main-menu > li > a {*/
/*        color: #fff;*/
/*    }*/
/*}*/

@media (min-width: 1201px) {
    .header-navbar {
        --sticky-gap: 12px;

        position: sticky;
        top: var(--sticky-gap);
        z-index: 1000;
        border-radius: 0.3rem;

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

        position: sticky;
    }

    .header-navbar.is-stuck {
        background: var(--blue);
        box-shadow: 0 2px 10px rgba(0,0,0,.10);
    }

    /* Mask: kata ära 12px “õhk” valge taustaga, et sisu ei paistaks läbi */
    .header-navbar.is-stuck::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: calc(-1 * var(--sticky-gap));
        height: var(--sticky-gap);
        background: #fff;
        pointer-events: none;
    }

    .header-navbar .main-menu > li > a {
        /*color: var(--text-color);*/
        padding: .9rem 1rem;
    }

    .header-navbar.is-stuck .main-menu > li > a {
        color: #fff;
    }
}

.page-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "page"
        "sidebar";
    gap: 1.5rem;
}

.page-body {
    display: grid;
    grid-template-columns: 1fr;
}

.page-context {
    order: 2;
    margin-top: 2rem;
}

.list-body {
    display: grid;
    grid-template-columns: 1fr;
}

.list-content {
    padding-left: 2rem;
}

/* =========================
   LANDSCAPE MOBILE
========================= */
@media (max-width: 768px) and (max-height: 480px) {
    .block--featured {
        margin-bottom: 2rem;
    }

    .featured-link {
        display: grid;
        grid-template-columns: 1fr;
        gap: .5rem;
        grid-template-areas:
            "title"
            "date"
            "media"
            "excerpt";
    }

    .featured-content {
        display: contents;
    }

    .featured-title { grid-area: title; }
    .featured-date  { grid-area: date; }
    .featured-media { grid-area: media; }

    .featured-excerpt {
        grid-area: excerpt;
        -webkit-line-clamp: 3;
    }

    .news-card {
        display: grid;
        grid-template-columns: 240px 1fr;
        gap: .75rem;
    }

    .block--old-news-grid {
        gap: .75rem;
    }
}

/* =========================
   SMALL MOBILE (<= 767px)
========================= */
@media (max-width: 767px) {

    .featured-link {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .event-item {
        gap: 1rem;
    }

    .event-date {
        width: 64px;
    }

    .date-day {
        font-size: 24px;
    }

    .list-content {
        padding-left: 0;
    }

    /*.block {
        margin-bottom: 0;
    }*/
}

/* Mobiil: kuupäev üleval, pealkiri all */
@media (max-width: 480px) {

    /*.block {*/
    /*    margin-bottom: 0;*/
    /*}*/

    .archive-list li > a {
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
        padding: .75rem 0;
    }

    .archive-list .col-date {
        flex: none;
        /*font-size: .9rem;*/
        line-height: 1.2;
        opacity: .9;
    }

    .archive-list .col-content {
        line-height: 1.35;
    }

    .archive-list li + li {
        border-top: 1px solid #e5e7eb;
    }
}

/* =========================
   TABLET & UP (>= 768px)
========================= */
@media (min-width: 768px) {
    /* ARTICLE */
    .page-layout {
        grid-template-columns: 1fr 3fr;
        grid-template-areas: "sidebar page";
        align-items: start;

        /*margin-top: 1.8rem;*/
        padding-top: 1.8rem;
        /*border-top: 1px solid var(--header-border-bottom);*/
    }

    .page-body {
        grid-template-columns: minmax(0, 70ch) 1fr;
        gap: 1.5rem;
    }

    .page-context {
        order: initial;
        margin-top: 0;
    }

    /* FRONTPAGE */
    .frontpage-layout {
        display: grid;
        grid-template-columns: 3fr 1.2fr;
        gap: 2rem;
        margin-top: 2rem;
    }

    .block--featured,
    .block--news-grid {
        grid-column: 1;
    }

    .block--sidebar {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

/* =========================
   FRONTPAGE: OLD NEWS GRID veerud
   - <=480px: 1 veerg (baas)
   - 481–1080px: 2 veergu
   - >=1081px: 3 veergu
========================= */
@media (min-width: 481px) and (max-width: 1080px) {
    .block--old-news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1081px) {
    .block--old-news-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* =========================
   ARTICLE: SUURED MOBIILID + TAHVLID (666px–1080px)
   - page-context alla (1 veerg page-body sees)
========================= */
@media (min-width: 666px) and (max-width: 1080px) {
    .page-body {
        grid-template-columns: 1fr;
    }

    .page-context {
        order: 2;
        margin-top: 2rem;
    }
}

/* =========================
   ARTICLE WIDER (>= 1081px)
========================= */
@media (min-width: 1081px) {
    .page-body {
        grid-template-columns: minmax(0, 72ch) 1fr;
    }

    .page-context {
        order: initial;
        margin-top: 0;
    }
}

/* =========================
   DESKTOP GRID (>= 1200px)
========================= */
@media (min-width: 1200px) {
    .block--old-news-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =========================
   FOOTER
========================= */

/* Tablet */
@media (max-width: 900px) {
    .block--footer {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobiil */
@media (max-width: 600px) {
    .block--footer {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
}