/*
 * Vetrokaz, sloj za prelamanje na manjim ekranima.
 *
 * Ceo sajt je pisan sa inline style atributima, a u inline stil se media upit
 * ne moze staviti. Zato ovde stoje sva pravila za uze ekrane, vezana za klase
 * koje su dodate na kontejnere u blade fajlovima.
 *
 * Skoro svako pravilo nosi !important, i to je namerno: inline stil je jaci od
 * svakog pravila iz stylesheet-a, pa bi bez toga bio bez dejstva.
 *
 * Dva praga:
 *   900px, tablet i uzak laptop, tri kolone padaju na dve, bocne kolone se
 *          spustaju ispod sadrzaja
 *   600px, telefon, sve pada na jednu kolonu
 *
 * Nema build koraka, fajl se servira direktno iz public/, jer je Node na
 * serveru 18 pa Vite ne prolazi (vidi FORGE_SETUP.md).
 */

/* ============================================================
   ZAJEDNICKO
   ============================================================ */

/* Nista ne sme da gura stranicu u stranu. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

/* Hamburger i mobilni meni ne postoje na sirokim ekranima. */
.vk-burger,
.vk-mobile-menu {
    display: none;
}

@media (max-width: 900px) {
    /* ------------------------------------------------------------
       KONTEJNERI
       ------------------------------------------------------------ */
    .vk-wrap {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* ------------------------------------------------------------
       ZAGLAVLJE
       ------------------------------------------------------------ */
    .vk-header {
        gap: 12px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Sedam linkova i polje za pretragu ne staju, sele se u mobilni meni. */
    .vk-nav,
    .vk-header-search {
        display: none !important;
    }

    .vk-burger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        flex-shrink: 0;
        margin-left: auto;
        border: 1px solid #F0E7DC;
        border-radius: 13px;
        background: #fff;
        cursor: pointer;
        padding: 0;
    }

    .vk-burger span {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: #3A352F;
        position: relative;
    }

    .vk-burger span::before,
    .vk-burger span::after {
        content: "";
        position: absolute;
        left: 0;
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: #3A352F;
    }

    .vk-burger span::before {
        top: -6px;
    }

    .vk-burger span::after {
        top: 6px;
    }

    .vk-mobile-menu[data-open="true"] {
        display: block !important;
        border-top: 1px solid #F0E7DC;
        background: #FFF7EE;
        padding: 14px 20px 20px;
    }

    .vk-mobile-menu a {
        display: block;
        padding: 12px 2px;
        font-family: "Nunito", sans-serif;
        font-weight: 700;
        font-size: 16px;
        color: #3A352F;
        text-decoration: none;
        border-bottom: 1px solid #F4ECE2;
    }

    .vk-mobile-menu a:last-child {
        border-bottom: 0;
    }

    /* ------------------------------------------------------------
       MREZE
       ------------------------------------------------------------ */
    .vk-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .vk-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ------------------------------------------------------------
       DVOKOLONSKI RASPOREDI
       Bocna kolona prestaje da bude fiksne sirine i spusta se ispod.
       ------------------------------------------------------------ */
    .vk-split {
        flex-direction: column !important;
        gap: 24px !important;
    }

    .vk-side {
        width: 100% !important;
        position: static !important;
        flex-shrink: 1 !important;
    }

    .vk-main {
        width: 100% !important;
    }

    /* Red sa naslovom i kontrolama mora da prelama, inace ne da koloni sa
       rezultatima da se skupi ispod svoje sirine. */
    .vk-toolbar {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .vk-toolbar-actions {
        flex-wrap: wrap !important;
        width: 100%;
    }

    /* Na Pretrazi filteri idu u fioku, da rezultati budu prvo sto se vidi. */
    .vk-filters {
        order: -1;
    }

    .vk-filters > summary {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        list-style: none;
        cursor: pointer;
        background: #fff;
        border-radius: 16px;
        padding: 14px 18px;
        font-family: "Nunito", sans-serif;
        font-weight: 800;
        font-size: 15px;
        color: #3A352F;
        box-shadow: 0 1px 2px rgba(46, 42, 38, 0.04), 0 10px 22px -18px rgba(46, 42, 38, 0.3);
    }

    .vk-filters > summary::-webkit-details-marker {
        display: none;
    }

    .vk-filters > summary::after {
        content: "▾";
        color: #B8AFA6;
        font-size: 13px;
    }

    .vk-filters[open] > summary {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        margin-bottom: 0;
    }

    .vk-filters[open] > summary::after {
        content: "▴";
    }

    .vk-filters > summary + * {
        margin-top: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    /* ------------------------------------------------------------
       PROFIL ORGANIZATORA
       ------------------------------------------------------------ */
    .vk-provider-head {
        flex-wrap: wrap !important;
    }

    .vk-provider-actions {
        width: 100% !important;
        padding-bottom: 0 !important;
    }

    /* ------------------------------------------------------------
       PODNOZJE
       ------------------------------------------------------------ */
    .vk-footer-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 26px !important;
    }
}

@media (max-width: 600px) {
    /* ------------------------------------------------------------
       KONTEJNERI I NASLOVI
       ------------------------------------------------------------ */
    .vk-wrap {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .vk-header {
        padding-left: 16px !important;
        padding-right: 16px !important;
        gap: 10px !important;
    }

    .vk-hero-title {
        font-size: 34px !important;
    }

    .vk-hero-sub {
        font-size: 16px !important;
    }

    .vk-section-title {
        font-size: 25px !important;
    }

    /* ------------------------------------------------------------
       MREZE, sve na jednu kolonu
       ------------------------------------------------------------ */
    .vk-grid-3,
    .vk-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .vk-grid-4 {
        gap: 12px !important;
    }

    /* ------------------------------------------------------------
       PRETRAGA U HEROJU, tri polja i dugme jedno ispod drugog
       ------------------------------------------------------------ */
    .vk-hero-form {
        flex-direction: column !important;
        align-items: stretch !important;
        border-radius: 20px !important;
        padding: 8px !important;
        gap: 2px;
    }

    .vk-hero-form > * {
        border-right: 0 !important;
        border-bottom: 1px solid #F4ECE2;
        width: 100% !important;
        text-align: left;
    }

    .vk-hero-form > *:last-child {
        border-bottom: 0;
        margin-top: 8px;
    }

    .vk-hero-form button {
        width: 100% !important;
        justify-content: center;
    }

    /* ------------------------------------------------------------
       SEZONSKI BANER
       Emoji, tekst i dugme jedno ispod drugog, inace se naslov lomi rec po
       red a dugme izlazi van ekrana.
       ------------------------------------------------------------ */
    .vk-season {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
        padding: 24px 22px !important;
        text-align: left;
    }

    /* Dugme preko celog reda, veca meta za prst. !important jer je align-items
       flex-start na kolonskom flexu inace skuplja dete na sirinu sadrzaja. */
    .vk-season > a:last-child {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ------------------------------------------------------------
       SEKCIJA ZA ORGANIZATORE
       ------------------------------------------------------------ */
    .vk-cta {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 32px 24px !important;
    }

    .vk-cta-actions {
        width: 100%;
        flex-direction: column !important;
    }

    .vk-cta-actions > * {
        width: 100%;
        justify-content: center;
    }

    /* ------------------------------------------------------------
       PROFIL ORGANIZATORA I DOGADJAJ
       ------------------------------------------------------------ */
    /* Naslov pored avatara se lomi u cetiri reda, pa ih razdvajamo. Avatar
       zadrzava negativnu marginu i dalje preklapa baner. */
    .vk-provider-head {
        display: block !important;
    }

    .vk-provider-head > :nth-child(2) {
        padding-top: 12px !important;
    }

    .vk-provider-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin-top: 16px;
    }

    .vk-provider-actions > * {
        flex: 1 1 auto;
        justify-content: center;
    }

    .vk-cover {
        height: 150px !important;
    }

    .vk-event-hero {
        height: 220px !important;
    }

    /* ------------------------------------------------------------
       PODNOZJE
       ------------------------------------------------------------ */
    .vk-footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 22px !important;
    }

    .vk-footer-bottom {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Newsletter kolona preko celog reda, inace su polje i dugme nagurani
       u pola sirine telefona. */
    .vk-footer-news {
        grid-column: 1 / -1;
    }

    /* Polje i dugme jedno pored drugog ne staju u pola sirine telefona. */
    .vk-newsletter {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .vk-newsletter > * {
        width: 100% !important;
        justify-content: center;
    }
}