/* ===== FILTER DROPDOWN ===== */
.tm-project-filter-wrapper {
    display: flex;
    justify-content: center; /* centriramo dropdown */
    margin-bottom: 40px;
}

.tm-project-filter {
    width: 300px;                      /* širina search boxa */
    padding: 12px 28px 12px 16px;      /* top/right/bottom/left, desni padding za strelicu */
    font-size: 0.875rem;               /* H6 minus 2 */
    font-weight: inherit;
    font-family: inherit;
    color: inherit;
    border: none;
    outline: none;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    cursor: pointer;
    text-align: left;                  /* tekst levo poravnat */
    line-height: 1.2em;                /* visina reda za duge nazive */
    transition: all 0.3s ease;
    appearance: auto;                   /* čuva default strelicu */
}

.tm-project-filter:focus,
.tm-project-filter:active {
    box-shadow: 0 5px 15px rgba(0,0,0,0.12);
}

.tm-project-filter option {
    padding: 8px 16px;                 /* padding između opcija */
    font-size: 0.875rem;               /* H6 minus 2 */
    font-weight: inherit;
    font-family: inherit;
    color: inherit;
    line-height: 1.2em;                /* visina reda opcija */
}


    /* ===== GRID ===== */
    .tm-projects-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr); /* 3 u redu desktop */
}



   .tm-project-card {
    flex: 0 0 33.3333%;
    box-sizing: border-box;
    display: block;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.05);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.tm-project-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;      /* forsiramo 4:3 okvir */
    object-fit: cover;         /* centrira i zumira */
    object-position: center;   /* centar-centar */
    display: block;
}

.tm-project-card h3 {
    margin: 0;
    padding: 8px 12px;         /* dovoljno za dve linije */
    background: #fff;          
    text-align: center;
    line-height: 1.2em;
}


    /* RESPONSIVE */
   @media (max-width: 1024px) {
    .tm-projects-grid { grid-template-columns: repeat(2, 1fr); } /* tablet */
}
@media (max-width: 640px) {
    .tm-projects-grid { grid-template-columns: 1fr; } /* mobilni */
}





/* ==========================
   SINGLE PROJECT PAGE
   ========================== */

.tm-single-project {
    max-width: 1200px;
    margin: 100px auto;
    /* padding gore i dole 100px */
    padding: 0 20px;
    font-family: inherit;
    /* koristi default font teme */
}

/* Naslov projekta – H2 ili H3 kako je u HTML-u, font preuzima temu */
.tm-project-title {
    text-align: center;
    margin-bottom: 48px;
}

/* Row layout za meta podake i opis projekta */
.tm-project-row {
    display: flex;
    gap: 24px;
    margin-bottom: 40px;
}

/* Levi kontejner – meta podaci */
.tm-project-left {
    flex: 1;
    padding: 24px;
}

.tm-project-meta .tm-meta-item {
    margin-bottom: 24px;
}

.tm-project-meta h6 {
    margin-bottom: 8px;
}

/* Desni kontejner – opis projekta */
.tm-project-right {
    flex: 2;
    padding: 24px;
}

.tm-project-details h6 {
    margin-bottom: 24px;
}

/* Opis projekta body font, line height preuzima temu */
.tm-project-content {
    line-height: 1.6;
}

/* ==========================
   GALERIJA 2x2 DESKTOP
   ========================== */

.tm-project-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 40px;
}

/* Jedinstven izgled svih elemenata galerije */
.tm-gallery-item {
    position: relative;
    overflow: hidden;
    background: #000;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* Slike, video i mapa – iste dimenzije, default font se ne dira */
.tm-gallery-item img,
.tm-gallery-item video,
.tm-gallery-item iframe {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 16 / 10;
    border: none;
}

/* Mapa pointer none ako je potrebno */
.tm-gallery-map iframe {
    pointer-events: none;
}

/* ==========================
   RESPONSIVE
   ========================== */

@media (max-width: 768px) {
    .tm-project-row {
        flex-direction: column;
    }

    .tm-project-left,
    .tm-project-right {
        padding: 16px;
    }

    .tm-project-gallery {
        grid-template-columns: 1fr;
    }
}

/* ==========================
   MOBILE RESPONSIVE – GALERIJA
   ========================== */
@media (max-width: 768px) {
    .tm-project-gallery {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .tm-gallery-item,
    .tm-gallery-item img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 10; /* slike zadrže proporcije */
    }

    .tm-gallery-item video,
    .tm-gallery-item iframe {
        width: 100% !important;
        min-height: 180px; /* minimalna visina da ne bude spljošteno */
        aspect-ratio: 16 / 10; /* zadrži proporcije */
    }
}