/* ==========================================================================
   Fleepr — Blog (blog.html y post.html)
   Solo tokens de theme.css; nada de colores sueltos.
   ========================================================================== */

/* ---- Pastillas de categoría de la cabecera (la activa va rellena) ---- */
.blog-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0.35rem 0.5rem 0.35rem 1rem;
    border-radius: 16px;
    border: 1px solid var(--secondary-border);
    background-color: var(--background);
    font-size: 0.875rem;
    color: var(--foreground);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.blog-chip:hover { background-color: var(--secondary-hover); }
.blog-chip-count {
    min-width: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 16px;
    background-color: var(--popover-inner);
    color: var(--muted);
    font-size: 0.8rem;
    text-align: center;
}
.blog-chip[aria-current] {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}
.blog-chip[aria-current] .blog-chip-count {
    background-color: color-mix(in srgb, var(--primary-foreground) 18%, transparent);
    color: var(--primary-foreground);
}

/* "Leer →" del destacado */
.blog-read-more { transition: transform 0.2s ease; }
.blog-card:hover .blog-read-more { transform: translateX(3px); }

/* ---- Filtros ---- */
.blog-filter summary { list-style: none; }
.blog-filter summary::-webkit-details-marker { display: none; }
.blog-filter summary:hover { color: var(--foreground); }
.blog-filter-chevron { transition: transform 0.2s ease; }
.blog-filter[open] .blog-filter-chevron { transform: rotate(180deg); }
.blog-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    color: var(--foreground);
}
.blog-option input { accent-color: var(--foreground); }

/* ---- Conmutador cuadrícula / lista ---- */
.blog-view-toggle button {
    color: var(--muted);
    border: 1px solid transparent;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.blog-view-toggle button:hover { color: var(--foreground); }
.blog-view-toggle button[aria-pressed="true"] {
    color: var(--foreground);
    background-color: var(--popover-inner);
    border-color: var(--border);
}

/* ---- Portadas ilustradas: icono de línea sobre un tono con textura ---- */
.post-cover {
    position: relative;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--popover-inner);
    color: var(--foreground);
}
.blog-card .post-cover { border-bottom: 1px solid var(--border); }
.post-cover::before {
    /* halo claro detrás del icono para que se lea sobre cualquier textura */
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, var(--popover-inner) 0%, var(--popover-inner) 18%, transparent 55%);
}
.post-cover svg {
    position: relative;
    width: 26%;
    height: auto;
    transition: transform 0.4s ease;
}
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.blog-card:hover .post-cover svg { transform: scale(1.06) rotate(-2deg); }

/* Un tono por categoría (ver CATEGORY_TONES en blog-ui.js) */
.post-cover[data-tone="1"] { /* puntos */
    background-image: radial-gradient(color-mix(in srgb, var(--foreground) 16%, transparent) 1px, transparent 1.4px);
    background-size: 14px 14px;
}
.post-cover[data-tone="2"] { /* anillos */
    background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0 22px, color-mix(in srgb, var(--foreground) 10%, transparent) 22px 23px);
}
.post-cover[data-tone="3"] { /* rejilla */
    background-image:
        linear-gradient(color-mix(in srgb, var(--foreground) 8%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--foreground) 8%, transparent) 1px, transparent 1px);
    background-size: 24px 24px;
}
.post-cover[data-tone="4"] { /* diagonales */
    background-image: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--foreground) 8%, transparent) 14px 15px);
}

/* Variantes de tamaño */
.post-cover--featured { aspect-ratio: 2 / 1; }
.post-cover--featured svg { width: 18%; }
.post-cover--square { aspect-ratio: auto; height: 100%; min-height: 8rem; border-bottom: 0 !important; border-right: 1px solid var(--border); }
.post-cover--square svg { width: 42%; }
.post-cover--article {
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.post-cover--article svg { width: 16%; }

/* ---- Vista lista ---- */
.blog-row-title { transition: opacity 0.2s ease; }
.blog-row:hover .blog-row-title { opacity: 0.7; }

/* ---- Compartir (post) ---- */
.blog-share {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    border: 1px solid var(--secondary-border);
    color: var(--muted);
    transition: color 0.2s ease, background-color 0.2s ease;
}
.blog-share:hover { color: var(--foreground); background-color: var(--secondary-hover); }

/* ---- Esqueletos de carga ---- */
.blog-skeleton {
    border-radius: 6px;
    background: linear-gradient(90deg, var(--popover-inner) 25%, var(--secondary-hover) 50%, var(--popover-inner) 75%);
    background-size: 200% 100%;
    animation: blog-shimmer 1.4s ease-in-out infinite;
}
@keyframes blog-shimmer {
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .blog-skeleton { animation: none; }
    .post-cover svg, .blog-read-more { transition: none; }
}

/* ---- Índice del artículo (post) ---- */
.post-toc-link {
    display: block;
    padding-left: 0.75rem;
    border-left: 2px solid var(--border);
    color: var(--muted);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.post-toc-link:hover { color: var(--foreground); }
.post-toc-link[aria-current] {
    color: var(--foreground);
    border-left-color: var(--foreground);
}
/* Los saltos del índice no deben quedar tapados por header + breadcrumbs */
.prose-fleepr h2,
.prose-fleepr h3 { scroll-margin-top: 8rem; }