@import url("variables.css");

/* ============================================== */
/* FONT E ICONE                                   */
/* ============================================== */
.material-symbols-outlined {
  font-variation-settings: "FILL" 0,
    /* Per le stelle e altre icone 'piene' useremo FILL: 1 */ "wght" 400,
    "GRAD" 0, "opsz" 24;
  font-size: 20px;
}

.material-symbols-outlined.fill {
  font-variation-settings: "FILL" 1;
  color: gold !important;
  /* Stella piena color oro */
}

/* ============================================== */
/* GRIGLIA GENERALE E CARD                        */
/* ============================================== */

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
  gap: 20px;
}

.article-card {
  /* Modificato a 3 righe: Top (30px), Contenuto (120px), Bottom (30px) */
  display: grid;
  grid-template-columns: 30px 150px 1fr 60px;
  /* Azioni | Immagine | Contenuto | Statistiche */
  grid-template-rows: 30px 120px 30px;
  /* Top Bar | Contenuto Principale | Bottom Bar */

  /* Assegnazione aree */
  grid-template-areas:
    "top-bar top-bar top-bar top-bar"
    /* 1. TOP BAR (intera riga) */
    "actions image content stats"
    /* 2. CONTENUTO PRINCIPALE (4 colonne) */
    "bottom-bar bottom-bar bottom-bar bottom-bar";
  /* 3. BOTTOM BAR (intera riga) */

  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  height: 180px;
  /* Altezza fissa (30px + 120px + 30px = 180px) */
}

/* ============================================== */
/* A. BARRA SUPERIORE (Autore/Data)               */
/* ============================================== */

.card-top-bar {
  grid-area: top-bar;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  background-color: #666;
  border-bottom: 1px solid #eee;
  font-size: 0.8em;
  color: white;
}

.author-name,
.publish-date {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ============================================== */
/* B. BARRA AZIONI SINISTRA (Stella/Condivisione) */
/* ============================================== */

.card-left-actions-vertical {
  grid-area: actions;
  display: flex;
  flex-direction: column;
  /* CAMBIAMENTO: Centra verticalmente gli elementi nello spazio disponibile */
  justify-content: center;
  align-items: center;

  padding: 0;
  /* Rimuovi padding-top se lo avevi */
  background-color: #fafafa;
  border-right: 1px solid #eee;
  color: #999;
}

.action-item {
  display: flex;
  /* Rendi l'elemento flessibile */
  flex-direction: column;
  /* Allinea l'icona e il potenziale testo in colonna */
  align-items: center;
  padding: 8px 0;
  /* Aggiungi un po' di spazio verticale */
  cursor: pointer;
}

.action-star .material-symbols-outlined {
  /* Stelle vuote (star_border) più scure */
  color: #999;
  font-size: 22px;
  /* Opzionale: assicura dimensione uniforme */
}

/* ============================================== */
/* C. IMMAGINE (A sinistra del contenuto)         */
/* ============================================== */

.card-left-image {
  grid-area: image;
  overflow: hidden;
}

.card-left-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================== */
/* D. CONTENUTO PRINCIPALE (Titolo/Sottotitolo/Target) */
/* ============================================== */

.card-right-content {
  grid-area: content;
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  /* La barra target è stata rimossa da qui */
}

.card-details {
  flex-grow: 1;
  overflow: hidden;
  margin-bottom: 5px;
  /* Spazio prima della barra target */
}

.card-title {
  font-size: 1.1em;
  font-weight: bold;
  color: #333;
  margin: 0 0 5px 0;
  line-height: 1.2;
}

.card-subtitle {
  font-size: 0.85em;
  color: #666;
  margin: 0;
}

.target-icon {
  font-size: 22px;
}

/* ============================================== */
/* E. BARRA STATISTICHE DESTRA (Letture/Commenti) */
/* ============================================== */

.card-right-stats-vertical {
  grid-area: stats;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  /* Distribuisce lo spazio uniformemente */
  align-items: center;
  /* Rimuovi 'gap: 10px;' */
  border-left: 1px solid #ccc;
  background-color: #fafafa;
}

.stat-item {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  font-size: 0.8em;
  color: var(--blu);
}

.stat-number {
  font-weight: bold;
  margin-top: -5px;
}

/* ============================================== */
/* F. BARRA INFERIORE (Target)              */
/* ============================================== */

.card-bottom-bar {
  grid-area: bottom-bar;
  display: flex;
  align-items: center;
  /* --- MODIFICA QUI: Centra orizzontalmente gli elementi --- */
  justify-content: center;
  /* --------------------------------------------------------- */
  padding: 0 15px;
  /* Mantieni il padding per un po' di spazio ai lati */
  gap: 10px;
  background-color: #f8f8f8;
  border-top: 1px solid #eee;
}

/* ... (Il resto degli stili rimane invariato) ... */

/* Le icone Target usano lo stesso stile di prima */
.target-icon {
  font-size: 22px;
}

.hero-cartellone {
  max-width: 1100px;
  margin: 0 auto 24px auto;
  position: relative;
  overflow: hidden;
  border-radius: 12px;

  /* Rimuovi o commenta l'altezza fissa */
  /* height: 260px; */ 
  height: auto; /* Permette al contenuto (l'immagine) di definire l'altezza */
  min-height: 260px; /* (Opzionale) Se vuoi un'altezza minima */
  
  background: #0000000d;
}

/* Lascia invariato:
.hero-cartellone-media {
  ...
  object-fit: contain; 
  ...
} 
*/

/* Track e slide */

.hero-cartellone-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease-in-out;
  position: relative;
  z-index: 1; /* sotto le frecce */
}

.hero-cartellone-slide {
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center; /* centro verticale */
  justify-content: center; /* centro orizzontale */
}

/* Immagini / video: SEMPRE interi, non tagliati */

.hero-cartellone-media {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain !important; /* <<< niente taglio */
  object-position: center;
  display: block;
}

.hero-cartellone-slide video.hero-cartellone-media {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Pallini di navigazione */

.hero-cartellone-dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}

.hero-cartellone-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.hero-cartellone-dot.is-active {
  background: rgba(0, 0, 0, 0.8);
}

/* Frecce laterali */

.hero-cartellone-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  z-index: 3; /* <<< le frecce stanno SOPRA tutto */
}

.hero-cartellone-arrow .material-symbols-outlined {
  font-size: 20px;
}

.hero-cartellone-prev {
  left: 8px;
}

.hero-cartellone-next {
  right: 8px;
}

.hero-cartellone-arrow:hover {
  background: rgba(0, 0, 0, 0.55);
}