/**
 * OLHOS 360 — Blog CSS
 * Estilos completos para o blog: single, archive, componentes.
 *
 * Paleta:
 *   Azul Escuro: #0B4669
 *   Azul Médio:  #0F5A8C
 *   Azul Claro:  #1D87B1
 *   Verde Água:  #36B8B0
 *   Verde Claro: #84C5A7
 *   Amarelo:     #F2C94C
 *   Vermelho:    #E74C3C
 *   Background:  #F4F7FA
 *   Card:        #FFFFFF
 *   Border:      #E0E8ED
 *
 * Fonte: Helvetica, "Helvetica Neue", Arial, sans-serif
 * Mobile-first: 375px → 768px → 1024px
 */

/* ============================================================
   RESET & BASE
   ============================================================ */

.o360-blog-main {
    font-family: Helvetica, "Helvetica Neue", Arial, sans-serif !important;
    color: #333 !important;
    background: #F4F7FA !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.6 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.o360-blog-main *,
.o360-blog-main *::before,
.o360-blog-main *::after {
    box-sizing: border-box !important;
    font-family: Helvetica, "Helvetica Neue", Arial, sans-serif !important;
}

/* ============================================================
   BARRA DE PROGRESSO DE LEITURA
   ============================================================ */

.o360-blog-progress {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #36B8B0, #84C5A7) !important;
    z-index: 99999 !important;
    transition: width 0.1s linear !important;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */

.o360-blog-breadcrumbs {
    background: #FFFFFF !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #E0E8ED !important;
}

.o360-blog-breadcrumbs-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0 !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 13px !important;
}

.o360-blog-breadcrumbs-list li {
    display: inline-flex !important;
    align-items: center !important;
}

.o360-blog-breadcrumbs-list a {
    color: #1D87B1 !important;
    text-decoration: none !important;
}

.o360-blog-breadcrumbs-list a:hover {
    text-decoration: underline !important;
}

.o360-bc-sep {
    margin: 0 6px !important;
    color: #999 !important;
}

.o360-bc-current {
    color: #666 !important;
}

/* ============================================================
   HEADER DO ARTIGO (Single)
   ============================================================ */

.o360-blog-header {
    background: #F4F7FA !important;
    padding: 32px 16px !important;
    text-align: center !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}

.o360-blog-cats {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}

.o360-blog-cat-badge {
    display: inline-block !important;
    background: #36B8B0 !important;
    color: #FFFFFF !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: background 0.2s ease !important;
}

.o360-blog-cat-badge:hover {
    background: #0B4669 !important;
    color: #FFFFFF !important;
}

.o360-blog-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #0B4669 !important;
    line-height: 1.3 !important;
    margin: 0 0 16px 0 !important;
}

.o360-blog-meta {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: 14px !important;
    color: #666 !important;
}

.o360-blog-meta-sep {
    color: #CCC !important;
}

.o360-blog-reading-time {
    color: #36B8B0 !important;
    font-weight: 500 !important;
}

/* ============================================================
   IMAGEM DE CAPA
   ============================================================ */

.o360-blog-featured-img {
    max-width: 1200px !important;
    margin: 0 auto 32px !important;
    padding: 0 16px !important;
}

.o360-blog-featured-img img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    display: block !important;
}

.o360-blog-img-caption {
    text-align: center !important;
    font-size: 13px !important;
    color: #888 !important;
    margin-top: 8px !important;
    font-style: italic !important;
}

/* ============================================================
   LAYOUT: SIDEBAR TOC + CONTEÚDO
   ============================================================ */

.o360-blog-layout {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    display: flex !important;
    gap: 40px !important;
}

/* Sidebar TOC — escondida no mobile */
.o360-blog-sidebar-toc {
    display: none !important;
}

/* Conteúdo principal */
.o360-blog-content {
    flex: 1 !important;
    max-width: 780px !important;
    margin: 0 auto !important;
    min-width: 0 !important;
}

/* ============================================================
   TABLE OF CONTENTS (TOC)
   ============================================================ */

.o360-blog-toc {
    background: #FFFFFF !important;
    border: 1px solid #E0E8ED !important;
    border-left: 3px solid #36B8B0 !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 20px !important;
    margin-bottom: 24px !important;
}

.o360-blog-toc-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.o360-blog-toc-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0B4669 !important;
    margin: 0 !important;
}

.o360-blog-toc-toggle {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    color: #666 !important;
}

.o360-blog-toc-list {
    list-style: none !important;
    margin: 12px 0 0 0 !important;
    padding: 0 !important;
    counter-reset: toc-counter !important;
}

.o360-blog-toc-item {
    margin-bottom: 6px !important;
    counter-increment: toc-counter !important;
}

.o360-blog-toc-item::before {
    content: counter(toc-counter) ". " !important;
    color: #36B8B0 !important;
    font-weight: 600 !important;
}

.o360-blog-toc-item.o360-toc-sub {
    padding-left: 20px !important;
    font-size: 14px !important;
}

.o360-blog-toc-item.o360-toc-sub::before {
    content: "— " !important;
    color: #999 !important;
    font-weight: 400 !important;
}

.o360-blog-toc-item a {
    color: #333 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    transition: color 0.2s ease !important;
}

.o360-blog-toc-item a:hover,
.o360-blog-toc-item a.active {
    color: #36B8B0 !important;
}

/* TOC Mobile — visível apenas no mobile */
.o360-blog-toc-mobile {
    display: block !important;
}

/* ============================================================
   CONTEÚDO DO ARTIGO — TIPOGRAFIA
   ============================================================ */

.o360-blog-content p {
    font-size: 16px !important;
    line-height: 1.8 !important;
    margin-bottom: 1.5em !important;
    color: #333 !important;
}

.o360-blog-content h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #0B4669 !important;
    margin: 2em 0 0.8em 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #36B8B0 !important;
    line-height: 1.3 !important;
}

.o360-blog-content h3 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #0F5A8C !important;
    margin: 1.5em 0 0.6em 0 !important;
    line-height: 1.4 !important;
}

.o360-blog-content h4 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #0B4669 !important;
    margin: 1.2em 0 0.5em 0 !important;
}

.o360-blog-content a {
    color: #1D87B1 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    transition: color 0.2s ease !important;
}

.o360-blog-content a:hover {
    color: #0B4669 !important;
}

.o360-blog-content ul,
.o360-blog-content ol {
    margin: 0 0 1.5em 0 !important;
    padding-left: 24px !important;
}

.o360-blog-content li {
    font-size: 16px !important;
    line-height: 1.7 !important;
    margin-bottom: 0.5em !important;
}

.o360-blog-content blockquote {
    border-left: 4px solid #36B8B0 !important;
    background: #FFFFFF !important;
    padding: 16px 20px !important;
    margin: 1.5em 0 !important;
    border-radius: 0 8px 8px 0 !important;
    font-style: italic !important;
    color: #555 !important;
}

.o360-blog-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin: 1em 0 !important;
}

.o360-blog-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 1.5em 0 !important;
    font-size: 15px !important;
}

.o360-blog-content th,
.o360-blog-content td {
    padding: 10px 14px !important;
    border: 1px solid #E0E8ED !important;
    text-align: left !important;
}

.o360-blog-content th {
    background: #0B4669 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

.o360-blog-content tr:nth-child(even) {
    background: #F4F7FA !important;
}

.o360-blog-content code {
    background: #F4F7FA !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    font-size: 14px !important;
    font-family: "Courier New", monospace !important;
}

.o360-blog-content pre {
    background: #1a1a2e !important;
    color: #e0e0e0 !important;
    padding: 16px 20px !important;
    border-radius: 8px !important;
    overflow-x: auto !important;
    margin: 1.5em 0 !important;
}

.o360-blog-content pre code {
    background: transparent !important;
    padding: 0 !important;
    color: inherit !important;
}

/* ============================================================
   TAGS
   ============================================================ */

.o360-blog-tags {
    max-width: 780px !important;
    margin: 24px auto !important;
    padding: 0 16px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
}

.o360-blog-tags-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #666 !important;
}

.o360-blog-tag {
    display: inline-block !important;
    background: #FFFFFF !important;
    border: 1px solid #E0E8ED !important;
    color: #0B4669 !important;
    font-size: 13px !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.o360-blog-tag:hover {
    background: #36B8B0 !important;
    color: #FFFFFF !important;
    border-color: #36B8B0 !important;
}

/* ============================================================
   CTA (Call to Action)
   ============================================================ */

.o360-blog-cta {
    max-width: 780px !important;
    margin: 40px auto !important;
    padding: 0 16px !important;
}

.o360-blog-cta-inner {
    background: linear-gradient(135deg, #0B4669 0%, #0F5A8C 100%) !important;
    color: #FFFFFF !important;
    padding: 40px 32px !important;
    border-radius: 12px !important;
    text-align: center !important;
}

.o360-blog-cta-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin: 0 0 12px 0 !important;
}

.o360-blog-cta-text {
    font-size: 16px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 0 24px 0 !important;
    line-height: 1.6 !important;
}

.o360-blog-cta-button {
    display: inline-block !important;
    background: #36B8B0 !important;
    color: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 14px 32px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.o360-blog-cta-button:hover {
    background: #84C5A7 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(54, 184, 176, 0.4) !important;
}

/* ============================================================
   ASSINATURA DO AUTOR
   ============================================================ */

.o360-blog-author {
    max-width: 780px !important;
    margin: 32px auto !important;
    padding: 0 16px !important;
}

.o360-blog-author-inner {
    display: flex !important;
    gap: 20px !important;
    align-items: flex-start !important;
    background: #FFFFFF !important;
    border: 1px solid #E0E8ED !important;
    border-top: 3px solid #36B8B0 !important;
    border-radius: 0 0 8px 8px !important;
    padding: 24px !important;
}

.o360-blog-author-logo {
    flex-shrink: 0 !important;
}

.o360-blog-author-logo img {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
}

.o360-blog-author-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.o360-blog-author-label {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #999 !important;
    margin: 0 0 4px 0 !important;
}

.o360-blog-author-name {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0B4669 !important;
    margin: 0 0 8px 0 !important;
}

.o360-blog-author-bio {
    font-size: 14px !important;
    color: #555 !important;
    line-height: 1.6 !important;
    margin: 0 0 12px 0 !important;
}

.o360-blog-author-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}

.o360-blog-author-link {
    color: #1D87B1 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.o360-blog-author-link:hover {
    text-decoration: underline !important;
}

.o360-blog-author-separator {
    color: #CCC !important;
    font-size: 10px !important;
}

/* ============================================================
   NAVEGAÇÃO ANTERIOR / PRÓXIMO
   ============================================================ */

.o360-blog-nav {
    max-width: 780px !important;
    margin: 32px auto !important;
    padding: 0 16px !important;
    display: flex !important;
    gap: 16px !important;
}

.o360-blog-nav-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #FFFFFF !important;
    border: 1px solid #E0E8ED !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.o360-blog-nav-item:hover {
    border-color: #36B8B0 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.o360-blog-nav-next {
    text-align: right !important;
}

.o360-blog-nav-label {
    font-size: 12px !important;
    color: #999 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 4px !important;
}

.o360-blog-nav-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #0B4669 !important;
    line-height: 1.4 !important;
}

/* ============================================================
   ARTIGOS RELACIONADOS
   ============================================================ */

.o360-blog-related {
    max-width: 1200px !important;
    margin: 48px auto !important;
    padding: 0 16px 48px !important;
}

.o360-blog-related-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #0B4669 !important;
    margin: 0 0 24px 0 !important;
    text-align: center !important;
}

.o360-blog-related-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
}

.o360-blog-related-card {
    display: flex !important;
    flex-direction: column !important;
    background: #FFFFFF !important;
    border: 1px solid #E0E8ED !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.o360-blog-related-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}

.o360-blog-related-img img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    display: block !important;
}

.o360-blog-related-content {
    padding: 16px !important;
}

.o360-blog-related-cat {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: #36B8B0 !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
}

.o360-blog-related-heading {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #0B4669 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.4 !important;
}

.o360-blog-related-date {
    font-size: 13px !important;
    color: #999 !important;
}

/* ============================================================
   ARCHIVE — HEADER
   ============================================================ */

.o360-blog-archive-header {
    background: linear-gradient(135deg, #0B4669 0%, #0F5A8C 100%) !important;
    padding: 40px 16px !important;
    text-align: center !important;
}

.o360-blog-archive-header-inner {
    max-width: 800px !important;
    margin: 0 auto !important;
}

.o360-blog-archive-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin: 0 0 8px 0 !important;
}

.o360-blog-archive-desc {
    font-size: 16px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* ============================================================
   ARCHIVE — MENU DE CATEGORIAS
   ============================================================ */

.o360-blog-cat-nav {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E0E8ED !important;
    padding: 0 16px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.o360-blog-cat-nav::-webkit-scrollbar {
    display: none !important;
}

.o360-blog-cat-nav-inner {
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: flex !important;
    gap: 0 !important;
    white-space: nowrap !important;
}

.o360-blog-cat-link {
    display: inline-block !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #666 !important;
    text-decoration: none !important;
    border-bottom: 2px solid transparent !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.o360-blog-cat-link:hover {
    color: #0B4669 !important;
}

.o360-blog-cat-link.active {
    color: #0B4669 !important;
    font-weight: 600 !important;
    border-bottom-color: #36B8B0 !important;
}

/* ============================================================
   ARCHIVE — GRID DE CARDS
   ============================================================ */

.o360-blog-grid-section {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 32px 16px 48px !important;
}

.o360-blog-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
}

.o360-blog-card {
    background: #FFFFFF !important;
    border: 1px solid #E0E8ED !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
}

.o360-blog-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}

.o360-blog-card-link {
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    color: inherit !important;
    height: 100% !important;
}

.o360-blog-card-img img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    display: block !important;
}

.o360-blog-card-body {
    padding: 20px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.o360-blog-card-cat {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #36B8B0 !important;
    margin-bottom: 8px !important;
}

.o360-blog-card-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #0B4669 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.4 !important;
}

.o360-blog-card-excerpt {
    font-size: 14px !important;
    color: #666 !important;
    line-height: 1.6 !important;
    margin: 0 0 12px 0 !important;
    flex: 1 !important;
}

.o360-blog-card-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 13px !important;
    color: #999 !important;
    border-top: 1px solid #F4F7FA !important;
    padding-top: 12px !important;
    margin-top: auto !important;
}

.o360-blog-card-reading {
    color: #36B8B0 !important;
    font-weight: 500 !important;
}

/* ============================================================
   PAGINAÇÃO
   ============================================================ */

.o360-blog-pagination {
    margin-top: 40px !important;
    text-align: center !important;
}

.o360-blog-pagination .page-numbers {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.o360-blog-pagination .page-numbers li {
    display: inline-block !important;
}

.o360-blog-pagination .page-numbers a,
.o360-blog-pagination .page-numbers span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 12px !important;
    border: 1px solid #E0E8ED !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #0B4669 !important;
    text-decoration: none !important;
    background: #FFFFFF !important;
    transition: all 0.2s ease !important;
}

.o360-blog-pagination .page-numbers a:hover {
    background: #36B8B0 !important;
    color: #FFFFFF !important;
    border-color: #36B8B0 !important;
}

.o360-blog-pagination .page-numbers .current {
    background: #0B4669 !important;
    color: #FFFFFF !important;
    border-color: #0B4669 !important;
}

/* ============================================================
   ESTADO VAZIO
   ============================================================ */

.o360-blog-empty {
    text-align: center !important;
    padding: 60px 20px !important;
}

.o360-blog-empty p {
    font-size: 18px !important;
    color: #666 !important;
    margin: 0 0 16px 0 !important;
}

.o360-blog-back-link {
    display: inline-block !important;
    color: #1D87B1 !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
}

/* ============================================================
   RESPONSIVO — TABLET (>=768px)
   ============================================================ */

@media (min-width: 768px) {
    .o360-blog-title {
        font-size: 34px !important;
    }

    .o360-blog-header {
        padding: 40px 24px !important;
    }

    .o360-blog-content h2 {
        font-size: 28px !important;
    }

    .o360-blog-content h3 {
        font-size: 22px !important;
    }

    .o360-blog-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .o360-blog-related-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .o360-blog-archive-title {
        font-size: 34px !important;
    }

    .o360-blog-archive-header {
        padding: 56px 24px !important;
    }

    .o360-blog-cta-inner {
        padding: 48px 40px !important;
    }

    .o360-blog-cta-title {
        font-size: 28px !important;
    }
}

/* ============================================================
   RESPONSIVO — DESKTOP (>=1024px)
   ============================================================ */

@media (min-width: 1024px) {
    .o360-blog-title {
        font-size: 40px !important;
    }

    .o360-blog-header {
        padding: 48px 32px !important;
    }

    /* Mostrar sidebar TOC no desktop */
    .o360-blog-sidebar-toc {
        display: block !important;
        width: 260px !important;
        flex-shrink: 0 !important;
        position: sticky !important;
        top: 100px !important;
        align-self: flex-start !important;
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
    }

    /* Esconder TOC mobile no desktop */
    .o360-blog-toc-mobile {
        display: none !important;
    }

    .o360-blog-layout {
        padding: 0 32px !important;
    }

    .o360-blog-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .o360-blog-related-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .o360-blog-archive-title {
        font-size: 40px !important;
    }

    .o360-blog-card-img img {
        height: 220px !important;
    }
}

/* ============================================================
   TOC DESKTOP — Links clicáveis (>=1025px)
   ============================================================ */

@media (min-width: 1025px) {

    .o360-blog-toc-list {
        list-style: none !important;
        padding-left: 0 !important;
        margin: 12px 0 0 0 !important;
    }

    .o360-blog-toc-item {
        margin-bottom: 2px !important;
        list-style: none !important;
    }

    .o360-blog-toc-list a {
        color: #1D87B1 !important;
        text-decoration: none !important;
        display: block !important;
        padding: 8px 12px !important;
        border-radius: 6px !important;
        border-left: 3px solid transparent !important;
        transition: all 0.2s ease !important;
        font-family: Helvetica, "Helvetica Neue", Arial, sans-serif !important;
        line-height: 1.4 !important;
    }

    .o360-blog-toc-list a:hover {
        color: #0B4669 !important;
        background-color: #F4F7FA !important;
        border-left-color: #36B8B0 !important;
        text-decoration: none !important;
    }

    .o360-blog-toc-list a.active {
        color: #0B4669 !important;
        font-weight: 700 !important;
        background-color: #F4F7FA !important;
        border-left-color: #36B8B0 !important;
    }

    /* Itens H2 — nível principal */
    .o360-blog-toc-item:not(.o360-toc-sub) a {
        font-weight: 600 !important;
        font-size: 0.95rem !important;
    }

    /* Sub-itens H3 */
    .o360-blog-toc-item.o360-toc-sub {
        padding-left: 12px !important;
    }

    .o360-blog-toc-item.o360-toc-sub a {
        font-size: 0.875rem !important;
        font-weight: 400 !important;
        color: #1D87B1 !important;
        opacity: 0.9;
    }

    .o360-blog-toc-item.o360-toc-sub a:hover {
        opacity: 1;
    }
}

/* ============================================================
   WIDGET SIDEBAR DO BLOG
   ============================================================ */

.o360-blog-widget {
    background: #FFFFFF !important;
    border: 1px solid #E0E8ED !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

.o360-blog-widget-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0B4669 !important;
    margin: 0 0 12px 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #36B8B0 !important;
}