/* ======================================================================
   stile-blog.css - SPECIFICO PER blog/index.php e blog/<slug>.php
   Importa stile-base.css (già incluso da meta/head.php) e aggiunge
   le regole per la sezione blog, riusando la palette del sito
   (#2d5f5f verde scuro, #99cccc turchese, #711515 rosso accento)
====================================================================== */

/* ======================================================================
   LAYOUT DESKTOP (> 1200px) — riserva lo spazio per il menu laterale
   fisso a sinistra (9rem), stesso approccio di stile-monete.css
   ====================================================================== */
main.blog-index,
main.blog-articolo {
    display: block;
    margin-left: 10rem;
    margin-right: 16rem;
    margin-top: 1.5rem;
    margin-bottom: 3rem;
    box-sizing: border-box;
}

/* ======================================================================
   TITOLI
   ====================================================================== */
main.blog-index h1,
main.blog-articolo h1 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    color: #1a3f3f;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid #99cccc;
}

main.blog-articolo .blog-contenuto h2 {
    font-size: clamp(1.4rem, 3.5vw, 1.7rem);
    font-weight: 700;
    color: #1a3f3f;
    margin-top: 1.8rem;
    margin-bottom: 0.6rem;
}

main.blog-articolo .blog-contenuto h3 {
    font-size: clamp(1.15rem, 2.5vw, 1.35rem);
    font-weight: 700;
    color: #2d5f5f;
    margin-top: 1.3rem;
    margin-bottom: 0.4rem;
}

main.blog-articolo .blog-contenuto h6 {
    font-size: 1.2rem;
    font-weight: 400;
    font-style: italic;
    color: #666;
    margin-top: 0.3rem;
	margin-left: 2rem;
    margin-bottom: 1.35rem;
}

main.blog-articolo .blog-contenuto p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    color: #333;
}

main.blog-articolo .blog-contenuto ul,
main.blog-articolo .blog-contenuto ol {
    margin: 0 0 1rem 1.4rem;
    line-height: 1.6;
}

main.blog-articolo .blog-contenuto ul { list-style: disc; }
main.blog-articolo .blog-contenuto ol { list-style: decimal; }

main.blog-articolo .blog-contenuto strong { color: #1a3f3f; }

main.blog-articolo .blog-contenuto a {
    color: #711515;
    font-weight: 700;
    border-bottom: 1.5px solid rgba(113,21,21,0.3);
    text-decoration: none;
}
main.blog-articolo .blog-contenuto a:hover {
    border-bottom-color: #711515;
    text-decoration: none;
}

main.blog-articolo .blog-contenuto hr {
    border: none;
    border-top: 2px solid #99cccc;
    margin: 1.8rem 0;
}

/* ======================================================================
   BREADCRUMB / META
   ====================================================================== */
.blog-breadcrumb {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 0.6rem;
}
.blog-breadcrumb a {
    color: #2d5f5f;
    text-decoration: none;
    border-bottom: 1px solid rgba(45,95,95,0.3);
}
.blog-breadcrumb a:hover { border-bottom-color: #2d5f5f; }

.blog-meta {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 1rem;
}

/* ======================================================================
   FILTRO CATEGORIE (pagina indice)
   ====================================================================== */
.blog-filtro-categorie {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}
.blog-filtro-categorie a {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(45,95,95,0.25);
    color: #1a3f3f;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.blog-filtro-categorie a:hover,
.blog-filtro-categorie a.attivo {
    background: #2d5f5f;
    color: #e8f4f4;
    border-color: #2d5f5f;
    text-decoration: none;
}

/* ======================================================================
   ORDINAMENTO PER DATA (pagina indice)
   Stesso linguaggio visivo del filtro categorie, ma più discreto:
   pillole più piccole, raggruppate a destra dell'etichetta, per
   distinguerlo a colpo d'occhio dal filtro categoria sopra.
   ====================================================================== */
.blog-ordine-data {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.8rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(45,95,95,0.2);
}
.blog-ordine-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #555;
    margin-right: 0.2rem;
}
.blog-ordine-data a {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(113,21,21,0.25);
    color: #1a3f3f;
    font-weight: 700;
    font-size: 0.82rem;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.blog-ordine-data a:hover,
.blog-ordine-data a.attivo {
    background: #711515;
    color: #f4e8e8;
    border-color: #711515;
    text-decoration: none;
}

/* ======================================================================
   LISTA ARTICOLI (pagina indice) — card, stesso stile delle card monete
   ====================================================================== */
.blog-lista-articoli {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.blog-anteprima {
    display: flex;
    align-items: stretch;
    background: rgba(255,255,255,0.82);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid rgba(255,255,255,0.6);
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    padding: 1.2rem 1.4rem;
    flex-direction: column;
}
.blog-anteprima:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.blog-anteprima img {
    border-radius: 8px;
    margin-bottom: 0.8rem;
    max-height: 260px;
    object-fit: cover;
    width: 100%;
}

.blog-anteprima h2 {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    margin-bottom: 0.3rem;
}
.blog-anteprima h2 a {
    color: #1a3f3f;
    text-decoration: none;
}
.blog-anteprima h2 a:hover { text-decoration: underline; }

.blog-anteprima p { color: #444; line-height: 1.5; }

/* ======================================================================
   COPERTINA ARTICOLO SINGOLO
   ====================================================================== */
.blog-copertina {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 10px;
    margin: 1rem 0 1.5rem;
}

/* ======================================================================
   RESPONSIVE — stesso schema di breakpoint di stile-monete.css
   ====================================================================== */
@media (max-width: 767px) {
    main.blog-index,
    main.blog-articolo {
        margin: 0 10px !important;
        width: calc(100% - 20px) !important;
        padding-top: 0.5rem;
    }

    .blog-ordine-data {
        gap: 0.4rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    main.blog-index,
    main.blog-articolo {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
        width: calc(100% - 2rem) !important;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    main.blog-index,
    main.blog-articolo {
        margin-left: 1.5rem !important;
        margin-right: 1.5rem !important;
        width: calc(100% - 3rem) !important;
    }
}

/*
======================================================================
- css-blog	ver. 1.10		Claudio Agostini © 20.09.2026
		Importa stile-base.css + regole specifiche blog
		Aggiunto blocco .blog-ordine-data (toggle ordinamento per data)
======================================================================
*/