/* ==========================================
   MEDIA QUERIES (RESPONSIVE)
   ================================---------- */
@media (max-width: 1024px) {
  .slider-slide {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .slide-media {
    grid-column: span 1;
    height: 280px;
  }

  .slide-media img {
    height: 280px;
  }

  .slider-pagination {
    grid-template-columns: 1fr;
  }

  .slider-pagination-dots {
    grid-column: 1;
    padding: 30px 0 0 0;
  }

  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  /* Header Fix a Mòbil */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    z-index: 997;
    padding: 18px 0;
    border-bottom: 1px solid #eaeaea;
  }

  .header-container {
    padding: 0 20px;
  }

  .header-left .three-dots-btn,
  .desktop-nav {
    display: none !important;
  }

  .mobile-only-branding {
    display: block;
  }

  .desktop-only-branding {
    display: none;
  }

  .floating-menu-toggle {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body {
    padding-top: 75px;
  }

  .floating-nav-bar {
    padding: 60px 20px 40px;
    height: 100vh;
    overflow-y: auto;
  }

  .floating-nav-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 0;
    min-height: 70vh;
  }

  .floating-nav-left {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .floating-nav-left .three-dots-btn {
    display: none !important;
  }

  .floating-nav-bar .nav-menu {
    flex-direction: column;
    gap: 20px;
    width: 100%;
    margin-top: 20px;
  }

  .floating-nav-bar .nav-menu li a {
    font-size: 1.4rem;
  }

  .floating-menu-close {
    position: absolute;
    top: 25px;
    right: 20px;
  }
  
  .close-text {
    display: none;
  }

  /* Slider Hero a Mòbil: Imatge a dalt i text a sota */
  .slider-slide.active {
    display: flex !important;
    flex-direction: column !important;
  }

  .slider-slide .slide-media {
    order: 1 !important;
    height: 300px !important;
    margin-bottom: 20px;
  }

  .slider-slide .slide-media img {
    height: 300px !important;
  }

  .slider-slide .slide-info {
    order: 2 !important;
    padding-top: 0 !important;
  }

  /* Layout principal a mòbil */
  .site-content-layout {
    flex-direction: column !important;
    margin: 20px auto;
    padding: 0 20px;
  }

  .categories-sidebar {
    display: none !important;
  }

  /* Filtre inline sota l'slider */
  .mobile-categories-inline {
    display: block !important;
    margin: 25px 0 35px 0;
  }

  .mobile-categories-inline .category-filters ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px 18px;
    padding: 0;
    margin: 0;
  }

  .mobile-categories-inline .category-filters li {
    width: auto !important;
    margin-bottom: 0 !important;
  }

  .mobile-categories-inline .category-filters li a {
    font-size: 0.95rem;
    gap: 6px;
  }

  .mobile-categories-inline .category-filters .cat-count {
    display: none !important;
  }

  .projects-grid-container {
    margin-right: 0 !important;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .footer-columns {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }

  .options-overlay {
    display: none !important;
  }
  
}

@media (min-width: 769px) {
  .mobile-categories-inline {
    display: none !important;
  }
}