.portada-blog{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.portada-button{
    display: none;
}


/* articles mosaic */

.background-blog {
    background: #f3f3f3 var(--backgroundImage02) center ;
    height: 600px;
    width: 100%;
    position: absolute; 
    z-index: -1; 
}

.grid-articles {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 40px; 
    padding: 100px 10% 0 10%; 
    margin: 0 auto;
    position: relative;
    padding-bottom: 5%;
}

/* Millores per a la imatge i el botó segons la teva captura */
.card-noticia,
a.card-noticia {
    display: flex;
    flex-direction: column;
    text-decoration:none;
    color: #000;
}

a.card-noticia:hover .titol,
a.card-noticia:hover .subtitol,
a.card-noticia:hover .boto-llegir {
    transition: all 0.3s ease;
}

a.card-noticia:hover * {
    text-decoration:none;
    color: #000;
}
a.card-noticia:hover .boto-llegir {
    text-decoration:none;
    background-color: #000000;
    color: #ffffff;
}



.titol{
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 2.2rem;
    color: #D1C198;
    line-height: 1.2;
}

.card-imatge img {
    width: 100%;
    border-radius: 40px; /* Les puntes arrodonides de la foto */
    margin-bottom: 20px;
    margin-top: 20px;
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: center;
    display: block;

}

.card-footer {
    display: flex;
    justify-content: flex-end; /* Alinea el botó a la dreta */
}

.boto-llegir {
    background-color: #D1C198;
    color: #333;
    padding: 12px 30px;
    margin-top:20px;
    border-radius: 50px; /* Forma de càpsula */
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    display: inline-block;
}

/* BLOG DETALL ARTÍCLES */

.zona-tornar{
    padding: 100px 10% 50px;
}

.zona-tornar a{
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.zona-tornar a:hover {
    text-decoration: none;
    background-color: #000000;
    color:white;
}

.background-blog-detall{
    background: #f3f3f3 var( --backgroundImage02) center;
    height: 60vh;
    width: 100%;
    position: absolute; 
    z-index: -1; 
}

.background-blog-detall.noImageBackground {
    background: #ffffff !important;
    background-image: none !important;
}


.alternatingDivs .detall-articles:nth-child(odd) {
    flex-direction: row;
}

.alternatingDivs .detall-articles:nth-child(even) {
    flex-direction: row-reverse;
}

.alternatingDivs .detall-articles .imatge-article img {
    aspect-ratio: 5/3;
}



.detall-articles {
    display: flex;
    align-items: flex-start; 
    gap: 40px;               
    padding:  0px 10% 150px 10%;
    margin: 0 auto;
    position: relative; 
}

.detall-articles a {
    color: var(--brandDarkColor);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: #D1C198;
    text-decoration-thickness: 2px;
}

.detall-articles a:hover {
    color: #000000;
    text-decoration-style: solid;
}

/* Bloc de la imatge */
.imatge-article {
    flex: 0 0 45%;
}

.imatge-article img {
    width: 100%;
    height: auto;
    border-radius: 40px;
    display: block;
    aspect-ratio: 1/1;
    object-fit: cover;
}


.contingut {
    flex: 1;                
}

.contingut .titol {
    font-family: "Inter", sans-serif;
    color: #D1C198;
    font-size: var(--sectionTitleFontSize);
    line-height: 1.2;
    margin-top: 0;          
    margin-bottom: 25px;
    font-weight: 600;
}

.contingut p {
    font-family: "Inter", sans-serif;
    color: #333;
    font-size: 1.05rem; 
    white-space: pre-line;  
}

/* RESPONSIVE */

@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1400px)
  and (-webkit-min-device-pixel-ratio: 2) {

    .background-blog{
        height: 540px;
    }

    .zona-tornar {
        padding: 10% 10%;
    }

    .detall-articles {
        padding: 200px 10%;
    }
    .background-blog-detall {
        height: 430px;
    }
  }



/* TABLET FINS A 1024px */

@media screen and (max-width: 1024px) {
    .portada-button{
        display: block;
    }

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

    .background-blog {
        height: 500px;
    }

    .zona-tornar {
        padding: 10% 10%;
        display: flex;
        justify-content: start;
    }
    .detall-articles {
        flex-direction: column;
        padding: 20px 10% 50px 10%;
    }
    .background-blog-detall {
        height: 600px;
    }

    .alternatingDivs .detall-articles:nth-child(odd),
    .alternatingDivs .detall-articles:nth-child(even) {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .alternatingDivs .detall-articles:last-child .element-qf {
        border-bottom: none;
    }

    .alternatingDivs .detall-articles .imatge-article img {
        aspect-ratio: 5/3;
    }

    .imatge-article {
        flex: 0 0 100%;
    }



}


/* --- MÒBIL (Per defecte i fins a 600px aprox) */
@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {

    .portada-button{
        display: block;
    }

    .grid-articles {
        grid-template-columns: repeat(1, 1fr);
        padding: 80px 10% 0 10%;
    }

    .background-blog {
        background-size: cover;
        height: 600px;
    }

    .zona-tornar {
        padding: 15% 10%;
        display: flex;
        justify-content: center;
    }

    .detall-articles {
        flex-direction: column;
    }

    .background-blog-detall {
        height: 320px;
        background-size: 450%;
    }

}