/* OSNOVE */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { background-color: #000; color: #fff; font-family: 'Chivo Mono', monospace; padding: 20px; text-transform: uppercase; overflow-x: hidden; }

/* CUSTOM CURSOR */
#cursor-play { position: fixed; pointer-events: none; z-index: 10000; font-size: 9px; transform: translate(15px, 15px); opacity: 0; transition: opacity 0.2s ease; }
body:has(.work-item:hover) #cursor-play, body:has(.video-poster:hover) #cursor-play { opacity: 1; }

/* HEADER */
header { display: flex; justify-content: space-between; position: fixed; top: 20px; left: 20px; width: calc(100% - 40px); z-index: 8000; }
.logo { font-size: 1.4rem; letter-spacing: 2px; cursor: pointer; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
nav { display: flex; gap: 15px; }
nav a { color: #555; text-decoration: none; font-size: 0.7rem; cursor: pointer; }
nav a.active { color: #fff; }

/* GRID NIVELACIJA */
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; row-gap: 60px; margin-top: 150px; padding-bottom: 100px; }
.work-item { cursor: pointer; pointer-events: auto; }

/* Fiksiran prostor za naslov da bi thumbnailovi bili u ravni */
.text-container {
    height: 35px; /* Podesi visinu prema najdužem naslovu */
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
}
.work-item span { display: block; font-size: 0.65rem; color: #fff; }

.thumb { width: 100%; aspect-ratio: 16/10; background-color: #111; background-size: cover; background-position: center; border: 1px solid #1a1a1a; transition: background-image 0.3s ease; }

/* GIF PREVIEW HOVER */
.item-01:hover .thumb { background-image: url('Assets/Nike spec preview.gif') !important; }
.item-02:hover .thumb { background-image: url('ASSETS/new20.gif') !important; }
.item-03:hover .thumb { background-image: url('Assets/Colorgrading.gif') !important; }

/* ABOUT */
.about-section { max-width: 800px; margin: 150px auto 0 0; padding-left: 10px; }
.about-block { margin-bottom: 60px; }
.about-section h3 { font-size: 0.75rem; color: #555; margin-bottom: 15px; }
.about-section p { font-size: 1.1rem; line-height: 1.5; }
.contact-links a { display: block; margin-top: 10px; color: #fff; text-decoration: none; font-size: 1.1rem; width: fit-content; }

/* OVERLAY */
.overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 9000; align-items: center; justify-content: center; }
.center-wrapper { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }
.video-container { width: 100%; max-width: 1200px; aspect-ratio: 16/9; transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.video-container.zoomed-out { transform: scale(0.8); }
.video-poster { width: 100%; height: 100%; background-size: cover; background-position: center; cursor: pointer; }
.video-info-footer { width: 100%; max-width: 1200px; padding: 30px 0; display: flex; justify-content: space-between; align-items: flex-end; }
.video-title-below { font-size: 0.65rem; }
.nav-arrows-container { display: flex; gap: 30px; font-size: 0.65rem; color: #555; }
.arrow { cursor: pointer; transition: 0.3s; }
.arrow:hover { color: #fff; }

/* LOADER */
#loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; display: flex; justify-content: center; align-items: center; z-index: 99999; }
#loader img { width: 100%; height: 100%; object-fit: cover; }
.fade-out { opacity: 0; visibility: hidden; transition: 0.8s ease; }

/* MOBILE REFINEMENT */
@media (max-width: 768px) {
    header { top: 20px; flex-direction: column; align-items: center; gap: 15px; width: calc(100% - 40px); left: 20px; }
    .logo { position: relative; left: auto; transform: none; order: 1; font-size: 1.2rem; }
    nav { order: 2; gap: 15px; background: rgba(0, 0, 0, 0.4); padding: 5px 15px; border-radius: 30px; }

    .work-grid { grid-template-columns: repeat(2, 1fr); margin-top: 120px; gap: 10px; row-gap: 30px; }
    
    /* Na mobilnom smanjujemo visinu text-containera jer je font manji */
    .text-container { height: 25px; margin-bottom: 5px; }
    .work-item span { font-size: 0.55rem; }

    .video-container.zoomed-out { transform: scale(1); }
    .video-info-footer { flex-direction: row; justify-content: space-between; }
    #cursor-play, .thumb:hover { display: none !important; }
}

body.is-playing header, body.is-playing .video-info-footer { opacity: 0; pointer-events: none; }