/* css/sidebar.css
 * Porte do sistema de sidebar de anuncios (contadordeprazo.com.br / joursouvrables.fr).
 *
 * Layout alvo (cdp-tool-shift):
 *   <hero/>                           full-width, fora do shift
 *   <div.cdp-tool-shift>              grid 2-col >= 1200px
 *     <div.cdp-tool-body>             conteudo da ferramenta (centrado)
 *     <aside.cdp-tool-sidebar>        anuncio sticky 300x250 a direita
 *
 * Breakpoint: 1200px. Abaixo disso, a sidebar empilha embaixo.
 */

/* === Layout shifted-tool: corpo 2-col + sidebar de anuncio === */
/* !important vence o `.container { max-width: 1000px }` global do ocalendario,
   senao o cdp-tool-shift ficaria preso a 1000px e a sidebar 320px nao caberia. */
.cdp-tool-shift {
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 16px;
    max-width: 1600px !important;
    --tool-body-max-width: 960px;
}

.cdp-tool-body {
    min-width: 0;
    max-width: var(--tool-body-max-width);
    width: 100%;
}

@media (min-width: 1200px) {
    .cdp-tool-shift {
        display: grid;
        grid-template-columns: minmax(0, var(--tool-body-max-width)) 320px;
        justify-content: center;
        gap: 32px;
        align-items: start;
    }
    .cdp-tool-sidebar {
        align-self: start;
    }
    .cdp-tool-sidebar--sticky {
        position: sticky;
        top: 116px; /* microheader 30 + header 60 + folga */
    }
}

@media (max-width: 1199px) {
    .cdp-tool-sidebar {
        margin: 24px auto 0;
        max-width: 320px;
    }
}

/* Overrides de largura do corpo por tipo de ferramenta */
.cdp-tool-shift--qst     { --tool-body-max-width: 1160px; }
.cdp-tool-shift--article { --tool-body-max-width: 1000px; }
/* Calendario: corpo mais largo (a grade do calendario precisa de espaco). */
.cdp-tool-shift--cal     { --tool-body-max-width: 1180px; }

/* === Sidebar so-anuncio (cdp-tool-sidebar) === */
.cdp-tool-sidebar {
    overflow: visible !important;
    box-sizing: border-box;
    /* Reserva altura minima para o slot ser visivel antes do load async do AdSense (CLS-friendly). */
    min-height: 280px;
}
.cdp-tool-sidebar .adsbygoogle.ad-slot--sidebar-300x250,
.cdp-tool-sidebar .ad-slot--sidebar-300x250 {
    min-height: 250px;
    min-width: 300px;
    background: #fafafa;
    display: block;
}
body.dark-mode .cdp-tool-sidebar .adsbygoogle.ad-slot--sidebar-300x250,
body.dark-mode .cdp-tool-sidebar .ad-slot--sidebar-300x250 {
    background: rgba(255,255,255,0.04);
}

/* === Wrap do anuncio === */
.cdp-ad-wrap {
    padding: 16px 0 24px;
    margin: 20px 0;
    text-align: center;
    contain: none;
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
}
.cdp-ad-wrap:first-child { margin-top: 0; }
.cdp-ad-wrap:last-child { margin-bottom: 0; }

.cdp-tool-sidebar .ad-slot--sidebar-vertical-fixed,
.cdp-tool-sidebar .ad-slot--sidebar-300x250 {
    margin: 20px auto;
    contain: none;
    overflow: visible;
}
.cdp-tool-sidebar .ad-slot--sidebar-vertical-fixed:first-child,
.cdp-tool-sidebar .ad-slot--sidebar-300x250:first-child { margin-top: 0; }
.cdp-tool-sidebar .ad-slot--sidebar-vertical-fixed:last-child,
.cdp-tool-sidebar .ad-slot--sidebar-300x250:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
    .cdp-ad-wrap { margin: 16px 0; }
    .cdp-tool-sidebar .ad-slot--sidebar-vertical-fixed,
    .cdp-tool-sidebar .ad-slot--sidebar-300x250 { margin: 16px auto; }
}

/* === Rotulo "Publicidade" === */
.cdp-ad-label {
    display: block;
    color: #94a3b8;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    text-align: center;
    line-height: 1;
}
body.dark-mode .cdp-ad-label {
    color: #9ca3af; /* WCAG AA sobre fundo escuro */
}

/* === Print: sidebar e rotulo escondidos, grid colapsa === */
@media print {
    .cdp-tool-shift {
        display: block !important;
    }
    .cdp-tool-sidebar,
    .cdp-ad-label {
        display: none !important;
    }
}