/* ==========================================================================
   Tricolor — phone layer
   Loaded after every other stylesheet (template, theme, page styles).
   Below 768px: one gutter, no boxes inside boxes, tighter section rhythm,
   text that scales with the screen. Desktop is untouched except for the
   fluid headline sizes, which only get smaller on narrow screens.
   ========================================================================== */

:root {
    --m-gutter: 14px;
    --m-gap: 12px;
    --m-section: 22px;
    --m-line: #eceef2;
    --m-muted: #6b7280;
}

/* Headlines follow the screen width everywhere (same maximums as before). */
.article-title { font-size: clamp(1.45rem, 1.05rem + 2vw, 2.5rem); }
.category-header .category-title { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.5rem); }

@media (max-width: 767.98px) {

    /* ---------- Page frame ---------------------------------------------- */
    body { font-size: 16px; }
    .container, .container-sm, .container-md { padding-left: var(--m-gutter); padding-right: var(--m-gutter); }
    .row { --bs-gutter-x: 16px; }
    .row.gutter-24, .row.gutter-40 { margin-left: -8px; margin-right: -8px; }
    .row.gutter-24 > *, .row.gutter-40 > * { padding-left: 8px; padding-right: 8px; }
    /* The template pads every grid column 12px above and below as well. */
    .row[class*="gutter-"] > * { padding-top: 4px; padding-bottom: 4px; }

    /* Section rhythm: half of the desktop spacing. */
    section.py-5, .py-5 { padding-top: var(--m-section) !important; padding-bottom: var(--m-section) !important; }
    section.py-4, .py-4 { padding-top: 16px !important; padding-bottom: 16px !important; }
    .my-5 { margin-top: var(--m-section) !important; margin-bottom: var(--m-section) !important; }
    .my-4 { margin-top: 14px !important; margin-bottom: 14px !important; }
    .mb-5 { margin-bottom: var(--m-section) !important; }
    .mt-5 { margin-top: var(--m-section) !important; }
    .mb-4 { margin-bottom: 14px !important; }

    /* Section headings: one size for every block title. */
    h2.h3, .section-title, .related-articles .section-title, .most-viewed-section h2 {
        font-size: 1.15rem !important;
        line-height: 1.3;
        letter-spacing: 0;
    }
    .section-title i, h2.h3 i { font-size: .95em; }

    /* ---------- No boxes inside boxes ------------------------------------ */
    /* The article/listing sheet becomes a full-width white page. */
    .rt-main-post-area { padding-top: 0 !important; }
    /* The template pads the first column 20px; with the sheet's own padding
       the breadcrumb sat 40px under the top bar. */
    .rt-main-post-area .row.gutter-40 > [class*="col-"] { padding-top: 0 !important; }
    /* The flash-message container above every page is empty unless a message
       is showing, yet keeps a 24px top margin: drop it while empty. */
    main > .container.mt-4:first-child:not(:has(*)) { margin-top: 0 !important; }
    /* Then the same ~10-16px under the bar, whatever wraps the breadcrumb. */
    .page-header { padding-top: 10px !important; }
    .container.my-5:has(.breadcrumb) { margin-top: 10px !important; }
    .rt-main-post-area > .container.my-5:first-child { margin-top: 10px !important; }
    /* The template pulls these rows up 20px; with the empty margin gone that
       would slide the content under the top bar. */
    .rt-main-post-area > .container > .row.gutter-40 { margin-top: 0 !important; }
    /* Content pages (policies etc.) sit in a white card: make it the page itself. */
    .container.my-5 > .row > [class*="col-"] > .bg-white.rounded.shadow-sm.p-4:first-child {
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 10px var(--m-gutter) 10px !important;
        margin-left: calc(-1 * var(--m-gutter)) !important;
        margin-right: calc(-1 * var(--m-gutter)) !important;
    }
    .container.my-5:has(> .row > [class*="col-"] > .bg-white.rounded.shadow-sm.p-4:first-child .breadcrumb) { margin-top: 0 !important; }
    main > .banner.inner-banner { padding-top: 10px !important; }
    .rt-main-post-area .row.gutter-40 > .col-12:has(.breadcrumb) { padding-top: 10px !important; }
    /* On listing pages the breadcrumb is a row item of its own, padded 20px. */
    .rt-main-post-area .row.gutter-40 > .breadcrumb-area { padding-top: 10px !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
    .rt-left-sidebar-sapcer-5,
    .rt-left-sidebar-sapcer-5.bg-white {
        background: #fff !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        border: 0 !important;
        padding: 10px var(--m-gutter) 4px !important;
        margin: 0 calc(-1 * var(--m-gutter)) 0 !important;
    }

    /* Sidebar widgets: plain blocks separated by a hairline. */
    .rt-sidebar, .col-lg-3 > .sidebar-widget:first-child { margin-top: 0; }
    .sidebar-widget {
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        border-top: 1px solid var(--m-line) !important;
        border-radius: 0 !important;
        padding: 16px 0 6px !important;
        margin-bottom: 0 !important;
    }
    .sidebar-widget .widget-title { font-size: .95rem; padding-bottom: 8px; margin-bottom: 12px; }

    /* The footer and the homepage already offer the newsletter: no second copy in the sidebar. */
    .sidebar-widget.newsletter-widget,
    .sidebar-widget:has(.newsletter-widget) { display: none !important; }

    /* Categories: a 4-column grid of small photo tiles (all visible at once). */
    .category-cards {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        flex-direction: unset !important;
        gap: 6px !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 0 6px !important;
    }
    .category-card {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        height: 46px !important;
        min-height: 0 !important;
        padding: 4px !important;
        border-radius: 8px !important;
        text-align: center;
        overflow: hidden;
    }
    .category-card .category-title {
        position: static !important;
        transform: none !important;
        max-width: 100%;
        font-size: .6rem !important;
        line-height: 1.15;
        letter-spacing: .01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        z-index: 1;
    }
    .category-card .article-count {
        position: static !important;
        width: auto !important;
        min-width: 0;
        height: auto !important;
        line-height: 1.2 !important;
        padding: 0 5px;
        font-size: .58rem !important;
        border-radius: 999px;
        z-index: 1;
    }

    /* Most read in the sidebar: tight rows. */
    .popular-article-item { margin-bottom: 10px !important; }
    .popular-article-img, .popular-article-img img { width: 72px !important; height: 56px !important; }
    .popular-article-content h5 { font-size: .9rem; line-height: 1.3; margin-bottom: 2px; }

    /* Every page title (events, pages, gallery, forms) scales with the screen. */
    h1, .h1 { font-size: clamp(1.4rem, 1rem + 2.4vw, 1.8rem) !important; line-height: 1.22 !important; }
    h1 i, .h1 i { font-size: .9em; }

    /* Any breadcrumb, not only the template's: one line, the last item shortened. */
    .breadcrumb { flex-wrap: nowrap !important; white-space: nowrap; overflow: hidden; font-size: .8rem; margin-bottom: 8px; }
    .breadcrumb .breadcrumb-item.active { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

    /* ---------- Breadcrumb: a quiet single line ------------------------- */
    .breadcrumb-area { margin-bottom: 8px !important; }
    .breadcrumb-area .banner, .breadcrumb-area .inner-banner, .inner-banner {
        padding: 0 !important;
        margin: 0 !important;
        background: none !important;
        min-height: 0 !important;
    }
    .breadcrumb-area .container { padding: 0 !important; }
    .rt-breadcrumb-wrap .breadcrumb {
        background: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
        font-size: .8rem;
    }
    .rt-breadcrumb-wrap .breadcrumb .breadcrumb-item { font-size: .8rem; }
    .rt-breadcrumb-wrap .breadcrumb .breadcrumb-item.active { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .rt-breadcrumb-wrap .breadcrumb .breadcrumb-item + .breadcrumb-item { padding-left: 6px; }
    .rt-breadcrumb-wrap .breadcrumb .breadcrumb-item + .breadcrumb-item::before { padding-right: 6px; }

    /* ---------- Article page --------------------------------------------- */
    .article-title {
        font-size: clamp(1.2rem, 1rem + 1.2vw, 1.4rem) !important; /* ~20.5px on a 375px phone */
        margin: 2px 0 8px !important;
        letter-spacing: -0.01em;
        line-height: 1.25;
    }

    /* Line 1: author · date · views, as quiet text.
       Line 2: every label (exclusive, important, category) in one row. */
    .article-meta-badges {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start !important;
        gap: 6px 10px !important;
        margin-bottom: 14px !important;
    }
    .article-meta-badges > div:first-child { display: contents !important; }
    .article-meta-badges::before { content: ""; flex-basis: 100%; height: 0; order: 2; }
    .article-meta-badges .badge {
        font-size: .78rem;
        font-weight: 500;
        line-height: 1.4;
        white-space: nowrap;
    }
    .article-meta-badges .badge.bg-secondary {
        order: 1;
        background: none !important;
        color: var(--m-muted) !important;
        padding: 0;
    }
    .article-meta-badges .badge:not(.bg-secondary),
    .article-meta-badges .category-badge { order: 3; }
    .article-meta-badges .badge:not(.bg-secondary) { font-size: .68rem; font-weight: 600; padding: 4px 8px; border-radius: 4px; }
    .article-meta-badges .badge i { margin-right: 3px; }
    .article-meta-badges .category-badge { margin: 0 !important; display: inline-flex; align-items: center; line-height: 1; }
    .article-meta-badges .category-badge .rt-cat { margin: 0 !important; }
    .article-meta-badges .category-badge .rt-cat { font-size: .66rem; padding: 4px 8px; line-height: 1.4; white-space: nowrap; }

    /* Media runs edge to edge. */
    .article-featured-image, .article-featured-video, .rt-left-sidebar-sapcer-5 .ad-banner-zone-7 {
        margin-left: calc(-1 * var(--m-gutter)) !important;
        margin-right: calc(-1 * var(--m-gutter)) !important;
        margin-bottom: 16px !important;
    }
    .article-featured-image img, .article-featured-video, .article-featured-video .video-responsive { border-radius: 0 !important; }
    .article-image-credit { padding: 4px var(--m-gutter) 0; font-size: .72rem; }

    /* ~16px on a 375px phone (15.5 on the smallest, 16.3 on large phones): about 42 characters a line. */
    .article-content { font-size: clamp(15.5px, 14px + .5vw, 16.5px); line-height: 1.6; margin-bottom: 18px !important; }
    .article-content p { margin-bottom: 1em; }
    .article-content h2 { font-size: 1.25rem; line-height: 1.3; margin: 1.2em 0 .5em; }
    .article-content h3 { font-size: 1.12rem; line-height: 1.35; margin: 1.1em 0 .45em; }
    .article-content h4 { font-size: 1.05rem; }
    .article-content img { margin: 12px 0; border-radius: 6px; }
    .article-content blockquote { margin: 14px 0; padding: 4px 0 4px 12px; font-size: 1em; }
    .article-content ul, .article-content ol { padding-left: 1.3em; }

    /* Tags and share: open rows, no grey panels. */
    .article-tags, .article-share {
        background: none !important;
        padding: 12px 0 !important;
        border-radius: 0 !important;
        border-top: 1px solid var(--m-line);
        margin-bottom: 0 !important;
    }
    .article-tags h4, .article-share h4 {
        font-size: .8rem !important;
        line-height: 1.2;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--m-muted);
        margin: 0 0 8px !important;
    }
    .tags-list { margin-top: 0 !important; display: flex; flex-wrap: wrap; gap: 6px; }
    .tag-item { margin: 0 !important; padding: 4px 10px !important; font-size: .8rem; line-height: 1.3; }

    .article-share { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .article-share h4 { margin: 0 !important; flex: 1 1 auto; min-width: 0; }
    .share-buttons { flex: 0 0 auto; flex-wrap: nowrap !important; gap: 8px !important; margin-top: 0 !important; }
    .share-btn {
        flex: 0 0 40px !important;
        width: 40px;
        height: 40px;
        padding: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        font-size: 17px;
    }
    .share-btn .share-label { display: none; }
    .share-btn i { margin: 0 !important; }

    /* Gallery inside an article. */
    .article-gallery { margin-bottom: 18px !important; }

    /* Related articles: compact rows. */
    .related-articles { border-top: 1px solid var(--m-line); padding-top: 14px; }
    .related-articles .section-title { margin-bottom: 12px !important; }
    .related-articles .row > [class*="col-"] { margin-bottom: 12px !important; }
    .related-articles .post-sm .post-img,
    .related-articles .post-sm .post-img img { width: 96px !important; min-width: 96px; height: 72px !important; border-radius: 8px !important; }
    .related-articles .post-sm .post-img { flex: 0 0 96px !important; margin-right: 12px !important; }
    .related-articles .post-title { font-size: .95rem !important; line-height: 1.3; }

    /* ---------- Listing cards (category, tag, search) -------------------- */
    .article-card {
        height: auto !important;
        flex-direction: row !important;
        align-items: flex-start;
        border: 0 !important;
        border-bottom: 1px solid var(--m-line) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 12px 0;
        background: transparent;
    }
    .article-card-img {
        width: 116px;
        min-width: 116px;
        height: 86px !important;
        border-radius: 6px;
    }
    .article-card .rt-cat-img-overlay, .article-card .post-badge { display: none; }
    .article-card .card-body { padding: 0 0 0 12px !important; }
    .article-card-title { font-size: .98rem !important; line-height: 1.3; -webkit-line-clamp: 3; margin-bottom: 4px !important; }
    .article-card-excerpt { display: none !important; }
    .article-card .post-meta { font-size: .75rem; }

    /* Category header: plain, no grey panel. */
    .category-header {
        margin-bottom: 4px !important;
        padding: 0 !important;
        background: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .category-header .category-image { margin-right: 12px !important; }
    .category-header .category-image img { width: 56px !important; height: 56px !important; }
    .category-header .category-description { font-size: .9rem; margin-bottom: 4px; }
    .category-header .category-count { font-size: .8rem; }
    .pagination-area { margin-top: 16px !important; }
    /* Long result lists had 12 page buttons in a row, wider than the screen. */
    .pagination { flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 100%; }
    .pagination .page-link { padding: 6px 10px; font-size: .85rem; }

    /* ---------- Homepage ------------------------------------------------- */
    /* Latest articles: thumbnail rows instead of 220px-wide images. */
    .rt-post.post-lg.style-2 { align-items: flex-start; }
    .rt-post.post-lg.style-2 .post-img img { width: 116px !important; height: 86px !important; }
    .rt-post.post-lg.style-2 .post-img { margin-right: 12px !important; }
    .rt-post.post-lg.style-2 .post-title { font-size: .98rem !important; line-height: 1.3 !important; margin-bottom: 4px !important; }
    .rt-post.post-lg.style-2 .rt-cat { font-size: .62rem; padding: 2px 6px; margin-bottom: 4px; }
    .rt-post.post-lg.style-2 .post-meta .rt-meta { font-size: .72rem; }
    .row.gutter-24 > .col-lg-6.mb-4 { margin-bottom: 12px !important; }

    /* Homepage lists: flat rows with a hairline, like the category pages. */
    .rt-post.post-lg.style-2,
    .trending-posts-row .rt-post.post-sm {
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        border-bottom: 1px solid var(--m-line) !important;
        border-radius: 0 !important;
        padding: 10px 0 !important;
    }
    .row.gutter-24 > .col-lg-6.mb-4:has(> .rt-post.post-lg.style-2),
    .trending-posts-row > [class*="col-"] { padding-top: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
    .trending-posts-row .post-sm .post-img { background: none !important; padding: 0 !important; }
    .rt-feature-section { background-image: none !important; background-color: #fff; }

    /* Trending row at the top: tighter cards. */
    .trending-posts-row .post-sm .post-img { flex-basis: 84px !important; }
    .trending-posts-row .post-sm .post-img img { width: 84px !important; height: 84px !important; object-fit: cover; }
    .rt-feature-section .post-title.h6 { font-size: .95rem; line-height: 1.3; }

    /* Big story cards with text over the photo. */
    .rt-post-overlay .post-title.h3, .rt-post-overlay h2.post-title { font-size: 1.25rem !important; line-height: 1.25; margin-bottom: 8px !important; }
    .rt-post-overlay .post-overlay-content { padding: 14px !important; }

    /* Video slider: the headline was a fixed 44px. */
    .video-articles-section h2 { font-size: clamp(1.3rem, 6vw, 1.75rem) !important; margin-bottom: .75rem !important; }

    /* Most read: each slide's four stories as a 2 × 2 grid. */
    .most-viewed-section .row.g-3 { --bs-gutter-x: 10px; --bs-gutter-y: 10px; }
    .most-viewed-section .row.g-3 > .col-md-3 { flex: 0 0 50%; max-width: 50%; }
    .most-viewed-section .card img { height: 104px !important; }
    .most-viewed-section .card .rt-cat { display: none; }
    .most-viewed-section .card-title {
        font-size: .8rem !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .most-viewed-section .card small { font-size: .7rem; }

    /* Newsletter band. */
    .newsletter-section h2 { font-size: 1.3rem !important; }
    .newsletter-section p { font-size: .92rem; }

    /* Listing rows sit flush (declared after the homepage rules on purpose:
       same specificity, so the later one wins). */
    .row > [class*="col-"]:has(> .article-card.shadow-sm) {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* ---------- Simple pages (events, about, contact, pages) ------------- */
    .page-header { padding-top: 18px !important; padding-bottom: 12px !important; margin-bottom: 8px !important; }
    .page-header p, .page-header .lead { font-size: .92rem; margin-bottom: 0; }
    .card { border-radius: 10px; }
    .card-body { padding: 14px; }
    .shadow-sm.p-4, .p-4.shadow-sm { padding: 16px !important; }
    .p-5 { padding: 20px !important; }

    /* Gallery: two albums per row, short captions. */
    .row > [class*="col-"]:has(> .media-folder-card) {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 12px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .media-folder-card .card-body { padding: 8px 2px 4px !important; }
    .media-folder-card .card-title {
        font-size: .85rem !important;
        line-height: 1.3;
        margin-bottom: 4px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .media-folder-card .card-body > .d-flex { font-size: .7rem; flex-wrap: wrap; gap: 0 8px; }
    .media-folder-card .card-text { display: none; }
    .media-folder-card { box-shadow: none !important; background: transparent; }
    .media-folder-card .ratio { border-radius: 8px; }

    /* About page: the template's tall photo collage and 80px bands. */
    .section-padding-2 { padding-top: 28px !important; padding-bottom: 28px !important; }
    .about-img-gallery-style-1 { min-height: 0 !important; margin: 0 0 14px !important; }
    .about-img-gallery-style-1 .about-img-gallery-list li { position: static !important; max-width: none !important; }
    .about-img-gallery-style-1 .about-img-gallery-list li:not(:first-child) { display: none; }
    .about-img-gallery-style-1 .about-img-gallery-list img { width: 100%; height: 220px; object-fit: cover; border-radius: 10px; }
    .rt-section-heading-style-2 .heading-tilte { font-size: 1.35rem !important; line-height: 1.25; }

    /* Registration forms: the five step markers stay on one row. */
    .form-hero, .alumni-hero, .community-hero, .contact-hero { padding-top: 22px !important; padding-bottom: 10px !important; }
    .progress-steps { flex-wrap: nowrap !important; justify-content: space-between !important; gap: 0 !important; }
    .step-icon { width: 38px !important; height: 38px !important; font-size: .85rem !important; margin-bottom: 0 !important; }
    .progress-step.active .step-icon { transform: none !important; }
    .form-section { padding: 16px !important; }

    /* Contact page intro. */
    .lead { font-size: 1rem; }

    /* ---------- Footer: shorter -------------------------------------------- */
    /* Tricolor logo and the embassy badge side by side, text and social below. */
    .footer-top [class*="col-"]:first-child > .footer-widget {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px 16px;
        text-align: center;
    }
    .footer-top [class*="col-"]:first-child .footer-logo { order: 1; flex: 0 1 46%; margin: 0 !important; }
    .footer-top [class*="col-"]:first-child .footer-supported { order: 2; flex: 0 1 46%; margin: 0 !important; }
    .footer-top [class*="col-"]:first-child .footer-logo img,
    .footer-top [class*="col-"]:first-child .footer-supported img { width: 100%; max-width: 170px !important; height: auto; margin: 0 !important; }
    .footer-top [class*="col-"]:first-child .footer-about-text { order: 3; flex: 1 1 100%; margin: 0 !important; font-size: .85rem; }
    /* The last column shows only "Na ndiqni" on phones; its links are hidden. */
    .footer-top [class*="col-"]:first-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }
    .footer-top .footer-last { margin-bottom: 0 !important; padding-top: 4px !important; }
    .footer-top .footer-last .footer-social-wrapper { margin-top: 0 !important; }
    .footer-top .footer-last .footer-social-col { flex: 0 0 100%; max-width: 100%; }
    .footer-social-wrapper .social-title::after { left: 50% !important; transform: translateX(-50%); }
    .footer-social-wrapper { text-align: center; }
    .footer-social-wrapper .footer-social { justify-content: center; }
    .footer-top { padding-top: 26px !important; padding-bottom: 10px !important; }
    .footer-widget-title { margin-bottom: 10px !important; font-size: .95rem; }
    .footer .footer-widget, .footer [class*="col-"] { margin-bottom: 12px; }
}

/* Very small phones (SE, older Androids). */
@media (max-width: 374.98px) {
    :root { --m-gutter: 12px; }
    .article-card-img, .rt-post.post-lg.style-2 .post-img img { width: 96px !important; min-width: 96px; height: 74px !important; }
    .share-btn { flex-basis: 36px !important; width: 36px; height: 36px; font-size: 15px; }
    /* Header: menu + logo + both flags must fit in 296px. */
    .site-branding img { max-width: 130px !important; height: auto; }
    .language-switcher { gap: 2px !important; }
    .language-switcher .lang-flag { padding: 1px !important; }
}