/* ============================================================================
   single-news.css — mediaset-distribution-new
   Dettaglio singola News — misure esatte dal CSS Figma fornito
   ============================================================================

   STRUTTURA:
   .news-detail-content   → contenitore: padding 60px 100px 100px 0 (standard sito), gap 50px
   .news-breadcrumb        → Home / Titolo, Geologica 300 14px
   .news-detail-info       → row, gap 50px: immagine (728x409.91px) + testo
   .news-detail-text       → column, gap 10px
   .news-detail-meta       → row space-between: tag canale + data
   .news-detail-title      → Geologica Cursive 700 28px
   .news-detail-body       → the_content(), Geologica 300 20px/24px
   Il carosello NEWS sotto riusa .home-section/.carousel-* da home.css
   ============================================================================ */

.news-detail-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Era 150px (stesso bug già corretto in Catalogue): ora 60px, standard del sito */
    padding: 60px 100px 100px 0;
    gap: 50px;
    width: 100%;
    box-sizing: border-box;
}

/* ─── BREADCRUMB ─────────────────────────────────────────────────────────── */
.news-breadcrumb {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.news-breadcrumb a,
.news-breadcrumb span {
    font-family: 'Geologica', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 17px;
    font-feature-settings: 'ss01' on;
    color: #323E48;
}

.news-breadcrumb a {
    text-decoration: none;
}

.news-breadcrumb a:hover {
    opacity: 0.7;
}

/* ─── BLOCCO INFO: immagine + testo ─────────────────────────────────────── */
.news-detail-info {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 50px;
    width: 100%;
    /* Riduce lo spazio dal breadcrumb (era 60px: 50px di gap + 10px del
       breadcrumb) a 30px, standard del sito */
    margin-top: -30px;
}

/* Dal Figma — immagine: 728x409.91px, border-radius 20px */
.news-detail-img {
    width: 728px;
    height: 410px;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    background-color: #e8e8e8;
    flex-shrink: 0;
}

.news-detail-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

/* Dal Figma — indicazioni: row space-between */
.news-detail-meta {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Dal Figma — TAG: Geologica 700 14px uppercase #2B75F5 */
.news-detail-tag {
    font-family: 'Geologica', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    text-transform: uppercase;
    color: #2B75F5;
}

/* Dal Figma — data: Geologica 700 14px uppercase rgba(50,62,72,0.5) */
.news-detail-date {
    font-family: 'Geologica', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    text-align: right;
    text-transform: uppercase;
    color: rgba(50, 62, 72, 0.5);
}

/* Dal Figma — titolo: Geologica Cursive 700 28px line-height 28px */
.news-detail-title {
    font-family: 'Geologica', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 28px;
    color: #323E48;
    margin: 0;
}

/* Dal Figma — testo: Geologica 300 20px line-height 24px, gap 15px tra paragrafi */
.news-detail-body {
    font-family: 'Geologica', sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 24px;
    font-feature-settings: 'ss01' on;
    color: #323E48;
    width: 100%;
}

.news-detail-body p {
    margin: 0 0 15px 0;
}

.news-detail-body p:last-child {
    margin-bottom: 0;
}

/* Dal Figma — eventuale separatore prima di una scheda tecnica scritta
   dall'editore dentro the_content() (es. con un blocco Separatore Gutenberg) */
.news-detail-body hr {
    border: none;
    border-top: 0.5px solid #323E48;
    margin: 10px 0;
}

/* Testo in grassetto dentro the_content() (es. "Genre: Comedy") */
.news-detail-body strong,
.news-detail-body b {
    font-family: 'Geologica', sans-serif;
    font-weight: 700;
}

/* ─── MEDIA QUERIES ──────────────────────────────────────────────────────── */
@media screen and (max-width: 1280px) {
    .news-detail-content {
        padding: 60px 60px 100px 0;
    }

    .news-detail-info {
        gap: 40px;
    }

    .news-detail-img {
        width: 500px;
        height: 281px;
    }
}

@media screen and (max-width: 1024px) {
    .news-detail-content {
        padding: 100px 60px 60px 0;
        gap: 40px;
    }

    .news-detail-info {
        flex-direction: column;
        gap: 30px;
    }

    .news-detail-img {
        width: 100%;
        height: 400px;
    }
}

@media screen and (max-width: 768px) {
    .news-detail-content {
        padding: 60px 16px 40px 0;
        gap: 30px;
    }

    .news-detail-img {
        height: 220px;
    }

    .news-detail-title {
        font-size: 22px;
        line-height: 26px;
    }

    .news-detail-body {
        font-size: 16px;
        line-height: 20px;
    }
}