/* =========================================================
   sections/mobile.css — IMAGENS NO MOBILE
   ---------------------------------------------------------
   • Imagens de DESTAQUE e HEROS: aparecem 100% (contain) com
     o texto por cima e SEM vao preto — as faixas vazias sao
     preenchidas por uma copia BORRADA da propria imagem.
   • Imagens de CONTEUDO (<img>): aparecem na proporcao real.
   • Header fixo e estavel.

   TODAS as regras estao dentro de @media (max-width: ...).
   A versao DESKTOP/TABLET permanece 100% intacta.
   ========================================================= */

@media (max-width: 600px) {

  /* HEADER FIXO — body tinha overflow-x:hidden (quebra o
     position:fixed). overflow-x:clip recorta sem quebrar. */
  html, body { overflow-x: clip !important; }
  .site-header,
  .site-header.is-scrolled {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    background: #0a0a0a !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--gray-border) !important;
    transform: none !important;
    will-change: auto !important;
  }

  img, video, iframe { max-width: 100%; }

  /* =======================================================
     1) DESTAQUES E HEROS — imagem 100% (contain) + texto por
        cima, com o fundo preenchido pela imagem borrada.
        Cards (cinematic / categorias / cases) + heros de pagina.
     ======================================================= */
  .cinematic-section { min-height: 64vh !important; }
  .bucket-card,
  .bucket-card--large { min-height: 52vh !important; }   /* Eventos = demais cards */
  .p-case-card       { min-height: 300px !important; }

  .cinematic-bg,
  .bucket-card-bg,
  .p-case-bg,
  .hub-hero-bg,
  .case-hero-bg,
  .event-hero-bg,
  .p-hero-bg {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;       /* base (fica escondida) */
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
    overflow: hidden !important;
    transform: none !important;
    will-change: auto !important;
  }
  /* Camada de baixo: a propria imagem BORRADA preenchendo tudo */
  .cinematic-bg::before,
  .bucket-card-bg::before,
  .p-case-bg::before,
  .hub-hero-bg::before,
  .case-hero-bg::before,
  .event-hero-bg::before,
  .p-hero-bg::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: inherit !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    filter: blur(26px) brightness(0.5) !important;
    transform: scale(1.3) !important;
  }
  /* Camada de cima: a imagem INTEIRA e nitida (contain) */
  .cinematic-bg::after,
  .bucket-card-bg::after,
  .p-case-bg::after,
  .hub-hero-bg::after,
  .case-hero-bg::after,
  .event-hero-bg::after,
  .p-hero-bg::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: inherit !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  /* Gradiente de leitura reforcado nos CARDS (texto sobre imagem) */
  .cinematic-overlay,
  .bucket-card-overlay,
  .p-case-overlay {
    background: linear-gradient(to top,
      rgba(8,8,8,0.92) 0%,
      rgba(8,8,8,0.45) 45%,
      rgba(8,8,8,0.15) 100%) !important;
  }
  .cinematic-title { font-size: clamp(32px, 10vw, 48px) !important; }

  /* Fundos puramente atmosfericos (textura) — cover, sem vao */
  .hero-bg-img {
    object-fit: cover !important;
    object-position: center !important;
    opacity: 0.55 !important;
  }
  .sps--empresa-bg,
  [style*="hero-quem-somos"] {
    background-size: cover !important;
    background-position: center !important;
  }

  /* =======================================================
     2) IMAGENS DE CONTEUDO (<img>) — MOSTRAR COMPLETAS
     ======================================================= */
  .portfolio-item,
  .portfolio-img,
  .gal-item,
  .gi,
  .case-card-img,
  .product-block-img,
  .product-block--compact .product-block-img,
  .grupo-grid-img,
  .grupo-duo-img,
  .projeto-img,
  .case-ambient,
  .trofeu-card-img {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
  .portfolio-real-img,
  .gal-item img,
  .gi img,
  .case-card-img img,
  .product-block-img img,
  .grupo-grid-img img,
  .grupo-duo-img img,
  .projeto-img img,
  .case-ambient img,
  .trofeu-card-img img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
  }
  .case-gallery-grid,
  .case-gallery-grid--2,
  .case-gallery-grid--3,
  .gallery-2col,
  .gallery-3col,
  .projeto-imgs,
  .grupo-duo {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 6px !important;
  }
  .case-gallery-grid--3 .gal-item,
  .projeto-img,
  .projeto-img--main {
    grid-row: auto !important;
    grid-column: auto !important;
  }
  .portfolio-overlay {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    background: #0d0d0d !important;
    padding: 18px 20px 22px !important;
  }
  .portfolio-placeholder { display: none; }

  /* =======================================================
     3) SOBRE — grid "Estrutura": 1 coluna, fotos preenchendo.
     ======================================================= */
  .estrutura-grid { grid-template-columns: 1fr !important; }
  .estrutura-grid > * {
    grid-column: auto !important;
    grid-row: auto !important;
    border-right: none !important;
    border-left: none !important;
  }
  .eg-text { min-height: auto !important; padding: 24px 22px !important; }
  .eg-img-r,
  .eg-img-l,
  .eg-img-sm {
    grid-row: auto !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 2 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #0c0c0c !important;
  }
  .grupo-split-img {
    min-height: 0 !important;
    aspect-ratio: 3 / 2 !important;
  }
  .grupo-split-img-bg {
    background-size: cover !important;
    opacity: 1 !important;
  }
}

/* CELULARES PEQUENOS (<= 400px) */
@media (max-width: 400px) {
  .eg-text { padding: 20px 18px !important; }
  .bucket-card-content { padding: 18px 18px 24px !important; }
  .p-case-content { padding: 18px 18px !important; }
}