.leggi-anche {
    --leggi-anche-accent: #f15327;
    --leggi-anche-border: #d8d8d5;
    --leggi-anche-text: #101010;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 24px 0 !important;
    padding: 6px 0 24px !important;
    border: 0 !important;
    border-top: 1px solid var(--leggi-anche-border) !important;
    border-bottom: 1px solid var(--leggi-anche-border) !important;
    background: #fff !important;
    color: var(--leggi-anche-text) !important;
    font-family: "Open Sans", Arial, sans-serif !important;
    line-height: normal !important;
}

.leggi-anche,
.leggi-anche * {
    box-sizing: border-box !important;
}

/* Reset di sicurezza: se un filtro non previsto dovesse ancora infilare un
   <p> vuoto o non vuoto dentro il componente, non deve aggiungere spazio
   (causa nota dello spazio in eccesso prima del separatore grigio). */
.leggi-anche p {
    margin: 0 !important;
    padding: 0 !important;
}

.leggi-anche p:empty {
    display: none !important;
}

.leggi-anche__toolbar {
    display: grid !important;
    grid-template-columns: 40px max-content !important;
    gap: 14px !important;
    align-items: center !important;
    height: 32px !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
}

.leggi-anche__toolbar::before {
    content: "" !important;
    width: 40px !important;
    height: 2px !important;
    background: var(--leggi-anche-accent) !important;
}

.leggi-anche__heading {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--leggi-anche-text) !important;
    font-family: "Open Sans Condensed", "Arial Narrow", sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 21px !important;
    text-transform: none !important;
}

.leggi-anche__viewport {
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.leggi-anche__track {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.leggi-anche__item.swiper-slide {
    /* Combinare le due classi alza la specificità sopra la regola generica
       .swiper-slide{width:100%} della libreria (vedi anche
       pc-latest-news-slider.php per lo stesso accorgimento). */
    width: calc((100% - 1.8px) / 1.15) !important;
    margin-right: 12px !important;
    padding: 0 !important;
}

@media (min-width: 768px) {
    .leggi-anche__item.swiper-slide {
        /* Corpo articolo desktop max 666.66px: 2 card leggibili più un
           accenno della terza (slidesPerView:2.2 in leggi-anche-init.js),
           per far intuire che si può scorrere oltre. */
        width: calc((100% - 16px * 1.2) / 2.2) !important;
        margin-right: 16px !important;
    }
}

/* Card: contenitore posizionato, il link cliccabile è un overlay separato
   (vedi .leggi-anche__overlay-link) così figura e titolo restano elementi
   di blocco "normali", senza un <a> che li avvolge. */
.leggi-anche__card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 83px minmax(0, 1fr) !important;
    column-gap: 16px !important;
    align-items: center !important;
    min-height: 104px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.leggi-anche__overlay-link {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: transparent !important;
    text-decoration: none !important;
    background: transparent !important;
}

.leggi-anche__overlay-link:focus-visible {
    outline: 2px solid var(--leggi-anche-accent) !important;
    outline-offset: 3px !important;
}

.leggi-anche__figure {
    align-self: start !important;
    width: 83px !important;
    height: 104px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    background: #ececea !important;
}

.leggi-anche__image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: cover !important;
    transition: transform 180ms ease !important;
}

.leggi-anche__card:hover .leggi-anche__image {
    transform: scale(1.035) !important;
}

.leggi-anche__item-title {
    display: -webkit-box !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--leggi-anche-text) !important;
    font-family: "Open Sans Condensed", "Arial Narrow", sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 17px !important;
    text-transform: none !important;
    -webkit-line-clamp: 5 !important;
    -webkit-box-orient: vertical !important;
}

.leggi-anche__button {
    position: absolute !important;
    z-index: 2 !important;
    top: 6px !important;
    display: grid !important;
    box-sizing: border-box !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--leggi-anche-accent) !important;
    color: #fff !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

.leggi-anche__button--previous {
    right: 40px !important;
}

.leggi-anche__button--next {
    right: 0 !important;
}

.leggi-anche__button:disabled,
.leggi-anche__button.swiper-button-disabled {
    visibility: hidden !important;
    pointer-events: none !important;
}

.leggi-anche__button:focus-visible {
    outline: 2px solid var(--leggi-anche-text) !important;
    outline-offset: 2px !important;
}

.leggi-anche__button svg {
    display: block !important;
    box-sizing: border-box !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    stroke-width: 1.7 !important;
}

@media (max-width: 767px) {
    .leggi-anche {
        padding-bottom: 16px !important;
    }

    .leggi-anche__button {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .leggi-anche__image {
        transition: none !important;
    }
}

/* Solo editor: mockup statico, non l'HTML reale (vedi index.js sul perché). */
.leggi-anche-block-editor-preview {
    border: 1px dashed #ccc !important;
    border-radius: 6px !important;
    padding: 16px !important;
    background: #fafafa !important;
}

.leggi-anche-block-editor-mock {
    padding: 6px 0 16px !important;
    border-top: 1px solid #d8d8d5 !important;
    border-bottom: 1px solid #d8d8d5 !important;
    background: #fff !important;
    font-family: "Open Sans", Arial, sans-serif !important;
}

.leggi-anche-block-editor-mock-heading {
    position: relative !important;
    margin: 0 0 16px !important;
    padding: 0 0 0 54px !important;
    color: #101010 !important;
    font-family: "Open Sans Condensed", "Arial Narrow", sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 32px !important;
}

.leggi-anche-block-editor-mock-heading::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 15px !important;
    width: 40px !important;
    height: 2px !important;
    background: #f15327 !important;
}

.leggi-anche-block-editor-mock-cards {
    display: flex !important;
    gap: 16px !important;
}

.leggi-anche-block-editor-mock-card {
    display: grid !important;
    grid-template-columns: 60px 1fr !important;
    gap: 10px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

.leggi-anche-block-editor-mock-thumb {
    width: 60px !important;
    height: 76px !important;
    border-radius: 6px !important;
    background: #ececea !important;
}

.leggi-anche-block-editor-mock-title {
    align-self: start !important;
    height: 34px !important;
    margin-top: 4px !important;
    border-radius: 3px !important;
    background: #e2e2e0 !important;
}

.leggi-anche-block-editor-note {
    margin: 10px 0 0 !important;
    color: #757575 !important;
    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 12px !important;
    font-style: italic !important;
}
