/* v21.6 — correções responsivas observadas nas capturas móveis.
   Mantém os mesmos componentes e conteúdo no site e no iframe de pré-visualização. */
html {
  scroll-padding-top: calc(var(--header-h, 68px) + 24px);
}
body#white-text-site main > section[id] {
  scroll-margin-top: calc(var(--header-h, 68px) + 24px);
}

@media (max-width: 680px) {
  /* O header é fixo; dê um respiro extra ao navegar por âncoras. */
  body#white-text-site main > section[id] {
    scroll-margin-top: calc(var(--header-h, 68px) + 28px);
  }

  /* As ilustrações autorais não devem perder partes da composição no mobile. */
  body#white-text-site #illustration-grid .illustration-art {
    background: #EEE6D3;
  }
  body#white-text-site #illustration-grid .illustration-art img {
    object-fit: contain;
    object-position: center;
  }

  /* A proporção é definida por mobile-layout-fixes.js conforme a imagem real. */
  body#white-text-site #project-grid .project-image {
    height: auto;
  }

  /* Evita que o WhatsApp flutuante cubra o conteúdo das seções visuais densas. */
  body#white-text-site .whatsapp-float.mobile-context-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: scale(.82) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body#white-text-site .whatsapp-float {
    transition: none !important;
  }
}


/* v22.40 — cartões de projeto equilibrados e ações nunca cortadas. */
@media (min-width: 861px) {
  body#white-text-site #project-grid[data-presentation="carousel"] > .project-card {
    flex: 0 0 min(42vw, 600px) !important;
    width: min(42vw, 600px) !important;
    max-width: 100%;
  }
}
@media (min-width: 681px) and (max-width: 860px) {
  body#white-text-site #project-grid[data-presentation="carousel"] > .project-card {
    flex-basis: min(76vw, 540px) !important;
    width: min(76vw, 540px) !important;
  }
}
body#white-text-site #project-grid .project-image {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
body#white-text-site #project-grid .project-image .behance-open {
  right: 16px !important;
  bottom: 16px !important;
  left: auto !important;
  box-sizing: border-box;
  max-width: calc(100% - 32px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body#white-text-site #project-grid .project-meta {
  min-width: 0;
  gap: clamp(10px, 1.5vw, 18px);
  padding-top: clamp(14px, 1.5vw, 20px);
}
body#white-text-site #project-grid .project-meta > div:first-child { min-width: 0; }
body#white-text-site #project-grid .project-meta h3 {
  overflow-wrap: anywhere;
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  line-height: 1.08;
}
body#white-text-site #project-grid .project-summary { max-width: 58ch; }
body#white-text-site .whatsapp-float.mobile-context-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: scale(.82) !important;
}
@media (max-width: 680px) {
  body#white-text-site #project-grid[data-presentation="carousel"] > .project-card {
    flex-basis: 86vw !important;
    width: 86vw !important;
    max-width: calc(100vw - 32px);
  }
  body#white-text-site #project-grid .project-meta { flex-wrap: wrap; }
  body#white-text-site #project-grid .project-meta h3 { font-size: clamp(1.45rem, 7vw, 1.9rem); }
}

/* v22.41 — correção exclusiva de contraste dos botões visíveis no portfólio. */
html body#white-text-site #projetos .filter-row > .filter-button.active,
html body#white-text-site #projetos .filter-row > .filter-button.active > span,
html body#white-text-site #projetos .filter-row > .filter-button[aria-pressed="true"],
html body#white-text-site #projetos .filter-row > .filter-button[aria-pressed="true"] > span {
  background-color: #EEE6D3 !important;
  color: #0E2D3A !important;
  -webkit-text-fill-color: #0E2D3A !important;
  border-color: #EEE6D3 !important;
  text-shadow: none !important;
}
html body#white-text-site #project-grid .project-image .behance-open {
  background-color: #EEE6D3 !important;
  color: #0E2D3A !important;
  -webkit-text-fill-color: #0E2D3A !important;
  border: 1px solid #EEE6D3 !important;
  text-shadow: none !important;
  opacity: 0;
}
html body#white-text-site #project-grid .project-image:hover .behance-open,
html body#white-text-site #project-grid .project-image:focus-visible .behance-open {
  background-color: #EEE6D3 !important;
  color: #0E2D3A !important;
  -webkit-text-fill-color: #0E2D3A !important;
  opacity: 1 !important;
}
html body#white-text-site #project-grid .project-image .behance-open:hover {
  background-color: #C0924D !important;
  color: #0E2D3A !important;
  -webkit-text-fill-color: #0E2D3A !important;
  border-color: #C0924D !important;
}