/* =====================================================
   ESTILO COMUM A TODAS AS PÁGINAS (tamanhos iguais)
   Para mudar o tamanho de algo em todo o site, muda aqui.
   ===================================================== */

/* Botões (navegação, categorias, projetos) */
body .btn, body .category-btn, body .grid .card{
  display:inline-flex; align-items:center; justify-content:center;
  width:auto; height:44px; padding:0 21px; border-radius:999px;
  font:16px Helvetica,sans-serif; text-decoration:none; cursor:pointer;
  background:var(--accent); border:1px solid var(--accent); color:#fff;
}
body .btn:hover, body .btn.ativo[aria-expanded="true"],
body .category-btn:hover, body .category-btn.active,
body .grid .card:hover, body .grid .card.ativo{
  background:#fff; border-color:var(--accent); color:var(--text);
}
body .top-actions, body .back, body .grid, body .category-grid{
  display:flex; flex-wrap:wrap; gap:12px; margin:22px 0;
}

/* Cabeçalho com foto */
body .hero{ aspect-ratio:10/3; min-height:200px }
body .hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
body .hero h1{ font-size:40px; font-weight:500; margin:0 0 5px }
body .hero p{ font-size:16px; margin:0 }

/* Fotos dos carrosséis */
body .photo{ aspect-ratio:16/9; background:transparent }
body .photo img{ object-fit:contain }

/* Setas dos carrosséis */
body .arrow{
  background:rgba(255,255,255,.9);
  color:var(--text);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
body .arrow:hover{
  background:var(--accent);
  color:#fff;
}

@media (max-width:700px){
  body .hero{ min-height:150px; aspect-ratio:16/7 }
  body .hero h1{ font-size:28px }
  body .hero p{ font-size:14px }
  body .btn, body .category-btn, body .grid .card{ height:40px; padding:0 16px; font-size:14px }
}
/* Texto bilingue: duas colunas em ecrãs largos, uma em ecrãs pequenos. */
body .cols{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:24px;
  width:100%;
  max-width:100%;
  min-width:0;
}
body .cols > .col{
  flex:initial;
  width:auto;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  white-space:normal;
  word-break:normal;
  overflow-wrap:break-word;
}
body .cols > .col p,
body .cols > .col li{
  max-width:100%;
  white-space:normal;
  word-break:normal;
  overflow-wrap:break-word;
}
.col-en p { color: #b8b8b8; }

/* Legendas sempre abaixo da imagem e livres para ocupar várias linhas. */
body .slide{min-width:0;max-width:100%}
body .slide figcaption{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  white-space:normal;
  word-break:normal;
  overflow-wrap:break-word;
  line-height:1.55;
}
.slide figcaption em { color: #b8b8b8; }

@media(max-width:700px){
  body .cols{grid-template-columns:minmax(0,1fr);gap:18px}
}

/* Legendas bilingues: reutiliza em todas as páginas o espaçamento de
   “Margens para Menir”, mantendo PT e EN alinhados e legíveis. */
body .legenda-atualizada{
  width:calc(100% + 180px)!important;
  max-width:calc(100vw - 40px)!important;
  position:relative;
  left:50%;
  transform:translateX(-50%);
  box-sizing:border-box;
}
body .legenda-atualizada .cols{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:24px;
  width:100%;
}
body .legenda-atualizada .col{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  text-align:left;
  font-size:13px;
  line-height:1.65;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  text-wrap:pretty;
}
body .legenda-atualizada .legenda-copy{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  margin:0;
  text-align:left;
  font-size:13px;
  line-height:1.65;
  color:var(--muted);
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  text-wrap:pretty;
}
body .legenda-atualizada .col p{
  margin:0;
  padding:0;
  text-align:left;
  font-size:13px;
  line-height:1.65;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
}
body .legenda-atualizada .legenda-copy p{margin:0;padding:0}
body .legenda-atualizada .col-en,
body .legenda-atualizada .col-en p{font-style:italic;color:#b8b8b8}
body .legenda-atualizada .legenda-language{
  margin:0 0 8px;
  font-style:normal;
  color:inherit;
  text-align:left;
}
@media(max-width:650px){
  body .legenda-atualizada{
    width:100%!important;
    max-width:100%!important;
    left:auto;
    transform:none;
  }
  body .legenda-atualizada .cols{grid-template-columns:minmax(0,1fr);gap:18px}
}