/* RESPONSIVE.CSS - Totes les regles adaptatives centralitzades */

/* =========================================
   BREAKPOINTS MIN-WIDTH (Mobile-First upwards)
   ========================================= */

@media (min-width: 768px) {
    /* Targetes Destacades */
    .card-featured-action {
        flex: 1 1 calc(50% - 1.5rem);
        max-width: calc(50% - 1.5rem);
    }
    
    /* Avisos Grid */
    .subgrid-alerts { 
        grid-template-columns: repeat(2, 1fr); 
    }
    
    /* Cookie Banner */
    .cookie-banner-container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    /* Admin Grid */
    .admin-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (min-width: 769px) {
    /* Barra de novetats (Escriptori) */
    .news-bar-container { padding: 1rem 1.5rem; }
    .news-details { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
    .news-bar-label {
        cursor: default; pointer-events: none; padding: 0; display: flex; justify-content: center;
        width: 100%; margin-bottom: 0.5rem;
    }
    .dropdown-arrow { display: none; }
    .news-details > .news-bar-links {
        display: flex !important; flex-direction: row; justify-content: center; align-items: center;
        gap: 1.5rem; padding: 0; flex-wrap: wrap; background: transparent; animation: none;
    }
    .news-bar-link { border-bottom: none; padding: 0; }
}

@media (min-width: 992px) {
    /* Bento Grid */
    .bento-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .bento-arxiu {
        grid-column: span 3;
    }
    .bento-serveis {
        grid-column: span 1;
    }
    .bento-acces {
        grid-column: span 4;
    }
}

@media (min-width: 1024px) {
    /* Targetes Destacades - 3 columnes */
    .card-featured-action {
        flex: 1 1 calc(33.333% - 1.5rem);
        max-width: calc(33.333% - 1.5rem);
    }
}


/* =========================================
   BREAKPOINTS MAX-WIDTH (Desktop-First downwards)
   ========================================= */

@media (max-width: 992px) {
    /* Botons globals en mòbil */
    .btn-action-primary { align-self: center; }
    
    /* Menu Hamburguesa Mòbil */
    .menu-toggle { display: flex; }
    
    .main-nav { 
        display: block; position: absolute; top: 100%; left: 0; width: 100%; height: auto; max-height: calc(100vh - 70px); background: var(--garnet); z-index: 1500; padding: 2rem 1.5rem; text-align: center; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 10px 25px rgba(0,0,0,0.2); overflow-y: auto; margin: 0;
        /* Ocultació inicial cap amunt */
        transform: translateY(-150%);
        opacity: 0;
        visibility: hidden;
    }
    .main-nav.is-active { 
        transform: translateY(0); 
        opacity: 1; 
        visibility: visible; 
    }
    .main-nav ul { flex-direction: column; gap: 1.5rem; }
    .main-nav a { font-size: 1.2rem; padding: 10px 0; display: inline-block; color: #ffffff; }
    .main-nav a::after { background: #ffffff; }
    .main-nav a:hover { color: #fdf2f2; }
}

@media (max-width: 850px) {
    /* Footer */
    .footer-container { text-align: center; } 
    .contact-link { justify-content: center; } 
    .footer-column h4::after { left: 50%; transform: translateX(-50%); } 
}

@media (max-width: 768px) {
    /* Xarxes Socials */
    .social-links {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        width: 100%;
    }

    /* Hero Responsive */
    .hero-full {
        background-size: cover;
        background-position: top center;
    }
}

@media (max-width: 480px) {
    /* Header compacte */
    .header-container { flex-direction: row; gap: 10px; align-items: center; justify-content: space-between; padding: 0 1.25rem; }
    .logo-area { max-width: calc(100% - 60px); }
    .logo-brand { font-size: 1.15rem; line-height: 1.2; display: block; white-space: normal; }
    
    /* Layout Mòbil Petit */
    .portal-section { padding: 3rem 1.25rem; }
    .card-featured-action { padding: 1.5rem; gap: 20px; }
    .card-featured-action h3 { font-size: 1.5rem; }
    
    /* Documents Mòbil Petit */
    .doc-item { padding: 1rem; flex-direction: column; align-items: flex-start; gap: 0.8rem; }
    .doc-arrow { display: none; /* Hide arrow on small mobile to save space */ }
    
    /* Bento Grid Mòbil Petit */
    .bento-card { padding: 1.5rem 1rem; border-radius: 1rem; }
    
    /* Hero Text */
    .hero-full-welcome { font-size: 0.85rem; letter-spacing: 2px; }
}