/* Reset base */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 3px;
    background-color: #e4e4e4;
}

/* Contenitore principale */
.page-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0; /* nessun padding per perfetto allineamento banner-griglia */
}

/* Banner principale */
.banner {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    margin: 0 0 20px 0;
    transition: transform 0.15s ease-in-out;
}

.banner:hover {
    transform: scale(1.02);
}



/* Griglia podcast */
.podcast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px; /* solo spazio tra le colonne */
    background-color: #e4e4e4;
    border-radius: 10px;
    padding: 0; /* allineamento perfetto con banner */
    align-items: start; /* le card partono sempre dall'alto */
    justify-items: stretch; /* stessa larghezza per colonna */
}

/* Singola card podcast */
.podcast-card {
    background-color: #f1f3f4;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    text-align: center;
    transition: transform 0.15s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* contenuto allineato in alto */
    height: 100%; /* uniforma le altezze */
}

.podcast-card img {
    cursor: pointer;
}

.podcast-card:hover {
    transform: scale(1.02);
}

/* Contenitore del player */
.audio-wrapper {
    // width: 100%;
    background-color: #000000;
    border-radius: 0 0 10px 10px; /* angoli inferiori arrotondati */
    overflow: hidden;              /* fa rispettare il border-radius */
    margin-top: auto;              /* spinge il player in basso se le card hanno altezza diversa */
}

/* Player audio */
.audio-wrapper audio {
    width: 100%;
    display: block;
    border: none;
    outline: none;
    background-color: #fff; /* facoltativo, se vuoi eliminare eventuali sfondi grigi */
    background-color: #f1f3f4;
}



.podcast-card audio {
    width: 100%;
    display: block;
    // margin-top: 10px;
    // border: none;            /* rimuove eventuali bordi nativi */
    border-radius: 0 0 10px 10px;
    overflow: hidden;        /* necessario affinché i controlli rispettino i bordi */
}



/* Immagine */
.bordered {
    width: 100%;
    height: auto;
    border-radius: 10px 10px 0 0;
    display: block;
}

/* Titoli e date */
.podcast-card p {
    margin: 8px;
    font-size: 14px;
}

.podcast-card a {
    text-decoration: none;
    color: #0000CC;
}

.podcast-card a:hover {
    text-decoration: underline;
}

.data {
    color: #555;
    font-size: 13px;
}

/* Sezione finale */
.info-section {
    text-align: center;
    margin-top: 30px;
    font-size: 14px;
    color: #333;
}

.info-section a {
    color: #0000CC;
    text-decoration: none;
}

.info-section a:hover {
    text-decoration: underline;
}

.info-section img {
    margin-top: 10px;
}

.rss-info {
    margin-top: 20px;
    font-weight: bold;
}

.home-link {
    margin-top: 30px;
}


.logo-container {
    display: flex;
    justify-content: center; /* Centra orizzontalmente */
    align-items: center; /* Centra verticalmente */
    padding: 00px; /* Aggiungi un po' di spazio intorno, se necessario */
    /* background-color: #f9f9f9; /* Colore di sfondo (opzionale, commentare o eliminare per trasparente!) */
}

.logo-link {
  	display: block; /* Assicura che l'elemento sia trattato come blocco */
  	width: 110px; /* Larghezza desiderata del logo */
  	height: 90px; /* Altezza desiderata del logo */
  	background-image: url("https://www.digitanto.it/JPG/grafica/Logo.png"); /* Immagine del logo */
  	background-size: contain; /* Scala l'immagine mantenendo le proporzioni */
  	background-repeat: no-repeat; /* Evita ripetizioni */
  	background-position: center; /* Centra l'immagine */
	filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.4)); /* Effetto ombra */
  	text-decoration: none; /* Rimuove la sottolineatura del link */
}

/* Responsività */
@media (max-width: 600px) {
    .podcast-grid {
        /*  grid-template-columns: 1fr; /*    */
	    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
        /* gap: 10px; */
    }

    .banner {
    	margin: 0 0 10px 0;
    }
}