/* Explain: Global styles for mobile and tablet responsiveness. */
/* ==========================================================================
   iTSmedia — Globalna mobilna optimizacija
   Učitano u global/head.html, primjenjuje se na sve stranice portala.
   Cilj: uredni razmaci, čitljivost i besprijekorno skaliranje na mobitelu
   i tabletu. Pravila ne diraju desktop prikaz (unutar mobilnih upita).
   ========================================================================== */

/* ---- 1. Osnovna postavka za mobilne preglednike ---- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ---- 2. Bez vodoravnog prelijevanja na bilo kojoj stranici ---- */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ---- 3. Mediji se uvijek uklope u okvir ----
   Pravila idu u @layer base kako bi Tailwind utility klase (h-*, w-*, object-*)
   zadržale prednost. Bez sloja bi ova općenita postavka prebrisala eksplicitnu
   visinu logotipa i drugih elemenata, što je na mobilnom prikazu moglo "izbrisati" logo. */
@layer base {
    img, picture, video, svg, canvas, iframe, embed, object {
        max-width: 100%;
    }
    img, video {
        height: auto;
    }
}

/* ---- 4. Uklanjanje odgode dodira i slučajnog dvostrukog zooma ---- */
a, button, [role="button"], input, select, textarea, label, summary {
    touch-action: manipulation;
}

/* ---- 5. Tablice s puno stupaca (cjenik, usporedbe, rasporedi) ----
   Klize vodoravno umjesto da se sadržaj reže ili neuredno lomi u stupce. */
.table-scroll,
.table-responsive {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {

    /* ---- 6. iOS/Android automatski zoomiraju polja s fontom manjim od 16px.
       Podižemo na 16px kako se stranica ne bi "skakala" pri dodiru polja. ---- */
    input, select, textarea {
        font-size: 16px !important;
    }

    /* ---- 7. Dosljedne dodirne površine (minimalno 44px) ---- */
    a.btn,
    button.btn,
    button[type="submit"],
    input[type="submit"],
    .cc-btn,
    .msg-btn,
    .filter-btn {
        min-height: 44px;
    }

    /* ---- 8. Sekcije, kartice i paneli se rastežu bez stiskanja sadržaja ---- */
    main > section {
        overflow-x: clip;
    }
    main .card,
    main article,
    main > section > div {
        min-width: 0;
    }

    /* ---- 9. Modali i overlay paneli nikad ne prelaze širinu ekrana ---- */
    [role="dialog"] {
        max-width: 100vw;
    }
}