/* ════════════════════════════════════════════════════
   CF PRE-FOOTER — BLOG
   Ruta: prefooter/assets/css/cf-pf-blog.css
════════════════════════════════════════════════════ */

/* Contenedor centrado, con el mismo ancho real que usa el theme
   (--theme-container-width / --theme-normal-container-max-width son
   las variables que Blocksy usa para su propio .ct-container) — así
   esta sección queda alineada con el resto del sitio, en vez de un
   ancho fijo propio. 1200px queda solo como fallback para un theme
   sin esas variables (este plugin no depende de ningún theme en
   particular para funcionar). */
.cf-ancho-maximo {
    width: var(--theme-container-width, 100%);
    max-width: var(--theme-normal-container-max-width, 1200px);
    margin-left: auto;
    margin-right: auto;
}

/* El bloque de título (subtítulo/título/texto + alineación) vive en
   assets/css/cf-pf-title.css, compartido por las 5 secciones con
   título — ver cf_pf_enqueue_assets() en cf-prefooter.php. */

/* Rompe el contenedor normal para que el fondo (opcional, ver
   cf_pf_get_section_bg_style() en cf-prefooter.php) llegue de borde a
   borde de la pantalla — el contenido de adentro sigue centrado al
   ancho normal vía .cf-ancho-maximo. */
.full-width {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw !important;
    position: relative;
}

/* --hb-pf-blog-padding-v: "Espacio vertical (arriba y abajo)" del
   admin (ver cf_pf_padding_admin_field() en cf-prefooter.php),
   default 20px — reemplaza el valor fijo que había antes. */
.hb-pf-blog {
    padding-top: var(--hb-pf-blog-padding-v, 20px);
    padding-bottom: var(--hb-pf-blog-padding-v, 20px);
}

.hb-pf-blog-carousel {
    position: relative;
}

/* Desktop (por defecto): grilla estática de 3 columnas, sin carrusel
   ni controles — el "deslizable" solo existe en mobile (ver media
   query abajo, donde .hb-pf-blog-track vuelve a ser un flex row).
   :not(.entries) — cuando se usa la card nativa del tema, el propio
   .hb-pf-blog-track también lleva la clase "entries" (ver
   cf_pf_blog_render()) y es el CSS de columnas de Blocksy
   (ct-entries-styles) el que arma la grilla, con la cantidad de
   columnas/gap que esté configurada en Personalizar → Blog — esta
   regla de acá se aparta por completo en ese caso, para no competir
   por especificidad contra el CSS del tema. */
.hb-pf-blog-track:not(.entries) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.hb-pf-blog-card {
    min-width: 0;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0,0,0,.08);
    display: flex;
    flex-direction: column;
}

/* Wrapper de la card REAL del tema (blocksy_render_archive_card) — a
   propósito sin fondo/sombra/radio propios: esos ya vienen del CSS de
   cards de Blocksy (ct-entries-styles), según lo que esté configurado
   en Personalizar → Blog. Solo el tamaño de columna/slide es de acá. */
.hb-pf-blog-slide { min-width: 0; }

.hb-pf-blog-thumb {
    display: block;
    aspect-ratio: 16/10;
    background: #e8e8e8;
    overflow: hidden;
}

.hb-pf-blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hb-pf-blog-noimg {
    display: block;
    width: 100%;
    height: 100%;
    background: #e8e8e8;
}

.hb-pf-blog-body {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.hb-pf-blog-date {
    font-size: .75rem;
    color: #8a8a8a;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
}

.hb-pf-blog-title {
    font-size: 1.05rem;
    line-height: 1.35;
    margin: 0 0 10px;
}

.hb-pf-blog-title a {
    color: #1a1a2e;
    text-decoration: none;
}

.hb-pf-blog-title a:hover { text-decoration: underline; }

.hb-pf-blog-excerpt {
    font-size: .86rem;
    color: #5a6480;
    line-height: 1.6;
    margin: 0 0 14px;
    flex: 1;
}

.hb-pf-blog-readmore {
    font-size: .82rem;
    font-weight: 700;
    color: #0d2d6e;
    text-decoration: none;
    align-self: flex-start;
}

.hb-pf-blog-readmore:hover { text-decoration: underline; }

/* ── FLECHAS / DOTS ──
   Ocultos por defecto: en desktop es una grilla fija, no necesita
   controles de navegación. Solo se reactivan dentro del carrusel
   móvil (media query abajo); ahí, is-hidden (JS) los vuelve a ocultar
   si hay 1 sola entrada y no hace falta deslizar. */
.hb-pf-blog-arrow {
    display: none;
    position: absolute;
    top: 36%;
    transform: translateY(-50%);
    z-index: 5;
    background: #fff;
    border: 1px solid #e2e2e2;
    color: #333;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    transition: background .2s, opacity .2s;
}

.hb-pf-blog-arrow svg { width: 18px; height: 18px; }
.hb-pf-blog-arrow:hover { background: #f2f2f2; }

.hb-pf-blog-dots {
    display: none;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.hb-pf-blog-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: #d5d5d5;
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s;
}

.hb-pf-blog-dot.active {
    background: #0d2d6e;
    transform: scale(1.2);
}

/* ── RESPONSIVE: carrusel deslizable, 1 card visible en móvil ── */
@media (max-width: 768px) {
    .hb-pf-blog { padding-left: 16px; padding-right: 16px; }

    /* .hb-pf-blog-track.entries (dos clases = más especificidad que el
       .entries{display:grid} plano del tema) — así el carrusel mobile
       gana siempre en esta media query, sea cual sea el orden real en
       que el navegador cargó cf-pf-blog.css vs ct-entries-styles. */
    .hb-pf-blog-track,
    .hb-pf-blog-track.entries {
        display: flex;
        gap: 20px;
        will-change: transform;
    }
    .hb-pf-blog-card,
    .hb-pf-blog-slide { flex: 0 0 100%; }

    /* overflow:hidden va en el WRAPPER de afuera (que nunca se mueve),
       no en el track (a quien cf-pf-blog.js sí le aplica el transform
       para deslizar) — si estuviera en el propio track, la "ventana"
       de recorte se desplazaría junto con el transform en vez de
       quedarse fija, y terminaría recortando exactamente la card
       activa en cualquier posición que no sea la 0 (index 0 se veía
       bien de pura casualidad: ahí el transform es 0, así que el
       recorte coincide con la card visible). */
    .hb-pf-blog-carousel { overflow: hidden; }

    .hb-pf-blog-arrow {
        display: flex;
        width: 34px;
        height: 34px;
    }
    .hb-pf-blog-arrow.is-hidden { display: none; }
    .hb-pf-blog-prev { left: 4px; }
    .hb-pf-blog-next { right: 4px; }

    .hb-pf-blog-dots { display: flex; }
    .hb-pf-blog-dots.is-hidden { display: none; }
}