/* ============================================================
   ONLine24 — rregullat responsive
   Ngarkohet PAS site.css, prandaj këto rregulla e mbivendosin atë
   kur specifika është e njëjtë.

   Pikat e thyerjes që mbulohen (sipas QA-së së projektit):
   320, 360, 375, 390, 414, 480, 576, 768, 820, 992, 1024, 1200, 1440, 1920
   ============================================================ */

/* ------------------------------------------------ Mbrojtje nga overflow-i
   Asnjë faqe nuk guxon të rrëshqasë horizontalisht. Elementet e gjera
   (tabela, kod, galeri) duhet të rrëshqasin brenda kontejnerit të vet. */
.table-responsive,
.o24-gallery__thumbs,
pre {
    max-width: 100%;
    overflow-x: auto;
}

table {
    max-width: 100%;
}

/* URL-të e gjata në përmbajtjen e lajmit nuk e zgjerojnë faqen */
.o24-article-content a,
.o24-article-content p {
    overflow-wrap: anywhere;
}

/* Kujdes: object-fit-i caktohet qëllimisht për çdo element te site.css
   (galeria kryesore përdor «contain» që fotoja të mos pritet), prandaj këtu
   nuk vendoset asnjë rregull i përgjithshëm që do ta mbivendoste atë. */

/* ------------------------------------------------ Prekja (touch)
   Objektivat e prekjes së paku 44x44 px sipas rekomandimeve të WCAG. */
@media (hover: none) and (pointer: coarse) {
    /* inline-flex (jo flex): «flex» e bën butonin element bllok dhe do të
       shtrihej në tërë gjerësinë, duke prishur rreshtat e butonave. */
    .btn,
    .o24-toggler {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Këtu ndryshohet vetëm lartësia — .nav-link dhe .dropdown-item janë
       elemente bllok dhe duhet ta ruajnë gjerësinë e plotë të klikueshme. */
    .nav-link,
    .dropdown-item,
    .page-link,
    .o24-accordion-toggle {
        min-height: 44px;
    }

    .dropdown-item,
    .nav-link {
        padding-top: .6rem;
        padding-bottom: .6rem;
    }

    /* Linqet e ikonave (rrjetet sociale) të ndara mjaftueshëm nga njëra-tjetra */
    .o24-footer__social a {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Hover-i nuk ekziston në prekje — nënmenutë hapen me klikim */
    .navbar-nav .dropdown:hover > .dropdown-menu {
        display: none;
    }
}

/* ------------------------------------------------ ≤ 1199.98px (tablet i madh) */
@media (max-width: 1199.98px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ------------------------------------------------ ≤ 991.98px (tablet)
   Nën këtë gjerësi menuja kalon te hamburger-i (shih site.css). */
@media (max-width: 991.98px) {
    /* Konkurset e punës: 2 karta në tablet */
    .o24-filters .row > [class*="col-"] {
        margin-bottom: .5rem;
    }

    .o24-featured h1,
    .o24-featured .h1 {
        font-size: clamp(1.35rem, 4vw, 2rem);
    }
}

/* ------------------------------------------------ ≤ 767.98px (mobile i gjerë) */
@media (max-width: 767.98px) {
    /* Format bëhen njëkolonëshe dhe inputet marrin gjerësinë e plotë */
    .o24-filters .form-control,
    .o24-filters .form-select,
    .o24-filter-actions .btn {
        width: 100%;
    }

    .o24-filter-actions {
        display: grid;
        gap: .5rem;
    }

    /* Butonat e veprimeve nuk dalin jashtë ekranit */
    .d-flex.gap-2 > .btn {
        flex: 1 1 auto;
    }

    .o24-specs {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------ ≤ 575.98px (telefon) */
@media (max-width: 575.98px) {
    /* Galeria: fotoja kryesore më e ulët që të duket edhe përmbajtja poshtë saj */
    .o24-gallery__main {
        aspect-ratio: 4 / 3;
    }

    .o24-gallery__thumbs {
        gap: .35rem;
    }

    /* Paginacioni nuk del jashtë ekranit në telefona të vegjël */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: .25rem;
    }

    .pagination .page-item {
        margin: 0;
    }

    /* Titujt e seksioneve dhe butoni «shiko të gjitha» në dy rreshta */
    .o24-section-title {
        flex-wrap: wrap;
        gap: .5rem;
    }
}

/* ------------------------------------------------ ≤ 400px (320–390px)
   Ekranet më të vogla: pak padding dhe tipografi më kompakte. */
@media (max-width: 400px) {
    .container {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .o24-card .card-body,
    .o24-news-card .card-body {
        padding: .75rem;
    }

    .btn {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    /* Tabelat e panelit nuk e thyejnë faqen — rrëshqasin brenda vetes */
    .table-responsive > .table {
        min-width: 520px;
    }
}

/* ------------------------------------------------ ≥ 1400px (1440 dhe 1920)
   Në ekranet e mëdha përmbajtja nuk shtrihet pafund. */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* ------------------------------------------------ Printimi */
@media print {
    .o24-navbar,
    .o24-mobile-nav,
    .o24-footer,
    .o24-ad,
    .o24-ad-slider,
    .o24-toggler,
    .o24-skip-link,
    .pagination {
        display: none !important;
    }

    body {
        background: #fff;
    }
}

/* ------------------------------------------------ Lëvizja e reduktuar */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}