/* =================================================================
   LADRILAR — Correções de layout (mobile-first fixes)
   -----------------------------------------------------------------
   REGRAS DESTE ARQUIVO (para não virar "lasanha"):
   1. Carregado por ÚLTIMO (ver functions.php) → vence ordem de cascata.
   2. Fixes mobile vão DENTRO de @media (max-width) → desktop intocado.
   3. Fixes específicos de uma página usam a body class do WP
      (.home, .page-id-XXXX, .page-id-3239 ...) → não vazam p/ outra página.
   4. Fixes globais (ex.: botões flutuantes) ficam na seção GLOBAL e são
      conscientemente aplicados a todos os viewports.
   5. Evitar !important salvo quando preciso vencer CSS inline do builder.
   Breakpoints: mobile <=767px | tablet 768-1024px | desktop >1024px
   ================================================================= */


/* =================================================================
   GLOBAL — Override movido do tema PAI (mendel/css/__colors.css)
   Cor do elemento <code> (#333 -> #043045). Mantido aqui no child p/
   não editar o tema pai (que é sobrescrito em updates).
   ================================================================= */
code {
  color: #043045;
}


/* =================================================================
   GLOBAL — Botões flutuantes (WhatsApp + Voltar ao topo)
   Problema: ambos position:fixed no canto inferior direito → sobrepõem
   (acontece também no desktop). Solução: empilhar em coluna —
   WhatsApp embaixo, "voltar ao topo" logo acima, alinhados à direita.
   ================================================================= */
.ldl-whatsapp-float {
  right: 22px;
  bottom: 22px;
}
.trx_addons_scroll_to_top {
  right: 26px !important;        /* alinha com o centro do WhatsApp (58px) */
  bottom: 92px !important;       /* acima do WhatsApp (58 + ~12 de folga) */
}

@media (max-width: 767px) {
  .ldl-whatsapp-float {
    right: 16px;
    bottom: 16px;
  }
  .trx_addons_scroll_to_top {
    right: 19px !important;
    bottom: 80px !important;
  }
}


/* =================================================================
   MOBILE — normalização global (max-width: 767px)
   Corrige os problemas estruturais comuns a TODAS as páginas, sem
   tocar no desktop. Header/footer usam .sc_layouts_row (não .vc_row),
   então as regras de coluna abaixo não os afetam.
   ================================================================= */
@media (max-width: 767px) {

  /* --- A. Colunas que não empilham (causa de sobreposição/squeeze) ---
     Rows flex do WPBakery ficam com nowrap → colunas comprimem lado a
     lado no mobile em vez de empilhar. Permitir wrap resolve. */
  .vc_row.vc_row-flex,
  .vc_row.wpb_row.vc_inner {
    flex-wrap: wrap !important;
  }
  /* Reforço: colunas vc_col-sm/md ocupam a largura toda no mobile */
  .vc_row.vc_row-flex > .wpb_column[class*="vc_col-sm-"],
  .vc_row.vc_row-flex > .wpb_column[class*="vc_col-md-"],
  .vc_row.vc_inner > .wpb_column[class*="vc_col-sm-"],
  .vc_row.vc_inner > .wpb_column[class*="vc_col-md-"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* --- B. Tipografia: títulos de display do tema (.sc_item_title) ---
     Mesma escala em todas as páginas + nunca quebrar no meio da palavra.
     (Não afeta labels de produto/h2 do catálogo, que usam outras classes.) */
  .sc_item_title.sc_title_title,
  .sc_layouts_title_caption {
    font-size: 26px !important;
    line-height: 1.18 !important;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
  }
  /* subtítulo/olho-d'água acima dos títulos (ex.: "Modelos", "Designer") */
  .sc_item_subtitle.sc_title_subtitle {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  /* --- C. Ritmo vertical: padroniza os espaçadores do builder ---
     Os .vc_empty_space tinham alturas caóticas por página (16/27/53/69/120).
     Normaliza por classe nomeada e limita os inline gigantes no mobile,
     criando um ritmo único e mais compacto. */
  .vc_empty_space { max-height: 40px !important; }
  .vc_empty_space.height_small  { height: 16px !important; max-height: 16px !important; }
  .vc_empty_space.height_medium { height: 24px !important; max-height: 24px !important; }
  .vc_empty_space.height_large  { height: 32px !important; max-height: 32px !important; }
  .vc_empty_space.height_huge   { height: 40px !important; max-height: 40px !important; }

  /* --- D. Gutter lateral PADRONIZADO (simétrico em todas as páginas) ---
     Problema medido: lado direito ~20px maior que o esquerdo (sc_content
     width:80% alinhado à esquerda) e gutter esquerdo variando 18/22/41px
     entre páginas. Padroniza tudo: conteúdo do tema em largura total,
     zera margens negativas/custom horizontais, e gutter único de 16px. */

  /* D1. conteúdo do tema ocupa largura total (mata a assimetria à direita).
     Seletores com [class*=] têm especificidade 0,2,0 — vencem o <style>
     inline do WPBakery (.vc_custom_* / .sc_content_width_* / .sc_float_*,
     que são 0,1,0 !important e por isso batiam o reset simples). */
  .sc_content,
  .sc_content[class*="width_"],
  .sc_content[class*="vc_custom_"],
  .sc_content[class*="sc_float_"],
  .sc_content_container {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    float: none !important;
    margin-top: 0 !important;     /* mata o overlap (margin-top:-300px do desktop) */
    margin-bottom: 0 !important;
  }
  /* D2. zera TODAS as margens horizontais das rows (o -15 padrão e os
     custom), top-level e nested — senão o conteúdo vaza (bleed -14px).
     Exclui rows full-width (hero/vídeo) que dependem da margem negativa. */
  .vc_row:not([data-vc-full-width]),
  .vc_row.vc_inner,
  .vc_row .vc_column-inner,
  .sc_content,
  .wpb_wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* D3. gutter único de 16px no container top-level; nested sem gutter
     próprio (herda os 16px do pai). */
  .vc_row:not(.vc_inner):not([data-vc-full-width]) > .wpb_column > .vc_column-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .vc_row.vc_inner > .wpb_column > .vc_column-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --- E. Overlap vertical: reset de margin-top negativo (composições
     desktop que sobrepõem texto na imagem). Ex.: seção "LINHA VILANOVA
     ARTIGAS" na home tinha .sc_content com margin-top:-300px. No mobile
     o conteúdo deve fluir ABAIXO da imagem, não por cima. */
  .sc_content { margin-top: 0 !important; }

  /* --- F. Acessibilidade: menu do footer ---
     Links eram 10px com tap de ~30px de altura. Sobe a fonte p/ legível
     e o alvo de toque p/ ~44px (recomendação WCAG/iOS). */
  .ldl-footer .ldl-footer__menu li a {
    font-size: 13px !important;
    line-height: 1.4 !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    display: block;
  }
}

/* =================================================================
   MOBILE — fixes por página (body class do WP), preenchido conforme
   a auditoria visual de cada página.
   @media (max-width: 767px) { .home { ... } .page-id-XXXX { ... } }
   ================================================================= */
@media (max-width: 767px) {

  /* --- /fotos/ (page-id 3209) ---
     A row de vídeo de fundo (#video-page) colapsava p/ ~40px no mobile
     (vc_row-o-full-height não aplica), mostrando só a barra de controle
     do YouTube + um vazio branco. Damos altura p/ o vídeo aparecer como
     hero. O crop global de .vc_video-bg deixa o playback limpo. */
  .page-id-3209 #video-page,
  .page-id-3209 .video-page {
    min-height: 50vh !important;
    height: auto !important;
  }
  .page-id-3209 #video-page .vc_video-bg,
  .page-id-3209 .video-page .vc_video-bg {
    min-height: 50vh !important;
  }
  /* Aqui o vídeo é "assistível" (com controles), não hero de fundo:
     desfaz o crop/no-click global p/ permitir play. */
  .page-id-3209 .vc_video-bg-container .vc_video-bg,
  .page-id-3209 .vc_video-bg-container .vc_video-bg iframe {
    transform: none !important;
    pointer-events: auto !important;
  }
}