/**
 * Single post - Publicación template styles
 * Figma: node 4078-33567 / 4078-33568
 * Layout: 2 columnas — contenido (flex-grow) + sidebar (400px)
 */

/* ─── Outer wrapper ──────────────────────────────────────── */
.single-publicacion {
    width: 100%;
}

/* ─── Content wrapper (con padding) ─────────────────────── */
/* Mismo ritmo visual que single-general: padding 24px 64px 56px */
.single-publicacion__wrapper {
    padding: 24px 64px 56px;
    width: 100%;
}

/* ─── Inner container (max-width centrado) ───────────────── */
.single-publicacion__container {
    max-width: var(--wp--style--global--wide-size);
    margin-inline: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--medium);
}

/* ─── Two-column layout ──────────────────────────────────── */
/* Figma: row, space-between, gap 64px */
.single-publicacion__layout {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 64px;
}

/* ─── Left column: content ───────────────────────────────── */
/* Figma: 740px width, column, gap 24px */
.single-publicacion__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Badges: left-aligned in publicacion (vs. centered in general) */
.single-publicacion__content .single-general__badges {
    justify-content: flex-start;
}

/* Title: H3 Bold (36px, #333333, lh 1.21) */
.single-publicacion__title {
    font-family: var(--wp--preset--font-family--inter);
    font-size: var(--wp--preset--font-size--large); /* clamp 28→36px */
    font-weight: 700;
    line-height: 1.21;
    color: var(--wp--preset--color--text-dark);
    margin: 0;
}

/* Description/excerpt: lg body regular (18px, #787878, lh 1.21) — Figma node 4078-33568 */
.single-publicacion__excerpt {
    margin: 0;
    font-family: var(--wp--preset--font-family--inter);
    font-size: var(--wp--preset--font-size--body-large); /* 18px */
    font-weight: 400;
    line-height: 1.21;
    color: var(--wp--preset--color--text-light);
}

/* Body: lg body regular (18px, #787878, lh 1.6) */
.single-publicacion__body {
    font-family: var(--wp--preset--font-family--inter);
    font-size: var(--wp--preset--font-size--body-large); /* 18px */
    font-weight: 400;
    line-height: 1.6;
    color: var(--wp--preset--color--text-light);
}

.single-publicacion__body p {
    margin-block-end: 1.25em;
}

.single-publicacion__body p:last-child {
    margin-block-end: 0;
}

/* Imágenes */
.single-publicacion__body img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Iframes / embeds — max-width respeta el ancho del editor pero evita el desbordamiento */
.single-publicacion__body iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Wrappers de Gutenberg embeds y Complianz */
.single-publicacion__body .wp-block-embed,
.single-publicacion__body .wp-block-embed__wrapper,
.single-publicacion__body .wp-video,
.single-publicacion__body .cmplz-placeholder-element,
.single-publicacion__body .cmplz-video {
    max-width: 100%;
}

/* Tablas: scroll horizontal si son muy anchas */
.single-publicacion__body table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

/* SVGs inline */
.single-publicacion__body svg {
    max-width: 100%;
    height: auto;
}

/* ─── Right column: sidebar ──────────────────────────────── */
/* Figma: 400px fixed, column, gap 16px — sticky on scroll */
.single-publicacion__sidebar {
    width: 400px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 84px;
    align-self: flex-start;
}

/* Document preview image: 555px height, shadow-lg */
.single-publicacion__doc-preview {
    width: 100%;
    height: 555px;
    overflow: hidden;
    box-shadow: var(--wp--custom--shadow--lg);
}

.single-publicacion__doc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ─── Metadata ───────────────────────────────────────────── */
/* Figma: column, gap 8px */
.single-publicacion__meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Fecha row en columna izquierda: row, center, gap 8px — Figma node 4223-28010 */
.single-publicacion__date-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--wp--preset--font-family--inter);
    font-size: var(--wp--preset--font-size--small); /* 14px */
    font-weight: 500;
    line-height: 1.21;
    color: var(--wp--preset--color--text-light);
}

.single-publicacion__date-row svg {
    flex-shrink: 0;
}

/* sm body medium (14px, #787878, fw 500) */
.single-publicacion__meta-item {
    font-family: var(--wp--preset--font-family--inter);
    font-size: var(--wp--preset--font-size--small); /* 14px */
    font-weight: 500;
    line-height: 1.21;
    color: var(--wp--preset--color--text-light);
}

/* ─── Actions: Download + Solicitar ─────────────────────── */
/* Figma node 4089-33661: row, wrap, gap 10px, fill horizontal */
.single-publicacion__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

/* Botón secundario compartido: Descargar + Solicitar */
/* Figma: Secondary, h40, 24px radius, white bg, #787878 border, 14px bold */
/* flex: 1 solo cuando ambos botones están presentes (--dual) */
.single-publicacion__action-btn {
    flex: 0 0 auto;
    min-width: 0;
    height: 40px;
    padding: 8px 16px;
    border-radius: 24px;
    border: 1px solid var(--wp--preset--color--secondary, #787878);
    background-color: var(--wp--preset--color--white, #ffffff);
    color: var(--wp--preset--color--text-dark, #333333);
    font-family: var(--wp--preset--font-family--inter);
    font-size: var(--wp--preset--font-size--small, 14px);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.single-publicacion__action-btn:hover {
    background-color: var(--wp--preset--color--light-gray, #F4F4F4);
    color: var(--wp--preset--color--text-dark, #333333);
}

/* Cuando hay dos botones: ambos se expanden a partes iguales */
.single-publicacion__actions--dual .single-publicacion__action-btn {
    flex: 1;
}

/* ─── Social share row ───────────────────────────────────── */
/* Figma node 5321-28966: row, alignItems center, gap 8px, fill horizontal */
.single-publicacion__share-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* "Compartir:" label: md body medium (16px, #333333) */
.single-publicacion__share-label {
    font-family: var(--wp--preset--font-family--inter);
    font-size: var(--wp--preset--font-size--normal, 16px);
    font-weight: 500;
    line-height: 1.21;
    color: var(--wp--preset--color--text-dark, #333333);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Social icon buttons: 40×40px, white fill, #787878 border 1px, 24px radius */
.single-publicacion__social-btn {
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 24px;
    border: 1px solid var(--wp--preset--color--secondary, #787878);
    background-color: var(--wp--preset--color--white, #ffffff);
    color: var(--wp--preset--color--text-dark, #333333);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.single-publicacion__social-btn:hover {
    background-color: var(--wp--preset--color--primary, #D50032);
    border-color: var(--wp--preset--color--primary, #D50032);
    color: var(--wp--preset--color--white, #ffffff);
}

/* Toast de confirmación (Instagram clipboard) */
.single-publicacion__toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--wp--preset--color--text-dark, #333333);
    color: var(--wp--preset--color--white, #ffffff);
    font-family: var(--wp--preset--font-family--inter);
    font-size: var(--wp--preset--font-size--small, 14px);
    font-weight: 500;
    padding: 10px 20px;
    border-radius: var(--wp--custom--border-radius--md, 8px);
    z-index: 9999;
    pointer-events: none;
    white-space: nowrap;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    .single-publicacion__wrapper {
        padding: 24px 40px 48px;
    }

    .single-publicacion__layout {
        flex-direction: column;
        gap: var(--wp--preset--spacing--large);
    }

    .single-publicacion__sidebar {
        width: 100%;
        position: static;
        align-items: center; /* centrar todo el contenido del sidebar */
    }

    .single-publicacion__doc-preview {
        height: 300px;
        max-width: 400px;
        width: 100%;
    }

    .single-publicacion__meta {
        align-items: center;
        text-align: center;
    }

    .single-publicacion__actions {
        justify-content: center;
        max-width: 480px;
        width: 100%;
    }

    .single-publicacion__share-row {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .single-publicacion__wrapper {
        padding: 20px 20px 40px;
    }

    .single-publicacion__doc-preview {
        height: 240px;
    }

    .single-publicacion__actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .single-publicacion__wrapper {
        padding: 16px 16px 32px;
    }
}