/*
Theme Name: Bete Esteves Portfolio
Description: Tema personalizado para o portfolio da artista Bete Esteves
Author: Seu Nome
Version: 1.0
Text Domain: bete-esteves
*/

/* ==========================================================================
   FONTES PERSONALIZADAS
========================================================================== */
@font-face {
  font-family: 'Turnery';
  src: url('font/Turnery-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Turnery';
  src: url('font/Turnery-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Turnery';
  src: url('font/Turnery-RegularItalic.otf') format('opentype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'TrizP-Light';
  src: url('font/TrizP-Light.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* ==========================================================================
   TIPOGRAFIA GLOBAL
========================================================================== */
body,
h1, h2, h3, h4, h5, h6,
p, small, a, button,
ul, ol, li, nav, span,
div, label, input,
select, textarea {
  font-family: 'Turnery', Arial, sans-serif;
}

/* ==========================================================================
   CABEÇALHO / HEADER
========================================================================== */
.logo-header {
  margin-left: 15px;
}

/* NAV: quatro blocos equidistantes, primeiro e último encostam nas extremidades */

.nav-row {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  gap: 0;
  flex-wrap: nowrap; /* Evita quebra de linha */
}

/* Previne quebra de linha no header */
.header-container {
  white-space: nowrap;
  overflow: visible !important; /* Garante que elementos externos sejam visíveis */
  min-height: 60px; /* Altura mínima para acomodar a bolinha */
}

.nav-block {
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  overflow: visible; /* Permite que elementos como bolinhas sejam visíveis */
  min-height: 50px; /* Altura mínima */
}

.main-menu-list,
.lang-menu-list {
  white-space: nowrap;
  flex-wrap: nowrap;
}

.main-menu-list .nav-link,
.lang-menu-list .nav-link {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Mobile nav toggle button and panel */
.mobile-nav-toggle {
  background: transparent;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  color: #111 !important;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.mobile-nav-menu {
  position: fixed;
  inset: 0; /* full screen */
  background: #fff;
  padding: 40px 28px 28px 28px;
  display: none;
  z-index: 20000;
  overflow-y: auto;
}
.mobile-nav-menu.show {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Close button top-right */
.mobile-nav-menu .mobile-close {
  position: absolute;
  right: 18px;
  top: 18px;
  background: transparent;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: #111 !important;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}

/* Vertical center menu list */
.mobile-nav-menu .mobile-main-menu {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.2rem;
  margin-top: 4rem;
  margin-bottom: 2.5rem;
}
.mobile-nav-menu .mobile-main-menu a {
  font-family: 'Turnery', Arial, sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: #111;
  text-decoration: none;
  padding: 8px 0;
}

.mobile-nav-menu .mobile-separator {
  width: 100%;
  height: 1px;
  background: #dcdcdc;
  margin: 18px 0;
}

.mobile-nav-menu .mobile-email {
  width: 100%;
  text-align: center;
  margin-top: 18px;
  color: #222;
}

/* keep mobile elements hidden on large screens */

/* Only show mobile toggle under lg; on lg+ keep hidden (we have full menu) */
@media (min-width: 992px) {
  .mobile-menu-block { display: none !important; }
  .mobile-nav-menu { display: none !important; }
}

/* Remove the default horizontal padding Bootstrap adds to .container-fluid inside the navbar
   so the first and last nav-block can touch the viewport edges exactly */
.navbar {
  padding-top: 0;
  padding-bottom: 0;
}

/* Add horizontal padding to the navbar container so the first/last blocks don't touch the absolute viewport edge */
.navbar > .container-fluid {
  padding-left: 24px;
  padding-right: 24px;
}

.nav-block {
  flex: 1 1 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 0 12px;
}

/* Force first block flush-left and last block flush-right */
.nav-block.brand { justify-content: flex-start; padding-left: 0; }
.nav-block.lang-block { justify-content: flex-end; padding-right: 0; margin-left: auto; }

/* Mantém o seletor de idiomas sempre visível - removido display: none */

.email-header {
  font-size: 0.95rem;
}

/* Main menu (centred block) */
.main-menu-list,
.lang-menu-list {
  list-style: none;
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0;
}

.main-menu-list .nav-link,
.lang-menu-list .nav-link {
  color: inherit;
  text-transform: lowercase;
  font-weight: 400;
  padding: 6px 8px;
}

/* Force uppercase only for the language menu (bloco 4) */
.lang-block .lang-menu-list .nav-link {
  text-transform: uppercase;
}

/* Slightly smaller language links (PT / ENG) */
.lang-block .lang-menu-list .nav-link {
  font-size: 0.85rem;
  padding: 4px 6px 8px 6px; /* Reduzir padding bottom para aproximar o indicador */
}

.main-menu-list .nav-link:hover,
.lang-menu-list .nav-link:hover {
  text-decoration: underline;
}

/* Destacar idioma atual */
.lang-menu-list .nav-link.current-language {
  font-weight: normal; /* Remover negrito */
  position: relative;
}

/* Indicador visual (ponto) para idioma atual */
.lang-menu-list .nav-link.current-language {
  margin-bottom: 6px; /* Espaço interno para a bolinha */
}

.lang-menu-list .nav-link.current-language::after {
  content: '';
  position: absolute;
  bottom: 0px; /* Posiciona na base do elemento */
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background-color: currentColor;
  border-radius: 50%;
}

/* Adiciona espaço no container para a bolinha */
.lang-block {
  padding-bottom: 8px !important; /* Mais espaço para a bolinha */
  margin-bottom: 2px; /* Espaço adicional */
}

.lang-block .lang-menu-list .nav-link {
  position: relative; /* Necessário para o ::after */
}

/* Manter todos os idiomas com mesma aparência */
.lang-menu-list .nav-link:not(.current-language) {
  opacity: 1; /* Remover opacidade reduzida */
  transition: opacity 0.3s ease;
}

.lang-menu-list .nav-link:not(.current-language):hover {
  opacity: 1;
}

/* Indicar quando idioma está disponível ou não */
.lang-menu-list .nav-link[href="#"] {
  opacity: 0.4;
  cursor: not-allowed;
}

.lang-menu-list .nav-link[href="#"]:hover {
  opacity: 0.5;
  text-decoration: none;
}

/* Reduce logo margin on large screens so it hugs the left edge */
@media (min-width: 992px) {
  .logo-header { margin-left: 0; }
}

/* Small screens: stack or compact the nav */
@media (max-width: 991.98px) {
  /* keep header items on one line; allow blocks to shrink instead of wrapping */
  .nav-row { 
    flex-wrap: nowrap !important;
    white-space: nowrap;
  }
  
  .nav-block { 
    flex: 0 1 auto; 
    justify-content: center; 
    padding: 8px; 
    min-width: 0;
    white-space: nowrap;
    overflow: visible; /* Permite que a bolinha seja visível */
  }
  
  .nav-block.brand { 
    justify-content: flex-start; 
    padding-left: 0;
    flex-shrink: 0; /* Logo não encolhe */
  }
  
  .nav-block.lang-block { 
    justify-content: center; 
    padding-right: 0; 
    margin-left: auto;
    flex-shrink: 0; /* Idiomas não encolhem */
    padding-bottom: 8px !important; /* Espaço para a bolinha */
    margin-bottom: 2px;
  }
  
  /* Força texto em uma linha */
  .main-menu-list .nav-link,
  .lang-menu-list .nav-link {
    white-space: nowrap !important;
    font-size: 0.9em; /* Reduz um pouco o tamanho para caber melhor */
  }
  
  /* Garante que os botões de idioma permaneçam visíveis e compactos */
  .nav-block.lang-block {
    min-width: 60px; /* Largura mínima para PT EN */
  }
  
  .lang-menu-list .nav-link {
    font-size: 0.85em; /* Texto menor para caber em telas pequenas */
    padding: 4px 6px; /* Padding reduzido */
  }

  /* Hide main menu on small screens (below lg); keep email visible */
  .nav-block.main-menu {
    display: none !important;
  }

  /* Hide the email in the top nav on small screens. The mobile full-screen menu
     will include the email below the links (built by JS), so we only show the
     email inline on lg+ */
  .nav-block.email-block {
    display: none !important;
  }

  /* Align the mobile menu toggle (three-dot button) to the far right */
  .nav-block.mobile-menu-block {
    margin-left: auto;
  }

  /* Reduce navbar container padding on mobile */
  .navbar > .container-fluid {
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* ==========================================================================
   NAVEGAÇÃO / MENU
========================================================================== */
.navbar-toggler {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  height: 40px;
  width: 80px;
}

.navbar-toggler.d-none {
  display: none !important;
}

.custom-toggler-icon {
  display: inline-block;
  width: 32px;
  height: 24px;
  position: relative;
}

.custom-toggler-icon::before,
.custom-toggler-icon::after,
.custom-toggler-icon .dot {
  content: '';
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  background: #111;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.custom-toggler-icon::before { left: 0; }
.custom-toggler-icon .dot { left: 20px; }
.custom-toggler-icon::after { left: 40px; }

/* Force black color on mobile toggle buttons, back-to-top and mobile-close, especially for iOS/Safari */
.navbar-toggler,
.mobile-nav-toggle,
#back-to-top,
.mobile-nav-menu .mobile-close {
  color: #111 !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.custom-toggler-icon::before,
.custom-toggler-icon::after,
.custom-toggler-icon .dot {
  background-color: #111 !important;
}

/* Additional iOS/Safari specific fixes */
@supports (-webkit-overflow-scrolling: touch) {
  .navbar-toggler,
  .mobile-nav-toggle,
  #back-to-top,
  .mobile-nav-menu .mobile-close {
    color: #111 !important;
    background-color: transparent !important;
  }
  
  .custom-toggler-icon::before,
  .custom-toggler-icon::after,
  .custom-toggler-icon .dot {
    background-color: #111 !important;
  }
}

/* ==========================================================================
   CONTEÚDO DO POST (conforme post_exemplo.html)
========================================================================== */
.post-header {
  text-align: center;
  margin: 0;
}

.post-title,
.post-header h1 {
  font-family: 'TrizP-Light', Arial, sans-serif !important;
  font-size: 2.8rem;
  line-height: 1.1;
  margin: 120px auto 100px auto;
  max-width: 600px;
  padding-left: 20px;
  padding-right: 20px;
}

/* Reduce BIO title size only inside the left bio box */
.bio-box .post-title {
  font-size: 1.6rem; /* smaller than global post titles */
  line-height: 1.15;
  margin: 0 0 120px 0; /* tripled space below BIO as requested */
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Make accordion headers in the side-box match the BIO title style */
.side-box .accordion-button {
  font-family: 'TrizP-Light', Arial, sans-serif !important;
  font-size: 1.6rem !important;
  line-height: 1.15;
  text-transform: uppercase !important;
  padding-top: 5.2rem; /* doubled vertical spacing for accordion titles */
  padding-bottom: 5.2rem;
  min-height: 144px; /* doubled height to match request */
  display: flex;
  justify-content: center; /* center the header text */
  align-items: center; /* vertically center the header content */
  text-align: center;
  position: relative; /* allow absolute pseudo-elements at left/right */
  padding-left: 2.5rem; /* space for left symbol */
  padding-right: 2.5rem; /* space for right symbol */
}

/* End accordion header styles */

/* Visual adjustments to match open/closed example */
.side-box .accordion-item {
  margin-bottom: 0; /* removed vertical gap between items */
}
/* Draw a top border only on items that follow another item -> lines between items */
.side-box .accordion-item + .accordion-item {
  /* remove in-flow border; we'll draw the separator visually with a pseudo-element
     so it can extend beyond the column without affecting layout */
  border-top: none;
  position: relative;
}

.side-box .accordion-item + .accordion-item::before {
  content: '';
  position: absolute;
  left: 2rem; /* moved right to align with inner box */
  right: 0;
  top: 0;
  height: 2px; /* separator thickness */
  background: #e9e9e9;
  display: block;
  z-index: 0;
}

@media (min-width: 992px) {
  .side-box .accordion-item + .accordion-item::before {
    left: 2.5rem; /* moved right on lg to align with inner box */
    right: 0;
  }
}

/* Ensure no top border above the very first accordion item */
.side-box .accordion-item:first-child {
  border-top: none;
}

/* Replace bootstrap caret with + when closed and × when open (larger, aligned right) */
.side-box .accordion-button::after {
  /* right-side symbol */
  content: '+';
  font-family: 'TrizP-Light', Arial, sans-serif;
  font-size: 1.4rem;
  color: #111;
  line-height: 1;
  background: none !important;
  background-image: none !important;
  position: absolute;
  right: 2rem; /* default offset from right edge */
  top: 50%;
  transform: translateY(-50%) !important;
  display: inline-block;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}
.side-box .accordion-button:not(.collapsed)::after {
  content: '×';
}

/* left-side symbol: mirrors the right symbol and matches state */
.side-box .accordion-button::before {
  content: '+';
  font-family: 'TrizP-Light', Arial, sans-serif;
  font-size: 1.4rem;
  color: #111;
  line-height: 1;
  background: none !important;
  background-image: none !important;
  position: absolute;
  left: 2rem; /* align with separator/default inner box */
  top: 50%;
  transform: translateY(-50%) !important;
  display: inline-block;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}
.side-box .accordion-button:not(.collapsed)::before {
  content: '×';
}

/* Ensure perfect alignment for all resolutions */
.side-box .accordion-button::before,
.side-box .accordion-button::after {
  box-sizing: border-box;
  text-align: center;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

/* Accordion body spacing and visual separators when opened */
.side-box .accordion-collapse .accordion-body {
  padding-top: 1.4rem;
  padding-bottom: 2rem;
  padding-right: 3rem; /* keep content away from right edge */
  padding-left: 0; /* remove left padding so inner box aligns with separator */
}


/* Inner content box — remove double border and match example spacing
   (single consolidated block) */
.side-box .accordion-body > .p-3.border {
  box-sizing: border-box;
  border: none;
  padding: 0 !important; /* override bootstrap utility padding */
  /* place the left edge of the inner box where the separator starts */
  margin-left: 2rem;
  padding-left: 0;
  width: calc(100% - 2rem);
}

@media (min-width: 992px) {
  .side-box .accordion-body > .p-3.border {
    margin-left: 2.5rem;
    padding-left: 0;
    width: calc(100% - 2.5rem);
  }
}

/* Align special-container content to match previous inner-box inset */
.side-box .special-container {
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0; /* reset default */
  width: 100%;
}

@media (max-width: 991px) {
  .side-box .special-container {
    /* same inset used previously for mobile */
    margin: 0 1.5rem;
    width: calc(100% - 3rem);
  }
}

@media (min-width: 992px) {
  .side-box .special-container {
    /* same desktop inset as the previous implementation */
    margin-left: 2.5rem;
    width: calc(100% - 2.5rem);
  }
}

/* Unit list styling: vertical list with consistent spacing between unit blocks */
.side-box .unit-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* vertical spacing between units (increased) */
}
.side-box .unit-block {
  margin: 0; /* reset */
  padding: 0.5rem 0; /* increased internal vertical padding */
}

/* Unit block typography and layout */
.unit-year {
  font-family: 'TrizP-Light', Arial, sans-serif;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}
.unit-title {
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.unit-items {
  list-style: none;
  padding: 0;
  margin: 0 0 0.6rem 0;
}
.unit-items li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.2rem;
}
.unit-items li::before {
  content: attr(data-marker);
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}
.unit-cta {
  display: inline-block;
  color: #b33;
  text-decoration: none;
  font-weight: 700;
}

/* Refined marker and typography styles to match reference */
.unit-year { color: #222; font-size: 1.25rem; font-weight: 700; font-family: 'TrizP-Light', Arial, sans-serif; }
.unit-title { font-family: 'Turnery', Arial, sans-serif; font-size: 1rem; line-height: 1.2; font-weight: 700; }
.unit-items li::before { font-family: 'TrizP-Light', Arial, sans-serif; color: #111; width: 1.2rem; display: inline-block; text-align: left; }
.unit-items li { font-family: 'Turnery', Arial, sans-serif; color: #111; }
.unit-cta { color: #b33; margin-top: 0.25rem; }
.unit-cta:hover { text-decoration: underline; }

/* Two-column layout for the first accordion item */
.two-col-wrapper {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}
.two-col-wrapper .col {
  flex: 1 1 50%;
  min-width: 0; /* allow flex children to shrink to avoid forcing layout wider than container */
}
.two-col-wrapper .col-title {
  text-align: center;
  font-weight: 700;
  margin: 5rem 0; /* doubled vertical spacing above and below title */
  font-family: 'Turnery', Arial, sans-serif;
  font-size: 0.95rem; /* slightly smaller */
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* vertical separator between columns */
.two-col-wrapper .col-right {
  position: relative;
}
.two-col-wrapper .col-right::before {
  content: '';
  position: absolute;
  left: -1rem; /* place the line slightly inside the gutter between columns */
  top: 0;
  bottom: 0;
  width: 1px;
  background: #d9d9d9;
}

@media (max-width: 991px) {
  .two-col-wrapper {
    flex-direction: column;
    gap: 1rem;
  }
  .two-col-wrapper .col-right::before {
    display: none; /* remove vertical separator on mobile when stacked */
  }

  /* Adjust legend-small positioning in mobile textos accordion */
  .textos-accordion .legend-small {
    margin-top: 1rem;
    margin-bottom: 2rem;
  }
}

/* Textos page: show accordion only below lg, two-column grid on lg+ */
.textos-accordion {
  display: block;
}

/* Force Bootstrap collapse to work properly with smooth transitions */
.textos-accordion .accordion-collapse {
  transition: height 0.35s ease;
}

.textos-accordion .accordion-collapse:not(.show) {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

.textos-accordion .accordion-collapse.collapse {
  display: none;
}

.textos-accordion .accordion-collapse.collapse.show {
  display: block;
}

/* Smooth accordion button transitions */
.textos-accordion .accordion-button {
  transition: all 0.2s ease;
}

.textos-accordion .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

/* Legend in mobile accordion view */
.textos-accordion .legend-small {
  text-align: center;
  font-size: 0.82rem;
  color: #666;
  margin: 0 0 1rem 0;
  display: block;
}

/* Legend specifically inside accordion body */
.textos-accordion .accordion-body .legend-small {
  text-align: center;
  margin-top: -6rem;
  margin-bottom: 1.5rem;
}

.two-col-textos {
  display: none;
}

/* Make legend-small always visible in textos page */
.legend-small {
  text-align: center;
  font-size: 0.82rem;
  color: #666;
  margin-bottom: 1rem;
  display: block;
}

/* Column title wrapper for proper centering */
.col-title-wrapper {
  text-align: center;
  position: relative;
}

/* Column legend for desktop two-column layout */
.col-legend {
  font-size: 0.85rem;
  color: #666;
  font-weight: normal;
  text-align: center;
  font-family: 'TrizP-Light', Arial, sans-serif;
  margin-top: 0.25rem;
  margin-bottom: 1rem;
}

/* Make col-right position relative for absolute positioning of legend */
.col-right {
  position: relative;
}

/* Reset title margin for col-right */
.col-right .col-title {
  margin-bottom: 0.5rem !important;
}

/* Add padding to left column content to align with right column */
.col-left .unit-list {
  padding-top: 1.5rem;
}

/* Add padding to right column content to align with left column */
.col-right .unit-list {
  padding-top: 3.6rem;
}

/* Style for author prefix "A" */
.author-prefix {
  font-family: 'TrizP-Light', Arial, sans-serif;
}

/* Style for legend letters (C, L, O, I, A) */
.legend-letter {
  font-family: 'TrizP-Light', Arial, sans-serif;
}

@media (min-width: 992px) {
  .textos-accordion { display: none; }
  .two-col-textos {
    display: flex;
    gap: 0;
    align-items: flex-start;
    width: 100%;
  }
  .two-col-textos .col-left,
  .two-col-textos .col-right {
    flex: 1 1 0;
    width: calc(50% - 1.25rem);
    min-width: 0;
    max-width: calc(50% - 1.25rem);
    box-sizing: border-box;
  }
  .two-col-textos .col-left {
    padding-right: 1.25rem;
  }
  .two-col-textos .col-right {
    position: relative;
    padding-left: 1.25rem;
  }
  .two-col-textos .col-right::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #d9d9d9;
  }
  .two-col-textos .col-title {
    text-align: center;
    margin: 5rem 0; /* doubled vertical spacing above and below title */
    font-family: 'Turnery', Arial, sans-serif;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .legend-small {
    text-align: center;
    font-size: 0.82rem;
    color: #666;
    margin-top: 2rem;
    display: block;
  }
  .two-col-textos .unit-list { gap: 1.25rem; }
  .unit-sub { margin: 0.15rem 0 0.35rem 0; color: #666; font-size: 0.95rem; }
  .unit-author { font-size: 0.95rem; color: #111; margin-bottom: 0.2rem; }
}

/* Accordion legend shown only when the panel is open (legend is inside the collapse) */
.accordion-legend {
  text-align: center;
  font-size: 0.85rem;
  color: #222;
  margin-bottom: 0.6rem;
  display: none; /* hidden by default; shown when header is active */
  font-family: 'Turnery', Arial, sans-serif;
}

@media (max-width: 991px) {
  .accordion-legend {
    /* smaller negative offset on mobile where headers are less tall */
    font-size: 0.82rem;
  }
}

/* Textos page - legend color */
#textosHeadingTwo .accordion-legend,
.two-col-textos .col-legend {
  color: #000;
}

/* Show legend when the accordion header button is in the open state */
.accordion-header .accordion-button:not(.collapsed) ~ .accordion-legend {
  display: block;
  margin-top: -4rem; /* small gap from the title */
}

/* Remove outer rounded box and button background to match the example */
.side-box .accordion {
  border-radius: 0;
  border: none;
  background: transparent;
  margin: 0;
  width: 100%; /* keep accordion occupying normal layout width to avoid wrapping */
  position: static; /* remove visual offsetting to keep normal grid flow */
  overflow: visible; /* allow pseudo-elements to extend past the container if needed */
}

/* Prevent side-box content from creating horizontal scroll (safety against pseudo-element overflow) */
.side-box {
  overflow-x: hidden;
}

/* Defensive: ensure children and pseudo-elements inside side-box don't cause horizontal overflow */
.side-box, .side-box * {
  box-sizing: border-box;
}
.side-box::before,
.side-box::after {
  max-width: 100%;
}

@media (min-width: 992px) {
  .side-box .accordion {
    width: 100%;
  }
}
.side-box .accordion .accordion-item {
  border-left: none;
  border-right: none;
  border-bottom: none; /* keep top border if present (we draw separators with sibling selector) */
}
/* ensure each accordion item can form a stacking context so we can raise the open item above neighbors
   this prevents the left corner / symbol being visually covered during the open animation */
.side-box .accordion .accordion-item {
  position: relative;
  z-index: 0;
}

/* when an item is opening/open, bring its header and collapse above adjacent items */
.side-box .accordion-button:not(.collapsed),
.side-box .accordion-item .accordion-collapse.show,
.side-box .accordion-item .accordion-collapse.opening {
  position: relative; /* needed for z-index to take effect */
  z-index: 9999; /* bring opening panel clearly above other elements */
  transform: translateZ(0); /* create layer for smoother compositing */
  overflow: visible !important; /* allow content to be visible during transition */
}

/* when a panel is closing, keep it in the normal stacking order and clip overflow so
   the content doesn't remain visible during the close animation */
.side-box .accordion-item .accordion-collapse.closing {
  position: relative;
  z-index: 0;
  overflow: hidden !important;
}

/* Ensure ancestors don't clip the opening panel (do NOT force .side-box visible; that causes horizontal scroll)
   Keep ancestor containers visible so opening panels can escape, but allow .side-box to control its own overflow. */
.mt-4,
.mt-4 .row.gx-3,
.mt-4 .row.gx-3 > [class*="col-"] {
  overflow: visible !important;
}
.side-box .accordion-button {
  background: transparent !important;
  box-shadow: none !important;
  border: none;
  /* ensure header text stays inset from the viewport by using the same edge offset */
  padding-left: calc(2rem + 0.5rem);
  padding-right: calc(2rem + 1rem); /* increase right padding so header text doesn't hug edge */
  /* allow wrapping on small screens to avoid pushing the column out of the row */
  white-space: normal;
  box-sizing: border-box;
}
.side-box .accordion-button:focus {
  box-shadow: none !important;
}

/* Force accordion header button text to black inside side-box */
.side-box .accordion-button,
.side-box .accordion-button:focus,
.side-box .accordion-button:hover,
.side-box .accordion-button:not(.collapsed) {
  color: #111 !important;
}

/* Mobile / below lg adjustments: extend separators to edges and center titles with
   equal left/right symbol margins. These rules only apply for viewports < 992px. */
@media (max-width: 991px) {
  /* separators run edge-to-edge */
  .side-box .accordion-item + .accordion-item::before {
    left: 0;
    right: 0;
  }

  /* make symbols have equal inset from edges and exact vertical alignment */
  .side-box .accordion-button::before {
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%) !important;
    line-height: 1;
    vertical-align: baseline;
    margin: 0;
    padding: 0;
  }
  .side-box .accordion-button::after {
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%) !important;
    line-height: 1;
    vertical-align: baseline;
    margin: 0;
    padding: 0;
  }

  /* reduce header padding so title stays visually centered between symbols */
  .side-box .accordion-button {
    padding-left: calc(1.5rem + 0.5rem);
    padding-right: calc(1.5rem + 1rem);
    white-space: normal;
  }

  /* inner content should use full width on small screens */
  .side-box .accordion-body > .p-3.border {
    /* inset the inner box so it sits within the page frame while separators
       remain edge-to-edge. Use same 1.5rem inset as the symbols. */
    margin: 0 1.5rem;
    width: calc(100% - 3rem);
    padding-left: 0; /* internal padding can be added here if needed */
    padding-right: 0;
  }

  /* make collapse panels visible above neighbors and prevent clipping on mobile */
  .side-box .accordion-item .accordion-collapse {
    overflow: visible !important;
    position: relative;
    z-index: 9999;
  }

  .side-box .accordion-collapse .accordion-body {
    overflow: visible !important;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
  }

  /* Ensure accordion items and their content form visible stacking contexts above separators */
  .side-box .accordion,
  .side-box .accordion .accordion-item {
    overflow: visible !important;
    position: relative;
    z-index: 0;
  }

  .side-box .accordion-item .accordion-collapse.show,
  .side-box .accordion-item .accordion-collapse.opening {
    z-index: 10002 !important;
    position: relative !important;
    overflow: visible !important;
  }

  .side-box .accordion-body > .p-3.border {
    position: relative;
    z-index: 10003;
    margin-top: 0.5rem;
  }

  /* keep separators visually behind everything */
  .side-box .accordion-item + .accordion-item::before {
    z-index: 0;
  }

  /* ensure accordion container doesn't add side padding that would offset the line */
  .side-box .accordion {
    padding-left: 0;
    padding-right: 0;
  }

  /* remove the default padding from the side-box itself on small screens */
  .side-box {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* columns have internal padding from bootstrap gutters; remove it so
     the accordion column touches the viewport edges on small screens */
  .mt-4 .row.gx-3 > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* remove outer page wrapper horizontal padding on small screens so the
     separator lines can run to the viewport edges (px-2 is applied in HTML) */
  .mt-4 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (min-width: 992px) {
  .side-box .accordion-button::after {
    right: 3rem;
  }
  .side-box .accordion-button::before {
    left: 2.5rem;
  }
  .side-box .accordion-button {
    padding-left: calc(3rem + 0.5rem);
    padding-right: calc(3rem + 1rem);
    /* keep titles on a single line for lg+ where there is more horizontal room */
    white-space: nowrap;
  }
}


/* Increase spacing between the left BIO box and the right accordion.
   Targets the specific top-level row on the about page (uses existing gx-3 class).
   Adds a larger horizontal gap on md+ and a comfortable vertical gap on small screens. */
.mt-4 .row.gx-3 {
  column-gap: 2rem; /* horizontal spacing between columns on small screens */
  row-gap: 1.5rem;  /* vertical spacing when columns stack */
}

@media (min-width: 992px) {
  .mt-4 .row.gx-3 {
    column-gap: 3.5rem; /* larger horizontal separation for lg+ */
    row-gap: 0; /* no extra vertical gap when side-by-side */
    flex-wrap: nowrap; /* prevent the row from wrapping into multiple lines */
    align-items: flex-start; /* align columns to the top so accordion sits beside BIO */
  }

  /* allow columns to shrink below their content width so long words don't force wrapping */
  .mt-4 .row.gx-3 > [class*="col-"] {
    min-width: 0;
  }
}


.post-meta,
.post-header .year-line-container {
  position: relative;
  margin: 0 auto;
}

.post-divider,
.post-header .year-line-container::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #111;
}

.post-year,
.post-header .year-label {
  display: block;
  font-size: 1.1rem;
  padding-bottom: 5px;
}

.post-main,
main.post-content {
  margin: 0 auto 40px;
  padding: 0;
  text-align: center;
}

.post-image,
.post-cover {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-bottom: 12px;
  padding: 0 20px;
}

@media (max-width: 576px) {
  .post-image {
    padding: 0 20px;
  }
}

.post-caption {
  font-size: 0.95rem;
  color: #444;
  text-align: center;
  font-style: normal;
  line-height: 1.5;
  margin: 20px auto 0;
  max-width: 600px;
}

/* Parágrafos dentro da legenda */
.post-caption p {
  margin: 15px 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: inherit;
}

/* Primeiro parágrafo da legenda sem margem superior */
.post-caption p:first-child {
  margin-top: 0;
}

/* Último parágrafo da legenda sem margem inferior */
.post-caption p:last-child {
  margin-bottom: 0;
}

.post-content,
.post-text {
  text-align: left;
  margin: 40px auto 100px;
  max-width: 700px;
}

.post-paragraph,
.post-text p {
  font-size: 1.08rem;
  line-height: 1.6;
  font-family: 'Turnery', Arial, sans-serif !important;
}

/* ==========================================================================
   SEÇÕES DO POST (atualizado conforme post_exemplo.html)
========================================================================== */
.post-meta {
  position: relative;
  margin: 0 auto 5px;
  text-align: center;
}

.post-year {
  display: block;
  font-size: 1.1rem;
  color: #000;
  font-weight: normal;
}

.post-main {
  margin: 0 auto 40px;
  padding: 0;
  text-align: center;
}

.post-section {
  margin-bottom: 40px;
  padding-bottom: 0;
  border-top: none;
}

/* Linha divisória das seções */
.section-divider {
  width: 100vw;
  height: 1px;
  background-color: #000;
  margin: 80px 0 5px 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* Linha divisória específica para primeira seção (próxima à imagem) */
.post-section:first-child .section-divider {
  margin: 0;
}

.post-section-title {
  font-family: 'Turnery', Arial, sans-serif !important;
  font-size: 1.2rem;
  color: #000;
  margin-bottom: 30px;
  text-align: center;
  font-weight: bold;
  margin-top: 5px;
  letter-spacing: 0.5px;
}

.post-section-subtitle {
  font-family: 'Turnery', Arial, sans-serif !important;
  font-size: 1.2rem;
  color: #000;
  margin-top: 0;
  margin-bottom: 30px;
  text-align: center;
  font-weight: normal;
  letter-spacing: 0.5px;
}

.post-section-title + .post-section-subtitle {
  margin-top: -18px;
}

.text-center {
  text-align: center;
}

.post-figure {
  margin-bottom: 30px;
  margin-top: 0;
}

/* Estilos para vídeos responsivos */
.post-video .video-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.post-video .video-wrapper video {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  width: 100%;
}



.post-caption {
  font-size: 0.95rem;
  color: #444;
  text-align: center;
  font-style: normal !important;
}

.post-content {
  text-align: left;
  margin: 60px auto 120px;
  max-width: 800px;
  padding: 0 40px;
}

/* Container da citação deve ser centralizado */
.post-content:has(.post-quote) {
  text-align: center;
}

.post-paragraph {
  font-size: 1.1rem;
  line-height: 1.7;
  font-family: 'Turnery', Arial, sans-serif !important;
  margin: 80px 0;
  color: #333;
  text-align: justify;
  hyphens: auto;
}

.post-quote {
  text-align: center !important;
  font-size: 1.1rem;
  font-family: 'TrizP-Light', Arial, sans-serif;
  font-style: italic;
  margin: 30px auto;
  padding: 0 20px;
  line-height: 1.4;
  max-width: 600px;
}

/* Garantir centralização da citação mesmo dentro de post-content */
.post-content .post-quote {
  text-align: center !important;
}

/* Conteúdo de créditos */
.credit-content {
  text-align: center;
  font-family: 'Turnery', Arial, sans-serif;
  color: #333;
  font-size: 1rem;
  line-height: 1.4;
  max-width: 600px;
  margin: 0 auto;
}

.post-quote {
  text-align: center !important;
  font-size: 1.25rem;
  font-family: 'TrizP-Light', Arial, sans-serif;
  font-style: italic;
  margin: 30px auto;
}

/* Múltiplos blockquotes dentro da citação */
.post-quote blockquote {
  margin: 20px auto;
}

/* Primeiro blockquote sem margem superior */
.post-quote blockquote:first-child {
  margin-top: 0;
}

/* Último blockquote sem margem inferior */
.post-quote blockquote:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   BOTÃO VOLTAR AO TOPO
========================================================================== */
#back-to-top-container,
.back-to-top-container {
  width: 100%;
  text-align: center;
  margin: 40px 0 60px;
  font-family: 'TrizP-Light', Arial, sans-serif !important;
}

#back-to-top {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  color: #111 !important;
  font-family: 'TrizP-Light', Arial, sans-serif;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.back-to-top-arrow {
  font-size: 1.2rem;
  line-height: 1;
  margin-bottom: 2px;
}

.back-to-top-text {
  font-size: 1rem;
  font-family: 'TrizP-Light', Arial, sans-serif;
}

/* ==========================================================================
   GALERIA DE IMAGENS
========================================================================== */
#gallery {
  margin-bottom: 100px;
  font-family: 'TrizP-Light', Arial, sans-serif !important;
  margin-left: -20px;
  margin-right: -20px;
}

#gallery .col.item {
  height: 240px;
  display: flex;
  align-items: stretch;
  margin-bottom: 60px;
  padding: 0 20px !important;
}

.gallery-item-container {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding-bottom: 2px;
  background: #fff;
  border-bottom: 1px solid #111;
  overflow: hidden;
  text-decoration: none;
}

.gallery-item-container img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  padding: 12px 12px 8px;
  max-height: calc(100% - 56px);
}

.gallery-caption-row {
  position: absolute;
  bottom: 0;
  width: 100%;
  min-height: 36px;
  padding: 8px 12px 4px;
  font-size: 0.95em;
  z-index: 2;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.gallery-title,
.gallery-year {
  pointer-events: auto;
  word-break: break-word;
  line-height: 1.2;
  font-size: 0.85rem !important;
  text-align: left;
}

.gallery-title {
  font-family: 'TrizP-Light', Arial, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  min-width: 0;
}

.gallery-year {
  font-family: 'TrizP-Light', Arial, sans-serif;
}

.gallery-year {
  min-width: 48px;
  font-size: 0.75rem !important;
  text-align: right;
}

#gallery .col.item span {
  font-size: 0.85rem !important;
}

#gallery .item {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: auto;
}

#gallery .item.fade-out,
#gallery .item.fading-out {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

#gallery .item.hidden {
  display: none !important;
}

#gallery img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

#gallery p {
  margin-top: 8px;
  font-size: 0.9rem;
  text-align: center;
}

/* Responsividade do espaçamento da galeria */
@media (max-width: 768px) {
  #gallery {
    margin-left: -15px;
    margin-right: -15px;
  }
  
  #gallery .col.item {
    padding: 0 15px !important;
    margin-bottom: 40px;
  }
}

@media (max-width: 576px) {
  #gallery {
    margin-left: -10px;
    margin-right: -10px;
  }
  
  #gallery .col.item {
    padding: 0 10px !important;
    margin-bottom: 30px;
  }
}

/* ==========================================================================
   FILTRO LATERAL
========================================================================== */
#categoryFilter {
  transition: all 0.3s ease;
  padding: 50px 40px;
}

#categoryFilter h5 {
  text-transform: uppercase;
  font-family: 'TrizP-Light', Arial, sans-serif !important;
  margin-bottom: 24px;
}

#categoryFilter ul {
  padding-left: 0;
}

#categoryFilter li {
  font-weight: bold;
  width: 100%;
}

/* ==========================================================================
   BOTÕES DE FILTRO
========================================================================== */
.filter-toggle {
  display: block;
  border: none;
  background: none;
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 0.3s ease;
  color: #333;
  padding: 4px 8px;
  font-weight: 700;
  text-align: left;
  word-wrap: break-word;
  white-space: normal;
  width: 100%;
  text-wrap: pretty;
  orphans: 2;
  widows: 2;
  line-height: 1.4;
  text-indent: -18px;
  padding-left: 26px;
}

.filter-toggle::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid #333;
  border-radius: 50%;
  background-color: transparent;
  margin-right: 8px;
  transition: background-color 0.3s ease;
  vertical-align: middle;
}

.filter-toggle.active::before {
  background-color: #111;
}

.filter-toggle:hover {
  color: #000;
}

.filter-clear {
  border: none;
  background: none;
  font-size: 0.9rem;
  cursor: pointer;
  color: #000;
  padding: 4px 8px;
  font-weight: 400;
  text-align: left;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.filter-clear:hover {
  color: #333;
}

.filter-count {
  font-size: 0.85em;
  color: #888;
  font-weight: 300;
  display: inline;
  white-space: nowrap;
}

/* Biografia styles */
.bio-box {
  background: transparent;
  border: none;
  border-radius: 0;
  padding-right: 0 !important;
}

.bio-box .post-title {
  font-size: 1.8em;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.bio-box .post-content {
  font-size: 1em;
  line-height: 1.6;
  color: #444;
  padding-right: 0 !important;
}

.bio-box .post-content p {
  margin-bottom: 15px;
}

/* Adiciona padding right no texto da BIO em telas menores que 991px */
@media (max-width: 991px) {
  .bio-box .post-content {
    padding-right: 40px !important;
  }
}

/* ==========================================================================
   PÁGINA DE POST - NOVA ESTRUTURA
========================================================================== */

.post-caption {
  margin-top: 10px;
  font-style: normal !important;
  color: #444;
  text-align: center;
  font-size: 0.95rem;
}

.post-description {
  margin: 2rem 0;
  line-height: 1.6;
}

.post-gallery {
  margin: 2rem 0;
}

.post-gallery img {
  max-width: 100%;
  height: auto;
  margin-bottom: 1rem;
}

.post-quote {
  margin: 3rem 0;
  text-align: center !important;
}

/* Forçar centralização de todos os elementos dentro da citação */
.post-quote,
.post-quote *,
.post-quote blockquote,
.post-quote p,
.post-quote span,
.post-quote div {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Reset completo de estilos para blockquote dentro de post-quote */
.post-quote blockquote {
  font-style: italic;
  font-size: 1.1rem;
  color: #333;
  border: none !important;
  border-left: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 80%;
  text-align: center !important;
  background: none !important;
  box-shadow: none !important;
  quotes: none !important;
}

/* Override WordPress default blockquote styles inside post-quote */
.post-content .post-quote blockquote,
article .post-quote blockquote,
.entry-content .post-quote blockquote {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  border-left: none !important;
  font-style: italic !important;
}

.post-section-break {
  margin: 4rem 0 2rem 0;
  border-top: 1px solid #ddd;
  padding-top: 2rem;
}

.section-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.post-credits {
  margin: 2rem 0;
}

.credits-list {
  list-style: none;
  padding: 0;
}

.credits-list li {
  margin-bottom: 0.5rem;
  padding-left: 0;
}

.gallery-section {
  margin: 2rem 0;
}

.gallery-section .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

/* ==========================================================================
   LINKS
========================================================================== */
a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
}

/* ==========================================================================
   GRADE DE IMAGENS (simples conforme modelo)
========================================================================== */
#imageGrid,
#imageGridAuxiliar,
#imageGridAuxiliar2,
#imageGridAuxiliar3,
.image-grid-aux {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0 auto;
  padding: 0;
  align-items: start;
}

/* Classes para controle de centralização baseada em quantidade de imagens */
#imageGrid.few-images,
#imageGridAuxiliar.few-images,
#imageGridAuxiliar2.few-images,
#imageGridAuxiliar3.few-images,
.image-grid-aux.few-images {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-items: center;
  gap: 20px;
}

#imageGrid.few-images img,
#imageGridAuxiliar.few-images img,
#imageGridAuxiliar2.few-images img,
#imageGridAuxiliar3.few-images img,
.image-grid-aux.few-images img {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-bottom: 0;
  object-fit: contain;
  object-position: center;
}

/* Uma única imagem */
#imageGrid.single-image,
#imageGridAuxiliar.single-image,
#imageGridAuxiliar2.single-image,
#imageGridAuxiliar3.single-image,
.image-grid-aux.single-image {
  display: grid !important;
  grid-template-columns: 1fr;
  justify-items: center;
}

#imageGrid.single-image img,
#imageGridAuxiliar.single-image img,
#imageGridAuxiliar2.single-image img,
#imageGridAuxiliar3.single-image img,
.image-grid-aux.single-image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  object-fit: contain;
  object-position: center;
}

@media (min-width: 768px) {
  #imageGrid,
  #imageGridAuxiliar,
  #imageGridAuxiliar2,
  #imageGridAuxiliar3,
  .image-grid-aux {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
  }
  
  #imageGrid.few-images,
  #imageGridAuxiliar.few-images,
  #imageGridAuxiliar2.few-images,
  #imageGridAuxiliar3.few-images,
  .image-grid-aux.few-images {
    gap: 25px;
  }
}

@media (max-width: 576px) {
  #imageGrid,
  #imageGridAuxiliar,
  #imageGridAuxiliar2,
  #imageGridAuxiliar3,
  .image-grid-aux {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

#imageGrid img,
#imageGridAuxiliar img,
#imageGridAuxiliar2 img,
#imageGridAuxiliar3 img,
.image-grid-aux img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
  cursor: pointer;
}

/* Layout agora usa grid para todas as galerias */

/* ==========================================================================
   MODAL DE GALERIA
========================================================================== */
body.lightbox-open {
  overflow: hidden;
}

.gallery-lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #e9e9e9;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.gallery-lightbox-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.gallery-lightbox-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 100px;
  align-items: center;
  padding: 24px 22px;
}

.gallery-lightbox-close {
  position: absolute;
  top: 28px;
  right: 26px;
  border: none;
  background: transparent;
  color: #111;
  font-family: 'Turnery', Arial, sans-serif;
  font-size: 1.9rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  z-index: 3;
  line-height: 1;
}

.gallery-lightbox-close span:first-child {
  font-size: 1rem;
}

.gallery-lightbox-image-wrap {
  grid-column: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
  gap: 12px;
}

.gallery-lightbox-image-wrap img {
  max-width: min(78vw, 1000px);
  max-height: calc(100vh - 170px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.gallery-lightbox-caption {
  width: min(78vw, 1000px);
  color: #111;
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: center;
  white-space: pre-line;
}

.gallery-lightbox-caption.is-hidden {
  display: none;
}

.gallery-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #111;
  font-family: 'Turnery', Arial, sans-serif;
  font-size: 2.1rem;
  width: 64px;
  height: 64px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 2;
}

.gallery-lightbox-prev {
  left: 28px;
}

.gallery-lightbox-next {
  right: 28px;
}

@media (max-width: 768px) {
  .gallery-lightbox-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 20px 6px 22px;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
  }

  .gallery-lightbox-close {
    top: 14px;
    right: 16px;
    font-size: 1.8rem;
  }

  .gallery-lightbox-image-wrap {
    width: 100%;
    flex: 1;
    padding: 78px 0 30px;
    gap: 10px;
  }

  .gallery-lightbox-image-wrap img {
    max-width: calc(100vw - 10px);
    max-height: calc(100vh - 290px);
  }

  .gallery-lightbox-caption {
    width: calc(100vw - 24px);
    font-size: 0.9rem;
  }

  .gallery-lightbox-prev,
  .gallery-lightbox-next {
    position: absolute;
    bottom: 12px;
    top: auto;
    transform: none;
    width: 52px;
    height: 52px;
    font-size: 2.2rem;
  }

  .gallery-lightbox-prev {
    left: 22%;
  }

  .gallery-lightbox-next {
    right: 22%;
  }
}

/* Container wrapper para galeria */
.container.py-4 {
  padding: 20px 0;
}

/* Imagem full width para seções */
.img-fluid {
  width: 100%;
  height: auto;
  margin: 30px 0;
  border-radius: 0;
}

/* ==========================================================================
   AJUSTES EM IMAGENS
========================================================================== */
.post-image,
#imageGrid img,
#imageGridAuxiliar img,
#imageGridAuxiliar2 img,
#imageGridAuxiliar3 img,
.image-grid-aux img,
.img-fluid {
  border-radius: 0;
}

/* ==========================================================================
   RESPONSIVIDADE
========================================================================== */
@media (max-width: 991.98px) {
  #categoryFilter {
    display: none;
    margin-top: 10px;
  }

  .post-content {
    padding: 0 25px;
    margin: 50px auto 100px;
  }
  
  .post-paragraph {
    margin: 70px 0;
    font-size: 1.08rem;
  }
  
  .post-title,
  .post-header h1 {
    font-size: 2rem;
  }
  
  .post-section-title {
    font-size: 1.5rem;
  }

  .post-section-subtitle {
    font-size: 1.5rem;
  }
  
  .post-quote {
    padding: 0 20px;
    font-size: 1.1rem;
  }
}

@media (max-width: 575.98px) {
  .logo-header {
    width: 180px;
    min-width: 80px;
    height: auto;
    max-width: 40vw;
  }

  /* Garante que SVGs mantenham as dimensões especificadas */
  .logo-header[src*=".svg"] {
    width: 180px;
    min-width: 80px;
    height: auto;
    max-width: 40vw;
    display: block;
  }
  
  .post-title,
  .post-header h1 {
    font-size: 1.8rem;
    margin: 0 0 15px 0;
  }
  
  .post-section-title {
    font-size: 1.3rem;
  }

  .post-section-subtitle {
    font-size: 1.3rem;
  }
  
  .post-content {
    padding: 0 30px;
    margin: 50px auto 100px;
  }
  
  .post-paragraph {
    margin: 65px 0;
    font-size: 1.05rem;
    line-height: 1.6;
  }
  
  #imageGrid,
  #imageGridAuxiliar {
    padding: 0 15px;
  }
  
  .post-quote {
    font-size: 1rem;
    padding: 0 15px;
  }
  
}

/* Last-resort: prevent any residual horizontal scrolling from pseudo-elements or small miscalculations
   This keeps the page visually stable across breakpoints. Remove only if you prefer to debug exact root cause. */
html, body {
  overflow-x: hidden;
}

/* ==========================================================================
   CRÉDITOS
========================================================================== */
.credit-list {
  text-align: center;
  font-family: 'Turnery', Arial, sans-serif;
  list-style-type: none;
  padding-left: 0;
}

.credit-item {
  margin: 18px 0;
}

/* Make any p-3.border inside the side-box accordion visually borderless
   (this overrides the Bootstrap .border utility while keeping padding) */
.side-box .accordion-body > .p-3.border {
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Column title spacing adjustment - only for exhibitions */
#collapseOne .col-right .col-title {
    margin-bottom: 3rem !important;
}