/**
 * Single Post Styles
 * Estilos compartidos (breadcrumb, navegación) + template General
 * Figma General: node 4018-31948 — contenedor 1000px, H4 título, body 18px muted
 */

/* ==========================================================================
   Main Container
   ========================================================================== */

.single-post {
    background-color: var(--wp--preset--color--white, #FFFFFF);
    padding-bottom: 0;
}

.single-post__article {
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Hero Image
   ========================================================================== */

.single-post__hero {
    width: 100%;
    max-height: 680px;
    overflow: hidden;
}

.single-post__hero-img {
    width: 100%;
    height: 100%;
    max-height: 680px;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   Container
   ========================================================================== */

.single-post__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.single-post__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: #787878;
}

.single-post__breadcrumb a {
    color: #787878;
    text-decoration: none;
    transition: color 0.2s ease;
}

.single-post__breadcrumb a:hover {
    color: var(--wp--preset--color--primary, #D50032);
}

.single-post__breadcrumb-sep {
    color: #CACACA;
}

.single-post__breadcrumb-current {
    color: var(--wp--preset--color--text-dark, #333333);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* ==========================================================================
   Article Header
   ========================================================================== */

.single-post__header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
}

.single-post__category {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    width: fit-content;
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wp--preset--color--primary, #D50032);
    background-color: rgba(213, 0, 50, 0.08);
    border-radius: 20px;
}

.single-post__title {
    margin: 0;
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--wp--preset--color--text-dark, #222222);
}

.single-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: #787878;
}

.single-post__source,
.single-post__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.single-post__source svg,
.single-post__date svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* ==========================================================================
   Article Content
   ========================================================================== */

.single-post__content {
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--wp--preset--color--text-dark, #333333);
    margin-bottom: 40px;
}

.single-post__content p {
    margin: 0 0 1.5em;
}

.single-post__content h2 {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    margin: 2em 0 0.8em;
    color: var(--wp--preset--color--text-dark, #222222);
}

.single-post__content h3 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    margin: 1.5em 0 0.6em;
    color: var(--wp--preset--color--text-dark, #222222);
}

.single-post__content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1.5em 0;
}

.single-post__content blockquote {
    margin: 1.5em 0;
    padding: 20px 24px;
    border-left: 4px solid var(--wp--preset--color--primary, #D50032);
    background-color: #FAFAFA;
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: #555;
}

.single-post__content blockquote p:last-child {
    margin-bottom: 0;
}

.single-post__content ul,
.single-post__content ol {
    margin: 1em 0;
    padding-left: 1.5em;
}

.single-post__content li {
    margin-bottom: 0.5em;
}

.single-post__content a {
    color: var(--wp--preset--color--primary, #D50032);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.single-post__content a:hover {
    color: var(--wp--preset--color--primary-hover, #B0002A);
}

/* ==========================================================================
   Source Link
   ========================================================================== */

.single-post__source-link {
    display: flex;
    margin-bottom: 48px;
    padding-top: 24px;
    border-top: 1px solid #EBEBEB;
}

/* ==========================================================================
   Post Navigation
   ========================================================================== */

.single-post__navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding-top: 32px;
    border-top: 1px solid #EBEBEB;
}

.single-post__nav-link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-radius: 12px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.single-post__nav-link:hover {
    background-color: #FAFAFA;
}

.single-post__nav-link--next {
    text-align: right;
    align-items: flex-end;
}

.single-post__nav-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wp--preset--color--primary, #D50032);
}

.single-post__nav-title {
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--wp--preset--color--text-dark, #333333);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .single-post__hero {
        max-height: 320px;
    }

    .single-post__hero-img {
        max-height: 320px;
    }

    .single-post__container {
        padding: 24px 16px 48px;
    }

    .single-post__breadcrumb {
        margin-bottom: 24px;
        font-size: 12px;
    }

    .single-post__title {
        font-size: 30px;
    }

    .single-post__header {
        gap: 12px;
        margin-bottom: 32px;
    }

    .single-post__meta {
        gap: 12px;
        font-size: 13px;
    }

    .single-post__content {
        font-size: 16px;
        margin-bottom: 32px;
    }

    .single-post__content h2 {
        font-size: 24px;
    }

    .single-post__content h3 {
        font-size: 20px;
    }

    .single-post__navigation {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .single-post__nav-link--next {
        text-align: left;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .single-post__hero {
        max-height: 240px;
    }

    .single-post__hero-img {
        max-height: 240px;
    }

    .single-post__container {
        padding: 16px 12px 40px;
    }

    .single-post__title {
        font-size: 26px;
    }

    .single-post__content {
        font-size: 15px;
    }
}

/* ==========================================================================
   Template General — SECTION 1: Header
   Figma: node 4052-32733
   bg #F4F4F4, column centrado, gap 40px, padding 24px 64px 56px
   ========================================================================== */

.single-general {
    background-color: var(--wp--preset--color--white, #FFFFFF);
}

.single-general__article {
    margin: 0;
    padding: 0;
}

/* Header section: fondo light-gray, column, center */
.single-general__header {
    background-color: var(--wp--preset--color--light-gray, #F4F4F4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 24px 64px 56px;
    width: 100%;
}

/* Breadcrumb — md body medium: Inter 500, 16px, #787878 */
.single-general__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 500;
    color: var(--wp--preset--color--text-light, #787878);
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
}

.single-general__breadcrumb a,
.single-general__breadcrumb-link {
    color: var(--wp--preset--color--text-light, #787878);
    text-decoration: none;
    padding: 8px;
    border-radius: 8px;
    white-space: nowrap;  /* no romper palabras en links */
    flex-shrink: 0;       /* los links no se comprimen */
    transition: color 0.2s ease, background-color 0.2s ease;
}

.single-general__breadcrumb a:hover {
    color: var(--wp--preset--color--primary, #D50032);
    background-color: rgba(213, 0, 50, 0.05);
}

.single-general__breadcrumb-sep {
    color: #CACACA;
    flex-shrink: 0; /* el separador no se comprime */
}

/* Active (current) breadcrumb item: bg rojo suave + texto rojo */
.single-general__breadcrumb-current {
    color: var(--wp--preset--color--primary, #D50032);
    background-color: rgba(213, 0, 50, 0.05);
    padding: 8px;
    border-radius: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;    /* necesario para que ellipsis funcione en flex */
    flex-shrink: 1;  /* el item actual cede espacio si es necesario */
}

/* Header content: column, center, gap 24px
   max-width 1000px para alinear con el body (Figma) */
.single-general__header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
}

/* Badges row: row, gap 10px, centered — Figma node 4052-32734 */
.single-general__badges {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* Badge item: xs body bold — Inter 700, 12px, #333333
   bg #F4F4F4, border 1px solid #787878, border-radius 40px, padding 4px 8px */
.single-general__badge {
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: var(--wp--preset--font-size--tiny, 12px);
    font-weight: 700;
    line-height: 1.21;
    color: var(--wp--preset--color--text-dark, #333333);
    background-color: var(--wp--preset--color--light-gray, #F4F4F4);
    border: 1px solid var(--wp--preset--color--secondary, #787878);
    border-radius: 40px;
    padding: 4px 8px;
}


/* Title: H2 Bold — Inter 700, 48px, #333333, CENTER */
.single-general__title {
    margin: 0;
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: var(--wp--preset--font-size--extra-large, 48px); /* clamp 36→48px */
    font-weight: 700;
    line-height: 1.21;
    color: var(--wp--preset--color--text-dark, #333333);
    text-align: center;
    width: 100%;
}

/* Meta row: row, centered, gap 24px */
.single-general__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

/* Meta item: sm body medium — Inter 500, 14px, #787878, flex row gap 8px */
.single-general__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: var(--wp--preset--font-size--small, 14px);
    font-weight: 500;
    line-height: 1.21;
    color: var(--wp--preset--color--text-light, #787878);
}

.single-general__meta-item svg {
    flex-shrink: 0;
    color: var(--wp--preset--color--text-light, #787878);
}

/* Excerpt/description: lg body regular — Inter 400, 18px, #4F4F4F, CENTER */
.single-general__excerpt {
    margin: 0;
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: var(--wp--preset--font-size--body-large, 18px);
    font-weight: 400;
    line-height: 1.21;
    color: var(--wp--preset--color--text-gray, #4F4F4F);
    text-align: center;
    width: 100%;
}

/* Hero image: full-width, 562px alto, al fondo del header */
.single-general__hero {
    width: 100%;
    height: auto;
    overflow: hidden;
}

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

/* ==========================================================================
   Template General — SECTION 2: Content body
   Figma: node 4018-31948
   Outer: padding 24px 64px 56px + center (mismo ritmo que el header)
   Inner frame: 1000px fixed, column, gap 40px, sin padding propio
   ========================================================================== */

/* Outer section — mismo padding que el header para sinergia visual */
.single-general__body-section {
    background-color: var(--wp--preset--color--white, #FFFFFF);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 64px 56px;
    width: 100%;
}

/* Inner frame: 1000px, column, gap 40px — el padding está en el outer */
.single-general__container {
    max-width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

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

.single-general__body p {
    margin: 0 0 1.5em;
}

.single-general__body p:last-child {
    margin-bottom: 0;
}

/* Headings within article body: H4 Bold (#333333) */
.single-general__body h2 {
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.21;
    color: var(--wp--preset--color--text-dark, #333333);
    margin: 0;
}

.single-general__body h3 {
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.21;
    color: var(--wp--preset--color--text-dark, #333333);
    margin: 0;
}

.single-general__body h4 {
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.21;
    color: var(--wp--preset--color--text-dark, #333333);
    margin: 0;
}

.single-general__body img {
    max-width: 100%;
    height: auto;
    display: block;
}

.single-general__body blockquote {
    margin: 0;
    padding: 20px 24px;
    border-left: 4px solid var(--wp--preset--color--primary, #D50032);
    background-color: #FAFAFA;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #555;
}

.single-general__body blockquote p:last-child {
    margin-bottom: 0;
}

.single-general__body ul,
.single-general__body ol {
    margin: 0;
    padding-left: 1.5em;
}

.single-general__body li {
    margin-bottom: 0.5em;
}

.single-general__body a {
    color: var(--wp--preset--color--primary, #D50032);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.single-general__body a:hover {
    color: var(--wp--preset--color--primary-hover, #B0002A);
}

/* Iframes / embeds (videos YouTube etc.)
   max-width: 100% respeta el ancho elegido en el editor pero evita el desbordamiento */
.single-general__body iframe {
    max-width: 100%;
    display: block;
}

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

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

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

/* Source link */
.single-general__source-link {
    padding-top: 16px;
    border-top: 1px solid #EBEBEB;
}

/* ==========================================================================
   Responsive — header + body section comparten la misma lógica de padding
   ========================================================================== */

@media (max-width: 1024px) {
    .single-general__header,
    .single-general__body-section {
        padding: 24px 40px 48px;
    }
}

@media (max-width: 768px) {
    .single-general__header,
    .single-general__body-section {
        padding: 20px 20px 40px;
        gap: 24px;
    }

    .single-general__breadcrumb {
        font-size: 14px; /* reducir ligeramente en tablet/móvil para caber */
        gap: 4px;
        flex-wrap: nowrap;
    }

    .single-general__breadcrumb a,
    .single-general__breadcrumb-link {
        padding: 6px 8px;
    }

    .single-general__breadcrumb-current {
        padding: 6px 8px;
    }

    /* Figma Mobile: header-content alineado a la izquierda */
    .single-general__header-content {
        align-items: flex-start;
        gap: 24px;
    }

    /* Figma Mobile: badges alineados a la izquierda */
    .single-general__badges {
        justify-content: flex-start;
    }

    /* Figma: Mobile/H3 Bold — 28px, alineación LEFT */
    .single-general__title {
        font-size: 28px;
        text-align: left;
    }

    /* Figma: meta row alineado a la izquierda, gap 24px */
    .single-general__meta {
        justify-content: flex-start;
        gap: 16px;
    }

    /* Figma: Mobile/lg body regular — 16px, alineación LEFT */
    .single-general__excerpt {
        font-size: 16px;
        text-align: left;
    }

    .single-general__hero {
        height: 280px;
    }

    .single-general__container {
        gap: 28px;
    }

    .single-general__body {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .single-general__header,
    .single-general__body-section {
        padding: 16px 16px 32px;
    }

    .single-general__breadcrumb {
        font-size: 12px;
        gap: 2px;
    }

    .single-general__breadcrumb a,
    .single-general__breadcrumb-link {
        padding: 4px 6px;
    }

    .single-general__breadcrumb-current {
        padding: 4px 6px;
    }

    .single-general__header-content {
        gap: 16px;
    }

    /* En pantallas muy pequeñas reducir a 24px */
    .single-general__title {
        font-size: 24px;
    }

    /* Meta en columna en pantallas muy pequeñas */
    .single-general__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .single-general__hero {
        height: 220px;
    }

    .single-general__container {
        gap: 24px;
    }

    .single-general__body {
        font-size: 16px;
    }
}

/* ==========================================================================
   Related Articles Section
   Figma: node 4166-26927
   bg #F4F4F4, column center, gap 40px, padding 56px 64px
   ========================================================================== */

.single-related {
    background-color: var(--wp--preset--color--light-gray, #F4F4F4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 56px 64px;
    width: 100%;
}

/* Title: H3 Bold — Inter 700, 36px, #333333, centered */
.single-related__title {
    margin: 0;
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: var(--wp--preset--font-size--large, 36px);
    font-weight: 700;
    line-height: 1.21;
    color: var(--wp--preset--color--text-dark, #333333);
    text-align: center;
    width: 100%;
    max-width: var(--wp--style--global--wide-size);
}

/* Grid: 3 columns, gap 40px, full width bounded by 1312px */
.single-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    width: 100%;
    max-width: var(--wp--style--global--wide-size);
    margin: auto;
    width: 100%;
}

@media (max-width: 1024px) {
    .single-related {
        padding: 40px 40px;
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .single-related {
        padding: 32px 20px;
        gap: 24px;
    }

    .single-related__title {
        font-size: 28px;
    }

    .single-related__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

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

/* ─── Social share row — single-general ─────────────────────
   Figma node 5321-29009: row, alignItems center, gap 8px, fill
   Posición: después del body del artículo, dentro del container
──────────────────────────────────────────────────────────── */
.single-general__share-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding-top: var(--wp--preset--spacing--medium, 2rem);
    border-top: 1px solid var(--wp--preset--color--light-gray, #F4F4F4);
}

/* "Compartir:" — md body medium (16px, #333333) */
.single-general__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;
}

/* Botones de redes: 40×40px, white, #787878 border 1px, 24px radius */
.single-general__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;
}

.single-general__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 clipboard (Instagram) — compartido entre ambos templates */
.single-post__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;
}