/*
 * Blog: camada de deep-customization (aba "Blog" em Themes > Advanced
 * editing). Fallbacks = visual de fábrica; publicado pelo core em
 * public/modules/blog/customizer.css quando o módulo está habilitado.
 */

/* Cards da listagem. */
.site .blog-card {
    background-color: var(--bl-card-bg, var(--color-background));
    border-color: var(--bl-card-border, var(--color-border));
    border-radius: var(--bl-card-radius, 0.75rem);
}
.site .blog-card-title {
    color: var(--bl-card-title, var(--color-foreground));
}
.site .blog-card-title:hover {
    color: var(--bl-card-title-hover, var(--color-primary));
}
.site .blog-card-excerpt {
    color: var(--bl-card-excerpt, var(--color-muted-foreground));
}
.site .blog-card-meta {
    color: var(--bl-card-meta, var(--color-muted-foreground));
}

/* Página do post. */
.site .blog-post-title {
    color: var(--bl-post-title, var(--color-foreground));
    font-size: var(--bl-post-title-size, 1.875rem);
}
.site .blog-post-meta {
    color: var(--bl-post-meta, var(--color-muted-foreground));
}

/* Filtro de categorias (pílulas). */
.site .blog-filter {
    color: var(--bl-filter, var(--color-muted-foreground));
}
.site .blog-filter:hover {
    color: var(--bl-filter-hover, var(--color-foreground));
}
.site .blog-filter.is-active {
    color: var(--bl-filter-active, var(--color-primary));
    background-color: var(--bl-filter-active-bg, color-mix(in srgb, var(--color-primary) 10%, transparent));
}

/* Capa do card e da página do post. */
.site .blog-card-cover {
    height: var(--bl-card-cover-h, 10rem);
}
.site .blog-post-cover {
    border-radius: var(--bl-post-cover-radius, 0.75rem);
}

/* Texto do post. */
.site .blog-post-content {
    color: var(--bl-content-color, var(--color-foreground));
    font-size: var(--bl-content-size, 15px);
}

/* Blocos de layout do corpo (colunas, botao, galeria, ancora, sumario). O
   markup final sai de Modules\Blog\Support\LayoutBlocks; no celular tudo vira
   uma coluna. */
.site .blog-cols {
    display: grid;
    gap: var(--bl-cols-gap, 1.5rem);
    margin: 1.25rem 0;
    grid-template-columns: minmax(0, 1fr);
}
.site .blog-cols__col > :first-child { margin-top: 0; }
.site .blog-cols__col > :last-child { margin-bottom: 0; }
@media (min-width: 640px) {
    .site .blog-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site .blog-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .site .blog-cols--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
    .site .blog-cols--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.site .blog-button { margin: 1.25rem 0; }
.site .blog-button__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.6rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--bl-button-radius, 0.5rem);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.site .forum-content a.blog-button__link { text-decoration: none; }
.site .blog-button__link--primary {
    background-color: var(--bl-button-bg, var(--color-primary));
    color: var(--bl-button-fg, var(--color-primary-foreground));
}
.site .blog-button__link--primary:hover { background-color: color-mix(in srgb, var(--bl-button-bg, var(--color-primary)) 88%, black); }
.site .forum-content .blog-button__link--primary,
.site .forum-content .blog-button__link--primary:hover { color: var(--bl-button-fg, var(--color-primary-foreground)); }
.site .blog-button__link--secondary {
    border-color: var(--color-border);
    background-color: var(--color-background);
    color: var(--color-foreground);
}
.site .forum-content .blog-button__link--secondary { color: var(--color-foreground); }
.site .blog-button__link--secondary:hover { border-color: var(--color-foreground); }
.site .blog-button__link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.site .blog-gallery {
    display: grid;
    gap: var(--bl-gallery-gap, 0.75rem);
    margin: 1.25rem 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
    .site .blog-gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .site .blog-gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.site .blog-gallery__item { margin: 0; }
.site .blog-gallery__item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--bl-gallery-radius, 0.5rem);
}
.site .blog-gallery__caption {
    margin-top: 0.4rem;
    font-size: 0.85em;
    color: var(--color-muted-foreground);
}

.site .blog-anchor { scroll-margin-top: 5rem; }

.site .blog-toc {
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background-color: color-mix(in srgb, var(--color-foreground) 3%, var(--color-background));
}
.site .blog-toc__title {
    margin: 0 0 0.5rem;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted-foreground);
}
.site .blog-toc__list { margin: 0; padding-left: 1.25rem; list-style: decimal; }
.site .blog-toc__list li + li { margin-top: 0.3rem; }