/* ==========================================================================
* PATCH DE RESPONSIVIDADE MOBILE & TABLET - MUSEU DE CIÊNCIA E TÉCNICA (EM/UFOP)
* Plataforma: Arizona Quickstart / Drupal 10 (Bootstrap Barrio)
* URL Alvo: https://temp.museu.em.ufop.br/
* Instruções de Uso: Cole este bloco no Header Global / Asset Injector
* ou Bloco HTML da plataforma Quickstart.
* ========================================================================== */

/* ==========================================================================
 1. TABLET & MOBILE GERAL (@media max-width: 768px)
 ========================================================================== */
@media (max-width: 768px) {

/* ------------------------------------------------------------------------
   1.1. Prevenção Global de Overflow Horizontal e Limpeza de Artefatos
   ------------------------------------------------------------------------ */
html,
body {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

.dialog-off-canvas-main-canvas,
#page-wrapper,
#page,
#main-wrapper,
#main {
  max-width: 100vw !important;
  overflow-x: clip !important;
}

/* Evita que o scroll script adicione padding-top indevido no mobile */
body.header-is-fixed #main-wrapper {
  padding-top: 0 !important;
}

/* Oculta elementos off-screen injetados pelo Google Translate que geram overflow */
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
#goog-gt-tt,
.skiptranslate iframe {
  display: none !important;
}

/* Remove padding duplicado de containers aninhados em Flexible Pages */
#main .container .container.az-flexible-page-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Garante que mídias e imagens nunca ultrapassem seus containers */
img,
video,
iframe,
embed,
object,
svg {
  max-width: 100% !important;
}

/* Suporte responsivo preventivo para tabelas no conteúdo editorial */
main table,
.node__content table,
.museum-container table {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border-collapse: collapse !important;
}

/* ------------------------------------------------------------------------
   1.2. Barra Institucional Superior (#header_arizona), Botões Redbar e Idioma
   ------------------------------------------------------------------------ */
#header_arizona {
  position: relative !important;
  z-index: 1055 !important;
  min-height: 50px !important;
  padding: 0 !important;
}

#header_arizona > .container {
  padding-left: 12px !important;
  padding-right: 12px !important;
  max-width: 100% !important;
}

#header_arizona > .container > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin: 0 !important;
}

/* Logo UFOP dimensionado para não colidir com os botões BUSCAR / MENU */
#header_arizona .arizona-logo {
  max-width: calc(100% - 132px) !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 4px 0 !important;
}

#header_arizona .arizona-line-logo {
  max-height: 32px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  margin: 0 !important;
}

/* Container dos botões vermelhos (BUSCAR / MENU) no topo direito */
#header_arizona .redbar-buttons {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  height: 50px !important;
  width: auto !important;
  display: flex !important;
  align-items: stretch !important;
  z-index: 1060 !important;
}

/* Corrige o conflito com .btn { display: inline-flex; padding: 10px 22px; min-width: 140px } */
#header_arizona .btn.btn-redbar,
#navbar-top .btn.btn-redbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 68px !important;
  height: 50px !important;
  padding: 4px 2px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

/* Restaura a fonte de ícones Material Icons Sharp sobrescrita por .header.page-row span */
.header.page-row span.material-icons-sharp,
#header_arizona .material-icons-sharp,
#navbar-top .material-icons-sharp {
  font-family: "Material Icons Sharp" !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 22px !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}

#header_arizona .btn.btn-redbar .icon-text,
#navbar-top .btn.btn-redbar .icon-text {
  font-family: "Open Sans", sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  width: auto !important;
}

/* Barra utilitária do botão de idioma (Português) */
#header section.region.region-header-ua-utilities {
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 4px 0 6px !important;
  margin: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#btn-idioma-trigger {
  min-width: 0 !important;
  width: auto !important;
  padding: 5px 12px !important;
  font-size: 0.8rem !important;
  line-height: 1.2 !important;
  height: auto !important;
  border-radius: 4px !important;
}

/* Modal de Seleção de Idioma (#modalTraducao) */
#modalTraducao .modal-dialog {
  margin: 16px auto !important;
  max-width: calc(100vw - 24px) !important;
}

#modalTraducao .lang-btn {
  width: calc(33.333% - 10px) !important;
  min-width: 90px !important;
  padding: 8px 6px !important;
  font-size: 0.85rem !important;
}

/* ------------------------------------------------------------------------
   1.3. Cabeçalho Principal (#header_site) e Menu Off-Canvas (#navbar-top)
   ------------------------------------------------------------------------ */
#header_site,
body.header-is-fixed #header_site {
  position: static !important;
  box-shadow: none !important;
}

/* Oculta completamente o drawer off-canvas quando fechado para zerar overflow no DOM */
#navbar-top.navbar-offcanvas:not(.open) {
  display: none !important;
}

/* Estrutura do Menu Off-Canvas quando aberto (.open) */
#navbar-top.navbar-offcanvas.open {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: 320px !important;
  max-width: 88vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background-color: var(--background-color, #4d5d71) !important;
  transform: translateX(0) !important;
  z-index: 2000 !important;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.35) !important;
}

#navbar-top .navbar-offcanvas-header {
  width: 100% !important;
  flex-shrink: 0 !important;
}

/* Formulário de Busca dentro do Menu Off-Canvas */
#block-az-barrio-offcanvas-searchform,
#block-az-barrio-offcanvas-searchform form.search-block-form {
  width: 100% !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  background-color: #ffffff !important;
  box-sizing: border-box !important;
}

#block-az-barrio-offcanvas-searchform .input-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
}

#block-az-barrio-offcanvas-searchform input.form-search {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 8px 12px !important;
  font-size: 0.95rem !important;
  border: 1px solid #ced4da !important;
  border-right: none !important;
  border-radius: 6px 0 0 6px !important;
  color: #212529 !important;
}

#block-az-barrio-offcanvas-searchform .input-group-append {
  display: flex !important;
  width: auto !important;
  margin: 0 !important;
}

#block-az-barrio-offcanvas-searchform button#edit-submit {
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--background-color, #4d5d71) !important;
  border: 1px solid var(--background-color, #4d5d71) !important;
  border-radius: 0 6px 6px 0 !important;
}

#block-az-barrio-offcanvas-searchform button#edit-submit span.material-icons-sharp {
  color: #ffffff !important;
  font-size: 22px !important;
}

/* Região interna do Off-Canvas: desfaz o layout horizontal (60% + 60%) e o height: 15vh/5vh */
#navbar-top section.region.region-navigation,
body.header-is-fixed #navbar-top section.region.region-navigation {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 14px 14px 30px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Branding (Logo + Nome do Museu) dentro do Off-Canvas */
#navbar-top #block-az-barrio-branding {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 6px 4px 16px !important;
  margin: 0 0 12px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#navbar-top #block-az-barrio-branding .qs-site-logo,
body.header-is-fixed #navbar-top #block-az-barrio-branding .qs-site-logo {
  display: block !important;
  width: 50px !important;
  max-width: 50px !important;
  flex: 0 0 50px !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#navbar-top #block-az-barrio-branding .qs-site-logo .img-fluid {
  height: auto !important;
  max-height: 62px !important;
  width: 100% !important;
  object-fit: contain !important;
}

#navbar-top #block-az-barrio-branding a[title="Início"] {
  width: auto !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#navbar-top #block-az-barrio-branding .h3,
body.header-is-fixed #navbar-top #block-az-barrio-branding .h3 {
  font-size: 0.88rem !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Lista de Navegação Principal no Off-Canvas */
#navbar-top nav#block-az-barrio-navegacaoprincipal {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

#navbar-top #block-az-barrio-navegacaoprincipal ul.navbar-nav {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

#navbar-top #block-az-barrio-navegacaoprincipal .nav-item {
  width: 100% !important;
  margin: 0 0 4px 0 !important;
}

#navbar-top #block-az-barrio-navegacaoprincipal .nav-link,
#navbar-top #block-az-barrio-navegacaoprincipal button.dropdown-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 12px 14px !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  text-align: left !important;
  white-space: normal !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

/* Impede que o :hover de desktop abra submenus sozinhos no mobile */
html body #navbar-top #block-az-barrio-navegacaoprincipal .nav-item.dropdown:not(.show) > .dropdown-menu,
html body #navbar-top #block-az-barrio-navegacaoprincipal .nav-item.dropdown:not(.show):hover > .dropdown-menu {
  display: none !important;
}

html body #navbar-top #block-az-barrio-navegacaoprincipal .dropdown-menu,
html body #navbar-top #block-az-barrio-navegacaoprincipal .nav-item.dropdown.show > .dropdown-menu {
  position: static !important;
  float: none !important;
  width: 100% !important;
  margin: 4px 0 8px 0 !important;
  padding: 6px 0 !important;
  background-color: rgba(0, 0, 0, 0.22) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  border: none !important;
  transform: none !important;
}

html body #navbar-top #block-az-barrio-navegacaoprincipal .nav-item.dropdown.show > .dropdown-menu {
  display: block !important;
}

html body #navbar-top #block-az-barrio-navegacaoprincipal .dropdown-menu .dropdown-item {
  display: block !important;
  width: 100% !important;
  padding: 10px 14px 10px 22px !important;
  font-size: 0.92rem !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  color: rgba(255, 255, 255, 0.92) !important;
  box-sizing: border-box !important;
}

/* Desativa o overlay blur de hover do menu desktop */
.menu-overlay-blur {
  display: none !important;
}

/* ------------------------------------------------------------------------
   1.4. Template Home: Hero Section, Banner de Evento, Notícias e Depoimentos
   ------------------------------------------------------------------------ */
/* Remove o margin-top: -90px que encobria o cabeçalho #header_arizona na Home */
.hero-section {
  margin-top: 0 !important;
  height: auto !important;
  min-height: 460px !important;
  padding: 40px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero-section .background-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.hero-content {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 140px !important;
  padding: 10px 4px !important;
}

.hero-content h1 {
  font-size: clamp(2rem, 7vw, 2.75rem) !important;
  margin-bottom: 14px !important;
}

.hero-content p {
  font-size: 1rem !important;
  margin-bottom: 24px !important;
  padding: 0 4px !important;
}

.hero-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
}

.hero-buttons .btn {
  min-width: 140px !important;
  padding: 12px 24px !important;
  font-size: 0.95rem !important;
}

/* Modal de Vídeos do Tour Virtual */
.tour-popup-wrapper {
  padding: 32px 16px 24px !important;
}

.tour-popup-title {
  font-size: 1.4rem !important;
  padding-right: 24px !important;
}

/* Banner de Eventos na Home */
.event-banner {
  flex-direction: column !important;
  text-align: center !important;
  padding: 24px 16px !important;
  gap: 16px !important;
}

.event-action {
  margin-left: 0 !important;
  width: 100% !important;
}

/* Bloco de Notícias Recentes (Marquee) e Cabeçalhos de Seção */
.section-header {
  margin-bottom: 30px !important;
  padding: 0 12px !important;
}

.section-header h2,
.custom-collections-wrapper .section-header h2,
.block-views-blockaz-news-marquee .az-news-heading h2 {
  font-size: 1.75rem !important;
  line-height: 1.25 !important;
}

/* Corrige o white-space: nowrap que vazava subtítulos em telas menores */
.section-header p,
.block-views-blockaz-news-marquee .section-header p,
.custom-collections-wrapper .section-header p {
  white-space: normal !important;
  max-width: 100% !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
}

.block-views-blockaz-news-marquee {
  padding: 20px 12px 24px !important;
}

.block-views-blockaz-news-marquee .view-content {
  grid-template-columns: 1fr !important;
  gap: 28px !important;
}

/* Seção de Depoimentos (Swiper .mySwiper): elimina o buraco branco causado por flex: auto + height: 100% */
.testimonials-section {
  padding: 32px 12px !important;
}

.testimonials-section .slider-wrapper {
  padding: 0 4px !important;
}

.testimonials-section .swiper-slide {
  height: auto !important;
}

.testimonial-card {
  flex-direction: column-reverse !important;
  justify-content: flex-end !important;
  height: auto !important;
  padding: 22px 18px !important;
  gap: 18px !important;
}

.testimonial-card .card-image {
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
}

.testimonial-card .card-image img {
  width: 100% !important;
  height: 260px !important;
  min-height: 0 !important;
  max-height: 280px !important;
  object-fit: cover !important;
  object-position: top center !important;
}

.testimonial-card .card-content {
  flex: 0 0 auto !important;
  width: 100% !important;
}

.testimonial-card .card-content h3 {
  font-size: 1.3rem !important;
  margin-bottom: 14px !important;
}

.testimonial-card .author-info {
  margin-top: 12px !important;
  padding-top: 12px !important;
}

/* Abas de Redes Sociais (Instagram / TikTok) */
#block-az-barrio-instagram .content > .field > div[style*="padding: 100px"] {
  padding: 36px 12px !important;
}

/* ------------------------------------------------------------------------
   1.5. Template Índice de Coleções (/colecoes)
   ------------------------------------------------------------------------ */
.custom-collections-wrapper {
  margin: 24px auto 48px !important;
  padding: 0 8px !important;
}

.collections-swiper {
  padding: 12px 6px 56px 6px !important;
}

.collection-image {
  height: 200px !important;
}

.collection-content {
  padding: 18px 16px !important;
}

.custom-nav-btn {
  width: 38px !important;
  height: 38px !important;
  top: 250px !important;
}

.custom-prev {
  left: 2px !important;
}

.custom-next {
  right: 2px !important;
}

/* ------------------------------------------------------------------------
   1.6. Templates de Acervo/Obras (/colecoes/*), Institucional e Conservação
   ------------------------------------------------------------------------ */
.az-flexible-page-content h1.display-5 {
  font-size: 1.85rem !important;
  line-height: 1.2 !important;
  word-break: break-word !important;
}

.museum-section-title {
  font-size: 1.25rem !important;
  line-height: 1.35 !important;
  margin-top: 24px !important;
}

/* Evita rios de espaço em branco no texto justificado em telas estreitas */
.museum-paragraph,
#corpo_noticia p {
  text-align: left !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  overflow-wrap: break-word !important;
}

.museum-list-item {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  overflow-wrap: break-word !important;
}

.museum-figure {
  padding: 6px 0 !important;
  margin: 12px auto !important;
}

/* Corrige a altura fixa de 450px nas imagens das galerias das coleções */
.museum-img {
  width: 100% !important;
  height: auto !important;
  max-height: 320px !important;
  object-fit: cover !important;
}

/* Mantém diagramas e infográficos com zoom GLightbox sem cortes */
.museum-img.glightbox,
#corpo_noticia .museum-img {
  object-fit: contain !important;
  max-height: 380px !important;
}

/* Corrige .container-imagens que possuía width: 100% + margin: 25px */
.container-imagens {
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 16px 0 !important;
}

.museum-split-section {
  flex-direction: column !important;
  gap: 20px !important;
}

.museum-figure-content figure.museum-figure img.museum-img {
  height: auto !important;
  min-height: 200px !important;
  max-height: 300px !important;
}

/* Card de Contato do Curador (.museum-contact-card) */
.museum-contact-card {
  flex-direction: column !important;
  text-align: center !important;
  padding: 20px 14px !important;
  gap: 14px !important;
  margin-top: 28px !important;
  box-sizing: border-box !important;
}

.museum-contact-card .contact-details {
  width: 100% !important;
  min-width: 0 !important;
}

.museum-contact-link {
  display: inline-block !important;
  max-width: 100% !important;
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  font-size: 0.9rem !important;
  padding: 8px 12px !important;
  box-sizing: border-box !important;
}

/* ------------------------------------------------------------------------
   1.7. Template Equipe (/sobre-o-museu/equipe)
   ------------------------------------------------------------------------ */
.staff-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
}

.staff-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* ------------------------------------------------------------------------
   1.8. Templates de Notícias (/noticias/all e /noticias/*) e Breadcrumbs
   ------------------------------------------------------------------------ */
ol.breadcrumb {
  padding: 8px 12px !important;
  margin-bottom: 12px !important;
  font-size: 0.85rem !important;
  line-height: 1.35 !important;
}

ol.breadcrumb .breadcrumb-item {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

.custom-news-header-wrapper {
  margin-top: 20px !important;
  margin-bottom: 28px !important;
  padding: 0 12px !important;
}

/* Botões de chamada para ação dentro de notícias e publicações */
#corpo_noticia .btn,
.manual-section .btn {
  display: inline-flex !important;
  max-width: 100% !important;
  width: 100% !important;
  white-space: normal !important;
  text-align: center !important;
  justify-content: center !important;
  padding: 12px 16px !important;
  font-size: 0.92rem !important;
  line-height: 1.35 !important;
  box-sizing: border-box !important;
}

/* ------------------------------------------------------------------------
   1.9. Template Guia de Publicação / Manual do Redator (/guia-publicacao)
   ------------------------------------------------------------------------ */
.manual-redator {
  margin: 20px auto !important;
  padding: 0 4px !important;
}

.manual-header {
  margin-bottom: 28px !important;
}

.manual-header h1 {
  font-size: 1.65rem !important;
  line-height: 1.25 !important;
}

.manual-section {
  padding: 18px 14px !important;
  margin-bottom: 24px !important;
}

.secao-titulo h2 {
  font-size: 1.2rem !important;
  line-height: 1.3 !important;
}

.exemplo-visual {
  padding: 14px 12px !important;
}

/* Corrige o vazamento horizontal de nomes longos de arquivos (.pdf/.doc) */
.lista-arquivos li {
  padding: 12px !important;
  gap: 10px !important;
  align-items: flex-start !important;
}

.lista-arquivos li > div {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

.lista-arquivos a {
  display: block !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  line-height: 1.35 !important;
}

/* Corrige o overflow dos blocos <pre><code> e evita colisão com .btn-copiar */
.codigo-container pre {
  padding: 42px 12px 14px !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  overflow-x: hidden !important;
}

.codigo-container code {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}

.webview-container iframe {
  height: 360px !important;
}

/* ------------------------------------------------------------------------
   1.10. Rodapé Global Customizado (footer.custom-dark-footer)
   ------------------------------------------------------------------------ */
.custom-dark-footer {
  padding: 40px 20px 32px !important;
}

/* Elimina o flex-basis: 300px / 600px que esticava a altura vertical em 900px no mobile */
.cdf-top {
  flex-direction: column !important;
  gap: 28px !important;
  margin-bottom: 32px !important;
}

.cdf-brand,
.cdf-links-wrapper {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

.cdf-brand p {
  margin-bottom: 20px !important;
}

.cdf-contact li {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.cdf-links-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px 16px !important;
}

.cdf-col {
  flex: none !important;
  width: 100% !important;
}

.cdf-col h4 {
  margin-bottom: 12px !important;
  font-weight: 600 !important;
}

.cdf-col ul li {
  margin-bottom: 8px !important;
}

.cdf-divider {
  margin-bottom: 24px !important;
}

.cdf-bottom {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 20px !important;
}

.cdf-social,
.media-box {
  width: 100% !important;
  align-items: flex-start !important;
}

/* Corrige os 5 ícones sociais que ficavam espremidos em ovais de 29x44px no grid de 7 colunas */
.media-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 12px !important;
  justify-content: flex-start !important;
}

.media-icons {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  font-size: 20px !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
}
}

/* ==========================================================================
 2. SMARTPHONES COMPACTOS (@media max-width: 480px)
 ========================================================================== */
@media (max-width: 480px) {

/* Ajuste fino da barra superior e botões em telas de 375px */
#header_arizona .arizona-logo {
  max-width: calc(100% - 124px) !important;
}

#header_arizona .btn.btn-redbar,
#navbar-top .btn.btn-redbar {
  width: 58px !important;
  min-width: 58px !important;
}

#modalTraducao .lang-btn {
  width: calc(50% - 10px) !important;
}

/* Hero Section em 375px */
.hero-section {
  min-height: 420px !important;
  padding: 28px 12px !important;
}

.hero-content {
  margin-top: 115px !important;
}

.hero-buttons {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 0 16px !important;
}

.hero-buttons .btn {
  width: 100% !important;
  min-width: 0 !important;
}

/* Imagens das galerias das coleções proporcionais à largura de 375px */
.museum-img {
  max-height: 250px !important;
}

.museum-img.glightbox,
#corpo_noticia .museum-img {
  max-height: 320px !important;
}

/* Cards da Equipe em 1 coluna em smartphones */
.staff-grid {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

/* Depoimentos mais compactos em 375px */
.testimonial-card {
  padding: 18px 14px !important;
}

.testimonial-card .card-image img {
  height: 220px !important;
  max-height: 230px !important;
}

.webview-container iframe {
  height: 280px !important;
}
}

/* ==========================================================================
   1. CORREÇÃO DO TOPO / CABEÇALHO DESKTOP (@media min-width: 992px)
   ========================================================================== */
@media (min-width: 992px) {
  /* Expande o container do header para aproveitar melhor a largura da tela */
  #header_site > .container {
    max-width: 1440px !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Retira do fluxo Flex os 5 blocos utilitários invisíveis (blur, lenis, swiper, etc.) */
  #navbar-top .region.region-navigation > .block:not(#block-az-barrio-branding):not(#block-az-barrio-navegacaoprincipal) {
    display: none !important;
  }

  /* Elimina a piscada branca no scroll travando o padding-top na altura do header reduzido */
  body.header-is-fixed #main-wrapper {
    padding-top: 48px !important;
  }

  /* Estado inicial (SEM scroll): mantém a logo de 95px e o espaçamento original */
  #navbar-top section.region.region-navigation {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    height: auto !important;
    min-height: 115px !important;
    padding: 10px 0 !important;
    width: 100% !important;
  }

  /* Estado fixo (COM scroll): barra compacta e proporcional ao texto (48px) */
  body.header-is-fixed #navbar-top section.region.region-navigation {
    height: auto !important;
    min-height: 48px !important;
    padding: 6px 0 !important;
  }

  /* Ajuste da Marca (Logo + Nome do Museu) à esquerda */
  #navbar-top #block-az-barrio-branding {
    display: flex !important;
    align-items: center !important;
    flex: 0 1 auto !important;
    max-width: 360px !important;
    margin: 0 !important;
  }

  body.header-is-fixed #navbar-top #block-az-barrio-branding {
    max-width: none !important;
    flex: 0 0 auto !important;
  }

  #navbar-top #block-az-barrio-branding .qs-site-logo {
    margin: 0 !important;
    flex-shrink: 0 !important;
    max-height: 95px !important;
    transition: all 0.3s ease-in-out !important;
  }

  #navbar-top #block-az-barrio-branding .qs-site-logo .img-fluid {
    height: 95px !important;
    width: auto !important;
    object-fit: contain !important;
    transition: all 0.3s ease-in-out !important;
  }

  /* Ao rolar a página, recolhe também a ALTURA da logo para não deixar sobra vertical */
  body.header-is-fixed #navbar-top #block-az-barrio-branding .qs-site-logo,
  body.header-is-fixed #navbar-top #block-az-barrio-branding .qs-site-logo .img-fluid {
    height: 0 !important;
    max-height: 0 !important;
    max-width: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #navbar-top #block-az-barrio-branding a[title="Início"] {
    width: auto !important;
    margin-left: 12px !important;
  }

  body.header-is-fixed #navbar-top #block-az-barrio-branding a[title="Início"] {
    margin-left: 0 !important;
  }

  #navbar-top #block-az-barrio-branding .h3 {
    font-size: 1rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    font-weight: 600 !important;
  }

  body.header-is-fixed #navbar-top #block-az-barrio-branding .h3 {
    font-size: 0.92rem !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  /* Ajuste da Navegação Principal à direita */
  #navbar-top nav#block-az-barrio-navegacaoprincipal {
    width: auto !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
  }

  #navbar-top #block-az-barrio-navegacaoprincipal ul.navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #navbar-top #block-az-barrio-navegacaoprincipal .nav-item {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
  }

  /* Corrige a quebra de texto e reduz o box branco para um formato pílula compacto */
  #navbar-top #block-az-barrio-navegacaoprincipal .nav-item .nav-link,
  #navbar-top #block-az-barrio-navegacaoprincipal .nav-item button.dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 7px 11px !important;
    font-size: clamp(0.82rem, 0.9vw, 0.95rem) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    border-radius: 8px !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
  }

  /* Estado Hover e Dropdown Aberto: Box branco proporcional e texto legível */
  #navbar-top #block-az-barrio-navegacaoprincipal .nav-item .nav-link:hover,
  #navbar-top #block-az-barrio-navegacaoprincipal .nav-item button.dropdown-toggle:hover,
  #navbar-top #block-az-barrio-navegacaoprincipal .nav-item.dropdown:hover > button.dropdown-toggle,
  #navbar-top #block-az-barrio-navegacaoprincipal .nav-item.show > button.dropdown-toggle {
    background-color: #ffffff !important;
    color: var(--background-color, #4d5d71) !important;
    font-weight: 600 !important;
  }
}