/* ============================================
   RESPONSIVO — CidadeTur BR
   Abaixo de 800px o site vira coluna única com scroll NATIVO:
   a sidebar entra no fluxo normal do documento e o body rola
   sozinho. O spacer e a sincronização de scroll via JS
   (translateY no .sidebar-content) ficam desativados nessa
   faixa — em navegadores móveis reais esse acoplamento produz
   conteúdo em branco e "pulos" durante o momentum scroll.
   ============================================ */

@media screen and (max-width: 800px) {
    :root {
        --sidebar-width: min(430px, 100vw);
    }

    body {
        /* O body não pode virar scroll container (quebraria o sticky da navbar).
           O corte horizontal fica no html, que propaga para o viewport. */
        overflow: visible;
        overflow: clip visible;
    }

    .container {
        display: block;
    }

    .sidebar {
        position: relative;
        width: var(--sidebar-width);
        margin: 0 auto;
        left: auto;
        top: auto;
        transform: none;
        box-sizing: border-box;
        min-height: 100vh;
        min-height: 100svh; /* altura estável com a barra dinâmica do navegador */
    }

    /* Barra superior (logo/busca/menu) acompanha a rolagem nativa */
    .sidebar-navbar {
        position: sticky;
        top: 0;
        z-index: 1001;
    }

    /* O conteúdo nunca é transladado pelo JS nessa faixa */
    .sidebar .sidebar-content {
        transform: none !important;
        position: static !important;
    }

    #sidebar-height-spacer {
        display: none !important;
    }

    /* Recolhida: sai do fluxo e o banner (main-content) ocupa a tela. */
    .sidebar.collapsed {
        display: none;
    }

    .main-content {
        left: 0;
        width: 100%;
    }

    /* Hora, texto e botões do banner: só quando a aba está recolhida
       (senão flutuariam sobre o conteúdo mobile). */
    .main-content:not(.expanded) .btn-recolher-content,
    .main-content:not(.expanded) .btn-web-radios,
    .main-content:not(.expanded) .photo-author-btn,
    .main-content:not(.expanded) .info-center {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .main-content.expanded .info-center {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        right: auto;
        bottom: auto;
    }

    .main-content.expanded .info-center .clock {
        font-size: 80px;
        margin-bottom: 16px;
    }

    /* Centralizar o relógio no eixo (mobile): o .clock-wrap herda
       align-items:flex-end do desktop, o que jogava o relógio à direita do centro. */
    .main-content.expanded .info-center .clock-wrap {
        align-items: center;
    }

    /* "Listar Cidades | Listar Perfis" centralizado no topo (mobile),
       em vez do canto direito (right:60px/text-align:right do desktop). */
    .banner-lists {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        text-align: center;
    }

    /* No mobile o quadro não vai até o rodapé (o banner não ocupa 100vh). */
    .banner-lists-panel {
        height: auto;
        max-height: 340px;
    }

    .main-content.expanded .info-center .site-title {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .main-content.expanded .info-center .date-info {
        font-size: 14px;
        margin-bottom: 24px;
    }

    /* Botões empilhados no canto inferior esquerdo, sem sobrepor
       (Explorar 146 / Web Rádios 108 / Autor da Foto 70, iguais ao desktop). */
    .main-content.expanded .btn-recolher-content {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        left: 15px;
        right: auto;
        transform: none;
        bottom: 146px;
    }

    .main-content.expanded .btn-web-radios,
    .main-content.expanded .photo-author-btn {
        left: 15px;
        right: auto;
        transform: none;
    }
    .main-content.expanded .btn-web-radios { bottom: 108px; }
    .main-content.expanded .photo-author-btn { bottom: 70px; }

    .main-content.expanded .info-center .date-info {
        white-space: nowrap;
    }
}

@media screen and (max-width: 1279px) {
    .sidebar-content {
        padding: 20px 20px 0 20px;
    }
    .sidebar .ct-vertical-brand {
        display: none;
    }

    .info-center {
        top: 50%;
        transform: translateY(-50%);
    }

    /* Entre 801px e 1279px: ocultar só a hora (relógio grande não cabe no banner
       estreito). O botão Recolher continua no canto do banner, junto de Web Rádios
       e Autor da Foto (o cliente relatou que o Recolher sumia só nessa faixa). */
    body .main-content:not(.expanded) .info-center {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}