/* ==========================================================================
   VIDIA BLOG - CSS FINAL AISLADO
   Ruta: /modules/ets_blog/views/css/vidia_blog.css
   Se carga DESPUÉS de blog_home.css, custom.css y blog.css.
   ========================================================================== */

body.vidia-blog-page,
body#ets_blog_page {
    --vidia-green: #617b3f;
    --vidia-dark: #40542d;
    --vidia-beige: #c8a88b;
    --vidia-beige-dark: #9d7758;
    --vidia-text: #35402f;
    --vidia-border: #dfe7d5;
    background: #f4f7f1 !important;
}

/* Mantener cabecera */
body.vidia-blog-page #header,
body#ets_blog_page #header {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ocultar TODO lo lateral/secundario del blog */
body.vidia-blog-page #left-column,
body.vidia-blog-page #left_column,
body.vidia-blog-page #right-column,
body.vidia-blog-page #right_column,
body.vidia-blog-page .ets_blog_sidebar,
body.vidia-blog-page .ets-navigation-blog,
body.vidia-blog-page .ets-navigation-blog-content,
body#ets_blog_page #left-column,
body#ets_blog_page #left_column,
body#ets_blog_page #right-column,
body#ets_blog_page #right_column,
body#ets_blog_page .ets_blog_sidebar,
body#ets_blog_page .ets-navigation-blog,
body#ets_blog_page .ets-navigation-blog-content {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 0 !important;
}

/* El usuario pidió dejar prácticamente Header + artículo */
body.vidia-blog-page #wrapper .breadcrumb,
body.vidia-blog-page #footer,
body.vidia-blog-page .footer-container,
body#ets_blog_page #wrapper .breadcrumb,
body#ets_blog_page #footer,
body#ets_blog_page .footer-container {
    display: none !important;
}

body.vidia-blog-page #wrapper,
body#ets_blog_page #wrapper {
    padding: 32px 0 60px !important;
    background: #f4f7f1 !important;
}

/* Romper el encajonado Bootstrap */
body.vidia-blog-page #wrapper > .container,
body.vidia-blog-page #wrapper .container,
body#ets_blog_page #wrapper > .container,
body#ets_blog_page #wrapper .container {
    width: 100% !important;
    max-width: 1500px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin: 0 auto !important;
}

body.vidia-blog-page #wrapper .row,
body#ets_blog_page #wrapper .row {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.vidia-blog-page #content-wrapper,
body.vidia-blog-page #center_column,
body.vidia-blog-page #center-column,
body#ets_blog_page #content-wrapper,
body#ets_blog_page #center_column,
body#ets_blog_page #center-column {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
}

/* Neutraliza cualquier col-md/col-lg aplicada por la plantilla */
body.vidia-blog-page #content-wrapper[class*="col-"],
body.vidia-blog-page #center_column[class*="col-"],
body.vidia-blog-page #center-column[class*="col-"],
body#ets_blog_page #content-wrapper[class*="col-"],
body#ets_blog_page #center_column[class*="col-"],
body#ets_blog_page #center-column[class*="col-"] {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
}

/* Quitar envoltorios visuales antiguos */
body.vidia-blog-page #ets_blog_page,
body.vidia-blog-page #ets_blog_page #content,
body.vidia-blog-page .ets-blog,
body.vidia-blog-page .ets-blog-wrapper,
body#ets_blog_page #content,
body#ets_blog_page .ets-blog,
body#ets_blog_page .ets-blog-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* Artículo principal */
body.vidia-blog-page .ets-blog-wrapper-detail,
body#ets_blog_page .ets-blog-wrapper-detail {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 44px !important;
    background: #fff !important;
    border: 1px solid var(--vidia-border) !important;
    border-radius: 28px !important;
    box-shadow: 0 20px 65px rgba(49,67,35,.11) !important;
    overflow: visible !important;
}

/* Quitar extras del artículo */
body.vidia-blog-page .ets-blog-related-posts,
body.vidia-blog-page #ets-blog-related-products,
body.vidia-blog-page .ets-block-author,
body.vidia-blog-page .ets_comment_form_blog,
body.vidia-blog-page .ets_blog-comments-list,
body.vidia-blog-page .ets-blog-wrapper-comment,
body.vidia-blog-page .blog-extra,
body.vidia-blog-page .extra_tag_cat,
body.vidia-blog-page .blog-rate-post,
body.vidia-blog-page .ets-blog-thumbnail-items,
body.vidia-blog-page .ets-blog-thumbnail-list {
    display: none !important;
}

/* Reset fuerte del contenido */
body.vidia-blog-page .post-details .blog_description,
body#ets_blog_page .post-details .blog_description {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--vidia-text) !important;
    font-family: Manrope, "Segoe UI", Arial, sans-serif !important;
    font-size: 17px !important;
    line-height: 1.75 !important;
    overflow: visible !important;
}

body.vidia-blog-page .post-details .blog_description *,
body#ets_blog_page .post-details .blog_description * {
    box-sizing: border-box !important;
}

body.vidia-blog-page .post-details .blog_description p,
body#ets_blog_page .post-details .blog_description p {
    color: var(--vidia-text) !important;
    font-size: 17px !important;
    line-height: 1.75 !important;
    margin: 0 0 20px !important;
}

/* =========================================================
   RECONSTRUCCIÓN DEL HTML DEL ARTÍCULO VIDIA
   ========================================================= */

body.vidia-blog-page .blog_description > div:first-child,
body#ets_blog_page .blog_description > div:first-child {
    display: block !important;
    width: 100% !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
}

/* HERO */
body.vidia-blog-page .blog_description > div:first-child > div:nth-child(1),
body#ets_blog_page .blog_description > div:first-child > div:nth-child(1) {
    display: block !important;
    padding: 56px 44px 50px !important;
    margin: 0 0 38px !important;
    text-align: center !important;
    background:
      radial-gradient(circle at 12% 15%,rgba(116,151,71,.14),transparent 30%),
      radial-gradient(circle at 92% 80%,rgba(200,168,139,.17),transparent 32%),
      linear-gradient(135deg,#f1f7e9 0%,#fff 55%,#fcf6ee 100%) !important;
    border: 1px solid #e0e8d7 !important;
    border-radius: 28px !important;
    box-shadow: 0 18px 48px rgba(54,72,39,.09) !important;
}

body.vidia-blog-page .blog_description > div:first-child > div:nth-child(1) h1,
body#ets_blog_page .blog_description > div:first-child > div:nth-child(1) h1 {
    margin: 0 0 20px !important;
    color: var(--vidia-dark) !important;
    font-size: clamp(32px,4.2vw,48px) !important;
    line-height: 1.14 !important;
    text-transform: none !important;
    font-weight: 800 !important;
}

body.vidia-blog-page .blog_description > div:first-child > div:nth-child(1) h1 span,
body#ets_blog_page .blog_description > div:first-child > div:nth-child(1) h1 span {
    color: var(--vidia-beige-dark) !important;
}

/* FRASE VERDE */
body.vidia-blog-page .blog_description > div:first-child > div:nth-child(3),
body#ets_blog_page .blog_description > div:first-child > div:nth-child(3) {
    display: block !important;
    padding: 40px !important;
    margin: 12px 8px 44px !important;
    text-align: center !important;
    background: linear-gradient(135deg,#40542d,#70894c) !important;
    border-radius: 23px !important;
    box-shadow: 0 17px 42px rgba(53,70,37,.22) !important;
}

body.vidia-blog-page .blog_description > div:first-child > div:nth-child(3) p,
body#ets_blog_page .blog_description > div:first-child > div:nth-child(3) p {
    color: #fff !important;
    font-size: clamp(20px,2.4vw,26px) !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* DOS BLOQUES PRINCIPALES */
body.vidia-blog-page .blog_description > div:first-child > div:nth-child(4),
body.vidia-blog-page .blog_description > div:first-child > div:nth-child(5),
body#ets_blog_page .blog_description > div:first-child > div:nth-child(4),
body#ets_blog_page .blog_description > div:first-child > div:nth-child(5) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    padding: 42px 38px 40px 105px !important;
    margin: 0 0 27px !important;
    border-radius: 22px !important;
    border: 1px solid var(--vidia-border) !important;
    box-shadow: 0 12px 34px rgba(53,70,37,.08) !important;
}

body.vidia-blog-page .blog_description > div:first-child > div:nth-child(4),
body#ets_blog_page .blog_description > div:first-child > div:nth-child(4) {
    background: linear-gradient(135deg,#f1f7ea,#fff) !important;
    border-left: 7px solid #789d49 !important;
}

body.vidia-blog-page .blog_description > div:first-child > div:nth-child(5),
body#ets_blog_page .blog_description > div:first-child > div:nth-child(5) {
    background: linear-gradient(135deg,#fcf5ec,#fff) !important;
    border-left: 7px solid var(--vidia-beige) !important;
}

/* Iconos generados por CSS: aparecen aunque TinyMCE borre los emoji */
body.vidia-blog-page .blog_description > div:first-child > div:nth-child(4)::before,
body#ets_blog_page .blog_description > div:first-child > div:nth-child(4)::before {
    content: "🌱" !important;
}

body.vidia-blog-page .blog_description > div:first-child > div:nth-child(5)::before,
body#ets_blog_page .blog_description > div:first-child > div:nth-child(5)::before {
    content: "🤝" !important;
}

body.vidia-blog-page .blog_description > div:first-child > div:nth-child(4)::before,
body.vidia-blog-page .blog_description > div:first-child > div:nth-child(5)::before,
body#ets_blog_page .blog_description > div:first-child > div:nth-child(4)::before,
body#ets_blog_page .blog_description > div:first-child > div:nth-child(5)::before {
    position: absolute !important;
    left: 29px !important;
    top: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 58px !important;
    height: 58px !important;
    background: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 7px 18px rgba(0,0,0,.08) !important;
    font-family: "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif !important;
    font-size: 32px !important;
    line-height: 1 !important;
}

/* 3 PILARES */
body.vidia-blog-page .blog_description > div:first-child > div:nth-child(7),
body#ets_blog_page .blog_description > div:first-child > div:nth-child(7) {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 0 0 45px !important;
}

body.vidia-blog-page .blog_description > div:first-child > div:nth-child(7) > div,
body#ets_blog_page .blog_description > div:first-child > div:nth-child(7) > div {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 31px 24px !important;
    text-align: center !important;
    background: #fff !important;
    border: 1px solid var(--vidia-border) !important;
    border-radius: 21px !important;
    box-shadow: 0 12px 32px rgba(53,70,37,.08) !important;
}

/* FINAL VERDE */
body.vidia-blog-page .blog_description > div:first-child > div:nth-child(8),
body#ets_blog_page .blog_description > div:first-child > div:nth-child(8) {
    display: block !important;
    padding: 50px 44px !important;
    margin: 0 0 34px !important;
    text-align: center !important;
    background: linear-gradient(135deg,#40542d,#728b4e) !important;
    border-radius: 24px !important;
    box-shadow: 0 18px 45px rgba(53,70,37,.20) !important;
}

body.vidia-blog-page .blog_description > div:first-child > div:nth-child(8) h2,
body.vidia-blog-page .blog_description > div:first-child > div:nth-child(8) p,
body.vidia-blog-page .blog_description > div:first-child > div:nth-child(8) strong,
body#ets_blog_page .blog_description > div:first-child > div:nth-child(8) h2,
body#ets_blog_page .blog_description > div:first-child > div:nth-child(8) p,
body#ets_blog_page .blog_description > div:first-child > div:nth-child(8) strong {
    color: #fff !important;
}

@media (max-width: 991px) {
    body.vidia-blog-page .ets-blog-wrapper-detail,
    body#ets_blog_page .ets-blog-wrapper-detail {
        padding: 25px 18px !important;
        border-radius: 20px !important;
    }

    body.vidia-blog-page .blog_description > div:first-child > div:nth-child(7),
    body#ets_blog_page .blog_description > div:first-child > div:nth-child(7) {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 767px) {
    body.vidia-blog-page #wrapper > .container,
    body.vidia-blog-page #wrapper .container,
    body#ets_blog_page #wrapper > .container,
    body#ets_blog_page #wrapper .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body.vidia-blog-page .ets-blog-wrapper-detail,
    body#ets_blog_page .ets-blog-wrapper-detail {
        padding: 14px 9px !important;
    }

    body.vidia-blog-page .blog_description > div:first-child > div:nth-child(1),
    body#ets_blog_page .blog_description > div:first-child > div:nth-child(1) {
        padding: 38px 18px !important;
    }

    body.vidia-blog-page .blog_description > div:first-child > div:nth-child(4),
    body.vidia-blog-page .blog_description > div:first-child > div:nth-child(5),
    body#ets_blog_page .blog_description > div:first-child > div:nth-child(4),
    body#ets_blog_page .blog_description > div:first-child > div:nth-child(5) {
        padding: 95px 22px 30px !important;
    }

    body.vidia-blog-page .blog_description > div:first-child > div:nth-child(8),
    body#ets_blog_page .blog_description > div:first-child > div:nth-child(8) {
        padding: 36px 20px !important;
    }
}