/* ==========================================================
   e3pr0m-insights.css
   Layout ispirato a thenoomo.com — sezione "Our Insights"
   ========================================================== */

/* ----------------------------------------------------------
   Variabili CSS
---------------------------------------------------------- */
:root {
    --ni-font:          'Inter', 'Helvetica Neue', Arial, sans-serif;
    --ni-color-text:    #333333;
    --ni-color-muted:   #888888;
    --ni-color-accent:  #000000;   /* sovrascrivibile via campo ACF */
    --ni-color-bg:      transparent;
    --ni-color-link:    #000000;
    --ni-color-divider: #e0e0e0;

    --ni-thumb-w:       336px;
    --ni-thumb-h:       190px;
    --ni-gap:           32px;
    --ni-radius:        0px;
    --ni-transition:    0.3s ease;

    --ni-title-size:    clamp(28px, 4vw, 40px);
    --ni-card-title:    clamp(16px, 2vw, 20px);
    --ni-category-size: 12px;
    --ni-excerpt-size:  14px;
}

/* ----------------------------------------------------------
   Sezione wrapper
---------------------------------------------------------- */
.ni-section {
    font-family:  var(--ni-font);
    color:        var(--ni-color-text);
    max-width:    1140px;
    margin-inline: auto;
    padding:      0 24px;
    box-sizing:   border-box;
}

/* ----------------------------------------------------------
   Header (titolo + link "more insights")
---------------------------------------------------------- */
.ni-section__header {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             12px;
    padding-bottom:  20px;
}

.ni-section__title {
    font-size:   var(--ni-title-size);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin:      0;
    color:       var(--ni-color-text);
}

.ni-section__more {
    font-size:       13px;
    font-weight:     500;
    letter-spacing:  0.04em;
    text-transform:  uppercase;
    color:           var(--ni-color-link);
    text-decoration: none;
    border-bottom:   1px solid currentColor;
    padding-bottom:  1px;
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    transition:      opacity var(--ni-transition);
}

.ni-section__more:hover {
    opacity: 0.6;
}

.ni-section__more-arrow {
    display:    inline-block;
    transition: transform var(--ni-transition);
}

.ni-section__more:hover .ni-section__more-arrow {
    transform: translateX(4px);
}

/* Linea divisoria */
.ni-section__divider {
    height:           1px;
    background-color: var(--ni-color-divider);
    margin-bottom:    0;
}

/* ----------------------------------------------------------
   Lista card
---------------------------------------------------------- */
.ni-list {
    display:        flex;
    flex-direction: column;
}

/* ----------------------------------------------------------
   Singola card
---------------------------------------------------------- */
.ni-card {
    --ni-accent: var(--ni-color-accent); /* sovrascritta da stile inline */
    border-top:  1px solid var(--ni-color-divider);
    padding:     28px 0;
    position:    relative;
}

.ni-card:last-child {
    border-bottom: 1px solid var(--ni-color-divider);
}

/* Riga cliccabile */
.ni-card__link {
    display:         flex;
    flex-direction:  row;
    align-items:     flex-start;
    gap:             var(--ni-gap);
    text-decoration: none;
    color:           inherit;
    transition:      opacity var(--ni-transition);
}

.ni-card__link:hover {
    /* opacity gestita dal JS image-reveal */
}

/* Thumbnail */
.ni-card__image-wrap {
    flex-shrink:    0;
    width:          var(--ni-thumb-w);
    height:         var(--ni-thumb-h);          /* altezza di partenza (crop) */
    overflow:       hidden;
    border-radius:  var(--ni-radius);
    background:     #f0f0f0;
    transition:     height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    border-radius 0.5s ease;
}

/* Al hover la height viene impostata via JS sul valore naturale dell'immagine */
.ni-card__image-wrap.is-expanded {
    border-radius: 2px;     /* leggero arrotondamento quando aperta */
}

.ni-card__image {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
    transition:  height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                 transform 0.5s ease;
    will-change: height, transform;
}

/* Quando il wrap si espande, l'immagine torna al suo aspect-ratio naturale */
.ni-card__image-wrap.is-expanded .ni-card__image {
    height: auto;       /* segue l'altezza naturale */
    transform: none;
}

/* Body testuale */
.ni-card__body {
    flex:           1;
    display:        flex;
    flex-direction: column;
    justify-content: center;
    gap:            10px;
    min-width:      0;
}

/* Categoria */
.ni-card__category {
    font-size:      var(--ni-category-size);
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--ni-color-muted);
    display:        block;
}

/* Titolo */
.ni-card__title {
    font-size:      var(--ni-card-title);
    font-weight:    700;
    line-height:    1.3;
    letter-spacing: -0.01em;
    margin:         0;
    color:          var(--ni-color-text);
}

/* Excerpt */
.ni-card__excerpt {
    font-size:   var(--ni-excerpt-size);
    line-height: 1.6;
    color:       var(--ni-color-muted);
    margin:      0;

    /* Tronca a 3 righe */
    display:            -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* Meta (read time + freccia) */
.ni-card__meta {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin-top:  4px;
}

.ni-card__read-time {
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--ni-color-muted);
}

.ni-card__arrow {
    font-size:  16px;
    color:      var(--ni-accent);
    display:    inline-block;
    transition: transform var(--ni-transition);
    margin-left: auto;
}

.ni-card__link:hover .ni-card__arrow {
    transform: translateX(6px);
}

/* ----------------------------------------------------------
   Stato vuoto
---------------------------------------------------------- */
.ni-empty {
    color:      var(--ni-color-muted);
    font-style: italic;
    text-align: center;
    padding:    40px 0;
}

/* ==========================================================
   SINGLE INSIGHT PAGE
   ========================================================== */

/* ----------------------------------------------------------
   Variabili aggiuntive per la singola pagina
---------------------------------------------------------- */
:root {
    --ni-single-max-w:      900px;
    --ni-single-title-size: clamp(32px, 5vw, 56px);
    --ni-single-body-size:  16px;
    --ni-single-body-line:  1.75;
    --ni-tag-color:         #969494;
    --ni-tag-size:          13px;
}

/* ----------------------------------------------------------
   Article wrapper
---------------------------------------------------------- */
.ni-single {
    font-family: var(--ni-font);
    color:       var(--ni-color-text);
}

/* ----------------------------------------------------------
   Header articolo
---------------------------------------------------------- */
.ni-single__header {
    padding: 60px 24px 40px;
}

.ni-single__header-inner {
    max-width:     var(--ni-single-max-w);
    margin-inline: auto;
}

/* Breadcrumb */
.ni-single__breadcrumb {
    font-size:   12px;
    color:       var(--ni-tag-color);
    margin-bottom: 20px;
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
}

.ni-single__breadcrumb a {
    color:           inherit;
    text-decoration: none;
    border-bottom:   1px solid transparent;
    transition:      border-color var(--ni-transition);
}

.ni-single__breadcrumb a:hover {
    border-bottom-color: currentColor;
}

/* Titolo H1 */
.ni-single__title {
    font-size:      var(--ni-single-title-size);
    font-weight:    400;          /* Noomo usa weight 400 per i titoli articolo */
    line-height:    1.1;
    letter-spacing: -0.02em;
    margin:         0 0 24px;
    color:          var(--ni-color-text);
}

/* Meta bar (tag · data · read time) */
.ni-single__meta {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         8px;
    font-size:   var(--ni-tag-size);
    color:       var(--ni-tag-color);
}

.ni-single__tag {
    font-weight:     500;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    color:           var(--ni-tag-color);
    text-decoration: none;
    transition:      color var(--ni-transition);
}

.ni-single__tag:hover {
    color: var(--ni-color-text);
}

.ni-single__meta-sep {
    opacity: .4;
}

.ni-single__date,
.ni-single__read-time {
    color: var(--ni-tag-color);
}

/* ----------------------------------------------------------
   Hero image
---------------------------------------------------------- */
.ni-single__hero {
    padding: 0 24px 48px;
}

.ni-single__hero-inner {
    max-width:     var(--ni-single-max-w);
    margin-inline: auto;
    overflow:      hidden;
    border-radius: var(--ni-radius);
    background:    #f0f0f0;
    aspect-ratio:  16 / 9;
}

.ni-single__hero-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* ----------------------------------------------------------
   Corpo articolo (richtext)
---------------------------------------------------------- */
.ni-single__content-wrap {
    padding: 0 24px 64px;
}

.ni-single__content {
    max-width:     var(--ni-single-max-w);
    margin-inline: auto;
}

/* Tipografia richtext */
.ni-richtext {
    font-size:   var(--ni-single-body-size);
    line-height: var(--ni-single-body-line);
    color:       var(--ni-color-text);
}

.ni-richtext h2 {
    font-size:   clamp(22px, 3vw, 30px);
    font-weight: 700;
    margin:      2em 0 0.6em;
    line-height: 1.2;
}

.ni-richtext h3 {
    font-size:   clamp(18px, 2.5vw, 22px);
    font-weight: 700;
    margin:      1.8em 0 0.5em;
    line-height: 1.3;
}

.ni-richtext p {
    margin: 0 0 1.4em;
}

.ni-richtext a {
    color:      var(--ni-color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ni-richtext ul,
.ni-richtext ol {
    margin:      0 0 1.4em 1.5em;
    padding:     0;
}

.ni-richtext li {
    margin-bottom: .4em;
}

.ni-richtext blockquote {
    border-left: 3px solid var(--ni-color-accent);
    margin:      1.8em 0;
    padding:     0.8em 1.4em;
    font-style:  italic;
    color:       var(--ni-color-muted);
}

.ni-richtext img {
    max-width:     100%;
    height:        auto;
    display:       block;
    margin:        2em auto;
    border-radius: var(--ni-radius);
}

.ni-richtext figure {
    margin: 2em 0;
}

.ni-richtext figcaption {
    font-size:  12px;
    color:      var(--ni-color-muted);
    text-align: center;
    margin-top: 8px;
}

.ni-richtext code {
    font-size:        .88em;
    background:       #f4f4f4;
    padding:          2px 6px;
    border-radius:    4px;
    font-family:      'Fira Code', 'Courier New', monospace;
}

.ni-richtext pre {
    background:    #f4f4f4;
    padding:       20px;
    overflow-x:    auto;
    border-radius: 6px;
    margin:        1.8em 0;
}

.ni-richtext hr {
    border:     none;
    border-top: 1px solid var(--ni-color-divider);
    margin:     2.5em 0;
}

/* ----------------------------------------------------------
   Share block
---------------------------------------------------------- */
.ni-single__share-wrap {
    padding:       0 24px 80px;
    border-top:    1px solid var(--ni-color-divider);
    margin-top:    0;
}

.ni-single__share {
    max-width:     var(--ni-single-max-w);
    margin-inline: auto;
    padding-top:   28px;
    display:       flex;
    align-items:   center;
    flex-wrap:     wrap;
    gap:           12px;
}

.ni-single__share-label {
    font-size:      12px;
    font-weight:    600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--ni-color-muted);
    margin-right:   4px;
}

.ni-single__share-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             7px;
    font-family:     var(--ni-font);
    font-size:       13px;
    font-weight:     500;
    color:           var(--ni-color-text);
    background:      transparent;
    border:          1px solid var(--ni-color-divider);
    border-radius:   100px;
    padding:         7px 16px;
    cursor:          pointer;
    text-decoration: none;
    transition:      background var(--ni-transition), color var(--ni-transition), border-color var(--ni-transition);
    line-height:     1;
}

.ni-single__share-btn:hover {
    background:    var(--ni-color-text);
    color:         #fff;
    border-color:  var(--ni-color-text);
}

/* Feedback "Copied!" */
.ni-single__share-btn--copy.is-copied {
    background:   #1a7a4a;
    color:        #fff;
    border-color: #1a7a4a;
}

/* ----------------------------------------------------------
   Related articles
---------------------------------------------------------- */
.ni-related {
    background: #f8f8f8;
    padding:    64px 24px;
}

.ni-related__inner {
    max-width:     1140px;
    margin-inline: auto;
}

.ni-related__header {
    margin-bottom: 36px;
}

.ni-related__title {
    font-size:   clamp(22px, 3vw, 32px);
    font-weight: 700;
    margin:      0;
}

/* Grid 3 colonne */
.ni-related__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   28px;
}

/* Card correlata */
.ni-related__card {
    text-decoration: none;
    color:           inherit;
    display:         flex;
    flex-direction:  column;
    gap:             14px;
    transition:      opacity var(--ni-transition);
}

.ni-related__card:hover {
    opacity: .8;
}

.ni-related__img-wrap {
    width:         100%;
    aspect-ratio:  16 / 9;
    overflow:      hidden;
    border-radius: var(--ni-radius);
    background:    #e8e8e8;
}

.ni-related__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .5s ease;
}

.ni-related__card:hover .ni-related__img {
    transform: scale(1.04);
}

.ni-related__card-meta {
    font-size:      11px;
    font-weight:    500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:          var(--ni-tag-color);
}

.ni-related__card-title {
    font-size:   15px;
    font-weight: 600;
    line-height: 1.4;
    margin:      0;
    color:       var(--ni-color-text);
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

/* Tablet: immagine più piccola */
@media (max-width: 900px) {
    :root {
        --ni-thumb-w: 240px;
        --ni-thumb-h: 150px;
        --ni-gap:     20px;
    }
}

/* Mobile: card verticale (immagine sopra, testo sotto) */
@media (max-width: 600px) {
    .ni-card__link {
        flex-direction: column;
    }

    .ni-card__image-wrap {
        width:  100%;
        height: 200px;
    }

    .ni-section__header {
        flex-direction: column;
        align-items:    flex-start;
    }
}

/* Related: 2 colonne su tablet */
@media (max-width: 900px) {
    .ni-related__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Related: 1 colonna + semplificazioni su mobile */
@media (max-width: 600px) {
    .ni-related__grid {
        grid-template-columns: 1fr;
    }

    .ni-single__header {
        padding-top: 36px;
    }

    .ni-single__share-btn span {
        display: none;
    }

    .ni-single__share-btn {
        padding: 8px 10px;
    }
}