/* =========================================================
   UI LAYOUT SYSTEM
   Generički layout i utility sloj za ceo sajt
   Desktop + Mobile
   ========================================================= */



/* =========================================================
   1) RESPONSIVE SPACING TOKENS
   ========================================================= */

:root {
    --space-0: 0px;
    --space-10: 10px;
    --space-20: 20px;
    --space-30: 30px;
    --space-40: 40px;
    --space-50: 50px;
}



/* =========================================================
   2) CONTAINERS
   ========================================================= */

.site-container {
    width: min(1200px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
}

.site-container-sm {
    width: min(960px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
}

.site-container-xs {
    width: min(760px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   3) HEADINGS RESET
   Globalni reset i osnovna tipografija za h1–h6
   ========================================================= */

h1, h2, h3, h4, h5, h6 {
    margin-left: 0;
    padding-left: 0;
    color: var(--color-text);
    font-family: "Exo 2", 'Courier New';
    font-weight: 600;
    line-height: 1.2;
}

h1 {
    font-size: clamp(34px, 4.5vw, 48px);
}

h2 {
    font-size: clamp(28px, 3.5vw, 36px);
}

h3 {
    font-size: clamp(24px, 3vw, 30px);
}

h4 {
    font-size: 22px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

@media (max-width: 768px) {
    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }

    h4 {
        font-size: 18px;
    }

    h5 {
        font-size: 16px;
    }

    h6 {
        font-size: 15px;
    }
}


/* =========================================================
   4) TEXT ALIGNMENT
   ========================================================= */

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}



/* =========================================================
   5) DISPLAY HELPERS
   ========================================================= */

.d-block {
    display: block !important;
}

.d-inline-block {
    display: inline-block !important;
}

.d-inline {
    display: inline !important;
}

.d-flex {
    display: flex !important;
}

.d-inline-flex {
    display: inline-flex !important;
}

.d-none {
    display: none !important;
}



/* =========================================================
   6) FLEX HELPERS
   ========================================================= */

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-row {
    flex-direction: row !important;
}

.justify-start {
    justify-content: flex-start !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-around {
    justify-content: space-around !important;
}

.align-start {
    align-items: flex-start !important;
}

.align-center {
    align-items: center !important;
}

.align-end {
    align-items: flex-end !important;
}

.align-stretch {
    align-items: stretch !important;
}



/* =========================================================
   7) WIDTH / HEIGHT HELPERS
   ========================================================= */

.w-100 {
    width: 100% !important;
}

.w-auto {
    width: auto !important;
}

.h-100 {
    height: 100% !important;
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}



/* =========================================================
   8) SPACING UTILITIES
   Koraci: 0, 10, 20, 30, 40, 50
   Responsive preko varijabli
   ========================================================= */

/* ----- Margin Top ----- */
.mt-0 {
    margin-top: var(--space-0) !important;
}

.mt-10 {
    margin-top: var(--space-10) !important;
}

.mt-20 {
    margin-top: var(--space-20) !important;
}

.mt-30 {
    margin-top: var(--space-30) !important;
}

.mt-40 {
    margin-top: var(--space-40) !important;
}

.mt-50 {
    margin-top: var(--space-50) !important;
}

/* ----- Margin Bottom ----- */
.mb-0 {
    margin-bottom: var(--space-0) !important;
}

.mb-10 {
    margin-bottom: var(--space-10) !important;
}

.mb-20 {
    margin-bottom: var(--space-20) !important;
}

.mb-30 {
    margin-bottom: var(--space-30) !important;
}

.mb-40 {
    margin-bottom: var(--space-40) !important;
}

.mb-50 {
    margin-bottom: var(--space-50) !important;
}

/* ----- Margin Left ----- */
.ml-0 {
    margin-left: var(--space-0) !important;
}

.ml-10 {
    margin-left: var(--space-10) !important;
}

.ml-20 {
    margin-left: var(--space-20) !important;
}

.ml-30 {
    margin-left: var(--space-30) !important;
}

.ml-40 {
    margin-left: var(--space-40) !important;
}

.ml-50 {
    margin-left: var(--space-50) !important;
}

/* ----- Margin Right ----- */
.mr-0 {
    margin-right: var(--space-0) !important;
}

.mr-10 {
    margin-right: var(--space-10) !important;
}

.mr-20 {
    margin-right: var(--space-20) !important;
}

.mr-30 {
    margin-right: var(--space-30) !important;
}

.mr-40 {
    margin-right: var(--space-40) !important;
}

.mr-50 {
    margin-right: var(--space-50) !important;
}

/* ----- Padding Top ----- */
.pt-0 {
    padding-top: var(--space-0) !important;
}

.pt-10 {
    padding-top: var(--space-10) !important;
}

.pt-20 {
    padding-top: var(--space-20) !important;
}

.pt-30 {
    padding-top: var(--space-30) !important;
}

.pt-40 {
    padding-top: var(--space-40) !important;
}

.pt-50 {
    padding-top: var(--space-50) !important;
}

/* ----- Padding Bottom ----- */
.pb-0 {
    padding-bottom: var(--space-0) !important;
}

.pb-10 {
    padding-bottom: var(--space-10) !important;
}

.pb-20 {
    padding-bottom: var(--space-20) !important;
}

.pb-30 {
    padding-bottom: var(--space-30) !important;
}

.pb-40 {
    padding-bottom: var(--space-40) !important;
}

.pb-50 {
    padding-bottom: var(--space-50) !important;
}

/* ----- Padding Left ----- */
.pl-0 {
    padding-left: var(--space-0) !important;
}

.pl-10 {
    padding-left: var(--space-10) !important;
}

.pl-20 {
    padding-left: var(--space-20) !important;
}

.pl-30 {
    padding-left: var(--space-30) !important;
}

.pl-40 {
    padding-left: var(--space-40) !important;
}

.pl-50 {
    padding-left: var(--space-50) !important;
}

/* ----- Padding Right ----- */
.pr-0 {
    padding-right: var(--space-0) !important;
}

.pr-10 {
    padding-right: var(--space-10) !important;
}

.pr-20 {
    padding-right: var(--space-20) !important;
}

.pr-30 {
    padding-right: var(--space-30) !important;
}

.pr-40 {
    padding-right: var(--space-40) !important;
}

.pr-50 {
    padding-right: var(--space-50) !important;
}



/* =========================================================
   9) GRID SYSTEM
   12-kolonski sistem
   ========================================================= */

.ui-grid {
    display: flex;
    flex-wrap: wrap;
    margin-left: -14px;
    margin-right: -14px;
   /* gap sam stavio sam u mobile da poveca space izmedju ui-grid jer su u suprtnom  spojeni*/
}

    .ui-grid > * {
        box-sizing: border-box;
        min-width: 0;
        padding-left: 14px;
        padding-right: 14px;
    }

.ui-col-1 {
    width: 8.333333%;
}

.ui-col-2 {
    width: 16.666667%;
}

.ui-col-3 {
    width: 25%;
}

.ui-col-4 {
    width: 33.333333%;
}

.ui-col-5 {
    width: 41.666667%;
}

.ui-col-6 {
    width: 50%;
}

.ui-col-7 {
    width: 58.333333%;
}

.ui-col-8 {
    width: 66.666667%;
}

.ui-col-9 {
    width: 75%;
}

.ui-col-10 {
    width: 83.333333%;
}

.ui-col-11 {
    width: 91.666667%;
}

.ui-col-12 {
    width: 100%;
}

.ui-col-auto {
    width: auto;
}

.ui-col-center {
    margin-left: auto;
    margin-right: auto;
}



/* =========================================================
   10) SIMPLE LIST
   Jednostavna vertikalna lista bez meta kolone
   ========================================================= */

.ui-simple-list {
    display: flex;
    flex-direction: column;
}

.ui-simple-list-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

    .ui-simple-list-item:last-child {
        border-bottom: none;
    }

.ui-simple-list-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
}



/* =========================================================
   11) DATA LIST
   Meta + value lista
   ========================================================= */

.ui-data-list {
    --meta-width: 90px;
    display: flex;
    flex-direction: column;
    padding:20px;
}

.ui-data-list-item {
    display: grid;
    grid-template-columns: minmax(var(--meta-width), auto) 1fr;
    gap: 12px;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

    .ui-data-list-item:last-child {
        border-bottom: none;
    }

.ui-data-list-meta {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--color-accent);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ui-data-list-value {
    font-size: 16px;
    line-height: 1.45;
    color: var(--color-primary);
    font-weight: 600;
}

.ui-data-list-meta a {
    color: inherit;
    text-decoration: none;
}

    .ui-data-list-meta a:hover {
        text-decoration: underline;
    }

    /* PREDEFINSIANE SIRENE MATA*/

.ui-meta-100 {
    --meta-width: 100px;
}

.ui-meta-120 {
    --meta-width: 120px;
}

.ui-meta-140 {
    --meta-width: 140px;
}

.ui-meta-160 {
    --meta-width: 160px;
}

.ui-meta-180 {
    --meta-width: 180px;
}

.ui-meta-200 {
    --meta-width: 200px;
}


/* =========================================================
   12) EXTERNAL LINK
   ========================================================= */

.ui-link-external {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
}

    .ui-link-external::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 0%;
        height: 2px;
        background: currentColor;
        transition: width 0.25s ease;
    }

    .ui-link-external:hover {
        color: var(--color-primary-hover);
    }

        .ui-link-external:hover::after {
            width: 100%;
        }

    .ui-link-external i {
        font-size: 0.8em;
        opacity: 0.7;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .ui-link-external:hover i {
        transform: translate(2px, -2px);
        opacity: 1;
    }



/* =========================================================
   13) MOBILE
   Sve kolone po defaultu idu na 100%
   Osim ako se eksplicitno zada ui-col-m-*
   ========================================================= */

@media (max-width: 768px) {

    :root {
        --space-0: 0px;
        --space-10: 8px;
        --space-20: 14px;
        --space-30: 20px;
        --space-40: 28px;
        --space-50: 36px;
    }

    /* CONTAINERS */
    .site-container,
    .site-container-sm,
    .site-container-xs {
        width: calc(100% - 32px);
    }

    /* GRID */
    .ui-grid {
        margin-left: -10px;
        margin-right: -10px;
    }

        .ui-grid > * {
            padding-left: 10px;
            padding-right: 10px;
        }

         /* ovo znaic da prvi u-grid akoih ima vise nece imati ovo, a svaki sledcei ce imati
            dakle prvi u mobilno ostaje kakav jest ali sledeci koji buide ispod ce imati ovaj razmak tako
            da nece bitii priljubljen jedan uz drugi
         */
            .ui-grid > * + * {
                margin-top: 20px;
            }


    .ui-col-1,
    .ui-col-2,
    .ui-col-3,
    .ui-col-4,
    .ui-col-5,
    .ui-col-6,
    .ui-col-7,
    .ui-col-8,
    .ui-col-9,
    .ui-col-10,
    .ui-col-11,
    .ui-col-12,
    .ui-col-auto {
        width: 100%;
    }

    .ui-col-m-1 {
        width: 8.333333%;
    }

    .ui-col-m-2 {
        width: 16.666667%;
    }

    .ui-col-m-3 {
        width: 25%;
    }

    .ui-col-m-4 {
        width: 33.333333%;
    }

    .ui-col-m-5 {
        width: 41.666667%;
    }

    .ui-col-m-6 {
        width: 50%;
    }

    .ui-col-m-7 {
        width: 58.333333%;
    }

    .ui-col-m-8 {
        width: 66.666667%;
    }

    .ui-col-m-9 {
        width: 75%;
    }

    .ui-col-m-10 {
        width: 83.333333%;
    }

    .ui-col-m-11 {
        width: 91.666667%;
    }

    .ui-col-m-12 {
        width: 100%;
    }

    /* DATA LIST */
    .ui-data-list-item {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 14px 0;
    }

    .ui-data-list-meta {
        font-size: 14px;
        white-space: normal;
    }

    .ui-data-list-value {
        font-size: 16px;
    }

    /* SIMPLE LIST */
    .ui-simple-list-title {
        font-size: 16px;
    }
}