/* ============================================================
   blog.css — CCF Balduina
   Blog list (post items + filter tabs) and post detail page
   ============================================================ */


/* === BLOG FILTER TABS === */
/* Reuses .filter-tab from components.css */
.blog-filters {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-line);
}


/* === BLOG LIST === */
.blog-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}


/* === BLOG POST ITEM (list view) === */
.blog-post-item {
    display: grid;
    grid-template-columns: 240px 1fr;   /* Thumbnail | Body */
    gap: var(--space-xl);
    align-items: start;
    padding-block: var(--space-xl);
    border-bottom: 1px solid var(--color-line);  /* Separatore tra post */
    transition: background-color var(--transition-fast);
}

.blog-post-item:last-child {
    border-bottom: none;
}

.blog-post-item:hover {
    background-color: var(--color-cream-alt);    /* Sfondo leggero su hover riga */
    margin-inline: calc(-1 * var(--container-pad));
    padding-inline: var(--container-pad);
}

.blog-post-item__img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: var(--radius);
    background-color: var(--color-cream-alt);
    display: block;
}

.blog-post-item__img-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background-color: var(--color-cream-alt);    /* Sfondo placeholder */
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--color-gray);
}

.blog-post-item__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.blog-post-item__meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.blog-post-item__title {
    font-size: var(--text-2xl);
    line-height: 1.3;
}

.blog-post-item__title a {
    color: var(--color-dark);
    transition: color var(--transition-fast);
}

.blog-post-item__title a:hover {
    color: var(--color-red);             /* Titolo rosso su hover */
}

.blog-post-item__excerpt {
    font-size: var(--text-base);
    line-height: 1.6;
}

.blog-empty {
    padding: var(--space-3xl) 0;
    font-size: var(--text-lg);
}


/* === BLOG DETAIL META === */
.blog-detail-meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}


/* === BLOG DETAIL COVER IMAGE === */
.blog-detail-cover {
    background-color: var(--color-cream-alt);
    padding-block: var(--space-xl);
    border-bottom: 1px solid var(--color-line);
}

.blog-detail-cover__img {
    width: 100%;
    max-height: 500px;
    object-fit: contain;
    border-radius: var(--radius-lg);
}


/* === BLOG DETAIL LAYOUT === */
.blog-detail-layout {
    display: grid;
    grid-template-columns: 1fr 320px;   /* Article body | Sidebar */
    gap: var(--space-3xl);
    align-items: start;
}

/* CKEditor rich text body styles */
.blog-detail-content.ck-content p {
    font-size: var(--text-lg);
    line-height: 1.8;
    color: var(--color-dark);
    margin-bottom: var(--space-md);
}

.blog-detail-content.ck-content h2 {
    font-size: var(--text-3xl);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-sm);
}

.blog-detail-content.ck-content h3 {
    font-size: var(--text-2xl);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
}

.blog-detail-content.ck-content ul,
.blog-detail-content.ck-content ol {
    list-style: disc;
    padding-left: var(--space-lg);
    margin-bottom: var(--space-md);
}

.blog-detail-content.ck-content li {
    font-size: var(--text-lg);
    line-height: 1.7;
    margin-bottom: var(--space-xs);
}

.blog-detail-content.ck-content blockquote {
    border-left: 3px solid var(--color-red);  /* Citazione con bordo rosso */
    padding-left: var(--space-lg);
    margin-block: var(--space-xl);
    font-style: italic;
    color: var(--color-gray);
}

.blog-detail-content.ck-content img {
    border-radius: var(--radius);
    max-width: 100%;
    margin-block: var(--space-lg);
}


/* === BLOG DETAIL SIDEBAR === */
.blog-detail-sidebar {
    position: sticky;
    top: calc(72px + var(--space-lg));
}

.blog-sidebar-card {
    background-color: var(--color-cream-alt);  /* Sfondo crema alternato */
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}


/* === RESPONSIVE — TABLET (max-width: 768px) === */
@media (max-width: 768px) {
    .blog-post-item {
        grid-template-columns: 1fr;     /* Una colonna su tablet */
        gap: var(--space-md);
    }

    .blog-post-item__img {
        aspect-ratio: 16/7;             /* Immagine più bassa su tablet */
    }

    .blog-detail-layout {
        grid-template-columns: 1fr;
    }

    .blog-detail-sidebar {
        position: static;
    }
}


/* === RESPONSIVE — MOBILE (max-width: 480px) === */
@media (max-width: 480px) {
    .blog-post-item:hover {
        margin-inline: 0;
        padding-inline: 0;
    }

    .blog-post-item__title {
        font-size: var(--text-xl);
    }
}