.rotopress-container {
    /*background-color: #FFF;*/
    /*border-radius: 12px;*/
    /*padding: 16px 18px 18px;*/
    /*box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);*/
    /*border: 1px solid rgba(148, 163, 184, 0.4);*/
    /*max-width: 420px;*/
    width: 100%;
    position: relative;
}

.rotopress-title {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rotopress-title::before {
    content: "";
    width: 6px;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(180deg, #959B05, #7A8004);
}

.rotopress-wrapper {
    /* Usa aspect-ratio per scalare con la larghezza */
    aspect-ratio: 16 / 14;

    /* Opzionale: altezza minima per evitare che sia troppo bassa su mobile */
    /*height: min(100%, 45vh);*/

    /* Rimuovi height fissa: ora è gestita da aspect-ratio + max-height */
    /* rimuovi: height: {{ height }}px; */

    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;

    /* Centrato all'interno del padre (grazie a justify-content: center sul padre) */
    margin: auto; /* opzionale, ma aiuta in alcuni casi di overflow */
}

/* La lista occupa tutto lo spazio disponibile (scorrevole) */
.rotopress-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    overflow-y: auto;

    /* Nascondi scrollbar visivamente ma mantieni funzionalità */
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.rotopress-list::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.rotopress-pre-contentainer {
    justify-content: center;
}

/*.rotopress-wrapper {
    height: 340px;
    overflow: hidden;
    position: relative;
}

.rotopress-list {
    list-style: none;
    margin: 0;
    padding: 0;
}*/

.rotopress-item {
    padding: 4px 0;
}

.rotopress-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #111827;
    font-size: 0.9rem;
    line-height: 1.35;
    padding: 8px 12px;
    border-radius: 8px;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.rotopress-icon svg {
    flex-shrink: 0;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.rotopress-date {
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6B7280;
    flex-shrink: 0;
}

.rotopress-separator {
    color: #D1D5DB;
    flex-shrink: 0;
}

.rotopress-text {
    color: #111827;
    font-weight: 500;
}

.rotopress-link:hover,
.rotopress-link:focus-visible {
    background-color: rgba(149, 155, 5, 0.08);
    color: #111827;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}

.rotopress-link:hover .rotopress-date,
.rotopress-link:focus-visible .rotopress-date {
    color: #959B05;
}

.rotopress-link:hover .rotopress-icon svg,
.rotopress-link:focus-visible .rotopress-icon svg {
    opacity: 1;
}

.rotopress-wrapper::-webkit-scrollbar {
    width: 0;
    height: 0;
}

@media (max-width: 1023px) {
  .rotopress-wrapper {
    /* Forza 100% della larghezza del contenitore padre */
    width: 100% !important;
    max-width: none !important;
    
    /* Usa aspect-ratio fluido (opzionale: cambiabile) */
    aspect-ratio: auto;
    
    /* Limita altezza max per evitare che occupi tutto lo schermo */
    max-height: 40vh;
    
    /* Centrato grazie a justify-center sul padre */
  }

  /* Assicura che il contenitore padre abbia altezza flessibile */
  .rotopress-pre-contentainer {
    height: auto;
    min-height: 200px; /* evita che collassi a 0 */
  }
}

/* --- Desktop: mantieni il layout originale (se visibile) --- */
@media (min-width: 1024px) {
  .n7-card__image {
    display: block !important;
  }

  .rotopress-container {
    /*max-width: 58%;*/
  }

  /* Se vuoi che il Rotopress prenda tutta l’altezza disponibile su desktop */
  /* .rotopress-wrapper { height: 100%; } */
}

/* Mobile/Tablet: forza full-width */
/*@media (max-width: 1023px) {
  .item-list li {
    max-width: none !important;
    flex-basis: 100% !important;
  }

   Assicura che l’article non sia limitato 
  .item-list li .n7-card {
    width: 100%;
    max-width: none;
  }
}

 Desktop: usa le regole originarie (opzionale) 
@media (min-width: 640px) {
  .item-list li {
    flex-basis: 50%;
  }
}
@media (min-width: 1280px) {
  .item-list li {
    flex-basis: 22%;
  }
}*/