* {
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background-color: hsl(0, 0%, 100%);
}

/* ---- 1. HEADER I NAVEGACIÓ ---- (header: logo y nav-menu) */
.header-principal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;

    color: hsl(207, 84%, 12%); 
    text-decoration: none;
    font-weight: 500; 
    transition: color 0.3s; 

    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
}  

.nav-menu ul {
    display: flex;
    list-style-type: none; /*esto elimina el marcador de la lista desordenada ul*/
    gap: 30px; /* aqui es donde se da espacio de texto entre Inicio Galeria Contacto */
    margin: 10px;
    padding: 10px;
}

.nav-menu a {
    text-decoration: none; /*quita el subrallado*/
    color:hsl(207, 84%, 12%);
}

/* ---- 2. SECCIÓ HERO ---- */
.hero-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    background-image: url('https://www.locabarcelona.com/wp-content/uploads/2020/04/enes-f-DvU93UhTs-unsplash-scaled.jpg'); 
    background-size: cover;
    background-position: center;
    height: 400px;
    margin: 0;

    /* -- Estilo para el título 'Galeria' -- */
    font-size: 1.5em; /* se aumenta el tamaño de letra */
    font-weight: 100; /* una letra mas fina */
    letter-spacing: 5px; /* efecto espaciado entre letras */
    margin-bottom: 5px; /* reduce el espacio respecto el titulo con el texto de abajo */
    
    color: hsl(0, 0%, 0%);
    text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.8);
}

/* ---- 3. SECCIÓ LLOCS (TARGETES: 2r section) ---- */

.seccio-imatges h2 {
    text-align: center;
    margin-top: 50px;
}

.graella-imatges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    margin: 0 auto;
    text-align: center;
    background-color: hsl(0, 0%, 100%);
}

.graella-imatges h3 {
    display: grid;
    grid-template-columns: auto auto;
    text-align: center;
    justify-content: center;
    margin: 20px; 
    margin-bottom: 5px;
}

.graella-imatges article img {
    width: 80%;
    height: 180px;
    object-fit: contain;
    margin: 20px 0;
    border-radius:8px;
}

.graella-imatges article {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    margin: 20px;
    background-color: hsla(208, 35%, 81%, 0.671);
}

.graella-imatges article:nth-child(3) {
    grid-column: 1/3;
} 

/* ---- 4. SECCIÓ BARRIS (TARGETES: 3r section) ---- */

.seccio-barris h2 {
    margin-top: 50px;
    text-align: center;
}

.barris-imatges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 100px;
    background-color: hsl(0, 0%, 100%);
}

.barris-imatges h3 {
    text-align: center;
    margin: 20px; 
    margin-bottom: 5px;
}

.barris-imatges article img {
    width: 80%;
    height: 180px;
    object-fit: contain;
    margin: 20px 0;
    border-radius:8px;
}

.barris-imatges article {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    text-align: center;
    margin: 20px;
    background-color: hsla(208, 35%, 81%, 0.671);
}

/* ---- 4. FOOTER ---- */
.footer-principal {
    background-color: hsla(208, 51%, 70%, 0.671);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
    margin-top: 20px;
}


/* --- MEDIA QUERIES: TABLET --- */

@media (max-width: 768px) {

    .header-principal {
        /* se reduce el relleno para no ocupar tanto espacio vertical */
        padding: 15px 20px;
    }

    .hero-section {
        font-size: 1.3em; /* se reduce el tamaño del titulo y el mini texto para que no sea demasiado grande */
        padding: 0 20px;
        margin: 0 auto; 
    }

    .graella-imatges {
        margin: 0 15px;
        grid-template-columns: 1fr;
    }

    .graella-imatges article:nth-child(3) {
        grid-column: auto;
    }

    .barris-imatges {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 0 15px 80px 15px;
    }

    .graella-imatges article img,
    .barris-imatges img {
        width: 90%;
    }
}

/* --- MEDIA QUERIES: MÓVIL --- */

@media (max-width: 480px) {

    .header-principal {
        padding: 10px 15px;
    }

    .hero-section {
        font-size: 1.2em;
        height: 300px;
        padding: 20px;
        padding-top: 60px;
        letter-spacing: 3px;
    }

    .graella-imatges {
        grid-template-columns: 1fr;
        margin: 0 10px;
    }

    .graella-imatges article:nth-child(3) {
        grid-column: auto;
    }

    .barris-imatges {
        grid-template-columns: 1fr;
        margin: 0 10px 60px 10px;
    }

    .graella-imatges article img,
    .barris-imatges article img {
        width: 95%;
        height: 160px;
    }
}