/*--------------------------------------------------------------
# Stili Generali per il Plugin Multisite Content Aggregator
--------------------------------------------------------------*/

/* ============================================================
   Contenitore dell'immagine (per aspect-ratio e object-fit)
   ============================================================ */

   .mca-image-container {
    position: relative; /* Necessario per il posizionamento assoluto dell'immagine */
    width: 100%;       /* Occupa tutta la larghezza disponibile */
    aspect-ratio: 16 / 9; /* CAMBIA QUESTO VALORE per il rapporto di aspetto desiderato (es: 4/3, 1/1) */
    /* padding-top: 56.25%;  <-- Usa questo se preferisci il padding hack (per aspect-ratio 16/9) */
    overflow: hidden;     /* Nascondi l'eventuale overflow dell'immagine */
    margin-bottom: 15px; /* Aggiunge spazio sotto l'immagine */
}

.mca-image-container img {
    position: absolute; /* Posiziona l'immagine assolutamente all'interno del contenitore */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Ridimensiona e ritaglia per coprire, mantenendo le proporzioni */
    object-position: center; /* Centra l'immagine */
    display: block;     /* Rimuove lo spazio sotto l'immagine (importante) */
}


/* ============================================================
    Stili Generali per il Contenuto del Post
   ============================================================ */
.mca-post {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    padding: 15px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out; /* Effetto di ingrandimento (opzionale) */
    height: 100%; /* Importante per far funzionare flexbox correttamente */
}

.mca-post:hover {
    transform: scale(1.03); /* Ingrandisci leggermente al passaggio del mouse (opzionale) */
}

.mca-post-content {
    flex-grow: 1; /* Fa sì che il contenuto occupi lo spazio rimanente nello slide */
    text-align: left; /* Allinea il testo a SINISTRA */
}

.mca-post h3 {
    font-size: 1.2em;
    margin-bottom: 5px;
    /* margin-top: 15px; Potresti usare questo invece del margin-bottom sull'immagine */
}

.mca-post p {
    font-size: 0.9em;
    line-height: 1.4;
    margin-bottom: 10px;
    color: #555;
}

.mca-post-bottom {
    margin-top: auto; /* Spinge il contenuto in basso */
}

.mca-post a {
    text-decoration: none;
    color: #007bff; /* Colore del link (blu) */
    font-weight: bold;
}

.mca-post a:hover {
    text-decoration: underline;
}

.mca-post-site-name {
    font-size: 0.8em;
    margin-top: auto; /* Spinge in basso il nome del sito */
    color: #777;
}


/* ============================================================
    Stili Specifici per la Modalità Carosello (Swiper)
   ============================================================ */

.swiper-container {
    width: 100%;
    max-width: 1200px; /* Larghezza massima del carosello (opzionale) */
    margin: 0 auto;  /* Centra il carosello orizzontalmente */
}

/* Stili per i singoli slide *NON* usare height qui */
.swiper-slide {
     display: flex;        /* Usa Flexbox per il layout */
    flex-direction: column; /* Impila gli elementi verticalmente */
    /* height: auto;  <-- Assicurati che NON ci sia un'altezza fissa qui */
}


/* Frecce di Navigazione Personalizzate (Font Awesome) */
.swiper-button-next,
.swiper-button-prev {
    display: none; /* Nascondi le frecce predefinite di Swiper */
}

/* Stili per le frecce personalizzate */
.swiper-button-next::after,
.swiper-button-prev::after {
    display: block; /* Importante */
    font-family: "Font Awesome 6 Free"; /* Assicurati che il nome del font sia corretto */
    font-weight: 900;  /* Font Awesome 6 Free - 900 è 'solid' */
    content: "\f061"; /* Freccia destra - CAMBIA se usi un'altra icona */
    background: #007bff;  /* Sfondo blu */
    padding: 20px 25px;    /* Padding */
    border-radius: 50px;  /* Bordi arrotondati */
    color: #fff;          /* Testo bianco */
    font-size: 19px;       /* Dimensione del font */
    line-height: 1;     /* Importante per centrare verticalmente l'icona con il padding */

}

.swiper-button-prev::after { /* Stili specifici per la freccia sinistra */
    content: "\f060"; /* Freccia sinistra */
}
/* Stili al passaggio del mouse (opzionale) */
.swiper-button-next:hover::after,
.swiper-button-prev:hover::after {
    color: #fff; /* Colore al passaggio del mouse */
    background-color: #0056b3;
}
/* Centrare verticalmente le frecce */
.swiper-container {
  position: relative; /* Importante per il posizionamento assoluto */
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute; /* Posizionamento assoluto */
    top: 50%;          /* Centratura verticale */
    transform: translateY(-50%); /* Centratura verticale precisa */
    z-index: 10;      /* Assicurati che siano sopra il contenuto */
    width:auto; /*Larghezza - Rimossa per usare il padding*/
    height: auto; /*Altezza -  Rimossa per usare il padding*/
    display: flex; /*Centratura icone*/
    justify-content: center;
    align-items: center;
}

.swiper-button-next{
    right: 10px; /* Sposta la freccia destra a destra */

}
.swiper-button-prev{
    left: 10px; /* Sposta la freccia sinistra a sinistra */
}


/* ============================================================
    Stili Specifici per la Modalità Griglia
   ============================================================ */

.mca-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Colonne responsive */
    gap: 20px; /* Spazio tra gli elementi */
    max-width: 1200px; /* Larghezza massima della griglia */
    margin: 0 auto; /* Centra la griglia */
}