/* ==========================================================================
   RBTN STUDIO - SPECTRUM V1 (TEXT STYLES & H2 DISTANCE RESTORED)
   ========================================================================== */

@font-face {
    font-family: 'RobotoMono';
    src: url('../font/RobotoMono-VariableFont_wght.woff') format('woff');
}

:root {
    --bg: #EFEFEF;
    --text: #09051D;
    --accent: #0019FE;
    --gutter: 24px;
    --header-top: 100px;
    --content-top: 204px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #212121;
        --text: #D4D4D4;
        --accent: #038EFF;
    }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body { 
    background-color: var(--bg); 
    color: var(--text); 
    font-family: 'RobotoMono', monospace; 
    -webkit-font-smoothing: antialiased; 
}

.wrapper { width: 100%; padding: 0 var(--gutter); }

/* --- TYPOGRAPHY (Original 1:1) --- */
h2, .profile-name, .project-title, .nav-item {
    font-family: 'RobotoMono', monospace; font-weight: 700; font-size: 14px;
    line-height: 18px; letter-spacing: 0.06em; text-transform: uppercase;
}

p, .project-description, .footer-container a, .footer-container span {
    font-family: 'RobotoMono', monospace; font-weight: 400; font-size: 14px;
    line-height: 20px; letter-spacing: 0.02em;
}

/* --- HEADER & NAVIGATION --- */
.main-header {
    width: 100%; padding-top: var(--header-top);
    margin-bottom: calc(var(--content-top) - var(--header-top) - 14px);
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter);
}

.logo-link { display: block; width: fit-content; text-decoration: none; line-height: 0; }
.logo-svg {
    display: block; height: 14px; width: 127px; fill: var(--text);
}

.main-nav { grid-column: 3; display: flex; gap: 24px; align-items: flex-start; }
.nav-item { text-decoration: none; color: var(--text); position: relative; transition: color 0.2s ease; }
.nav-item:hover, .nav-item.active { color: var(--accent); }

.nav-item.active::after {
    content: ''; position: absolute; left: 0; bottom: -8px; width: 8px; height: 2px;
    background-color: var(--accent);
    border-radius: 1px;
}

/* --- CORE GRIDS --- */
.work-grid, .profile-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 80px var(--gutter); align-items: start;
}

#grid-app { min-height: 100vh; display: grid; }

/* --- INDEX PROJECT STYLES --- */
.project-item { cursor: pointer; }
.project-info { margin-bottom: 16px; } 
.project-title { margin-bottom: 8px; }
.project-media { width: 100%; aspect-ratio: 1/1; overflow: hidden; transition: opacity 0.3s ease; }
.project-item:hover .project-media { opacity: 0.8; }
.project-media img, .project-media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- PROFILE & LEGAL (Original Distance Fixed) --- */
.profile-image-col { grid-column: 1 / span 2; }
.profile-content-col { grid-column: 3 / span 2; } 
.profile-img { width: 100%; height: auto; display: block; }
.profile-section { margin-bottom: 48px; }
.profile-section h2 { margin-bottom: 12px; } /* OVO JE VRAĆENO */
.profile-lead { margin-bottom: 40px; }
.social-links { display: flex; gap: 24px; }
.social-links a { color: var(--text); transition: color 0.2s ease; line-height: 0; }
.social-links a:hover { color: var(--accent); }
.social-icon { display: block; width: 32px; height: 32px; }

/* --- FOOTER --- */
.main-footer { padding-top: 264px; padding-bottom: 32px; }
.footer-container {
    display: flex; flex-direction: row; justify-content: flex-start; gap: 24px; align-items: center;
}
.footer-container .copyright { color: var(--text); }
.footer-container a { text-decoration: none; color: var(--text); transition: color 0.2s ease; }
.footer-container a:hover { color: var(--accent); }

/* --- WORK DETAIL --- */
.project-detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); align-items: start; }
.project-media-col { grid-column: 1 / span 2; grid-row: 1; display: flex; flex-direction: column; gap: 24px; }
.project-text-col { grid-column: 3 / span 2; grid-row: 1; position: sticky; top: var(--content-top); }
.project-copy { margin-top: 24px; white-space: pre-line; }
.project-links { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.project-link { color: var(--text); text-decoration: none; transition: color 0.2s ease; }
.project-link:hover { color: var(--accent); }

/* --- LEGAL PAGES (Impressum, Datenschutz) --- */
.legal-text-col { grid-column: 1 / span 2; }
.legal-text-col a { color: var(--text); text-decoration: none; transition: color 0.2s ease; }
.legal-text-col a:hover { color: var(--accent); }

/* --- SCROLL FADE IN --- */
.fade-up {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}
.slide-up {
    transform: translateY(14px);
    transition: transform 0.45s ease;
}
.slide-up.visible {
    transform: translateY(0);
}

/* --- BACK BUTTON --- */
.back-container { margin-top: 40px; display: flex; padding-bottom: 80px; cursor: pointer; color: var(--text); transition: color 0.2s ease, transform 0.3s ease; }
.back-container:hover { color: var(--accent); transform: translateX(-8px); }
.icon-back { display: block; width: 46px; height: 24px; }

/* --- TABLET (768px - 1024px) --- */
@media (min-width: 768px) and (max-width: 1024px) {
    .main-header { grid-template-columns: repeat(2, 1fr); }
    .main-nav { grid-column: 2; }
    .work-grid { grid-template-columns: repeat(2, 1fr); }

    /* Profile + Project Detail teilen exakt dasselbe 2-Spalten-Layout */
    .profile-grid,
    .project-detail-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gutter);
        align-items: start;
    }
    .profile-image-col,
    .project-media-col {
        grid-column: 1;
        grid-row: 1;
        margin-top: 0;
        min-width: 0;
    }
    .profile-content-col,
    .project-text-col {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }
    .legal-text-col {
        grid-column: 1 / span 2;
        grid-row: 1;
        min-width: 0;
    }
}

/* --- MOBILE (767px) --- */
@media (max-width: 767px) {
    :root { --gutter: 16px; }
    .main-header { display: block; margin-bottom: 64px; }
    .main-nav { margin-top: 24px; }
    .work-grid { grid-template-columns: 1fr; }
    .profile-grid { display: flex; flex-direction: column; gap: 32px; margin-top: 64px; }
    .project-detail-grid { display: flex; flex-direction: column; gap: 16px; }
    .project-media-col { margin-top: 0 !important; order: 2; width: 100%; }
    .project-text-col { order: 1; width: 100%; position: static; }

    /* Footer mobile: Impressum, Datenschutz, © */
    .footer-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .footer-container .copyright { order: 3; }
    .footer-container a[href="impressum.html"] { order: 1; }
    .footer-container a[href="datenschutz.html"] { order: 2; }
}

/* --- ULTRA WIDE (1800px+) --- */
@media (min-width: 1800px) {
    .main-header, .work-grid, .profile-grid, .project-detail-grid { grid-template-columns: repeat(6, 1fr); }
    .main-nav { grid-column: 4; }
    .profile-image-col, .project-media-col { grid-column: 1 / span 3; }
    .profile-content-col, .project-text-col { grid-column: 4 / span 2; }
}