/* ============================================================
   STYLE-BLOG.CSS
   Foglio di stile dedicato alle pagine del blog
   (es. /viaggio-in-peru-blog-2026.php e archivi per anno)
   Riutilizza le variabili CSS globali definite in style.css
   ============================================================ */

/* ---------- Intro / testata elenco articoli ---------- */
.blog-intro {
    background: var(--cream);
    padding-bottom: 8px;
}

/* ---------- Elenco articoli (righe editoriali alternate) ---------- */
.blog-list {
    padding: 8px 0 90px;
    background: var(--cream);
}

.blog-row {
    display: flex;
    align-items: stretch;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    margin-bottom: 40px;
}

    .blog-row:last-child {
        margin-bottom: 0;
    }

    .blog-row.is-reversed .blog-img {
        order: 2;
    }

    .blog-row.is-reversed .blog-text {
        order: 1;
    }

.blog-img {
    position: relative;
    flex: 0 0 38%;
}

    .blog-img img {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 260px;
        object-fit: cover;
    }

.blog-text {
    flex: 1 1 62%;
    padding: 40px 48px;
}

.blog-tags {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.blog-category {
    display: inline-flex;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--sand-deep);
    border: 1px solid var(--border);
    color: var(--maroon);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.blog-destination {
    color: var(--stone-soft);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.blog-text h3 {
    margin: 0 0 16px;
    font-size: clamp(1.4rem,2.2vw,1.9rem);
    line-height: 1.12;
}

.blog-excerpt {
    color: var(--stone-soft);
    font-size: .96rem;
    line-height: 1.75;
    margin: 0 0 26px;
}

    .blog-excerpt strong {
        color: var(--stone);
    }

/* ---------- Archivio per anno ---------- */
.blog-archive {
    background: var(--sand-deep);
    padding: 44px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.blog-archive-label {
    display: block;
    margin-bottom: 18px;
    color: var(--stone-soft);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
}

.blog-archive-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.archive-pill {
    display: inline-flex;
    align-items: center;
    padding: 9px 20px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--white);
    color: var(--stone-soft);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s,color .2s,border-color .2s,transform .2s var(--ease);
}

    .archive-pill:hover {
        border-color: var(--maroon);
        color: var(--maroon);
        transform: translateY(-2px);
    }

    .archive-pill.is-active {
        background: var(--maroon);
        border-color: var(--maroon);
        color: var(--white);
    }

/* ---------- Paginazione (in basso) ---------- */
.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 54px 0 0;
    background: var(--cream);
}

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--white);
    color: var(--stone);
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s,color .2s,border-color .2s;
}

    .page-btn:hover {
        border-color: var(--maroon);
        color: var(--maroon);
    }

    .page-btn.is-active {
        background: var(--maroon);
        border-color: var(--maroon);
        color: var(--white);
        cursor: default;
    }

    .page-btn.is-disabled {
        opacity: .38;
        pointer-events: none;
    }

.page-nav {
    width: auto;
    padding: 0 18px;
    border-radius: 999px;
    gap: 6px;
    font-size: .82rem;
}

/* ---------- Responsive ---------- */
@media(max-width:900px) {
    .blog-row, .blog-row.is-reversed {
        flex-direction: column;
        margin-bottom: 26px;
    }

        .blog-row.is-reversed .blog-img, .blog-row.is-reversed .blog-text {
            order: initial;
        }

    .blog-img {
        flex: 0 0 auto;
    }

        .blog-img img {
            height: 220px;
            min-height: 0;
        }

    .blog-text {
        padding: 28px 26px;
    }
}

@media(max-width:760px) {
    .blog-archive-pills {
        gap: 8px;
    }

    .archive-pill {
        padding: 8px 16px;
        font-size: .78rem;
    }

    .page-btn {
        width: 38px;
        height: 38px;
    }
}


/* ============================================================
   PAGINA ARTICOLO BLOG (singolo articolo)
   Usata da /viaggio-in-peru-blog/*.php
   body class: page-blog-article
   ============================================================ */

/* ---------- Meta riga nella hero (data, luogo, tempo di lettura) ---------- */
.article-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 8px;
}

    .article-hero-meta span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: rgba(255,255,255,.86);
        font-size: .86rem;
        font-weight: 600;
    }

    .article-hero-meta svg {
        flex: 0 0 auto;
        opacity: .85;
    }

    .article-hero-meta + .hero-actions {
        margin-top: 26px;
    }

/* ---------- Layout articolo + sidebar ---------- */
.page-blog-article .article-layout {
    background: var(--cream);
    padding: 70px 0 100px;
}

.page-blog-article .article-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 56px;
    align-items: start;
}

/* ---------- Corpo articolo ---------- */
.page-blog-article .article-body {
    min-width: 0;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 48px 52px;
}

    .page-blog-article .article-body > p {
        margin: 0 0 22px;
        line-height: 1.8;
        color: var(--stone-soft);
        font-size: 1.02rem;
    }

    .page-blog-article .article-body strong {
        color: var(--stone);
    }

    .page-blog-article .article-body h2 {
        margin: 46px 0 18px;
        font-size: clamp(1.5rem,2.4vw,2rem);
        line-height: 1.12;
    }

        .page-blog-article .article-body h2:first-of-type {
            margin-top: 0;
        }

.article-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin: 8px 0 10px;
}

.article-img-caption {
    margin: 0 0 30px;
    color: var(--stone-soft);
    font-size: .82rem;
    font-style: italic;
    text-align: center;
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.article-tag {
    display: inline-flex;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--sand-deep);
    border: 1px solid var(--border);
    color: var(--maroon);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .03em;
}

/* ---------- Sidebar ---------- */
.page-blog-article .article-sidebar {
    position: relative;
}

.sidebar-sticky-wrap {
    position: sticky;
    top: 142px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sidebar-box {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: var(--shadow-sm);
}

.sidebar-box-title {
    margin: 0 0 18px;
    color: var(--maroon);
    font-family: 'Fraunces',serif;
    font-weight: 800;
    font-size: 1.02rem;
}

.sidebar-backlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--maroon);
    font-weight: 700;
    font-size: .88rem;
    transition: color .2s;
}

    .sidebar-backlink:hover {
        color: var(--accent-orange);
    }

.sidebar-share {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-share-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-radius: 999px;
    background: var(--sand-deep);
    border: 1px solid var(--border);
    color: var(--maroon);
    font-size: .82rem;
    font-weight: 700;
    transition: background .2s,color .2s;
}

    .sidebar-share-link:hover {
        background: var(--maroon);
        color: var(--white);
    }

.sidebar-cta p {
    margin: 0 0 18px;
    color: var(--stone-soft);
    font-size: .9rem;
    line-height: 1.6;
}

.sidebar-cta .btn {
    width: 100%;
}

.sidebar-quicktable {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

    .sidebar-quicktable tr {
        border-bottom: 1px solid var(--border);
    }

        .sidebar-quicktable tr:last-child {
            border-bottom: none;
        }

    .sidebar-quicktable td {
        padding: 10px 0;
        color: var(--stone-soft);
    }

        .sidebar-quicktable td:last-child {
            text-align: right;
            font-weight: 700;
            color: var(--maroon);
        }

/* ---------- Responsive ---------- */
@media(max-width:900px) {
    .page-blog-article .article-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sidebar-sticky-wrap {
        position: static;
    }

    .page-blog-article .article-body {
        padding: 36px 30px;
    }
}

@media(max-width:760px) {
    .page-blog-article .article-layout {
        padding: 50px 0 70px;
    }

    .page-blog-article .article-body {
        padding: 30px 22px;
    }

    .article-hero-meta {
        gap: 14px;
    }
}


/* ---------- Box "Tour Consigliati" (sidebar) ---------- */
.sidebar-tours {
    background: var(--sand-deep);
    border: 1px solid var(--border);
}

    .sidebar-tours .sidebar-box-title {
        color: var(--maroon);
        padding-bottom: 14px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--border);
    }

.sidebar-tour-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

    .sidebar-tour-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.sidebar-cta__tour-name {
    display: block;
    color: var(--stone);
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.3;
    margin-bottom: 4px;
}

.sidebar-cta__tour-meta {
    display: block;
    color: var(--stone-soft);
    font-size: .78rem;
    margin-bottom: 8px;
}

.sidebar-cta__tour-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--accent-orange);
    font-weight: 800;
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: gap .2s;
}

    .sidebar-cta__tour-link:hover {
        gap: 9px;
    }

    .sidebar-cta__tour-link svg {
        flex: 0 0 auto;
    }