/*
====================================================================
  SEÇÃO CONHECIMENTO - DESKTOP MEDIA QUERIES
  Local: sites/public/componentes/landingpage_portifolio/03_conhecimento/03_conhecimento_desktop_media.css
  
  DESCRIÇÃO:
    Configurações responsivas específicas para desktop da seção conhecimento.
    Breakpoints: 1200px+ (desktop grande) e 992px+ (desktop/notebook)

  PADRÃO:
    - Desktop First (min-width)
    - 2 breakpoints: 1200px+ e 992px+
    - Sem duplicatas

  Autor: #@HD
  Data de criação: 14/08/2025
  Última atualização: 14/08/2025
====================================================================
*/

/* ------------------------------------------------------------------------ */
/* @HD: ### Media Queries Desktop - Componente Conhecimento ### */
/* ------------------------------------------------------------------------ */
/* Responsividade da seção conhecimento para desktop - 2 breakpoints */

/* Desktop Grande (1200px+) - Escala maior */
@media (min-width: 1200px) {
    /* Estilos removidos - usando sistema de títulos padrão */
    
    .conhecimento-grid {
        gap: 2rem;
    }
    
    .conhecimento-item {
        padding: 1.5rem;
    }
    
    .conhecimento-item h3 {
        font-size: 1.5rem;
    }
    
    .conhecimento-item p {
        font-size: 1.1rem;
    }
}

/* Desktop/Notebook (992px+) - Escala base */
@media (min-width: 992px) {
    /* Estilos removidos - usando sistema de títulos padrão */
    
    .conhecimento-grid {
        gap: 1.5rem;
    }
    
    .conhecimento-item {
        padding: 1.2rem;
    }
    
    .conhecimento-item h3 {
        font-size: 1.3rem;
    }
    
    .conhecimento-item p {
        font-size: 1rem;
    }
    
    /* Aplicar estilos apenas em desktop e notebook */
    /* DESKTOP_CONTAINER_COLUMN_ESQUERDA - centralizado igual às outras seções */
 .DESKTOP_CONTAINER_COLUMN_ESQUERDA,
    .desktop-conhecimento .DESKTOP_CONTAINER_COLUMN_ESQUERDA,
    .conhecimento .DESKTOP_CONTAINER_COLUMN_ESQUERDA {
        text-align: center ;
        align-items: center ;
        justify-content: center ;
        display: flex ;
        flex-direction: column ;
    }

    /* Alinhar à esquerda os títulos da seção conhecimento */
 .conhecimento_desktop_titulo,
    .desktop-conhecimento .conhecimento_desktop_titulo,
    .conhecimento .conhecimento_desktop_titulo {
        text-align: left ;
        align-self: flex-start ;
        justify-self: flex-start ;
    }

    /* Alinhar à esquerda os títulos do painel */
 .conhecimento_desktop_panel_title h3,
    .desktop-conhecimento .conhecimento_desktop_panel_title h3,
    .conhecimento .conhecimento_desktop_panel_title h3 {
        text-align: left ;
        align-self: flex-start ;
        justify-self: flex-start ;
    }

    /* Garantir que todo o conteúdo dentro do DESKTOP_CONTAINER_COLUMN_ESQUERDA na seção conhecimento fique centralizado */
 .DESKTOP_CONTAINER_COLUMN_ESQUERDA > *,
    .desktop-conhecimento .DESKTOP_CONTAINER_COLUMN_ESQUERDA > *,
    .conhecimento .DESKTOP_CONTAINER_COLUMN_ESQUERDA > * {
        text-align: center ;
        align-self: center ;
        justify-self: center ;
    }

    /* Remover gaps entre título e subtítulo na seção conhecimento */
 .conhecimento_desktop_content,
    .desktop-conhecimento .conhecimento_desktop_content,
    .conhecimento .conhecimento_desktop_content {
        display: flex ;
        flex-direction: column ;
        gap: 0 ;
        align-items: center ;
        justify-content: center ;
    }

    /* Sistema de títulos - centralizado igual às outras seções */
 .conhecimento_desktop_section_title,
    .desktop-conhecimento .conhecimento_desktop_section_title,
    .conhecimento .conhecimento_desktop_section_title {
        text-align: center ;
        width: 100% ;
    }

    /* Estilos removidos - usando sistema de títulos padrão */

    /* Sistema de subtítulos - centralizado igual às outras seções */
 .conhecimento_desktop_section_subtitle,
    .desktop-conhecimento .conhecimento_desktop_section_subtitle,
    .conhecimento .conhecimento_desktop_section_subtitle {
        text-align: center ;
        width: 100% ;
        margin-top: 0 ;
        margin-bottom: 0 ;
        padding-top: 0 ;
        padding-bottom: 0 ;
    }
    
    /* Desktop Only - Mostrar apenas em desktop */
    .desktop-only {
        display: block !important;
    }
    
    .mobile-only {
        display: none !important;
    }
}