/* Páginas do site (app pagina). Tudo delimitado a .pg-pagina para não tocar no resto do site. */

/* Os blocos a toda a largura (parallax, imagem «total») usam 100vw, que inclui a barra de scroll */
html, body { overflow-x: clip; }

.pg-pagina {
  --pg-texto: #2b2f36;
  --pg-texto-suave: #6c757d;
  --pg-fundo: #ffffff;
  --pg-fundo-suave: #f4f6f9;
  --pg-linha: #dde2e9;
  --pg-destaque: #08a0c4;
  --pg-largura: 100%;
  --pg-largura-prosa: 50rem;
  --pg-raio: 8px;
  color: var(--pg-texto);
  line-height: 1.6;
  padding-bottom: 2rem;
}
.pg-pagina img, .pg-pagina video { max-width: 100%; height: auto; display: block; }
.pg-pagina figure { margin-left: auto; margin-right: auto; }

.pg-pagina .pg-aviso { background: #fff4d6; color: #5a4300; padding: .6rem 1rem; text-align: center; font-size: .95rem; border-radius: var(--pg-raio); margin: 1rem 0; }
.pg-pagina .pg-aviso--previa { background: #e3eeff; color: #123a73; }
.pg-pagina .pg-botao-editar { position: fixed; right: 5rem; bottom: 2rem; z-index: 1030; background: var(--pg-destaque); color: #fff; padding: .6rem 1.1rem; border-radius: 999px; font-weight: 600; box-shadow: 0 4px 14px rgb(0 0 0 / .25); }
.pg-pagina .pg-botao-editar:hover { color: #fff; filter: brightness(1.1); }

.pg-pagina .pg-titulo { max-width: var(--pg-largura-prosa); margin: 2rem auto 1.5rem; font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.2; }
.pg-pagina .pg-vazio { max-width: var(--pg-largura-prosa); margin: 0 auto; color: var(--pg-texto-suave); }
.pg-pagina .pg-erros { max-width: var(--pg-largura-prosa); margin: 0 auto; color: #b3261e; }

.pg-pagina .bloco { max-width: var(--pg-largura-prosa); margin: 0 auto 2.5rem; }
.pg-pagina .bloco h2 { font-size: 1.5rem; line-height: 1.3; margin: 0 0 .75rem; }
/* subtítulos do texto rico: abaixo do título do bloco (h2 = 1.5rem), e não com o tamanho do Bootstrap */
.pg-pagina .prosa h3 { font-size: 1.2rem; line-height: 1.35; margin: 1.4rem 0 .4rem; color: var(--pg-texto); }
.pg-pagina .prosa h4 { font-size: 1.05rem; line-height: 1.4; margin: 1.1rem 0 .3rem; color: var(--pg-texto); }
.pg-pagina .prosa > :first-child { margin-top: 0; }
.pg-pagina .prosa > :last-child { margin-bottom: 0; }
.pg-pagina .prosa blockquote { margin: 1rem 0; padding-left: 1rem; border-left: 3px solid var(--pg-linha); color: var(--pg-texto-suave); }
.pg-pagina figcaption, .pg-pagina .galeria__legenda { color: var(--pg-texto-suave); font-size: .9rem; margin-top: .5rem; }

.pg-pagina .bloco-imagem img, .pg-pagina .bloco-video video { border-radius: var(--pg-raio); width: 100%; }

/* Tamanho (10–200 %) e alinhamento de imagens e vídeos (esquemas.Dimensoes).
   100 % = coluna de texto; acima disso cresce para os dois lados, até à largura do ecrã.
   --w é a largura final; a margem esquerda faz o alinhamento e, quando --w passa os 100 %,
   centra a caixa (a margem fica negativa). */
.pg-pagina .bloco-midia__caixa {
  --w: min(var(--tamanho, 100%), calc(100vw - 2rem));
  width: var(--w);
  max-width: none;
  margin-left: calc((100% - var(--w)) / 2);
}
.pg-pagina .bloco-midia--esquerda .bloco-midia__caixa { margin-left: min(0px, calc((100% - var(--w)) / 2)); }
.pg-pagina .bloco-midia--direita .bloco-midia__caixa { margin-left: max(calc(100% - var(--w)), calc((100% - var(--w)) / 2)); }
.pg-pagina .bloco-midia--direita figcaption { text-align: right; }
/* em ecrãs estreitos ocupa sempre a largura toda */
@media (max-width: 575px) {
  .pg-pagina .bloco-midia__caixa { width: 100%; margin-left: 0 !important; }
}

.pg-pagina .proporcao-16x9 { position: relative; aspect-ratio: 16 / 9; border-radius: var(--pg-raio); overflow: hidden; background: #000; }
.pg-pagina .proporcao-16x9 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.pg-pagina .ficheiro { display: flex; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--pg-linha); border-radius: var(--pg-raio); color: var(--pg-texto); background: var(--pg-fundo-suave); text-decoration: none; }
.pg-pagina .ficheiro:hover { border-color: var(--pg-destaque); color: var(--pg-texto); }
.pg-pagina .ficheiro__icone { flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--pg-destaque); color: #fff; font-weight: 700; }
.pg-pagina .ficheiro__texto { display: flex; flex-direction: column; min-width: 0; }
.pg-pagina .ficheiro__texto span, .pg-pagina .ficheiro__texto small { color: var(--pg-texto-suave); }

.pg-pagina .bloco-galeria { max-width: var(--pg-largura); }
.pg-pagina .galeria { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(var(--colunas, 3), 1fr); }
@media (max-width: 640px) { .pg-pagina .galeria { grid-template-columns: repeat(2, 1fr); } }
.pg-pagina .galeria a { display: block; border-radius: var(--pg-raio); overflow: hidden; }
.pg-pagina .galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .25s; }
.pg-pagina .galeria a:hover img { transform: scale(1.04); }
.pg-pagina .galeria__legenda { margin: .35rem 0 0; }

/* Parallax: background-attachment: fixed não funciona em iOS e em ecrãs pequenos é pesado,
   por isso só é ativado em ecrãs largos e quando o visitante não pediu menos movimento. */
.pg-pagina .bloco-parallax { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); min-height: var(--altura, 60vh); background: #333 var(--imagem-fundo) center / cover no-repeat; display: flex; align-items: center; padding: 3rem 1rem; }
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .pg-pagina .bloco-parallax { background-attachment: fixed; }
}
/* fundo padrão: pequeno azulejo repetido, no tamanho original */
.pg-pagina .bloco-parallax--padrao { background-size: auto; background-repeat: repeat; background-position: center top; }
/* à esquerda/direita, a caixa alinha com a coluna de texto e não com a borda do ecrã */
.pg-pagina .bloco-parallax--esquerda, .pg-pagina .bloco-parallax--direita {
  padding-left: max(1rem, calc((100vw - var(--pg-largura-prosa)) / 2));
  padding-right: max(1rem, calc((100vw - var(--pg-largura-prosa)) / 2));
}
.pg-pagina .bloco-parallax--esquerda { justify-content: flex-start; }
.pg-pagina .bloco-parallax--centro { justify-content: center; text-align: center; }
.pg-pagina .bloco-parallax--direita { justify-content: flex-end; }
.pg-pagina .bloco-parallax__caixa { max-width: 38rem; padding: 1.5rem 2rem; border-radius: var(--pg-raio); background: rgb(0 0 0 / .55); color: #fff; backdrop-filter: blur(3px); }
.pg-pagina .bloco-parallax__caixa h2 { color: #fff; }
.pg-pagina .bloco-parallax__caixa a { color: #cfe0ff; }

.pg-pagina .bloco-detalhes details { border: 1px solid var(--pg-linha); border-radius: var(--pg-raio); margin-bottom: .5rem; background: var(--pg-fundo); }
.pg-pagina .bloco-detalhes summary { cursor: pointer; padding: .9rem 1rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.pg-pagina .bloco-detalhes summary::-webkit-details-marker { display: none; }
.pg-pagina .bloco-detalhes summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--pg-texto-suave); transition: rotate .2s; }
.pg-pagina .bloco-detalhes details[open] summary::after { rotate: 45deg; }
.pg-pagina .bloco-detalhes .prosa { padding: 0 1rem 1rem; }

/* ---------- Pessoas (oradores, equipa, contactos) */
.pg-pagina .bloco-pessoas { max-width: var(--pg-largura); }
.pg-pagina .pessoas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(var(--colunas, 3), minmax(0, 1fr)); }
@media (max-width: 900px) { .pg-pagina .pessoas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .pg-pagina .pessoas { grid-template-columns: 1fr; } }
.pg-pagina .pessoa { text-align: center; padding: 1.5rem 1.25rem; border: 1px solid var(--pg-linha); border-radius: var(--pg-raio); background: var(--pg-fundo); }
.pg-pagina .pessoa__foto { width: 7.5rem; height: 7.5rem; margin: 0 auto 1rem; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 4px var(--pg-fundo), 0 0 0 6px #cfeef6; }
.pg-pagina .pessoa__iniciais { display: grid; place-items: center; background: var(--pg-destaque); color: #fff; font-size: 2rem; font-weight: 700; letter-spacing: .02em; }
.pg-pagina .pessoa__nome { font-size: 1.1rem; margin: 0 0 .2rem; }
.pg-pagina .pessoa__funcao { color: var(--pg-destaque); font-weight: 600; font-size: .9rem; margin: 0; }
.pg-pagina .pessoa__texto { color: var(--pg-texto-suave); font-size: .92rem; margin-top: .75rem; text-align: left; }

/* ---------- Programa (linha do tempo) */
.pg-pagina .programa { list-style: none; margin: 0; padding: 0; position: relative; }
.pg-pagina .programa__item { display: grid; grid-template-columns: 7.5rem 1.5rem 1fr; column-gap: .75rem; align-items: start; position: relative; padding: .2rem 0 1.25rem; }
/* linha vertical, que passa pelo centro das marcas */
.pg-pagina .programa__item::before { content: ""; position: absolute; left: calc(7.5rem + .75rem + .75rem - 1px); top: 0; bottom: 0; width: 2px; background: var(--pg-linha); }
.pg-pagina .programa__item:first-child::before { top: .9rem; }
.pg-pagina .programa__item:last-child::before { bottom: auto; height: .9rem; }
.pg-pagina .programa__quando { font-weight: 700; color: var(--pg-texto); text-align: right; padding-top: .15rem; font-variant-numeric: tabular-nums; }
.pg-pagina .programa__marca { position: relative; z-index: 1; width: 1.5rem; height: 1.5rem; margin-top: .1rem; border-radius: 50%; background: var(--pg-fundo); border: 3px solid var(--pg-destaque); display: grid; place-items: center; }
.pg-pagina .programa__titulo { font-size: 1.05rem; margin: 0; line-height: 1.4; }
.pg-pagina .programa__orador { margin: .15rem 0 0; color: var(--pg-destaque); font-weight: 600; font-size: .92rem; }
.pg-pagina .programa__descricao { margin: .35rem 0 0; color: var(--pg-texto-suave); font-size: .95rem; }
.pg-pagina .programa__item--destaque .programa__marca { background: #ffc600; border-color: #ffc600; }
.pg-pagina .programa__item--destaque .programa__titulo { font-size: 1.15rem; }
.pg-pagina .programa__item--intervalo .programa__marca { border-color: var(--pg-linha); color: var(--pg-texto-suave); background: var(--pg-fundo-suave); }
.pg-pagina .programa__item--intervalo .programa__corpo { background: var(--pg-fundo-suave); border-radius: var(--pg-raio); padding: .45rem .8rem; }
.pg-pagina .programa__item--intervalo .programa__titulo { font-size: .98rem; font-weight: 600; color: var(--pg-texto-suave); }
.pg-pagina .programa__item--intervalo .programa__quando { color: var(--pg-texto-suave); font-weight: 600; }
@media (max-width: 575px) {
  .pg-pagina .programa__item { grid-template-columns: 1.5rem 1fr; }
  .pg-pagina .programa__quando { grid-column: 2; grid-row: 1; text-align: left; padding: 0; font-size: .9rem; }
  .pg-pagina .programa__marca { grid-column: 1; grid-row: 1 / span 2; }
  .pg-pagina .programa__corpo { grid-column: 2; }
  .pg-pagina .programa__item::before { left: calc(.75rem - 1px); }
}

/* Visor da galeria (acrescentado ao <body> por site.js).
   O Bootstrap 4 põe dialog { display: block }: sem o :not([open]) o visor fechado tapava a página. */
.pg-visor:not([open]) { display: none; }
.pg-visor { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.pg-visor::backdrop { background: rgb(0 0 0 / .9); }
.pg-visor__figura { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 4rem; }
.pg-visor__figura img { max-height: calc(100vh - 8rem); max-width: 100%; width: auto; object-fit: contain; }
.pg-visor__figura figcaption { color: #ddd; text-align: center; margin-top: .5rem; }
.pg-visor button { position: absolute; background: rgb(255 255 255 / .12); color: #fff; border: 0; width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.pg-visor button:hover { background: rgb(255 255 255 / .25); }
.pg-visor__fechar { top: 1rem; right: 1rem; }
.pg-visor__anterior { left: 1rem; top: 50%; translate: 0 -50%; }
.pg-visor__seguinte { right: 1rem; top: 50%; translate: 0 -50%; }

/* ---------------------------------------------------------------- menu de cada bloco (equipa) */
/* Como os destaques da página inicial: picotado e menu ao passar o rato. */
.pg-pagina .pg-edicao { position: relative; border-radius: var(--pg-raio); outline: 2px dashed transparent; outline-offset: 6px; }
.pg-pagina .pg-edicao:hover, .pg-pagina .pg-edicao:focus-within { outline-color: #47a2d3; }
.pg-pagina .pg-edicao--oculto > :not(.pg-edicao__menu, .pg-inserir) { opacity: .35; }
.pg-pagina .pg-edicao__menu { display: none; position: absolute; top: .4rem; right: .4rem; z-index: 6; align-items: center; gap: .15rem; padding: .15rem .5rem; background: aliceblue; border: 1px solid #e9ecef; border-radius: 25px; color: steelblue; font: 400 .9rem/1.5 'Roboto', sans-serif; box-shadow: 0 2px 6px rgb(0 0 0 / .12); }
.pg-pagina .pg-edicao:hover > .pg-edicao__menu, .pg-pagina .pg-edicao:focus-within > .pg-edicao__menu, .pg-pagina .pg-edicao--a-mover > .pg-edicao__menu { display: inline-flex; }
.pg-pagina .pg-edicao__tipo { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; margin-right: .3rem; }
.pg-pagina .pg-edicao--oculto .pg-edicao__tipo::after { content: " · oculto"; color: #b3261e; }
.pg-pagina .pg-edicao__menu button, .pg-pagina .pg-edicao__mover { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; font-size: 1rem; }
.pg-pagina .pg-edicao__mover { cursor: grab; }
.pg-pagina .pg-edicao__menu button:hover, .pg-pagina .pg-edicao__mover:hover { background: #47a2d3; color: #fff; }
.pg-pagina .pg-edicao__menu button[data-acao="apagar"]:hover { background: #d9534f; }
.pg-pagina .pg-edicao__menu button:disabled { opacity: .5; cursor: progress; }
.pg-pagina .pg-edicao--a-mover { background-color: #ecf6fb; outline-color: #47a2d3; }
.pg-pagina .pg-edicao--fantasma { opacity: .4; }

/* modal «Editar bloco» (o editor num iframe) */
dialog.pg-modal-bloco:not([open]) { display: none; }  /* o Bootstrap 4 põe dialog { display: block } */
dialog.pg-modal-bloco { width: min(62rem, 94vw); height: min(52rem, 92vh); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 10px; box-shadow: 0 20px 60px rgb(0 0 0 / .35); overflow: hidden; }
dialog.pg-modal-bloco::backdrop { background: rgb(15 23 42 / .55); }
dialog.pg-modal-bloco iframe { display: block; width: 100%; height: 100%; border: 0; }

/* botão «Adicionar bloco», no fim da página (equipa) */
.pg-pagina .pg-adicionar { max-width: var(--pg-largura-prosa); margin: 1rem auto 2.5rem; }
.pg-pagina .pg-adicionar__botao { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: 1rem; border: 2px dashed #47a2d3; border-radius: var(--pg-raio); background: #f5fafd; color: steelblue; font: 600 1rem/1.4 'Roboto', sans-serif; cursor: pointer; }
.pg-pagina .pg-adicionar__botao:hover { background: #47a2d3; color: #fff; }

/* «+» entre blocos: insere um bloco antes do bloco por onde passa o rato */
.pg-pagina .pg-inserir { position: absolute; top: -1.45rem; left: 50%; z-index: 7; transform: translate(-50%, -50%); display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 2px solid #47a2d3; border-radius: 50%; background: #fff; color: #47a2d3; font-size: .85rem; cursor: pointer; opacity: 0; transition: opacity .15s; box-shadow: 0 2px 6px rgb(0 0 0 / .15); }
.pg-pagina .pg-edicao:hover > .pg-inserir, .pg-pagina .pg-inserir:focus-visible { opacity: 1; }
.pg-pagina .pg-inserir:hover { background: #47a2d3; color: #fff; }
.pg-pagina .pg-edicao--a-mover > .pg-inserir { display: none; }