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

/* --- TABLET (do 992px) --- */
@media (max-width: 992px) {
  .about-content, .contact-content { grid-template-columns: 1fr; }
  .footer-content { grid-template-columns: repeat(2, 1fr); gap: 3rem; }
  .about-image { order: -1; } /* Slika ide iznad teksta na tabletu */
  .contact-info { margin-bottom: 2rem; }
}

/* --- MOBILNI (LANDSCAPE) (do 768px) --- */
@media (max-width: 768px) {
  .nav-links { 
    display: none; 
    position: fixed; 
    top: 0; /* Počinje od samog vrha viewporta */
    left: 0; 
    width: 100%; 
    height: 100vh;
    background: var(--secondary-dark); 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    gap: 2rem; 
    transform: translateX(100%); 
    transition: transform 0.3s ease-in-out; 
    z-index: 999; /* Da bude iznad ostatka navigacije */
  }
  .nav-links.active { transform: translateX(0); display: flex; }
  .mobile-menu-btn { display: block; }
  .header-content h1 { font-size: 2.5rem; }
  .footer-content { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid-full { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .filters { flex-direction: column; align-items: stretch; }
  .filters .btn, .filters select { width: 100%; }
}

/* --- MOBILNI (PORTRAIT) (do 576px) --- */
@media (max-width: 576px) {
  /* Dinamički padding za body da kompenzuje fiksirani top-bar */
  body {
    /* Visina 2 reda teksta + padding = ~70px. Ovo je važno da fiksni top-bar ne prekrije sadržaj. */
    padding-top: 70px; 
  }
  
  /* Top Bar ostaje fiksiran ali se elementi slažu jedan ispod drugog */
  .top-bar-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    height: auto; /* Automatska visina */
    padding: 0.5rem 1.5rem;
  }
  
  /* Navigacija se pomera na vrh kada se top-bar sakrije */
  nav {
    top: 70px; /* Počinje ispod fiksiranog top-bar-a */
  }
  nav.scrolled {
    top: 0;
  }
  
  h1 { font-size: 2rem; }
  section { padding: 3rem 0; }
  .section-title h2 { font-size: 2rem; }
  .header-btns { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
  .btn { width: 100%; max-width: 300px; }
  .about-stats { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-content { text-align: center; }
  .social-links { justify-content: center; }
  .gallery-modal-nav { width: 40px; height: 40px; }

  /* Prilagođavanje paddinga za stranice da kompenzuju navigaciju */
  .gallery-page, .faults-page, .thank-you-page {
    padding-top: 3rem;
  }
}