/* 50 Espaços — «Dossiê de campo». Tudo sob .e50 para não colidir com o layout default. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-vf.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-vf.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-vf-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

.e50 {
  --papel: #f6f7f4;
  --superficie: #ffffff;
  --floresta: #1f4d2b;
  --verde: #2e7d32;
  --sinal: #e8c21a;
  --grafite: #23282b;
  --rio: #2b6c8f;
  --suave: #5d665f;
  --traco: #c9cfc6;

  --sans: "Schibsted Grotesk", system-ui, sans-serif;
  --serif: "Literata", Georgia, serif;

  background: var(--papel);
  color: var(--grafite);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  padding: 0 1rem 4rem;
}

/* O layout default do site é sempre claro: o tema escuro só se activa com data-theme="dark". */
:root[data-theme="dark"] .e50 {
  --papel: #141a16;
  --superficie: #1b231e;
  --floresta: #8cc79a;
  --verde: #6fb07a;
  --grafite: #e6ebe4;
  --rio: #7fb8d6;
  --suave: #a1aca3;
  --traco: #3a463d;
}

.e50 *, .e50 *::before, .e50 *::after { box-sizing: border-box; }
.e50 a { color: var(--rio); text-underline-offset: 0.18em; }
.e50 a:focus-visible { outline: 3px solid var(--rio); outline-offset: 2px; }

.e50 .coluna { max-width: 66ch; margin: 0 auto; }
.e50 .larga { max-width: 64rem; margin: 0 auto; }

.e50 h1, .e50 h2, .e50 h3 {
  font-family: var(--sans);
  color: var(--floresta);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}
.e50 h1 { font-size: clamp(2.2rem, 5.6vw + 0.5rem, 4.2rem); font-weight: 800; }
.e50 h2 { font-size: 1.65rem; font-weight: 700; margin: 3rem 0 0.8rem; }
.e50 h3 { font-size: 1.15rem; font-weight: 650; margin: 2rem 0 0.4rem; }
.e50 p { margin: 0 0 1rem; }

/* ——— Ficha de um espaço ——— */
.e50 .ficha-larga { max-width: 68rem; margin: 0 auto; }
.e50 .ficha-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; border-bottom: 1.5px solid var(--grafite); margin-bottom: 1.6rem; }
.e50 .ficha-topo .logo-topo { margin: 0; }
.e50 .ficha-topo .logo-topo img { width: auto; height: 5rem; max-width: 45vw; }
.e50 .migalhas { font: 450 0.92rem/1.4 var(--sans); color: var(--suave); margin: 0; padding: 0; }
.e50 .migalhas a { color: var(--suave); }

.e50 .ficha-larga > .migalhas { padding: 1.2rem 0 1rem; border-bottom: 1.5px solid var(--grafite); margin-bottom: 1.4rem; }
.e50 .ficha-abertura { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; margin: 0 0 1.8rem; }
.e50 .ficha-abertura:has(> .logo-topo:only-child) { grid-template-columns: 1fr; }
.e50 .ficha-abertura .logo-topo { margin: 0; justify-self: center; }
.e50 .ficha-abertura .logo-topo img { width: 100%; max-width: 15rem; height: auto; }
@media (max-width: 40rem) {
  .e50 .ficha-abertura { grid-template-columns: 1fr; }
  .e50 .ficha-abertura .logo-topo img { max-width: 11rem; }
}
.e50 .ficha-hero { margin: 0; }
.e50 .ficha-hero a { display: block; cursor: zoom-in; }
.e50 .ficha-hero img { display: block; width: 100%; height: clamp(12rem, 26vw, 18rem); object-fit: cover; border: 1.5px solid var(--grafite); }

.e50 .ficha-cabeca { margin-bottom: 2.2rem; background: none; padding: 0; border: 0; }
.e50 .ficha h1, .e50 .titulo-pagina { font-size: clamp(1.5rem, 1.4vw + 1rem, 2rem); line-height: 1.15; text-align: left; margin: 0 0 1rem; padding-left: 0.8rem; border-left: 0.4rem solid var(--sinal); }

.e50 .ficha-dados { display: flex; flex-wrap: wrap; gap: 0.4rem 2.8rem; margin: 0; padding-top: 0.9rem; border-top: 1.5px solid var(--traco); }
.e50 .ficha-dados div { background: none; border: 0; padding: 0; }
.e50 .ficha-dados dt { font: 500 0.82rem/1.3 var(--sans); color: var(--suave); }
.e50 .ficha-dados dd { margin: 0.1rem 0 0; font: 700 1.2rem/1.3 var(--sans); }

.e50 .ficha-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 3.5rem; align-items: start; }
.e50 .texto { max-width: 40rem; }
.e50 .texto p { line-height: 1.7; margin: 0 0 1.1rem; }
.e50 .texto > p:first-child { font-size: 1.22rem; line-height: 1.6; color: var(--floresta); }
.e50 .ficha-lado h2 { font-size: 1.05rem; margin: 1.6rem 0 0.5rem; }
.e50 .anexos { list-style: none; margin: 0; padding: 0; font: 450 0.95rem/1.4 var(--sans); }
.e50 .anexos li { padding: 0.4rem 0; border-bottom: 1px solid var(--traco); }
.e50 .mini-mapa { min-height: 16rem; margin: 0 0 0.4rem; }
.e50 .nota-mapa { font: 450 0.85rem/1.4 var(--sans); color: var(--suave); margin: 0; }
@media (min-width: 56rem) {
  .e50 .ficha-corpo { grid-template-columns: minmax(0, 40rem) minmax(15rem, 1fr); }
  .e50 .ficha-lado { position: sticky; top: 1.2rem; }
}

.e50 .galeria { column-width: 17rem; column-gap: 0.8rem; margin: 2.8rem 0 1rem; }
.e50 .galeria figure { margin: 0 0 0.8rem; break-inside: avoid; }
.e50 .galeria a { display: block; cursor: zoom-in; }
.e50 .galeria img { display: block; width: 100%; height: auto; border: 1.5px solid var(--grafite); }
.e50 .titulo-plantas { font-size: 1.15rem; margin: 2.4rem 0 0; padding-top: 1rem; border-top: 1.5px solid var(--traco); }
.e50 .galeria.plantas { margin-top: 1rem; }
.e50 .galeria.plantas img { background: #fff; }
.e50-ampliada { max-width: 96vw; max-height: 96vh; padding: 0; border: 0; background: transparent; }
.e50-ampliada::backdrop { background: rgba(35, 40, 43, 0.88); }
.e50-ampliada img { display: block; max-width: 96vw; max-height: 94vh; object-fit: contain; cursor: zoom-out; }

/* Logo da campanha, em tamanho reduzido, nas páginas interiores */
.e50 .logo-topo { display: inline-block; margin: 0 0 1rem; }
.e50 .logo-topo img { display: block; width: 11rem; max-width: 55vw; height: auto; mix-blend-mode: multiply; }

/* ——— Lista e mapa dos espaços ——— */
.e50 .lista-pagina { max-width: 78rem; margin: 0 auto; }
.e50 .filtros { display: flex; flex-wrap: wrap; gap: 0.7rem 1rem; align-items: center; font-family: var(--sans); margin: 0 0 1.4rem; }
.e50 .filtro-select { display: inline-flex; align-items: center; gap: 0.6rem; font: 600 0.95rem var(--sans); }
.e50 .filtros select {
  font: 500 1rem var(--sans); color: var(--grafite); background: var(--superficie);
  border: 1.5px solid var(--grafite); padding: 0.4rem 0.7rem; border-radius: 0;
}
.e50 .filtro-pilula input { position: absolute; opacity: 0; }
.e50 .filtro-pilula span { display: inline-block; padding: 0.4rem 0.9rem; border: 1.5px solid var(--grafite); font: 600 0.95rem var(--sans); cursor: pointer; background: var(--superficie); }
.e50 .filtro-pilula input:checked + span { background: var(--sinal); color: #23282b; }
.e50 .filtro-pilula input:focus-visible + span, .e50 .filtros select:focus-visible { outline: 3px solid var(--rio); outline-offset: 2px; }
.e50 .contagem { margin: 0 0 0 auto; font: 500 0.95rem var(--sans); color: var(--suave); }

.e50 .lista-mapa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.e50 .mapa-coluna { order: -1; }
.e50 #mapa-espacos { height: 18rem; border: 1.5px solid var(--grafite); }
.e50 .espacos-lista { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--grafite); }
.e50 .espacos-lista li { border-bottom: 1px solid var(--traco); }
.e50 .espacos-lista li[hidden] { display: none; }
.e50 .espacos-lista a { display: flex; gap: 0.9rem; align-items: center; padding: 0.6rem 0.4rem; color: var(--grafite); text-decoration: none; }
.e50 .espacos-lista img, .e50 .espacos-lista .sem-foto { flex: 0 0 4.6rem; width: 4.6rem; height: 4.6rem; object-fit: cover; border: 1.5px solid var(--grafite); background: repeating-linear-gradient(135deg, transparent 0 7px, var(--traco) 7px 8px); }
.e50 .espacos-lista .info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.e50 .espacos-lista .nome { font: 700 1.05rem/1.25 var(--sans); }
.e50 .espacos-lista .local { font: 450 0.9rem/1.3 var(--sans); color: var(--suave); }
.e50 .espacos-lista .de-50 { align-self: flex-start; margin-top: 0.25rem; padding: 0.05rem 0.45rem; background: var(--sinal); color: #23282b; font: 650 0.8rem/1.4 var(--sans); }
.e50 .espacos-lista li:hover, .e50 .espacos-lista li.activo, .e50 .espacos-lista li:focus-within { background: var(--superficie); }
.e50 .espacos-lista li:hover .nome, .e50 .espacos-lista li.activo .nome { color: var(--floresta); text-decoration: underline; }
.e50 .vazio { font: 500 1rem var(--sans); color: var(--suave); padding: 1rem 0; }
.e50 .legenda-mapa { background: rgba(255, 255, 255, 0.92); border: 1.5px solid #23282b; padding: 0.35rem 0.6rem; font: 600 0.85rem/1.5 var(--sans); color: #23282b; display: flex; flex-direction: column; }
.e50 .legenda-mapa .ponto { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 2px solid #23282b; background: #f6f7f4; vertical-align: -0.1rem; margin-right: 0.35rem; }
.e50 .legenda-mapa .ponto.sel { background: #2e7d32; }
@media (min-width: 56rem) {
  .e50 .lista-mapa { grid-template-columns: minmax(20rem, 28rem) minmax(0, 1fr); gap: 2rem; }
  .e50 .mapa-coluna { order: 0; position: sticky; top: 1rem; }
  .e50 #mapa-espacos { height: min(40rem, calc(100vh - 6rem)); }
}

/* ——— Linha do tempo (sequência real) ——— */
.e50 .cronologia { list-style: none; margin: 1.5rem 0; padding: 0; border-left: 3px solid var(--floresta); }
.e50 .cronologia li { padding: 0 0 1.4rem 1.2rem; position: relative; }
.e50 .cronologia li::before {
  content: ""; position: absolute; left: -0.55rem; top: 0.45rem; width: 0.7rem; height: 0.7rem;
  background: var(--papel); border: 3px solid var(--floresta);
}
.e50 .cronologia .ano { font: 750 1.15rem/1.3 var(--sans); color: var(--floresta); }

/* ——— Topo comum, faixa de números e rodapé da secção ——— */
.e50 .ligacoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem 1.4rem; font: 600 1rem/1.3 var(--sans); }
.e50 .ligacoes a { color: var(--grafite); text-decoration-thickness: 1.5px; }
.e50 .ligacoes a:hover, .e50 .ligacoes a:focus-visible { color: var(--floresta); }
.e50 .ligacoes a[aria-current="page"] { text-decoration: none; border-bottom: 3px solid var(--sinal); }
.e50 .faixa { display: flex; margin: 0 0 1.2rem; padding: 0; border: 1.5px solid var(--grafite); background: var(--superficie); }
.e50 .faixa > div { flex: 1 1 0; display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; padding: 0.55rem 0.4rem; border-right: 1.5px solid var(--grafite); }
.e50 .faixa > div:last-child { border-right: 0; }
.e50 .faixa dd { order: -1; margin: 0; font: 800 clamp(1.5rem, 4vw, 2rem)/1 var(--sans); color: var(--floresta); }
.e50 .faixa dt { font: 550 0.95rem/1.2 var(--sans); color: var(--grafite); }
.e50 .logos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; min-width: 0; }
.e50 .logo-ca { display: block; flex: 0 0 auto; }
.e50 .ficha-topo { flex-wrap: wrap; }
.e50 .logo-ca img { display: block; width: auto; height: 3rem; max-width: 100%; }
.e50 .cabeca-inicio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem 2rem; align-items: center; padding: 1.1rem 0 1.4rem; margin-bottom: 1.6rem; border-bottom: 1.5px solid var(--grafite); }
.e50 .cabeca-inicio .logo-topo img { width: auto; height: 7.5rem; max-width: 100%; }
.e50 .cabeca-inicio .logo-ca img { height: 4.2rem; }
.e50 .cabeca-lado { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.e50 .cabeca-lado .faixa { margin: 0; }
@media (max-width: 44rem) {
  .e50 .cabeca-inicio { grid-template-columns: minmax(0, 1fr); }
  .e50 .cabeca-inicio .logo-topo img { height: 5.5rem; }
  .e50 .cabeca-inicio .logo-ca img { height: 3.4rem; }
  .e50 .cabeca-lado .ligacoes { justify-content: flex-start; }
}
.e50 .rodape-campanha { display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; margin-top: 2rem; padding: 1rem 0 2rem; border-top: 1.5px solid var(--grafite); font: 550 1rem/1.4 var(--sans); }
@media (max-width: 30rem) {
  .e50 .faixa > div { flex-direction: column; align-items: center; gap: 0.15rem; }
  .e50 .ficha-topo { align-items: flex-start; }
}

/* ——— Molduras: foto e mini-mapa ——— */
.e50 .moldura {
  display: grid; place-items: center; text-align: center; min-height: 11rem;
  border: 1.5px solid var(--grafite);
  background: repeating-linear-gradient(135deg, transparent 0 9px, var(--traco) 9px 10px);
  font: 500 0.9rem/1.4 var(--sans); color: var(--suave);
}
.e50 .moldura span { background: var(--papel); padding: 0.15rem 0.5rem; }

/* ——— Imprensa ——— */
.e50 .ano-bloco { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0 1rem; border-top: 1.5px solid var(--grafite); padding: 1rem 0; }
.e50 .ano-bloco h3 { margin: 0; font-size: 1.6rem; color: var(--floresta); }
.e50 .ano-bloco ul { list-style: none; margin: 0; padding: 0; font-family: var(--sans); }
.e50 .ano-bloco li { padding: 0.25rem 0; border-bottom: 1px solid var(--traco); }

@media (max-width: 40rem) {
  .e50 .ano-bloco { grid-template-columns: 1fr; }
}
@media (max-width: 30rem) {
  .e50 { font-size: 1rem; }
}

/* Texto só para leitores de ecrã */
.e50 .so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }