/* ===================== RESPONSIVIDADE GLOBAL (somente layout) ===================== */
/* Nunca muda estética, só corrige espaçamentos/rupturas em telas menores.            */
/* Prioridade máxima sobre outros CSS do tema/plugins.                                 */

:root{
  /* Ajuste fino centralizado aqui */
  --lado-mobile: min(4vw, 16px);
  --lado-tablet: min(3vw, 20px);
}

/* Evitar scroll horizontal fantasma */
html, body { overflow-x: hidden; }

/* Garantir dimensionamento previsível */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* Imagens/embeds sempre fluidos */
img, video, canvas, iframe { max-width: 100% !important; height: auto; }

/* Cabeçalhos fluidos para evitar queb ras exageradas */
h1, .h1 { font-size: clamp(1.6rem, 5vw + 0.2rem, 3rem); }
h2, .h2 { font-size: clamp(1.4rem, 4.2vw + 0.2rem, 2.4rem); }
h3, .h3 { font-size: clamp(1.2rem, 3.6vw + 0.2rem, 2rem); }

/* ===================== MOBILE (≤575.98px) ===================== */
@media (max-width: 575.98px){

  /* Containers Hestia + Bootstrap = 100% */
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl,
  .hestia-container,
  .section > .container,
  .page-header .container,
  .header .container,
  .content,
  .site-content,
  .blog-posts-wrap,
  .woocommerce .content-area,
  .elementor-section.elementor-section-boxed > .elementor-container,
  .wp-block-group__inner-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--lado-mobile) !important;
    padding-right: var(--lado-mobile) !important;
  }

  /* Zera gutters “duplos” nas linhas */
  .row { margin-left: 0 !important; margin-right: 0 !important; }
  [class*="col-"]{
    padding-left: var(--lado-mobile) !important;
    padding-right: var(--lado-mobile) !important;
    max-width: 100% !important;
    flex: 0 0 100% !important; /* força 1 coluna */
  }

  /* Seções de largura total sem recuos ocultos */
  .section, .page-header, .header,
  .hestia-features, .hestia-about, .hestia-testimonials,
  .hestia-blogs, .hestia-team, .hestia-contactus {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Blocos e cartões nunca “travados” a uma largura fixa */
  .card, .card .card-body,
  .carousel, .carousel-item,
  .testimonial, .testimonials,
  .blog-post, .blog-post .card,
  .wp-block-columns, .wp-block-column,
  .elementor-column, .elementor-widget-container,
  .widget, .hestia-posts-list,
  .woocommerce div.product, .products,
  .gallery, .gallery-item {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Listas de logos/grades: 2 por linha no máximo (quando houver grid) */
  .wp-block-columns.is-layout-flex,
  .elementor-row,
  .products,
  .gallery {
    gap: 12px !important;
  }
  .wp-block-column,
  .elementor-column { flex-basis: 100% !important; }

  /* Botão/flutuantes que estouram borda */
  .back-to-top, .scroll-top {
    right: var(--lado-mobile) !important;
    bottom: var(--lado-mobile) !important;
  }

  /* Campos de formulário */
  input, select, textarea { max-width: 100% !important; }
}

/* ===================== TABLET (576px–991.98px) ===================== */
@media (min-width: 576px) and (max-width: 991.98px){
  .container,
  .container-sm,
  .container-md,
  .hestia-container,
  .section > .container,
  .page-header .container,
  .header .container,
  .content,
  .site-content,
  .elementor-section.elementor-section-boxed > .elementor-container,
  .wp-block-group__inner-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--lado-tablet) !important;
    padding-right: var(--lado-tablet) !important;
  }

  .row { margin-left: 0 !important; margin-right: 0 !important; }
  [class*="col-"]{
    padding-left: var(--lado-tablet) !important;
    padding-right: var(--lado-tablet) !important;
  }

  /* Grades de blog/loja: 2 colunas no tablet, quando aplicável */
  .products .product,
  .blog-posts-wrap .col-md-4,
  .wp-block-columns .wp-block-column,
  .elementor-column { flex: 0 0 50% !important; max-width: 50% !important; }
}

/* ===================== DESKTOP (≥992px) ===================== */
/* Nada agressivo aqui; mantemos o tema no desktop normal,
   apenas prevenindo overflow horizontal. */
@media (min-width: 992px){
  body { overflow-x: hidden; }
}

/* ===================== “Respeitar o responsividade.css” ===================== */
/* Pequeno aumento de especificidade + !important só para responsividade.     */
/* Não altera cores/tipografia, apenas layout.                                 */
/* Se algum plugin usar inline-style fixo de largura, isto ainda sobressai.    */

/********************
 * AJUSTES ESPECÍFICOS (prints 1–4)
 ********************/

/* PRINT 1 — Hero com “respiro” vazio após o conteúdo */
@media (max-width: 575.98px){
  .page-header { min-height: auto !important; }
  .page-header .container { 
    padding-top: clamp(32px, 8vh, 72px) !important;
    padding-bottom: clamp(16px, 5vh, 40px) !important; 
  }
  header .row,
  .carousel .row { height: auto !important; }
  .carousel .item,
  .carousel .item.active { margin-bottom: 0 !important; padding-bottom: 0 !important; }
}

/* PRINT 2 — Ícones grandes na seção “features” (mobile e desktop) */
section.hestia-features .feature-box img,
#features .feature-box img,
.hestia-features .hestia-info .card-plain > img {
  display: block;
  margin: 0 auto;
  height: auto !important;
}
@media (max-width: 575.98px){
  section.hestia-features .feature-box img,
  #features .feature-box img { 
    max-width: 96px !important;   /* mobile */
  }
}
@media (min-width: 576px){
  section.hestia-features .feature-box img,
  #features .feature-box img { 
    max-width: 128px !important;  /* tablets/desktop */
  }
}

/* PRINT 3 — “Nossa História” alinhada com mesmo espaço dos dois lados */
@media (max-width: 991.98px){
  #about.section-image .container,
  section.hestia-about .container { 
    padding-left: var(--lado-mobile) !important; 
    padding-right: var(--lado-mobile) !important; 
  }
  .hestia-about .row,
  .hestia-about .hestia-about-content,
  .hestia-about .hestia-about-content .row {
    margin-left: 0 !important; 
    margin-right: 0 !important;
  }

  .nossa-historia-box {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--lado-mobile) !important;
    padding-right: var(--lado-mobile) !important;
  }
  .nossa-historia-box,
  .nossa-historia-texto,
  .nossa-historia-imagem {
    align-items: center !important;
    justify-content: center !important;
  }
}

/* PRINT 4 — Staff: foto pequena e textos desalinhados */
@media (max-width: 768.98px){
  #team .row > [class*="col-"],
  section.hestia-team .row > [class*="col-"]{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .hestia-team .card-profile .card-image,
  #team .card-profile .card-image{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 12px !important;
  }
  .hestia-team .card-profile .card-image img,
  #team .card-profile .card-image img{
    width: 85vw !important;
    max-width: 360px !important;
    height: auto !important;
  }
  .hestia-team .card .content,
  #team .card .content{
    text-align: center !important;
  }
  .hestia-team .card .card-title,
  #team .card .card-title{
    margin-top: 8px !important;
    margin-bottom: 6px !important;
  }
  .hestia-team .card .card-description,
  #team .card .card-description{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ===== FIXES ADITIVOS — NÃO ALTERA OUTRAS REGRAS ===== */

/* 1) Nossa História: impedir conteúdo de ultrapassar a caixa (apenas em telas ≤ 991.98px) */
@media (max-width: 991.98px){
  .nossa-historia-box{
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .nossa-historia-box .nossa-historia-texto,
  .nossa-historia-box .nossa-historia-imagem{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: clamp(16px, 4vw, 24px) !important;
    padding-right: clamp(16px, 4vw, 24px) !important;
    box-sizing: border-box !important;
  }
  .nossa-historia-box h1, .nossa-historia-box h2, .nossa-historia-box h3,
  .nossa-historia-box p{
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .nossa-historia-box img{ max-width: 100% !important; height: auto !important; }
}

/* 2) Staff: aumentar o container da imagem para acompanhar a foto (apenas ≤ 768.98px) */
@media (max-width: 768.98px){
  #team .card.card-profile,
  section.hestia-team .card.card-profile{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  #team .card.card-profile .card-image,
  section.hestia-team .card.card-profile .card-image{
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  #team .card.card-profile .content,
  section.hestia-team .card.card-profile .content{
    width: 100% !important;
    max-width: 680px !important;
    text-align: center !important;
    margin: 8px auto 0 auto !important;
    float: none !important;
  }
}

/* ===== STAFF: não cortar a foto; imagem completa e conteúdo abaixo no mobile ===== */
@media (max-width: 768.98px){
  /* Container do card em coluna (imagem em cima, texto embaixo) */
  #team .card.card-profile,
  section.hestia-team .card.card-profile{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  /* Área da imagem sem altura fixa nem crop */
  #team .card.card-profile .card-image,
  section.hestia-team .card.card-profile .card-image{
    width: 100% !important;
    max-width: 680px !important;
    height: auto !important;
    overflow: visible !important;       /* evita recorte */
  }
  /* Imagem deve respeitar proporção original */
  #team .card.card-profile .card-image img,
  section.hestia-team .card.card-profile .card-image img{
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;     /* mostra a foto inteira */
  }
  /* Texto abaixo e centralizado */
  #team .card.card-profile .content,
  section.hestia-team .card.card-profile .content{
    width: 100% !important;
    max-width: 680px !important;
    text-align: center !important;
    margin: 10px auto 0 auto !important;
    float: none !important;
  }
}

/* ===================== FIX: NOSSA HISTÓRIA (parágrafos e imagem) ===================== */
/* Escopo mobile/tablet. Mantém o restante do arquivo intocado. */
@media (max-width: 991.98px){
  /* A caixa precisa permitir que filhos flex encolham sem "sair" do box */
  .nossa-historia-box,
  .nossa-historia-texto,
  .nossa-historia-imagem{
    min-width: 0 !important;                /* evita overflow por min-content */
    box-sizing: border-box !important;
  }

  /* Centraliza e limita a largura de leitura como no card de "Por que escolher" */
  .nossa-historia-box{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(16px, 4vw, 24px) !important;
    padding-right: clamp(16px, 4vw, 24px) !important;
    overflow: hidden !important;             /* nada passa da borda arredondada */
  }

  .nossa-historia-texto,
  .nossa-historia-imagem{
    width: 100% !important;
    max-width: 680px !important;             /* largura de leitura confortável */
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Parágrafos nunca ultrapassam o box */
  .nossa-historia-texto p{
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  /* Imagem 100% fluida, sem crop */
  .nossa-historia-imagem img{
    display: block !important;
    width: 100% !important;
    height: auto !important;                 /* remove alturas fixas herdadas */
    max-height: none !important;
    object-fit: contain !important;          /* mostra a foto inteira dentro do box */
    border-radius: inherit;
  }
}

/* ===================== FIX: BLOG (imagem com espaço branco e conteúdo oculto) ===================== */
/* Remove altura fixa e gaps do bloco de imagem do card no mobile/tablet */
@media (max-width: 991.98px){
  .hestia-blogs .card .card-image,
  .hestia-blogs .card.card-plain .card-image{
    height: auto !important;
    margin: 0 0 10px 0 !important;      /* só um respiro abaixo da imagem */
  }
  /* A imagem ocupa 100% e elimina o espaçamento do baseline */
  .hestia-blogs .card .card-image img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: cover !important;       /* mantém proporção estética sem “letterbox” */
  }
  /* Garante que o conteúdo apareça logo abaixo da imagem */
  .hestia-blogs .hestia-blog-item .content,
  .hestia-blogs .card .content{
    display: block !important;          /* evita colapsar com flex estranhos */
    visibility: visible !important;
    opacity: 1 !important;
    padding-top: 10px !important;
  }
  /* Título e descrição sem truncar demasiadamente */
  .hestia-blogs .card .card-title{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .hestia-blogs .card .card-description{
    display: block !important;
  }
}

/* ===================== FIX UNIFICADO: STAFF (TEAM) — mobile ===================== */
/* Objetivo: imagem ~50% da largura, título +10%, exibir descrição e link, 
   ordem: foto > título > sub-título > descrição > link (parecido com Blog). */
@media (max-width: 768.98px){
  /* Empilhar em coluna e centralizar */
  section.hestia-team .card.card-profile,
  #team .card.card-profile{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* As duas colunas internas (img/conteúdo) viram 100% */
  section.hestia-team .card.card-profile > [class*="col-"],
  #team .card.card-profile > [class*="col-"]{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Área da imagem centralizada; sem cortes */
  section.hestia-team .card.card-profile .card-image,
  #team .card.card-profile .card-image{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 680px !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 0 10px 0 !important;
  }
  /* Foto = ~50% da largura do card; mantém proporção */
  section.hestia-team .card.card-profile .card-image img,
  #team .card.card-profile .card-image img{
    width: 50% !important;           /* ~metade do tamanho anterior */
    max-width: 340px !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Título +10% e com respiro */
  section.hestia-team .card .card-title,
  #team .card .card-title{
    font-size: 110% !important;
    margin-top: 8px !important;
    margin-bottom: 6px !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }

  /* Subtítulo sempre visível */
  section.hestia-team .card .category.text-muted,
  #team .card .category.text-muted{
    display: block !important;
    margin-bottom: 6px !important;
  }

  /* Descrição e link SEM display:none em mobile */
  section.hestia-team .card .card-description,
  #team .card .card-description{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 680px !important;
  }
  section.hestia-team .card .content a,
  #team .card .content a{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 8px !important;
  }
}

/* ===================== STAFF (Team) — ajuste título e remover quadro/sombra da imagem (mobile) ===================== */
@media (max-width: 768.98px){
  /* Título um pouco maior (~+25%) */
  section.hestia-team .card .card-title,
  #team .card .card-title{
    font-size: 125% !important;
    line-height: 1.25 !important;
  }
  /* Remover painel branco e sombra ao redor da imagem */
  section.hestia-team .card .card-image,
  #team .card .card-image{
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
  }
  section.hestia-team .card .card-image::before,
  section.hestia-team .card .card-image::after,
  #team .card .card-image::before,
  #team .card .card-image::after{
    content: none !important;
    display: none !important;
  }
}

/* ===================== BLOG — imagem 100% e sem padding lateral do card ===================== */
@media (max-width: 991.98px){
  /* Remove o padding do card para a imagem encostar nas bordas */
  .hestia-blogs .card.card-plain.card-blog,
  .hestia-blogs .card.card-plain{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Mantém respiro no conteúdo de texto */
  .hestia-blogs .card .content{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Garante bordas arredondadas e imagem ocupando 100% */
  .hestia-blogs .card .card-image{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: inherit !important;
  }
  .hestia-blogs .card .card-image img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* ===================== BLOG — full-bleed, remove column/card-image paddings & width locks ===================== */
@media (max-width: 991.98px){
  /* Garante que cada item ocupe 100% da coluna no mobile/tablet (evita width fixo herdado) */
  .hestia-blogs .hestia-blog-item{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  /* Remove recuos laterais do card quando houver imagem full-bleed */
  .hestia-blogs .card.card-plain,
  .hestia-blogs .card.card-plain.card-blog{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Zera qualquer padding/margem lateral do bloco da imagem e tira fundo branco */
  .hestia-blogs .card .card-image{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: inherit !important;
    overflow: hidden !important;
  }
  .hestia-blogs .card .card-image > a{ display:block !important; }
  .hestia-blogs .card .card-image img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: inherit !important;
  }
  /* Respiro somente no conteúdo, não na imagem */
  .hestia-blogs .card .content{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ===================== BLOG — remove padding da coluna do item (ganha do [class*="col-"]) ===================== */
@media (max-width: 991.98px){
  .hestia-blogs .row > .hestia-blog-item{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ===================== EVENTOS — empilhar cards no mobile ===================== */
@media (max-width: 991.98px){
  #eventos .eventos-layout,
  #eventos #eventos-swiper{
    display: block !important;               /* deixa em bloco ao invés de flex/row */
  }
  #eventos .swiper-wrapper{
    display: block !important;               /* força o wrapper do Swiper a empilhar */
    transform: none !important;              /* remove translate3d horizontal do Swiper */
  }
  #eventos .swiper-slide{
    width: 100% !important;                  /* cada card ocupa 100% da largura */
    margin: 0 auto 20px auto !important;     /* espaçamento vertical entre cartões */
  }
}