/**
 * Leite Alencar Theme - Mobile Styles
 * 
 * Este arquivo contém estilos específicos para dispositivos móveis
 * que sobrescrevem os estilos INLINE do WordPress FSE (columnCount)
 * 
 * IMPORTANTE: Este arquivo complementa theme.css, não duplica.
 * 
 * ESTRATÉGIA DE !important:
 * - Usa !important APENAS para sobrescrever estilos inline do WordPress
 * - Propriedades editáveis (font-size, padding, margin, etc.) NÃO usam !important
 * - Isso permite que elementos sejam editados no Site Editor do WordPress
 * 
 * PRIORIDADE: Este arquivo deve ser carregado DEPOIS do theme.css
 * para garantir que os estilos mobile tenham precedência.
 * 
 * Breakpoints:
 * - Mobile: até 767px
 * - Tablet: 768px - 1023px
 * - Desktop: 1024px+ (gerenciado por theme.css)
 */

/* ========================================
   1. GRID LAYOUTS MOBILE - OVERRIDE INLINE STYLES
   ======================================== */

/* 
 * Força grid de 1 coluna em mobile para sobrescrever columnCount inline do WordPress
 * O theme.css já tem os estilos base, aqui apenas forçamos o override
 * 
 * ESTRATÉGIA: Usa !important apenas quando WordPress aplica columnCount inline
 */
@media (max-width: 767px) {
    /* ================================================
       GRID LAYOUT OVERRIDES - Mobile Breakpoint
       
       IMPORTANTE: Usa !important para sobrescrever
       columnCount inline do WordPress FSE
       
       Prioridade de especificidade:
       1. Seletores com [style*=""] - máxima especificidade
       2. Seletores de classe dupla - média especificidade
       3. Seletores de classe simples - menor especificidade
    ================================================ */
    
    /* Team Grid - Profissionais */
    .wp-block-group.la-team-grid[style*="columnCount"],
    .wp-block-group.la-team-grid[style*="column-count"] {
        grid-template-columns: 1fr !important;
    }
    .wp-block-group.la-team-grid {
        grid-template-columns: 1fr;
    }
    .la-team-grid {
        grid-template-columns: 1fr;
    }
    
    /* Awards Grid - Prêmios e Reconhecimentos */
    /* PRINCIPAL: Sobrescreve columnCount:3 para mobile */
    .wp-block-group.la-awards-grid[style*="columnCount"],
    .wp-block-group.la-awards-grid[style*="column-count"],
    .wp-block-group.la-awards-grid[style*="gridTemplateColumns"] {
        grid-template-columns: 1fr !important;
    }
    .wp-block-group.la-awards-grid {
        grid-template-columns: 1fr;
    }
    .la-awards-grid {
        grid-template-columns: 1fr;
    }
    
    /* Services Grid - Áreas de Atuação (Principal) */
    /* PRINCIPAL: Sobrescreve columnCount:5 para mobile */
    .wp-block-group.la-services-grid[style*="columnCount"],
    .wp-block-group.la-services-grid[style*="column-count"],
    .wp-block-group.la-services-grid[style*="gridTemplateColumns"] {
        grid-template-columns: 1fr !important;
    }
    .wp-block-group.la-services-grid {
        grid-template-columns: 1fr;
    }
    .la-services-grid {
        grid-template-columns: 1fr;
    }
    
    /* Services Complementary - Atuação Jurídica Complementar */
    /* PRINCIPAL: Sobrescreve columnCount:4 para mobile */
    .wp-block-group.la-services-complementary[style*="columnCount"],
    .wp-block-group.la-services-complementary[style*="column-count"],
    .wp-block-group.la-services-complementary[style*="gridTemplateColumns"],
    .wp-block-group.la-complementary-services[style*="columnCount"],
    .wp-block-group.la-complementary-services[style*="column-count"],
    .wp-block-group.la-complementary-services[style*="gridTemplateColumns"] {
        grid-template-columns: 1fr !important;
    }
    .wp-block-group.la-services-complementary,
    .wp-block-group.la-complementary-services {
        grid-template-columns: 1fr;
    }
    .la-services-complementary,
    .la-complementary-services {
        grid-template-columns: 1fr;
    }
    
    /* Fallback: Sobrescreve TODOS os grids com columnCount inline */
    .wp-block-group[style*="columnCount"],
    .wp-block-group[style*="column-count"] {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   2. TEAM CARDS MOBILE - CORREÇÕES ESPECÍFICAS
   ======================================== */

/* 
 * Apenas estilos que precisam sobrescrever ou complementar theme.css
 * O theme.css já tem padding e tamanhos de fonte, aqui apenas ajustes críticos
 * 
 * IMPORTANTE: Usa !important apenas para propriedades estruturais críticas
 */
@media (max-width: 767px) {
    /* Garante que botões "Ver mais" não quebrem em linhas verticais */
    .la-team-toggle-btn .wp-block-button__link {
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Melhora quebra de texto para nomes longos */
    .la-team-name {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    
    /* Melhora quebra de texto para biografias */
    .la-team-bio-preview,
    .la-team-bio-full {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .la-email-component {
        gap: 12px;
    }

    .la-email-icon {
        width: 44px;
        height: 44px;
    }

    .la-email-label {
        font-size: 0.8rem;
    }

    .la-email-link {
        font-size: 0.95rem;
    }
}

/* iPhone e telas muito pequenas - apenas ajustes críticos */
@media (max-width: 430px) {
    /* Email pode quebrar em telas muito pequenas */
    .la-team-email {
        word-break: break-all;
    }
}

/* ========================================
   3. AWARDS CARDS MOBILE - CORREÇÕES ESPECÍFICAS
   ======================================== */

/* 
 * Apenas melhorias de quebra de texto
 * O theme.css já gerencia tamanhos e padding
 * O gap é resetado para mobile
 */
@media (max-width: 767px) {
    /* Gap mobile para Awards Grid */
    .wp-block-group.la-awards-grid[style*="columnCount"],
    .wp-block-group.la-awards-grid[style*="column-count"],
    .la-awards-grid {
        gap: 1.25rem;
    }
    
    .la-award-card h3 {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .la-award-card p {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* ========================================
   4. SERVICES CARDS MOBILE - CORREÇÕES ESPECÍFICAS
   ======================================== */

/* 
 * Apenas melhorias de quebra de texto
 * O theme.css já gerencia tamanhos, padding e ícones
 * O gap é resetado para mobile
 */
@media (max-width: 767px) {
    /* Gap mobile para Services Grid */
    .wp-block-group.la-services-grid[style*="columnCount"],
    .wp-block-group.la-services-grid[style*="column-count"],
    .la-services-grid {
        gap: 1rem;
    }
    
    /* Gap mobile para Services Complementary */
    .wp-block-group.la-services-complementary[style*="columnCount"],
    .wp-block-group.la-services-complementary[style*="column-count"],
    .la-services-complementary,
    .wp-block-group.la-complementary-services[style*="columnCount"],
    .wp-block-group.la-complementary-services[style*="column-count"],
    .la-complementary-services {
        gap: 1rem;
    }
    
    .la-card h4 {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .la-card p {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* ========================================
   5. PREVENÇÃO DE OVERFLOW HORIZONTAL - COMPLEMENTO
   ======================================== */

/* 
 * Complementa a seção de overflow do theme.css (linha 2237)
 * Apenas adiciona regras específicas para elementos com inline styles
 * 
 * IMPORTANTE: Usa !important apenas para propriedades estruturais críticas
 */
@media (max-width: 767px) {
    /* Garante que grids com inline styles não ultrapassem */
    .wp-block-group[style*="grid-template-columns"],
    .wp-block-group[style*="columnCount"],
    .wp-block-group[style*="column-count"] {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ========================================
   6. OVERRIDE INLINE STYLES DO WORDPRESS FSE
   ======================================== */

/* 
 * Sobrescreve estilos inline que o WordPress FSE aplica via columnCount
 * Este é o problema principal que causa o layout espremido
 */
@media (max-width: 767px) {
    /* Força grid de 1 coluna mesmo quando WordPress aplica columnCount inline */
    .wp-block-group[style*="columnCount"],
    .wp-block-group[style*="column-count"],
    .wp-block-group[style*="grid-template-columns"],
    .wp-block-group[style*="gridTemplateColumns"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Garante que os filhos ocupem toda a largura disponível */
    .wp-block-group[style*="columnCount"] > *,
    .wp-block-group[style*="column-count"] > * {
        grid-column: 1 / -1 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ========================================
   7. TABLET E DESKTOP - OVERRIDE INLINE STYLES
   ======================================== */

/* 
 * Sobrescreve inline styles em tablet e desktop
 * Reverte para as configurações de desktop
 * 
 * IMPORTANTE: Usa !important para forçar columnCount inline do WordPress
 */

/* TABLET: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Team Grid - 3 colunas em tablet */
    .la-team-grid,
    .wp-block-group.la-team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Awards Grid - 3 colunas em tablet */
    .la-awards-grid,
    .wp-block-group.la-awards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Services Grid - 2 colunas em tablet (reduzido de 5) */
    .la-services-grid,
    .wp-block-group.la-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Services Complementary - 2 colunas em tablet (reduzido de 4) */
    .la-services-complementary,
    .la-complementary-services,
    .wp-block-group.la-services-complementary,
    .wp-block-group.la-complementary-services {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Sobrescreve apenas quando WordPress aplica columnCount inline */
    .wp-block-group[style*="columnCount"],
    .wp-block-group[style*="column-count"] {
        grid-template-columns: inherit !important;
    }
}

/* DESKTOP: 1024px+ */
@media (min-width: 1024px) {
    /* Team Grid - 3 colunas em desktop */
    .la-team-grid,
    .wp-block-group.la-team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Awards Grid - 3 colunas em desktop (conforme columnCount:3) */
    .la-awards-grid,
    .wp-block-group.la-awards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Services Grid - 5 colunas em desktop (conforme columnCount:5) */
    .la-services-grid,
    .wp-block-group.la-services-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    
    /* Services Complementary - 4 colunas em desktop (conforme columnCount:4) */
    .la-services-complementary,
    .la-complementary-services,
    .wp-block-group.la-services-complementary,
    .wp-block-group.la-complementary-services {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Sobrescreve apenas quando WordPress aplica columnCount inline */
    .la-team-grid[style*="columnCount"],
    .wp-block-group.la-team-grid[style*="columnCount"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* Awards Grid - Force desktop layout */
    .la-awards-grid[style*="columnCount"],
    .wp-block-group.la-awards-grid[style*="columnCount"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* Services Grid - Force desktop layout com 5 colunas */
    .la-services-grid[style*="columnCount"],
    .wp-block-group.la-services-grid[style*="columnCount"] {
        grid-template-columns: repeat(5, 1fr) !important;
    }
    
    /* Services Complementary - Force desktop layout com 4 colunas */
    .la-services-complementary[style*="columnCount"],
    .wp-block-group.la-services-complementary[style*="columnCount"],
    .la-complementary-services[style*="columnCount"],
    .wp-block-group.la-complementary-services[style*="columnCount"] {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ========================================
   8. MELHORIAS DE TEXTO EM MOBILE
   ======================================== */

/* 
 * Melhorias gerais de quebra de texto para evitar layout quebrado
 * Complementa os estilos específicos acima
 */
@media (max-width: 767px) {
    /* Previne quebra excessiva de palavras em títulos */
    h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* Textos descritivos com quebra adequada */
    p {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* Links e emails podem quebrar quando necessário */
    a {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* ========================================
   9. PUBLICAÇÕES RECENTES - MOBILE
   ======================================== */

/* 
 * Ajustes específicos para cards de Publicações Recentes em mobile
 * Converte layout horizontal para vertical (formato de lista)
 * SOBRESCREVE estilos inline do WordPress FSE
 */

/* Ajusta colunas do grid em mobile - PRIMEIRO para garantir ordem */
@media (max-width: 767px) {
    /* Força coluna única em mobile */
    .wp-block-columns {
        flex-direction: column;
        display: flex;
    }
    
    /* Colunas ocupam 100% da largura */
    .wp-block-column {
        width: 100%;
        flex-basis: 100%;
        max-width: 100%;
        min-width: 0;
    }
    
    /* Sobrescreve flex-basis inline do WordPress quando necessário */
    .wp-block-column[style*="flex-basis"],
    .wp-block-column[style*="flexBasis"],
    div[style*="flex-basis:60%"],
    div[style*="flex-basis:40%"] {
        width: 100% !important;
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
    
    /* Gap entre colunas - editável */
    .wp-block-columns {
        gap: 1.5rem;
    }
    
    /* Sobrescreve gap inline do WordPress quando necessário */
    .wp-block-columns[style*="blockGap"],
    .wp-block-columns[style*="block-gap"] {
        gap: 1.5rem !important;
    }
}

/* Card Featured (Primeira Publicação) - Ajusta texto sobreposto */
@media (max-width: 767px) {
    /* Sobrescreve min-height inline do WordPress - maior especificidade */
    /* Usa !important apenas para propriedades que o WordPress aplica inline */
    #publicacoes .la-news-featured,
    #publicacoes .wp-block-cover.la-news-featured,
    .la-news-featured,
    .wp-block-cover.la-news-featured {
        /* Propriedades editáveis */
        min-height: auto;
        max-height: none;
        height: auto;
        position: relative;
        display: flex;
        flex-direction: column;
    }
    
    /* Sobrescreve apenas quando WordPress aplica inline */
    .la-news-featured[style*="min-height"],
    div[style*="min-height:400px"].la-news-featured,
    .wp-block-cover.la-news-featured[style*="min-height"] {
        min-height: auto !important;
        max-height: none !important;
        height: auto !important;
    }
    
    /* Aumenta overlay para melhor legibilidade */
    /* Editável no WordPress - sem !important */
    .la-news-featured .wp-block-cover__background,
    .la-news-featured .has-background-dim {
        opacity: 0.75;
    }
    
    /* Container interno com padding reduzido para usar mais espaço horizontal */
    /* Usa !important apenas para propriedades estruturais críticas */
    .la-news-featured .wp-block-cover__inner-container {
        /* Padding editável - pode ser ajustado no WordPress */
        padding: 1rem 0.875rem;
        /* Propriedades estruturais - com !important apenas para layout crítico */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        min-height: 100% !important;
        position: relative !important;
        z-index: 1 !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Sobrescreve padding inline do WordPress quando necessário */
    .la-news-featured .wp-block-cover__inner-container[style*="padding"] {
        padding: 1rem 0.875rem !important;
    }
    
    /* Padding editável - pode ser ajustado no WordPress */
    .la-news-featured .wp-block-cover__inner-container:not([style*="padding"]) {
        padding: 1rem 0.875rem;
    }
    
    /* Ajusta badge com margem pequena */
    .la-news-featured .la-news-badge,
    .la-news-featured .wp-block-post-terms {
        margin-bottom: 0.4rem;
        margin-top: 0;
        /* Propriedades estruturais */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Grupo de data */
    .la-news-featured .wp-block-group:has(.wp-block-post-date),
    .la-news-featured .wp-block-post-date {
        margin-bottom: 0.3rem;
        /* Propriedades estruturais */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Título com menos quebras e melhor uso do espaço horizontal */
    /* Usa !important apenas para sobrescrever estilos inline do WordPress */
    .la-news-featured .wp-block-post-title,
    .la-news-featured .wp-block-post-title a,
    .la-news-featured h3 {
        /* Propriedades editáveis - sem !important para permitir edição no WordPress */
        font-size: 1.1rem;
        line-height: 1.35;
        margin-top: 0.4rem;
        margin-bottom: 0.5rem;
        /* Propriedades estruturais - com !important apenas para layout */
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        /* Propriedades de texto - sem !important para permitir edição */
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    
    /* Sobrescreve fontSize inline do WordPress quando necessário */
    .la-news-featured .wp-block-post-title[style*="fontSize"],
    .la-news-featured .wp-block-post-title[style*="font-size"] {
        font-size: 1.1rem !important;
    }
    
    /* Texto do excerpt com menos quebras e melhor legibilidade */
    .la-news-featured .wp-block-post-excerpt,
    .la-news-featured .wp-block-post-excerpt p,
    .la-news-featured p {
        /* Propriedades editáveis - sem !important */
        font-size: 0.85rem;
        line-height: 1.5;
        margin-top: 0.4rem;
        margin-bottom: 0.6rem;
        /* Propriedades estruturais - com !important apenas para layout */
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Botão Leia Mais com margem pequena */
    .la-news-featured .wp-block-buttons {
        margin-top: 0.4rem;
        margin-bottom: 0;
        /* Propriedades estruturais */
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .la-news-featured .wp-block-button {
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
    }
    
    .la-news-featured .wp-block-button__link {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
        /* white-space: nowrap para evitar quebra do texto do botão */
        white-space: nowrap;
    }
}

/* Cards Secundários (Segunda e Terceira Publicação) - Formato de Lista */
@media (max-width: 767px) {
    /* Converte layout flex horizontal para vertical (lista) */
    .la-news-secondary,
    .wp-block-group.la-news-secondary {
        flex-direction: column;
        display: flex;
        flex-wrap: nowrap;
    }
    
    /* Sobrescreve apenas quando WordPress aplica inline */
    .la-news-secondary[style*="flexWrap"],
    .la-news-secondary[style*="flex-wrap"],
    div[style*="flex-wrap:nowrap"].la-news-secondary {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }
    
    /* Diminui imagem e coloca no topo */
    .la-news-secondary .wp-block-post-featured-image,
    .la-news-secondary figure {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        height: 180px;
        max-height: 180px;
        flex-shrink: 0;
        flex-basis: auto;
        border-radius: 0.75rem 0.75rem 0 0;
    }
    
    /* Sobrescreve apenas quando WordPress aplica inline */
    .la-news-secondary .wp-block-post-featured-image[style*="flexSize"],
    .la-news-secondary .wp-block-post-featured-image[style*="flex-size"],
    figure[style*="flexSize"] {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 180px !important;
    }
    
    .la-news-secondary .wp-block-post-featured-image img,
    .la-news-secondary figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0.75rem 0.75rem 0 0;
    }
    
    /* Container de conteúdo ocupa todo o espaço disponível */
    .la-news-secondary > .wp-block-group,
    .la-news-secondary .wp-block-group {
        flex: 1;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }
    
    /* Sobrescreve padding inline do WordPress quando necessário */
    .la-news-secondary .wp-block-group[style*="padding"] {
        padding: 1rem !important;
    }
    
    /* Badge de categoria - editável */
    .la-news-secondary .la-news-badge,
    .la-news-secondary .wp-block-post-terms {
        font-size: 0.65rem;
        margin-bottom: 0.25rem;
    }
    
    /* Título com mais espaço e tamanho adequado - editável */
    .la-news-secondary .wp-block-post-title,
    .la-news-secondary .wp-block-post-title a,
    .la-news-secondary h3 {
        font-size: 0.95rem;
        line-height: 1.4;
        margin: 0.5rem 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Sobrescreve fontSize inline do WordPress quando necessário */
    .la-news-secondary .wp-block-post-title[style*="fontSize"],
    .la-news-secondary .wp-block-post-title[style*="font-size"] {
        font-size: 0.95rem !important;
    }
    
    /* Texto do excerpt com mais espaço - editável */
    .la-news-secondary .wp-block-post-excerpt,
    .la-news-secondary .wp-block-post-excerpt p,
    .la-news-secondary p {
        font-size: 0.8rem;
        line-height: 1.5;
        margin: 0.5rem 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Sobrescreve fontSize inline do WordPress quando necessário */
    .la-news-secondary .wp-block-post-excerpt[style*="fontSize"],
    .la-news-secondary .wp-block-post-excerpt[style*="font-size"] {
        font-size: 0.8rem !important;
    }
    
    /* Container de data e link */
    .la-news-secondary .wp-block-group:last-child {
        margin-top: auto;
        padding-top: 0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    /* Data - editável */
    .la-news-secondary .wp-block-post-date {
        font-size: 0.7rem;
    }
    
    /* Link Ler - editável */
    .la-news-secondary .wp-block-read-more,
    .la-news-secondary .wp-block-read-more a {
        font-size: 0.75rem;
    }
}