/*
Theme Name: Astra Child
Template: astra
Author: Il Tuo Nome
Description: Tema figlio di Astra
Version: 1.0
*/

.ast-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.larghezza-massima {
	max-width: 1400px;
	margin: 0 auto;
}

/*Menu mobile*/
@media (max-width: 768px) {
	.first-section {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
	}
	
	.ast-main-header-wrap {
		background-color: white !important;
	}
	
	#ast-mobile-header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}
	
	#masthead {
	  position: fixed;
	  z-index: 9999;
	}
	
	#colophon {
		position: relative;
    	z-index: 9998;
	}
	
	.div-footer {
		position: relative;
		margin: 0 auto;
		width: 100% !important;
		text-align: left;
		padding: 0px !important;
	}
	
}

@media (max-width: 480px) {
	.div-footer {
		position: relative;
		margin: 0 auto;
		width: 55% !important;
		text-align: left;
		padding: 0px !important;
	}
	
	.title-article {
		font-size: 40px !important;
		line-height: 1.2;
	}

}

.articolo-col {
  flex: 1 1 calc(33.333% - 20px); /* 3 per riga */
}

@media (max-width: 1024px) {
  .articolo-col {
    flex: 1 1 100%; /* 1 per riga su tablet e smartphone */
    margin-bottom: 15px;
  }
}

.button-news {
    border: 2px solid #00466d !important;
}

.container-news {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;  /* Centra la griglia orizzontalmente */
    gap: 20px;
    padding: 0 10px;  /* Aggiungi un po' di padding ai lati */
}

.row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center; /* Centra gli articoli nella riga */
}

.col-md-4 {
    width: 30%; /* Ogni articolo occuperà un terzo della riga */
    padding: 10px;
    display: flex;
    justify-content: center;  /* Centra l'articolo nella colonna */
}

.articolo-link {
    display: block; /* Assicura che l'elemento di link occupi l'intero contenitore */
    text-decoration: none; /* Rimuove la sottolineatura */
    color: inherit; /* Mantieni il colore del testo invariato */
    width: 100%; /* Assicura che il link occupi tutta la larghezza */
    height: 100%; /* Assicura che il link occupi tutta l'altezza del contenitore */
}

.articolo-container {
    position: relative;
    background-image: url(''); /* Immagine di sfondo, verrà sostituita dinamicamente */
    background-size: cover;
    background-position: center;
    height: 300px; /* Altezza fissa per l'immagine */
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
    width: 100%;
    background-color: rgba(0, 0, 0, 0); /* Sfondo nero con opacità di 0.4 */
    box-shadow: 10px 10px 8px rgba(0, 0, 0, 0.25); /* Ombra leggera */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Aggiungi transizione per il colore e ombra */
    border-radius: 12px;
    overflow: hidden;
}

/* Sovrappone l'overlay per il testo */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3); /* Più opaco, più scuro */
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    z-index: 1; /* Posiziona l'overlay sopra l'immagine di sfondo */
    transition: opacity 0.3s ease; /* Aggiungi la transizione per l'opacità */
}

/* Aggiungi l'effetto al passaggio del mouse */
.articolo-container:hover {
    background-color: rgba(0, 70, 109, 0.6); /* Sfondo blu con opacità 0.6 al passaggio del mouse */
}

/* Nascondi il titolo e la data al passaggio del mouse */
.articolo-container:hover .overlay {
    opacity: 0; /* Rende invisibile il testo */
}

.articolo-title,
.articolo-date {
    transition: opacity 0.3s ease; /* Aggiungi transizione per l'opacità */
}

.articolo-date {
    font-size: 14px;
}

.articolo-title {
    font-size: 27px;
}

@media (min-width: 769px) {
/* Quando l'utente passa il mouse sopra, nascondi titolo e data */
.articolo-container:hover .articolo-title,
.articolo-container:hover .articolo-date {
    opacity: 0; /* Scompare il titolo e la data */
}
}

.sidebar-menu-mobile.open2 {
    transform: translateY(0);
}