/* ============================================================
   Bloques propios de Covepa — estilos compartidos (sitio y editor)
   Se carga solo donde hace falta (ver functions.php):
     · en el sitio: entradas/páginas que contienen uno de estos bloques
     · en el editor de bloques, para que la vista previa sea la real
   Mobile-first y sin puntos de corte por pantalla: cada bloque mide el
   ANCHO DE SU PROPIO CONTENEDOR (container queries), así se ve bien igual
   en una entrada de 720 px, en una página ancha o en el editor.
   Colores: solo los tokens :root de style.css (--covepa-*).
   ============================================================ */

/* El editor de bloques NO carga style.css del tema, así que allí los tokens no existen y todo
   `var(--covepa-*)` queda inválido (sin borde ni fondo; el botón principal quedaba blanco sobre
   blanco, invisible). Se repiten SOLO para el lienzo del editor. Mantener iguales a :root de style.css. */
.editor-styles-wrapper {
    --covepa-red:    #cc0010;
    --covepa-yellow: #fdca00;
    --covepa-bg:     #f7f6f2;
    --covepa-text:   #1a1a18;
    --covepa-muted:  #6b6b65;
    --covepa-border: #e4e3dd;
}

.covepa-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Botón / enlace de acción de los bloques ──
   La clase va doblada (.x.x) a propósito: sube la especificidad para ganarle a las reglas
   de enlaces del contenido de Kadence/del tema (.single-content a:hover, etc.). */
.covepa-btn.covepa-btn,
.covepa-btn.covepa-btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;               /* objetivo táctil mínimo */
    padding: 0 16px;
    border: 1.5px solid var(--covepa-red);
    border-radius: 8px;
    background: var(--covepa-red);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: none;
    box-sizing: border-box;
}
.covepa-btn.covepa-btn:hover,
.covepa-btn.covepa-btn:focus,
.covepa-btn.covepa-btn:active {
    background: #a8000d;
    border-color: #a8000d;
    color: #fff;
    text-decoration: none;
    box-shadow: none;
}
.covepa-btn.covepa-btn--ghost,
.covepa-btn.covepa-btn--ghost:visited {
    background: #fff;
    color: var(--covepa-red);
}
.covepa-btn.covepa-btn--ghost:hover,
.covepa-btn.covepa-btn--ghost:focus,
.covepa-btn.covepa-btn--ghost:active {
    background: #fbeaec;
    border-color: var(--covepa-red);
    color: #a8000d;
}
.covepa-btn.covepa-btn:focus-visible {
    outline: 2px solid var(--covepa-text);
    outline-offset: 2px;
}

/* ============================================================
   BLOQUE CHARLA  (covepa/charla)
   Móvil: foto arriba (16:9) y datos debajo.
   Contenedor ≥ 30rem: foto a la izquierda, datos a la derecha.
   ============================================================ */

.covepa-charla {
    container: covepa-charla / inline-size;
    max-width: 720px;
    margin: 24px 0;
    color: var(--covepa-text);
}
.covepa-charla .covepa-charla__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background: #fff;
    border: 0.5px solid var(--covepa-border);
    border-left: 4px solid var(--covepa-red);
    border-radius: 0 8px 8px 0;
    overflow: hidden;
}
.covepa-charla .covepa-charla__media {
    position: relative;
    margin: 0;
    aspect-ratio: 2 / 1;             /* foto baja en celular: los datos y «Inscribirme» quedan más arriba */
    background: var(--covepa-bg);
}
.covepa-charla .covepa-charla__media img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}
.covepa-charla .covepa-charla__body {
    min-width: 0;                    /* deja que el texto largo parta línea */
    padding: 16px;
}
.covepa-charla .covepa-charla__eyebrow {
    margin: 0 0 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--covepa-red);
}
.covepa-charla .covepa-charla__title {
    margin: 0 0 12px;
    padding: 0;
    font-size: clamp(1.25rem, 1.05rem + 1cqi, 1.5rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--covepa-text);
    overflow-wrap: anywhere;
}
.covepa-charla .covepa-charla__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
}
.covepa-charla .covepa-charla__meta li {
    display: grid;
    grid-template-columns: 1.6em minmax(0, 1fr);   /* el texto largo no baja bajo el icono */
    column-gap: 6px;
    margin: 0 0 6px;
    padding: 0;
}
.covepa-charla__meta li::before { content: none; }
.covepa-charla .covepa-charla__ico { text-align: center; }
.covepa-charla .covepa-charla__sub { color: var(--covepa-muted); }
.covepa-charla .covepa-charla__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
}
.covepa-charla .covepa-charla__actions .covepa-btn { flex: 1 1 9rem; }
.covepa-charla .covepa-charla__actions .covepa-charla__cta { flex-basis: 100%; }   /* «Inscribirme» ocupa su propia fila en móvil */

@container covepa-charla (min-width: 30rem) {
    .covepa-charla .covepa-charla__card--foto {
        grid-template-columns: minmax(8.5rem, 34%) minmax(0, 1fr);
    }
    .covepa-charla .covepa-charla__media {
        aspect-ratio: auto;
        min-height: 100%;
    }
    .covepa-charla .covepa-charla__media img {
        position: absolute;          /* la foto se ajusta a la altura de los datos */
        inset: 0;
    }
    .covepa-charla__body { padding: 18px 20px; }
    .covepa-charla .covepa-charla__actions .covepa-btn,
    .covepa-charla .covepa-charla__actions .covepa-charla__cta { flex: 0 1 auto; }
}

/* ============================================================
   BLOQUE ARTÍCULOS RELACIONADOS  (covepa/relacionados)
   Una sola tarjeta para 1, 2 o 3 artículos:
     · contenedor angosto  → filas compactas (miniatura a la izquierda)
     · contenedor ≥ 35rem y 2-3 artículos → columnas, foto arriba (16:9)
   El bloque nunca pasa de 720 px, aunque la página sea ancha.
   ============================================================ */

.covepa-relacionados {
    container: covepa-rel / inline-size;
    max-width: 720px;
    margin: 28px 0;
}
.covepa-relacionados .covepa-relacionados__title {
    margin: 0 0 10px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--covepa-muted);
}
.covepa-relacionados .covepa-relacionados__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
.covepa-relacionados .covepa-rel-card,
.covepa-relacionados .covepa-rel-card:visited {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    padding: 12px 14px;
    background: #fff;
    border: 0.5px solid var(--covepa-border);
    border-left: 3px solid var(--covepa-red);
    border-radius: 0 8px 8px 0;
    color: var(--covepa-text);
    text-decoration: none;
    box-sizing: border-box;
}
.covepa-relacionados .covepa-rel-card:hover,
.covepa-relacionados .covepa-rel-card:focus-visible {
    border-color: var(--covepa-red);
    color: var(--covepa-text);
    text-decoration: none;
}
.covepa-relacionados .covepa-rel-card:focus-visible {
    outline: 2px solid var(--covepa-text);
    outline-offset: 2px;
}
.covepa-relacionados .covepa-rel-card__media {
    display: block;
    min-height: 5.5rem;
    border-radius: 6px;
    background: var(--covepa-bg);
    overflow: hidden;
}
.covepa-relacionados .covepa-rel-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}
.covepa-rel-card__body { display: block; min-width: 0; }
.covepa-relacionados .covepa-rel-card__cat {
    display: block;
    margin: 0 0 3px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--covepa-red);
}
.covepa-relacionados .covepa-rel-card__title {
    display: block;
    margin: 0 0 4px;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}
.covepa-rel-card:hover .covepa-rel-card__title { text-decoration: underline; }
.covepa-relacionados .covepa-rel-card__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0 0 6px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--covepa-muted);
}
.covepa-relacionados .covepa-rel-card__cta {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--covepa-red);
}

@container covepa-rel (min-width: 35rem) {
    .covepa-relacionados .covepa-relacionados__list[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .covepa-relacionados .covepa-relacionados__list[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .covepa-relacionados .covepa-relacionados__list:not([data-count="1"]) .covepa-rel-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 0 0 12px;
        border-left-width: 0.5px;
        border-radius: 8px;
        overflow: hidden;
    }
    .covepa-relacionados .covepa-relacionados__list:not([data-count="1"]) .covepa-rel-card__media {
        aspect-ratio: 16 / 9;
        min-height: 0;
        border-radius: 0;
    }
    .covepa-relacionados .covepa-relacionados__list:not([data-count="1"]) .covepa-rel-card__body { padding: 0 12px; }
}

/* ============================================================
   BLOQUE CHARLAS (covepa/charlas): próximas (tarjeta completa) + anteriores (fila compacta, sin foto)
   ============================================================ */

.covepa-charlas {
    container: covepa-charlas / inline-size;
    max-width: 720px;
}
.covepa-charla,
.covepa-charla-pasada { scroll-margin-top: 96px; }          /* el enlace /charlas/#tema-fecha no queda bajo la cabecera */
.covepa-charla:target,
.covepa-charla-pasada:target { outline: 2px solid var(--covepa-yellow); outline-offset: 3px; }

.covepa-charla .covepa-charla__chip {
    display: inline-block;
    margin: 0 0 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--covepa-yellow);
    color: var(--covepa-text);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.covepa-charlas .covepa-charlas__vacio {
    margin: 0 0 24px;
    padding: 16px;
    background: #fff;
    border: 1px dashed var(--covepa-border);
    border-radius: 8px;
    font-size: 0.9375rem;
    color: var(--covepa-muted);
}

.covepa-charlas .covepa-charlas__pasadas {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--covepa-border);
    border-radius: 8px;
    overflow: hidden;
}
.covepa-charlas .covepa-charla-pasada {
    display: grid;
    gap: 2px 16px;
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--covepa-border);
    line-height: 1.4;
}
.covepa-charlas .covepa-charla-pasada:last-child { border-bottom: 0; }
.covepa-charlas .covepa-charla-pasada__datos { min-width: 0; }
.covepa-charlas .covepa-charla-pasada__fecha {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--covepa-muted);
}
.covepa-charlas .covepa-charla-pasada__titulo {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--covepa-text);
    overflow-wrap: anywhere;
}
.covepa-charlas .covepa-charla-pasada__detalle {
    margin: 0;
    font-size: 0.875rem;
    color: var(--covepa-muted);
}
.covepa-charlas .covepa-charla-pasada__resumen,
.covepa-charlas .covepa-charla-pasada__resumen:visited {
    justify-self: start;
    padding: 6px 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--covepa-red);
    text-decoration: none;
}
.covepa-charlas .covepa-charla-pasada__resumen:hover,
.covepa-charlas .covepa-charla-pasada__resumen:focus { color: #a8000d; text-decoration: underline; }

.covepa-charlas .covepa-charlas__mas > summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;                        /* objetivo táctil mínimo */
    padding: 0 16px;
    border: 1.5px solid var(--covepa-red);
    border-radius: 8px;
    background: #fff;
    color: var(--covepa-red);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.covepa-charlas .covepa-charlas__mas > summary::-webkit-details-marker { display: none; }
.covepa-charlas .covepa-charlas__mas > summary:hover { background: #fbeaec; }
.covepa-charlas .covepa-charlas__mas > summary:focus-visible { outline: 2px solid var(--covepa-text); outline-offset: 2px; }
.covepa-charlas .covepa-charlas__mas[open] > summary { margin-bottom: 12px; }

/* contenedor ancho: fecha | datos | enlace al resumen en una sola línea */
@container covepa-charlas (min-width: 34rem) {
    .covepa-charlas .covepa-charla-pasada {
        grid-template-columns: 12rem minmax(0, 1fr) auto;
        align-items: baseline;
    }
}

/* ============================================================
   Editor de bloques: bloque Charla. La configuración está en la columna
   derecha (InspectorControls); el centro solo muestra la vista previa.
   ============================================================ */

/* Bloque vacío (sin título todavía) */
.covepa-charla-editor__vacio {
    padding: 24px 16px;
    text-align: center;
    background: #fafaf8;
    border: 1px dashed var(--covepa-border);
    border-radius: 8px;
    font-family: system-ui, sans-serif;
}
.covepa-charla-editor__vacio p { margin: 0; }
.covepa-charla-editor__vacio-icono { margin-bottom: 8px !important; font-size: 24px; }
.covepa-charla-editor__vacio-titulo { margin-bottom: 4px !important; font-size: 14px; font-weight: 600; color: var(--covepa-text); }
.covepa-charla-editor__vacio-texto { font-size: 13px; line-height: 1.5; color: var(--covepa-muted); }