/*
====================================================================
  SEÇÃO FORMAÇÃO - DESKTOP MEDIA QUERIES
  Local: sites/public/componentes/landingpage_portifolio/02_formacao/desktop/02_formacao_desktop_media.css
  
  DESCRIÇÃO:
    Configurações responsivas específicas para desktop da seção formação.
    Breakpoints: 1200px+ (desktop), 1024px+ (notebook), 768px+ (tablet grande)

  PADRÃO:
    - Desktop First (min-width)
    - 3 breakpoints: 1200px+, 1024px+ e 768px+
    - Sem duplicatas
    - Sem !important (seguindo padrão da seção início)
  
  Autor: #@HD
  Data de criação: 14/08/2025
  Última atualização: 14/08/2025
====================================================================
*/

/* ====================================================================
   MEDIA QUERIES ESPECÍFICAS PARA DESKTOP
   ==================================================================== */

/* -- Breakpoint: 1200px+ (Desktop) -- */
@media (min-width: 1200px) {
  /* Títulos e Subtítulos */
  .desktop_formacao .section_title {
    text-align: left;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    padding-bottom: 1rem;
  }

  .desktop_formacao .section_title h2 {
    text-align: left;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--);
    border-bottom: 2px solid var(--);
    padding-bottom: var(--);
    margin-bottom: var(--);
    margin-right: 200px;
    /* text-transform: none;
    letter-spacing: normal;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    text-shadow: none;
    display: block;
    width: fit-content; */
  }

  .desktop_formacao .section_subtitle {
    text-align: left;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    padding-bottom: 1rem;
  }

  .desktop_formacao .section_subtitle .section_subtitle {
    text-align: left;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--);
    border-bottom: 2px solid var(--);
    padding-bottom: var(--);
    margin-bottom: var(--);
    text-transform: none;
    letter-spacing: normal;
    opacity: 1;
  }

  /* Layout de duas colunas para Formação Acadêmica */
  .formacao_desktop_academica_layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    margin-top: calc(var(--) + 0.5rem);
  }

  /* Layout de duas colunas para Formação Complementar */
  .formacao_desktop_complementar_layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    margin-top: calc(var(--) + 0.5rem);
  }

  /* Detalhes da formação */
  .formacao_desktop_detalhes_formacao {
    padding: 2rem;
    min-height: 200px;
  }

  .formacao_desktop_detalhes_topico {
    padding: 2rem;
    min-height: 200px;
  }
}

/* -- Breakpoint: 1024px+ (Notebook) -- */
@media (min-width: 1024px) {
  /* Títulos e Subtítulos */
  .desktop_formacao .section_title h2 {
    font-size: 1.6rem;
    margin-right: 150px;
  }

  .desktop_formacao .section_subtitle .section_subtitle {
    font-size: 1.3rem;
  }

  /* Layout de duas colunas para Formação Acadêmica */
  .formacao_desktop_academica_layout {
    margin-top: var(--);
  }

  /* Layout de duas colunas para Formação Complementar */
  .formacao_desktop_complementar_layout {
    margin-top: var(--);
  }

  /* Detalhes da formação */
    .formacao_desktop_detalhes_formacao {
    padding: 2rem;
    min-height: 180px;
        
    }
    
    .formacao_desktop_detalhes_topico {
    padding: 2rem;
    min-height: 180px;
    }
}

/* -- Breakpoint: 768px+ (Tablet Grande) -- */
@media (min-width: 768px) {
  /* Garantir que a seção formação funcione corretamente em tablets grandes */
  #formacao.desktop_formacao {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 80px);
  }

  /* Títulos e Subtítulos */
  .desktop_formacao .section_title {
    text-align: left;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    padding-bottom: 1rem;
  }

  .desktop_formacao .section_title h2 {
    text-align: left;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--);
    border-bottom: 2px solid var(--);
    padding-bottom: var(--);
    margin-bottom: var(--);
    margin-right: 100px;
    /* text-transform: none;
    letter-spacing: normal;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    text-shadow: none;
    display: block;
    width: fit-content; */
  }

  .desktop_formacao .section_subtitle {
    text-align: left;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    padding-bottom: 1rem;
  }

  .desktop_formacao .section_subtitle .section_subtitle {
    text-align: left;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--);
    border-bottom: 2px solid var(--);
    padding-bottom: var(--);
    margin-bottom: var(--);
    text-transform: none;
    letter-spacing: normal;
    opacity: 1;
  }

  /* Layout de duas colunas para Formação Acadêmica */
    .formacao_desktop_academica_layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0.5rem;
    margin-top: var(--);
  }

  /* Layout de duas colunas para Formação Complementar */
    .formacao_desktop_complementar_layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0.5rem;
    margin-top: var(--);
  }

  /* Detalhes da formação */
  .formacao_desktop_detalhes_formacao {
    padding: 2rem;
    min-height: 160px;
    }
    
    .formacao_desktop_detalhes_topico {
    padding: 2rem;
    min-height: 160px;
  }

  /* Garantir que as colunas funcionem corretamente */
  .DESKTOP_CONTAINER_COLUMN_ESQUERDA,
  .DESKTOP_CONTAINER_COLUMN_DIREITA {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  /* Garantir que o container de bordas funcione */
  .DESKTOP_CONTAINER_COLUMN {
    width: 100%;
    max-width: 100%;
  }
}

/* ====================================================================
   CONTAINERS ROW - PADDING PADRÃO
   ==================================================================== */

/* Garantir que os containers ROW mantenham seu padding padrão */
.formacao .DESKTOP_CONTAINER_ROW_02,
.formacao .DESKTOP_CONTAINER_ROW_03,
.formacao .DESKTOP_CONTAINER_ROW_04 {
    padding-top: var(--, 10px);
    padding-bottom: var(--, 10px);
    padding-left: var(--, 10px);
    padding-right: var(--, 10px);
}

/* ====================================================================
   ESTILOS ESPECÍFICOS DA SEÇÃO FORMAÇÃO
   ==================================================================== */

/* Remover paddings das colunas especificamente na seção formação */
.formacao .SECTION_DESKTOP_COLUMN_LEFT,
.formacao .SECTION_DESKTOP_COLUMN_RIGHT {
    padding: 0;
}

/* Ajustar especificamente as colunas para preencher melhor */
.formacao .SECTION_DESKTOP_COLUMN_LEFT,
.formacao .SECTION_DESKTOP_COLUMN_RIGHT {
    width: 100%;
    max-width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Garantir que o conteúdo das colunas ocupe todo o espaço */
.formacao .SECTION_DESKTOP_COLUMN_LEFT > *,
.formacao .SECTION_DESKTOP_COLUMN_RIGHT > * {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ====================================================================
   COMPONENTES ESPECÍFICOS
   ==================================================================== */

/* About Bubbles */
.formacao_desktop_about_bubbles {
    position: relative;
    height: auto;
    min-height: 0;
    width: var(--, 150px);
    flex: 0 0 var(--, 150px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 0;
    gap: 0;
}

.formacao_desktop_info_about1,
.formacao_desktop_info_about2,
.formacao_desktop_info_about3,
.formacao_desktop_info_about4 {
    text-align: center;
    background: var(--);
    font-size: .5rem;
    position: absolute;
    padding: 6px;
    width: var(--, 150px);
    height: var(--, 60px);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: var(--);
    border: 1px solid var(--);
    outline: 2px solid var(--);
    z-index: 100;
}

/* Posicionamento para desktop - usando altura variável */
.formacao_desktop_info_about1 { top: 0; left: 0; }
.formacao_desktop_info_about2 { top: calc(var(--, 60px) + 20px); left: 0; }
.formacao_desktop_info_about3 { top: calc((var(--, 60px) + 20px) * 2); left: 0; }
.formacao_desktop_info_about4 { top: calc((var(--, 60px) + 20px) * 3); left: 0; }

/* Imagem */
.formacao_desktop_img_about {
    text-align: left;
    position: relative;
    height: var(--, 300px);
    max-height: var(--, 300px);
    margin-top: 0;
    margin-left: 20px;
    flex: 1;
    width: auto;
    min-width: calc(100% - var(--, 150px) - var(--, 120px));
    max-width: calc(100% - var(--, 150px) - var(--, 120px));
    order: 2;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: var(--);
    border: 1px solid var(--);
    outline: 2px solid var(--);
}

.formacao_desktop_img_about img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    margin-left: 0;
    max-width: 100%;
    display: block;
}

/* Lista de formações */
.formacao_desktop_lista_formacoes {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.formacao_desktop_formacao_item {
    text-align: center;
    background: var(--);
    font-size: .5rem;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: var(--);
    border: 1px solid var(--);
    outline: 2px solid var(--);
    cursor: pointer;
    transition: all var(--);
}

.formacao_desktop_formacao_item:hover {
    background: var(--);
    box-shadow: var(--);
    border: 1px solid var(--);
    outline: 2px solid var(--);
    transform: translateY(-2px);
    box-shadow: 0 0 16px var(--);
}

.formacao_desktop_formacao_item.ativo {
    background: var(--);
    color: var(--);
    box-shadow: var(--);
    border: 1px solid var(--);
    outline: 2px solid var(--);
    box-shadow: 0 0 16px var(--);
}

/* Lista de tópicos */
.formacao_desktop_lista_topicos {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.formacao_desktop_topico_item {
    text-align: center;
    background: var(--);
    font-size: .5rem;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: var(--);
    border: 1px solid var(--);
    outline: 2px solid var(--);
    cursor: pointer;
    transition: all var(--);
}

.formacao_desktop_topico_item:hover {
    background: var(--);
    box-shadow: var(--);
    border: 1px solid var(--);
    outline: 2px solid var(--);
    transform: translateY(-2px);
    box-shadow: 0 0 16px var(--);
}

.formacao_desktop_topico_item.ativo {
    background: var(--);
    color: var(--);
    box-shadow: var(--);
    border: 1px solid var(--);
    outline: 2px solid var(--);
    box-shadow: 0 0 16px var(--);
}

/* Resumo do Currículo */
.formacao_desktop_resumo_curriculo {
    margin-top: -20px;
    background: var(--);
    border: none;
    border-radius: var(--);
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    margin-right: 200px;
}

.formacao_desktop_resumo_descricao {
    color: var(--);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: var(--);
    text-align: justify;
}