/* assets/css/fonts.css */
/* Lora e Montserrat (Fontsource 5.3.0, SIL OFL 1.1), subconjunto latino, alojamento próprio */
@font-face{font-family:"Lora";font-style:normal;font-weight:400;font-display:swap;src:url("https://casaasia-cfc.scml.pt/wp-content/themes/casa-asia/assets/fonts/lora-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Lora";font-style:normal;font-weight:500;font-display:swap;src:url("https://casaasia-cfc.scml.pt/wp-content/themes/casa-asia/assets/fonts/lora-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("https://casaasia-cfc.scml.pt/wp-content/themes/casa-asia/assets/fonts/montserrat-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Montserrat";font-style:italic;font-weight:400;font-display:swap;src:url("https://casaasia-cfc.scml.pt/wp-content/themes/casa-asia/assets/fonts/montserrat-400-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("https://casaasia-cfc.scml.pt/wp-content/themes/casa-asia/assets/fonts/montserrat-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* assets/css/tokens.css */
/* Tokens do tema (decisoes-casa-asia.md, 2.12 a 2.15) */
/* ==========================================================================
   Tokens — tipografia, grelha, espaçamento (independentes do tema)
   Fluidos entre 390px e 1440px; fixos fora desse intervalo.
   ========================================================================== */
:root {
  --font-heading: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", Arial, Helvetica, sans-serif;

  /* Escala de tamanhos (chat 35): 120, 64, 56, 40, 36, 32, 28, 24, 20, 18, 16, 14.
     Dois valores fixos, como na intranet: o de telemóvel aqui e o de desktop a
     partir de 1024px (media query a seguir ao :root). Sem clamp(). */
  --text-120: 7.5rem;
  --text-64: 4rem;
  --text-56: 3.5rem;
  --text-40: 2.5rem;
  --text-36: 2.25rem;
  --text-32: 2rem;
  --text-28: 1.75rem;
  --text-24: 1.5rem;
  --text-20: 1.25rem;
  --text-18: 1.125rem;
  --text-16: 1rem;
  --text-14: 0.875rem;

  /* Tamanhos por uso: valor de telemóvel (o de desktop vem a partir de 1024px) */
  --text-h1-hp: var(--text-36);        /* 120 - 36, H1 em destaque (páginas institucionais e listagens, em maiúsculas) e 404 */
  --text-h1: var(--text-36);           /* 64 - 36, H1 da página inicial; pesquisa e declaração */
  --text-h1-entry: var(--text-36);     /* 56 - 36, H1 da atividade, artigo, peça e país */
  --text-h2: var(--text-32);           /* 40 - 32 */
  --text-h3: var(--text-24);           /* 28 - 24 */
  --text-slider: var(--text-18);       /* 32 - 18, título do Slider */
  --text-lead: var(--text-20);         /* 24 - 20, lead e citação */
  --text-body-xl: var(--text-18);      /* 20 - 18, títulos dos cartões, termo do glossário */
  --text-footer-contact: var(--text-24);   /* 32 - 24, email e telefone do rodapé */
  --text-body: var(--text-16);
  --text-body-md: var(--text-14);
  --text-nav: 1rem;         /* 16px, primeiro nível (C8; C 2.1: ASI #21, HOSA #33) */
  --text-subnav: 1rem;      /* 16px, submenu (A11Y-16) */
  --text-button: 1rem;      /* 16px (C8; C 2.1: ASI #21, HOSA #33) */
  --text-min: 0.875rem;     /* 14px, mínimo do site */

  --lh-heading: 1.4;   /* títulos (chat 35; antes 1.2) */
  --lh-tight: 1.2;     /* controlos que não são títulos: menu, migalhas, filtros, paginação, ligações com linha */
  --lh-body: 1.6;
  --ls-heading: -0.015em;
  --ls-body: 0.015em;
  --ls-nav: 0.3em;

  --weight-regular: 400;
  --weight-medium: 500;

  /* Espaçamento: 0, 4, 8, 16, 24, 36, 48, 64, 96, 120 */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 1rem;      /* 16 */
  --space-4: 1.5rem;    /* 24 */
  --space-5: 2.25rem;   /* 36 */
  --space-6: 3rem;      /* 48 */
  --space-7: 4rem;      /* 64 */
  --space-8: 6rem;      /* 96 */
  --space-9: 7.5rem;    /* 120 */
  /* Degraus fixos, como na intranet e no site SCML: um valor abaixo de 768px e
     outro a partir daí (media query a seguir ao :root). Sem clamp(). */
  --space-section: var(--space-8);                           /* 96px; 120px a partir de 768px, entre blocos */
  --space-block: var(--space-4);                             /* 24px; 48px a partir de 768px, dentro do bloco */
  --space-heading: var(--space-3);                           /* título → texto, 16px */
  --space-paragraph: var(--space-4);                         /* entre parágrafos, 24px */

  /* Grelha */
  --container-max: 120rem;                                   /* 1920px */
  --page-margin: var(--space-4);                             /* 24px; 48px a partir de 768px */
  --grid-columns: 4;
  --grid-gap: var(--space-3);                                /* 16px; 24px a partir de 768px */
  --measure: 41.25rem;                                       /* 660px, ±80 caracteres */

  /* Forma e interação */
  --radius-pill: 999px;      /* cápsula; equivale aos 25px medidos num botão de 44px */
  --ring-gap: 4px;           /* afastamento do segundo contorno no hover */
  --radius-round: 50%;
  --border-width: 1px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --target-min: 2.75rem;     /* 44px */
  --icon-button: 3rem;       /* 48px */
  --icon-size: 1rem;         /* 16px nos botões e ligações */
  --duration-fade: 250ms;    /* cor, fundo, opacidade: sempre */
  --duration-motion: 0s;     /* deslocamento: só sem movimento reduzido */
  --ease: ease-out;
}

@media (min-width: 48em) {
  :root {
    --grid-columns: 8;
    --space-section: var(--space-9);   /* 120 */
    --space-block: var(--space-6);     /* 48 */
    --page-margin: var(--space-6);     /* 48 */
    --grid-gap: var(--space-4);        /* 24 */
  }
}
@media (min-width: 64em) {
  :root {
    --grid-columns: 12;
    /* Tamanhos de desktop (chat 35) */
    --text-h1-hp: var(--text-120);
    --text-h1: var(--text-64);
    --text-h1-entry: var(--text-56);
    --text-h2: var(--text-40);
    --text-h3: var(--text-28);
    --text-slider: var(--text-32);
    --text-lead: var(--text-24);
    --text-body-xl: var(--text-20);
    --text-footer-contact: var(--text-32);
  }
}
@media (prefers-reduced-motion: no-preference) { :root { --duration-motion: 250ms; } }

/* ==========================================================================
   Primitivas de cor. Rampas do site SCML; neutral e yellow adaptadas ao
   Casa Ásia (chat 16). Os componentes nunca usam primitivas: usam os tokens
   semânticos abaixo. Exceções decididas: anéis do botão de reprodução e
   fundo do vídeo na lightbox (2.14).
   ========================================================================== */
:root {
  --neutral-0: #000000;
  --neutral-10: #020001;
  --neutral-20: #0C0C0C;
  --neutral-30: #16161D;
  --neutral-40: #1E1E25;
  --neutral-50: #2C2C33;
  --neutral-60: #595959;
  --neutral-70: #7F7F7F;
  --neutral-80: #A6A6A6;
  --neutral-90: #E5E5E5;
  --neutral-95: #F4F4F4;
  --neutral-99: #FCFCFC;
  --neutral-100: #FFFFFF;

  --yellow-0: #000000;
  --yellow-10: #331F00;
  --yellow-20: #664D00;
  --yellow-30: #997A00;
  --yellow-40: #CCA800;
  --yellow-50: #FFD700;
  --yellow-60: #FFD83D;
  --yellow-70: #F6D558;
  --yellow-80: #FFE388;
  --yellow-90: #FFF1C4;
  --yellow-95: #FFF8E1;
  --yellow-99: #FFFDF5;
  --yellow-100: #FFFFFF;

  --brand-0: #000000;
  --brand-10: #1F0104;
  --brand-20: #3E0208;
  --brand-30: #5D030C;
  --brand-40: #7B1118;
  --brand-50: #9A212F;
  --brand-60: #B83D4D;
  --brand-70: #CA6B77;
  --brand-80: #DC99A1;
  --brand-90: #EDC7CB;
  --brand-95: #F6E3E5;
  --brand-99: #FCF5F6;
  --brand-100: #FFFFFF;

  --blue-0: #000000;
  --blue-10: #00232A;
  --blue-20: #004653;
  --blue-30: #00697D;
  --blue-40: #008CA6;
  --blue-50: #00A8C0;
  --blue-60: #33BECD;
  --blue-70: #66D3DA;
  --blue-80: #99E3E7;
  --blue-90: #CCF1F3;
  --blue-95: #E5F8F9;
  --blue-99: #F7FCFD;
  --blue-100: #FFFFFF;

  --green-0: #000000;
  --green-10: #0A2E1A;
  --green-20: #145C33;
  --green-30: #1E8A4D;
  --green-40: #28B866;
  --green-50: #3BC97A;
  --green-60: #69D091;
  --green-70: #96D38C;
  --green-80: #B4E0B0;
  --green-90: #D2EDD4;
  --green-95: #E8F6E9;
  --green-99: #F7FCF7;
  --green-100: #FFFFFF;

  /* Estado do Casa Ásia, ainda fora das rampas (por decidir) */
  --status-success-dark: #C8FFB4;
  --status-success-light: #0D6300;
  --status-error-dark: #FCA7A8;
  --status-error-light: #A51200;
}

/* ==========================================================================
   Tokens semânticos de cor, por tema. Escuro é o principal.
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--neutral-10);
  --color-surface: var(--neutral-20);
  --color-overlay: rgba(0, 0, 0, 0.94);          /* --neutral-0 a 94% */
  --color-text: var(--neutral-100);
  --color-text-muted: var(--neutral-90);
  --color-accent: var(--yellow-70);
  --color-on-accent: var(--neutral-10);
  --color-link: var(--neutral-100);
  --color-link-hover: var(--yellow-70);
  --color-link-active-bg: var(--neutral-60);   /* clique nas ligações (chat 35): branco sobre #595959, 7:1 */
  --color-border: var(--neutral-100);
  --color-divider: color-mix(in srgb, var(--color-text) 20%, transparent);   /* filetes */
  --color-focus: var(--yellow-50);
  --color-success: var(--status-success-dark);
  --color-error: var(--status-error-dark);

  --button-primary-bg: var(--neutral-100);
  --button-primary-bg-hover: var(--neutral-90);
  --button-primary-text: var(--neutral-10);
  --button-primary-border: var(--neutral-100);
  --button-secondary-bg-hover: var(--neutral-30);
  --button-tertiary-bg: var(--neutral-20);
  --button-tertiary-bg-hover: color-mix(in srgb, var(--neutral-20) 90%, var(--neutral-100));
  --icon-button-bg: var(--neutral-30);
}

/* O aviso de cookies é sempre uma caixa clara, nos dois temas (como no site atual) */
[data-theme="light"],
.cookie-banner {
  color-scheme: light;
  --color-bg: var(--neutral-100);
  --color-surface: var(--neutral-90);
  --color-overlay: rgba(255, 255, 255, 0.94);    /* --neutral-100 a 94% */
  --color-text: var(--neutral-10);
  --color-text-muted: var(--neutral-30);
  --color-accent: var(--yellow-70);
  --color-on-accent: var(--neutral-10);
  --color-link: var(--neutral-10);
  --color-link-hover: var(--neutral-60);
  --color-link-active-bg: var(--neutral-80);   /* clique nas ligações (chat 35): preto sobre #A6A6A6; visível também no painel cinzento */
  --color-border: var(--neutral-10);
  --color-divider: color-mix(in srgb, var(--color-text) 20%, transparent);   /* filetes */
  --color-focus: var(--neutral-10);
  --color-success: var(--status-success-light);
  --color-error: var(--status-error-light);

  --button-primary-bg: var(--neutral-10);
  --button-primary-bg-hover: var(--neutral-30);
  --button-primary-text: var(--neutral-100);
  --button-primary-border: var(--neutral-10);
  --button-secondary-bg-hover: var(--neutral-90);
  --button-tertiary-bg: var(--neutral-90);
  --button-tertiary-bg-hover: color-mix(in srgb, var(--neutral-90) 90%, var(--neutral-0));
  --icon-button-bg: var(--neutral-90);
}


/* ==========================================================================
   Tokens novos do lab 2
   ========================================================================== */
[data-theme="dark"] {
  --color-text-subtle: var(--neutral-80);   /* rótulos não clicáveis (pais do menu) */
  --logo-filter: none;                      /* logótipos brancos ficam como estão */
  --focus-on-inverse: var(--neutral-10);     /* foco à volta de uma caixa escura numa página clara */
  --header-sticky-bg: rgba(2, 0, 1, 0.9);  /* --neutral-10 a 90% (cabeçalho fixo) */
}
[data-theme="light"] {
  --color-text-subtle: var(--neutral-60);
  --logo-filter: invert(1);                 /* logótipos brancos passam a pretos */
  --focus-on-inverse: var(--yellow-50);     /* foco à volta de uma caixa clara numa página escura */
  --header-sticky-bg: rgba(255, 255, 255, 0.9);   /* --neutral-100 a 90% */
}


/* Tokens partilhados da peça, das galerias e da lightbox */
:root {
  --media-control: 3rem;          /* 48px, botões dos leitores e da lightbox */
  --play-size: 6rem;              /* 96px, botão da fachada de vídeo */
  --breadcrumb-gap: var(--space-3);   /* 16: traço → texto e texto → traço, sempre igual */
  --parallax-drift: 3rem;         /* 48px, deriva máxima de uma coluna da galeria */
  --hover-zoom: 1.045;             /* aproximação das imagens no hover: subtil mas visível */
  --duration-hover: 900ms;
  --ease-hover: cubic-bezier(0.22, 0.61, 0.36, 1);
  --gallery-columns: 2;
  --gallery-shift-1: var(--space-1);   /* deslocamento das colunas: 4n+1, 4n+2, 4n+3, 4n+4 */
  --gallery-shift-2: var(--space-0);
  --gallery-shift-3: var(--space-4);
  --gallery-shift-4: var(--space-4);
}
@media (min-width: 48em) {
  :root {
    --breadcrumb-gap: var(--space-5);  /* 36 */
    --gallery-columns: 4;
    --gallery-shift-1: var(--space-8);   /* 96 */
    --gallery-shift-2: var(--space-0);   /* 0 */
    --gallery-shift-3: var(--space-6);   /* 48 */
    --gallery-shift-4: var(--space-8);   /* 96 */
  }
}
@media (max-width: 47.99em) { :root { --play-size: 4.5rem; } }

/* assets/css/main.css */
/* Base, botões, cabeçalho, navegação, modais, rodapé e componentes partilhados */

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

h1, h2, h3, .t-display, .t-h1, .t-h2, .t-h3 {
  font-family: var(--font-heading);
  font-weight: var(--weight-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0;
  /* Linhas cheias até à largura disponível; só evita uma palavra sozinha na última linha (revisto no lab 7: "balance" encolhia os títulos) */
  text-wrap: pretty;
}

/* Títulos limitados à largura de leitura; o destaque fica livre */
h1, h2, h3, .t-h1, .t-h2, .t-h3 { max-width: var(--measure); }
h1, .t-h1 { font-size: var(--text-h1); }
h2, .t-h2 { font-size: var(--text-h2); }
h3, .t-h3 { font-size: var(--text-h3); }
.t-display { font-size: var(--text-h1-hp); text-transform: uppercase; }
.t-body { font-size: var(--text-body); line-height: var(--lh-body); }
.t-small { font-size: var(--text-body-md); line-height: var(--lh-body); }
.t-nav {
  font-family: var(--font-heading);
  font-size: var(--text-nav);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  line-height: var(--lh-tight);
}
.t-subnav {
  font-family: var(--font-body);
  font-size: var(--text-subnav);
  line-height: var(--lh-tight);
}

p { margin: 0 0 var(--space-paragraph); }
/* Chat 36: leads, introduções e itens de lista com vários parágrafos saem num
   <div> (ou no <li>) com um <p> por parágrafo; o último não soma espaço ao do
   elemento. */
.hero__lead > p:last-child, .article__lead > p:last-child, .activity__lead > p:last-child,
.list-cols li > p:last-child, .list-badge__item > p:last-child { margin-bottom: 0; }
p:last-child { margin-bottom: 0; }

img { display: block; max-width: 100%; height: auto; }

:focus { outline: none; }
:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 var(--focus-offset) var(--color-bg);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.icon { width: 1.5rem; height: 1.5rem; flex: none; }
.icon-sm { width: var(--icon-size); height: var(--icon-size); flex: none; }

/* ==========================================================================
   Ligações em texto: brancas e sublinhadas; hover amarelo (claro: cinza)
   ========================================================================== */
/* 0.22.0 (chat 34): parágrafo só com uma ligação («Inscrições», «CV completo»): é um alvo
   sozinho, não texto corrido, e fica com 44px de altura (ca_prose() marca o parágrafo) */
.link-line > a { display: inline-flex; align-items: center; min-height: var(--target-min); }

/* 0.21.0 (chat 34): também as ligações escritas nos editores fora de .prose (citação, destaque,
   lead, itens de lista), que ficavam com a cor do browser. São as únicas sem classe dentro do main. */
.prose a:not(.button), .link, main a:not([class]) {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  /* Chat 35: a mesma folga em todos os estados (2px à volta, anulada pela margem), para nada mexer ao clicar */
  padding: 2px;
  margin: -2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: color var(--duration-fade) var(--ease), background-color var(--duration-fade) var(--ease);
}
/* Hover: só a cor; o sublinhado fica a 1px (chat 35) */
.prose a:not(.button):hover, .link:hover, .link.is-hover, main a:not([class]):hover {
  color: var(--color-link-hover);
}
/* Clique: fundo cinzento (chat 35; o amarelo é dos badges) */
.prose a:not(.button):active, .link:active, .link.is-active, main a:not([class]):active {
  color: var(--color-link);
  background-color: var(--color-link-active-bg);
}
.link.is-focus {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 var(--focus-offset) var(--color-bg);
}
.link-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; margin-inline-start: var(--space-1); }

/* ==========================================================================
   Botões: primary, secondary, tertiary, ghost
   Revisto no lab 8: contorno de 2px, sem segundo contorno; espaçamento entre
   letras 0; seta de 20px.
   Hover: o fundo enche da esquerda para a direita (cortina em clip-path, em
   450ms com a travagem do zoom das imagens) e o texto troca de cor; a seta
   avança 4px. Ao sair, volta em 250ms. Com movimento reduzido, o fundo
   aparece por fade e a seta não mexe.
   Ativo: contorno na cor de hover das ligações. Foco: anel de 3px por fora.
   Ghost: sem fundo nem contorno; no hover aparece o sublinhado e a seta avança.
   ========================================================================== */
.button {
  --button-bg: transparent;
  --button-text: var(--color-text);
  --button-border: transparent;
  --button-fill: var(--color-text);
  --button-fill-text: var(--color-bg);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  padding: 0 var(--space-4);
  border: 2px solid var(--button-border);
  border-radius: var(--radius-pill);
  color: var(--button-text);
  background: var(--button-bg);
  font-family: var(--font-heading);
  font-size: var(--text-button);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration-fade) var(--ease), border-color var(--duration-fade) var(--ease);
}
.button .icon-sm { width: 1.25rem; height: 1.25rem; }
/* Cortina do hover: atrás do texto, por cima do fundo do botão */
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius-pill);
  background: var(--button-fill);
  clip-path: inset(0 100% 0 0 round var(--radius-pill));
  opacity: 0;
  pointer-events: none;
}
.button:hover, .button.is-hover { color: var(--button-fill-text); }
.button:hover::before, .button.is-hover::before { clip-path: inset(0 0 0 0 round var(--radius-pill)); opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* Entrada: metade do zoom das imagens, com a mesma travagem no fim. Saída: mais rápida (250ms) */
  .button::before { transition: clip-path var(--duration-fade) var(--ease), opacity 0s var(--duration-fade); }
  .button:hover::before, .button.is-hover::before { transition: clip-path calc(var(--duration-hover) / 2) var(--ease-hover), opacity 0s; }
  .button .icon-sm { transition: transform var(--duration-fade) var(--ease); }
  .button:hover .icon-sm, .button.is-hover .icon-sm { transform: translateX(var(--space-1)); transition: transform calc(var(--duration-hover) / 2) var(--ease-hover); }
  /* Ghost: sem fundo, a seta anda mais */
  .button--ghost:hover .icon-sm, .button--ghost.is-hover .icon-sm { transform: translateX(var(--space-2)); }
}
@media (prefers-reduced-motion: reduce) {
  .button::before { clip-path: none; transition: opacity var(--duration-fade) var(--ease); }
}
.button:active, .button.is-active { --button-border: var(--color-link-hover); }
.button:focus-visible, .button.is-focus {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 var(--focus-offset) var(--color-bg);
}

/* Primary: cheio; no hover enche com a cor do fundo da página e o contorno fica */
.button--primary {
  --button-bg: var(--button-primary-bg);
  --button-text: var(--button-primary-text);
  --button-border: var(--button-primary-border);
  --button-fill: var(--color-bg);
  --button-fill-text: var(--color-text);
}

/* Secondary e tertiary: enchem com a cor do texto */
.button--secondary { --button-border: var(--color-border); }
.button--tertiary { --button-bg: var(--button-tertiary-bg); --button-border: var(--button-tertiary-bg); }
/* A cortina cobre também o contorno: sem linha escura entre o contorno e o fundo */
.button--secondary::before, .button--tertiary::before { inset: -2px; }

.button--ghost::before { content: none; }
.button--ghost:hover, .button--ghost.is-hover { color: var(--button-text); }
.button--ghost .button__label { text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: 0.3em; transition: text-decoration-color var(--duration-fade) var(--ease); }
.button--ghost:hover .button__label, .button--ghost.is-hover .button__label { text-decoration-color: currentColor; }

/* Botões de ícone (Lucide, traço 1,5) */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-button);
  height: var(--icon-button);
  padding: 0;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-round);
  color: var(--color-text);
  background: var(--icon-button-bg);
  cursor: pointer;
  transition: color var(--duration-fade) var(--ease), background-color var(--duration-fade) var(--ease), border-color var(--duration-fade) var(--ease);
}
@media (hover: hover) { .icon-button:hover { border-color: var(--color-border); } }
.icon-button.is-hover { border-color: var(--color-border); }
/* Sem estado ativo: o botão de ícone é uma ação */
.icon-button.is-focus {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 var(--focus-offset) var(--color-bg);
}

.theme-toggle .icon-moon { display: none; }
.theme-toggle[aria-pressed="true"] .icon-sun { display: none; }
.theme-toggle[aria-pressed="true"] .icon-moon { display: block; }

/* Listas */
.prose ul, .prose ol { margin: 0 0 var(--space-paragraph); padding-inline-start: var(--space-5); }  /* recuo de 36px (revisto no lab 10; antes 1.5em) */
.prose li { margin-block: var(--space-2); }
.prose li > ul, .prose li > ol { margin-block: var(--space-2) 0; }
/* Marcador das listas (revisto no lab 10): bola cinza, um pouco maior; o mesmo em todas as listas do site */
.prose ul { list-style-type: disc; }  /* bola cheia também em listas dentro de outra lista (cards) */
.prose ul > li::marker { font-size: 1.25em; line-height: 1; color: var(--color-text-subtle); }
.prose ol > li::marker { font-family: var(--font-heading); color: var(--color-accent); }
[data-theme="light"] .prose ol > li::marker { color: var(--color-text); }

/* Citação (revista no lab 9). Em Montserrat: a Lora é só para títulos. 1.º parágrafo em
   texto maior (--text-lead, 24 - 20 desde o chat 35) com o filete de 2px; os seguintes em texto normal (16px).
   O filete fica só ao lado do 1.º parágrafo: em citações longas, à altura toda, ficava longo. */
.quote { margin: 0; max-width: var(--measure); }
.quote blockquote { margin: 0; font-family: var(--font-body); font-size: var(--text-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); }
.quote blockquote > p:first-child { font-size: var(--text-lead); }
/* Filete transparente nos outros parágrafos e na autoria, para o texto ficar todo alinhado */
.quote blockquote > p, .quote figcaption { padding-inline-start: var(--space-4); border-inline-start: 2px solid transparent; }
.quote blockquote > p:first-child { border-inline-start-color: var(--color-accent); }
[data-theme="light"] .quote blockquote > p:first-child { border-inline-start-color: var(--color-text); }
/* Autoria (revista no lab 9): à direita, entre parênteses rectos escritos pelo tema (aria-hidden),
   com traço de 50×2px por cima (amarelo; cor do texto no claro), como o das recorrentes.
   Texto → traço: 24px; traço → nome: 16px. */
.quote figcaption { margin-top: var(--space-4); font-size: var(--text-body-md); color: var(--color-text-muted); text-align: end; }
.quote figcaption::before { content: ""; display: block; width: 50px; height: 2px; margin: 0 0 var(--space-3) auto; background: var(--color-accent); }
[data-theme="light"] .quote figcaption::before { background: var(--color-text); }

/* Figura e legenda */
.figure { margin: 0; }
/* Legendas (chat 35): 4px por baixo da imagem e 4px da margem esquerda, 14px, 400 */
.figure figcaption, .gallery__item figcaption { margin: var(--space-1) 0 0; padding-inline-start: var(--space-1); font-size: var(--text-14); font-weight: var(--weight-regular); line-height: var(--lh-body); color: var(--color-text-muted); max-width: var(--measure); }
.figure figcaption strong { display: block; font-family: var(--font-heading); font-size: var(--text-body); font-weight: var(--weight-regular); color: var(--color-text); }
.figure__details { white-space: pre-line; }

/* Proporções */
.ratio { position: relative; overflow: hidden; background: var(--color-surface); }
.ratio > img { width: 100%; height: 100%; object-fit: cover; }
.ratio--1-1 { aspect-ratio: 1 / 1; }
.ratio--4-5 { aspect-ratio: 4 / 5; }
.ratio--3-2 { aspect-ratio: 3 / 2; }
.ratio--16-9 { aspect-ratio: 16 / 9; }
.ratio--cutout { background: transparent; }
.ratio--cutout > img { object-fit: contain; }

/* Marcador de dados em falta */
.placeholder {
  display: block;
  padding: var(--space-3) var(--space-3);
  border: var(--border-width) dashed var(--color-text-muted);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-style: normal;
  letter-spacing: var(--ls-body);
}



/* ==========================================================================
   Componentes do lab 2
   ========================================================================== */

/* Bloqueio do scroll com um modal aberto (A11Y-27). O espaço da barra fica sempre reservado: nada salta. */
html { scrollbar-gutter: stable; }
html:has(dialog[open]), html.menu-open { overflow: hidden; }

.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--page-margin); }

.logo-img { filter: var(--logo-filter); }

/* Saltar para o conteúdo */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-3);
  top: var(--space-3);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  color: var(--color-on-accent);
  background: var(--color-accent);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

/* ---------- Cabeçalho ---------- */
/* Sem fundo no cabeçalho normal (o fundo da página é o mesmo): com fundo, tapava o anel de foco das migalhas logo abaixo. O fixo tem fundo próprio */
.site-header { position: relative; z-index: 20; background: transparent; transition: background-color var(--duration-fade) var(--ease); }
/* Cabeçalho fixo: aparece só ao subir a página, com fundo ligeiramente transparente.
   Mesma altura, padding e posições do cabeçalho normal: só troca o logótipo e esconde o estado (sem salto no topo) */
.site-header.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  transform: translateY(-100%);
  transition: transform var(--duration-motion) var(--ease), background-color var(--duration-fade) var(--ease);
}
.site-header.is-sticky.is-visible { transform: none; }
/* Ao passar a fixo entra já escondido, sem transição (senão via-se a deslizar para fora) */
.site-header.is-instant { transition: none; }
.site-header.is-sticky .opening-status { opacity: 0; visibility: hidden; }
.site-header__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
}
@media (min-width: 64em) { .site-header__inner { padding-block: var(--space-4); } }

.site-header__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); flex: none; }

/* O anel de foco segue o círculo do logótipo */
.site-logo { position: relative; display: inline-flex; border-radius: var(--radius-round); }
.site-logo img { display: block; width: 5rem; height: 5rem; border-radius: var(--radius-round); }   /* 80px em telemóvel (chat 17; antes 64px) */
@media (min-width: 64em) { .site-logo__full { width: 7.5rem !important; height: 7.5rem !important; } }
/* Os dois logótipos ocupam o mesmo canto; a troca é um fade */
.site-logo img { transition: opacity var(--duration-fade) var(--ease); }
.site-logo .site-logo__compact { position: absolute; top: 0; left: 0; width: 3.5rem; height: 3.5rem; opacity: 0; }
.site-header.is-sticky .site-logo__full { opacity: 0; }
.site-header.is-sticky .site-logo__compact { opacity: 1; }
/* Ao passar a fixo (já escondido), o logótipo completo e o estado somem sem fade:
   com o fade ficavam 250ms à vista no topo do ecrã, por baixo do cabeçalho escondido */
.site-header.is-instant .site-logo img, .site-header.is-instant .opening-status { transition: none; }
/* No fixo, o anel de foco segue o logótipo compacto */
.site-header.is-sticky .site-logo:focus-visible { outline: none; box-shadow: none; }
.site-header.is-sticky .site-logo:focus-visible .site-logo__compact { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); box-shadow: 0 0 0 var(--focus-offset) var(--color-bg); }

/* Estado do museu (componente opening_hours) */
.opening-status { display: none; margin: 0; align-items: center; gap: var(--space-2); font-size: var(--text-body-md); line-height: 1.2; transition: opacity var(--duration-fade) var(--ease), visibility var(--duration-fade); }
.opening-status__dot { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-round); background: var(--color-error); flex: none; }
.opening-status--open .opening-status__dot { background: var(--color-success); }
/* «Falta X»: no lugar do estado nos últimos 45 minutos (chat 38; antes, a seguir ao estado) */
/* Telemóvel (tema 0.30.4): um só estado no HTML, a seguir ao logótipo. O bloco da marca
   deixa de ser caixa (display: contents) e o estado passa para uma linha própria por
   baixo da barra, com a largura toda; o espaço da linha é o gap da barra (16px), como
   o padding da cópia que havia antes */
@media (max-width: 63.99em) {
  .site-header__inner { flex-wrap: wrap; }
  .site-header__brand { display: contents; }
  .site-header__brand > .site-logo { flex: none; }
  .opening-status { display: flex; order: 1; flex: 0 0 100%; align-items: flex-start; }
  .opening-status .opening-status__dot { margin-top: 0.35em; }
}
@media (min-width: 64em) {
  /* Desktop: por baixo do logótipo, sem aumentar a altura do cabeçalho (o topo da página inicial fica com o espaço; revisto no lab 8) */
  .site-header__brand { position: relative; }
  .opening-status { display: flex; position: absolute; top: 100%; left: 0; margin-top: var(--space-4); white-space: nowrap; }
}
/* Páginas com o aviso (lab 10; interruptor do Page header, decisões 2.42): o estado fica por baixo do logótipo; o topo da página desce para as migalhas não ficarem por baixo dele */
@media (min-width: 64em) { body:has(.site-header .opening-status) :is(.page-header:not(.page-header--hp), .country__head) { padding-top: var(--space-5); } }

.site-header__tools { display: flex; align-items: center; gap: var(--space-4); }
/* Desktop: os itens ocupam a metade direita, com o mesmo espaço entre todos, como no site atual */
@media (min-width: 64em) {
  .site-header__tools {
    display: grid;
    flex: 0 1 50%;
    grid-template-columns: repeat(6, auto);
    justify-content: space-between;
    align-items: center;
    column-gap: var(--space-3);
    padding-top: var(--space-2);
  }
  .site-header__tools > .mobile-nav { display: none; }
}

/* Navegação principal de desktop */
.primary-nav { display: none; }
@media (min-width: 64em) {
  .primary-nav { display: grid; grid-column: span 3; grid-template-columns: subgrid; }
  .primary-nav__list { display: grid; grid-column: span 3; grid-template-columns: subgrid; align-items: center; }
}
.primary-nav__list { margin: 0; padding: 0; list-style: none; }
.primary-nav__item { position: relative; }
.primary-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  padding: 0 var(--space-2);
  border: 0;
  border-radius: 0;
  color: var(--color-text);
  background: none;
  font-family: var(--font-heading);
  font-size: var(--text-nav);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--duration-fade) var(--ease);
}
.primary-nav__trigger:hover, .primary-nav__trigger[aria-expanded="true"] { color: var(--color-link-hover); }
.primary-nav__item--current > .primary-nav__trigger .primary-nav__label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.4em; }
/* Marca do site atual: traço vertical pequeno a seguir ao texto */
.primary-nav__mark { width: 2px; height: 6px; background: currentColor; flex: none; transform: translateY(1px); }

/* Submenu: uma caixa por opção, no tema contrário ao da página, como no site atual */
.primary-nav__submenu {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  display: grid;
  gap: var(--space-1);
  min-width: 18rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.primary-nav__submenu[hidden] { display: none; }
.primary-nav__submenu .submenu-link { gap: 0; background: var(--color-bg); border-inline-start: 4px solid transparent; transition: color var(--duration-fade) var(--ease), background-color var(--duration-fade) var(--ease); }
/* Hover (como no site atual): fundo de superfície e um traço que entra à frente do texto.
   Página atual: só o filete vertical de 4px à esquerda, cinzento (--color-text-subtle; C2, WCAG 1.4.11) */
.primary-nav__submenu .submenu-link::before { content: ""; flex: none; width: 0; height: var(--border-width); margin-inline-end: 0; background: currentColor; }
@media (hover: hover) {
  .primary-nav__submenu a.submenu-link:hover { background: var(--color-surface); color: var(--color-text); text-decoration: none; }
  .primary-nav__submenu a.submenu-link:hover::before { width: var(--space-3); margin-inline-end: var(--space-2); }
}
.primary-nav__submenu .submenu-link[aria-current="page"] { border-inline-start-color: var(--color-text-subtle); }
@media (prefers-reduced-motion: no-preference) {
  .primary-nav__submenu .submenu-link::before { transition: width var(--duration-fade) var(--ease), margin var(--duration-fade) var(--ease); }
}
/* Foco por fora da caixa, na cor de foco da página */
.primary-nav__submenu .submenu-link:focus-visible { position: relative; z-index: 1; outline: var(--focus-width) solid var(--focus-on-inverse); outline-offset: 2px; box-shadow: none; }

.submenu-link, .drawer-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-subnav);
  line-height: 1.2;
  text-decoration: none;   /* chat 18: submenu sem maiúsculas, como o painel de telemóvel */
  transition: color var(--duration-fade) var(--ease);
}
.submenu-link { padding: 0 var(--space-4); border-inline-start: 2px solid transparent; }
/* Hover só com rato: num ecrã de toque o estado ficava preso depois do toque */
@media (hover: hover) {
  a.submenu-link:hover, a.drawer-nav__link:hover { color: var(--color-link-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
}
/* A página atual não é ligação (como nas migalhas): sem href, sem foco, sem hover */
span.submenu-link, span.drawer-nav__link { cursor: default; }
.submenu-link[aria-current="page"], .drawer-nav__link[aria-current="page"] { border-inline-start-color: var(--color-text-subtle); }
.drawer-nav__link { padding-inline-start: var(--space-3); border-inline-start: 2px solid transparent; text-transform: none; }
.submenu-link .icon-sm, .drawer-nav__link .icon-sm { flex: none; }

/* Seletor de língua */
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--target-min);
  min-height: var(--target-min);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-nav);
  letter-spacing: var(--ls-nav);
  text-decoration: none;
  transition: color var(--duration-fade) var(--ease);
}
.lang-switch:hover { color: var(--color-link-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.4em; }
.lang-switch span[aria-hidden] { margin-inline-end: -0.3em; }

/* Pesquisa: só em desktop na barra; em telemóvel está no painel do menu */


/* Botões com texto por baixo do ícone (Menu e Fechar), como no site atual */
.stack-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: var(--icon-button);
  min-height: var(--icon-button);
  padding: 0;
  border: 0;
  color: var(--color-text);
  background: none;
  font-family: var(--font-body);
  font-size: var(--text-min);   /* 14px (C9; antes 12px) */
  line-height: 1;
  letter-spacing: var(--ls-body);
  cursor: pointer;
  transition: color var(--duration-fade) var(--ease);
}
/* Hover (chat 22): o dos botões de ícone, contorno de 1px no círculo, só com rato. O texto e o ícone não mudam de cor
   (antes: cor de hover das ligações, amarela no tema escuro, nunca decidida). Por dentro (inset), para o círculo não crescer. */
.stack-button .icon-burger, .stack-button .icon-close { transition: box-shadow var(--duration-fade) var(--ease); }
@media (hover: hover) { .stack-button:hover .icon-burger, .stack-button:hover .icon-close { box-shadow: inset 0 0 0 var(--border-width) var(--color-border); } }
/* Botão Menu em telemóvel: o hambúrguer num círculo de 48px com o fundo dos botões de ícone, alinhado com o botão do tema;
   o texto fica por baixo, fora da altura do botão, para o círculo ficar ao centro da linha */
.menu-toggle { position: relative; justify-content: flex-start; }
/* O texto fica dentro do botão: o anel de foco apanha o círculo e o texto juntos */
.menu-toggle .icon-burger { box-sizing: border-box; width: var(--icon-button); height: var(--icon-button); padding: 0.75rem 0.5rem; border-radius: var(--radius-round); background: var(--icon-button-bg); }
.menu-toggle > span { white-space: nowrap; }
/* Largura fixa: "Fechar" é mais largo que "Menu" e o círculo não pode mexer ao trocar */
.menu-toggle { width: 3.5rem; }
@media (max-width: 23.99em) { .menu-toggle .icon-burger { width: var(--target-min); height: var(--target-min); padding: 0.625rem 0.375rem; } .menu-toggle { min-width: var(--target-min); min-height: var(--target-min); } }
/* Telemóvel: EN depois do botão Menu */
/* Telemóvel: tema, EN e Menu, pela ordem do HTML (a mesma de desktop: tema, EN, lupa) */
/* O nav de telemóvel nasce `hidden`: sem CSS não aparece no desktop (tema 0.30.7).
   A regra de telemóvel tem de ganhar ao `.page [hidden]` (a classe `page` está no body das páginas) */
.mobile-nav { display: flex; }
@media (max-width: 63.99em) { .site-header .site-header__tools > .mobile-nav { display: flex; } }
@media (min-width: 64em) { .mobile-nav { display: none; } }
/* Menu / Fechar: o mesmo botão, no mesmo sítio, por cima do painel aberto (padrão do site SCML, Fix 01) */
.menu-toggle { z-index: 2; }
.menu-toggle .icon-close { display: none; box-sizing: border-box; width: var(--icon-button); height: var(--icon-button); padding: 0.75rem; border-radius: var(--radius-round); background: var(--icon-button-bg); }
.menu-toggle[aria-expanded="true"] .icon-burger { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }
@media (max-width: 23.99em) { .menu-toggle .icon-close { width: var(--target-min); height: var(--target-min); padding: 0.625rem; } }
@media (max-width: 23.99em) { .site-header__tools .icon-button { width: var(--target-min); height: var(--target-min); } }

/* ---------- Modais ---------- */
dialog { color: var(--color-text); }

/* Painel do menu de telemóvel: ecrã inteiro, por cima do cabeçalho, tema inverso ao da página.
   O topo (logótipo pequeno; o botão Fechar fica por cima, no lugar do Menu) não se mexe; só o corpo faz scroll.
   Largura de 100vw: cobre também a faixa da barra de scroll */
.mobile-panel {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  color: var(--color-text);
  background: var(--color-bg);
}
.mobile-panel[hidden] { display: none; }
.mobile-panel .container { padding-inline-end: calc(var(--page-margin) + var(--scrollbar-width, 0px)); }
/* Topo com a altura do cabeçalho: logótipo pequeno ao centro da linha dos botões */
.mobile-panel__top { flex: none; padding-block: var(--space-3); }
.mobile-panel__top .container { display: flex; align-items: flex-start; }
.mobile-panel__logo { display: inline-flex; border-radius: var(--radius-round); }
.mobile-panel__logo img { display: block; width: 4rem; height: 4rem; border-radius: var(--radius-round); }

.mobile-panel__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* Pesquisa por baixo do topo: etiqueta visível, campo e, à frente dele, a lupa e a borracha (SCML Fix 03) */
.search-box { min-width: 0; }
.search-box__label { display: block; margin-bottom: var(--space-2); font-size: var(--text-body); line-height: var(--lh-tight); }
.search-box__row { display: flex; align-items: center; gap: var(--space-2); }
.search-box__input { flex: 1 1 auto; min-width: 0; height: var(--icon-button); padding: 0 var(--space-3); border: 0; border-bottom: var(--border-width) solid var(--color-text-subtle); border-radius: 0; color: var(--color-text); background: var(--icon-button-bg); font-family: var(--font-body); font-size: var(--text-body); letter-spacing: var(--ls-body); }
.search-box__input:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); box-shadow: 0 0 0 var(--focus-offset) var(--color-bg); }
.search-box__row .icon-button { flex: none; }
.search-clear[hidden] { display: none; }
/* Mais espaço entre o topo e a pesquisa e entre a pesquisa e o menu (chat 17) */
.mobile-panel__body > .container { padding-top: var(--space-5); }
.mobile-panel__menu { padding-block: var(--space-5) var(--space-6); }
/* As ligações estão encostadas umas às outras (44px cada): o anel de foco fica por dentro, para não tapar a vizinha */
.drawer-nav__link:focus-visible { outline-offset: calc(-1 * var(--focus-width)); box-shadow: none; }
.drawer-nav__groups { margin: 0; padding: 0; list-style: none; }
/* Rótulo do grupo à esquerda, ligações à direita, filete entre grupos */
.drawer-nav__groups > li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--space-3);
  align-items: start;
  padding-block: var(--space-3);
  border-top: var(--border-width) solid var(--color-divider);
}
.drawer-nav__groups > li:first-child { border-top: 0; }
.drawer-nav__label {
  margin: 0;
  min-height: var(--target-min);
  display: flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: var(--text-nav);
  letter-spacing: var(--ls-nav);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.drawer-nav__list { margin: 0; padding: 0; list-style: none; }

/* Formulário de pesquisa (o mesmo em desktop e no painel de telemóvel) */
.search-form__label { display: block; margin-bottom: var(--space-2); font-size: var(--text-body-md); line-height: 1.2; }
.search-form__row { display: flex; align-items: center; gap: var(--space-2); }
.search-form__input {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--icon-button);
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--text-body);
  letter-spacing: var(--ls-body);
}
.search-form__input:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 var(--focus-offset) var(--color-bg);
}
.search-form .icon-button { flex: none; }


/* Botões de ícone sem fundo */
.icon-button--ghost { background: transparent; }
.search-toggle { display: none; }
@media (min-width: 64em) { .search-toggle { display: inline-flex; } }

/* Pesquisa de desktop: modal em ecrã inteiro, fundo branco, resultados ao escrever */
.search-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--color-text);
  background: var(--color-bg);
}
/* Entra a deslizar da direita e sai para a direita; com movimento reduzido só aparece e desaparece */
/* O fundo do modal desliza com ele e cobre também a faixa da barra de scroll */
.search-modal::backdrop { background: var(--color-bg); }
/* Painel de telemóvel e pesquisa entram pela direita e saem pela direita */
.mobile-panel:not([hidden]), .search-modal[open] { animation: panel-in var(--duration-motion) var(--ease); }
.mobile-panel.is-closing, .search-modal.is-closing { animation: panel-out var(--duration-motion) var(--ease) forwards; }
.search-modal[open]::backdrop { animation: backdrop-in var(--duration-motion) var(--ease); }
.search-modal.is-closing::backdrop { animation: backdrop-out var(--duration-motion) var(--ease) forwards; }
@keyframes panel-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes panel-out { from { transform: none; } to { transform: translateX(100%); } }
/* O fundo acompanha por recorte (um deslocamento deixava a faixa da barra de scroll à vista) */
@keyframes backdrop-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes backdrop-out { from { clip-path: inset(0); } to { clip-path: inset(0 0 0 100%); } }
.search-modal__inner { position: relative; padding-block: var(--space-6); }
/* O X fica na posição exata da lupa que abriu o modal (coordenadas dadas por JS) */
/* X com fundo, 64px com ícone de 40px (2.30) */
.search-modal__close { position: absolute; z-index: 1; top: var(--space-4); right: var(--page-margin); width: var(--space-7); height: var(--space-7); }
.search-modal__close .icon { width: 2.5rem; height: 2.5rem; }
.search-modal__form { max-width: 60rem; margin-inline: auto; }
.search-modal__label { display: block; margin-bottom: var(--space-3); font-family: var(--font-heading); font-size: var(--text-h2); line-height: var(--lh-heading); }
/* Campo e, à frente dele, a lupa e a borracha, separadas e sempre à vista (como no painel de telemóvel) */
.search-modal__row { display: flex; align-items: center; gap: var(--space-3); }
.search-modal__button { flex: none; width: var(--space-7); height: var(--space-7); }
.search-modal__input {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--space-7);
  padding: 0 var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: 0;
  color: var(--color-text);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-h3);
  letter-spacing: var(--ls-body);
}
.search-modal__input:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); box-shadow: 0 0 0 var(--focus-offset) var(--color-bg); }
.search-modal__hint { margin: var(--space-3) 0 0; font-size: var(--text-body-md); color: var(--color-text-muted); }
.search-results { max-width: 60rem; margin: var(--space-5) auto 0; }
.search-results__status { margin: 0 0 var(--space-4); font-size: var(--text-body-md); }
.search-results__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5) var(--grid-gap); margin: 0; padding: 0; list-style: none; }
.search-result { display: grid; gap: var(--space-2); color: var(--color-text); text-decoration: none; }
.search-result__thumb { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; background: var(--color-surface); }
.search-result__thumb--empty { display: flex; align-items: center; justify-content: center; padding: var(--space-3); color: var(--color-text-muted); font-size: var(--text-min); text-align: center; }
.search-result__type { font-size: var(--text-body-md); color: var(--color-text-subtle); }
.search-result__title { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--lh-heading); transition: color var(--duration-fade) var(--ease); }
.search-result:hover .search-result__title { color: var(--color-link-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.search-results__all { margin-top: var(--space-6); }

/* ---------- Rodapé ---------- */
.site-footer { margin-top: var(--space-section); border-top: var(--border-width) solid var(--color-divider); }
/* Abaixo de 1024px o filete respeita as margens laterais da página (revisto no lab 8) */
@media (max-width: 63.99em) {
  .site-footer { border-top: 0; }
  .site-footer::before { content: ""; display: block; height: var(--border-width); margin-inline: var(--page-margin); background: var(--color-divider); }
}
.site-footer__main { display: grid; gap: var(--space-6); padding-top: var(--space-6); }
@media (min-width: 64em) { .site-footer__main { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); } }
.site-footer__entity { display: grid; gap: var(--space-6); align-content: start; justify-items: start; }
@media (min-width: 64em) { .site-footer__entity { grid-column: 1 / span 7; } .site-footer__marks { grid-column: 9 / span 4; justify-self: end; } }
.footer-logo { width: 12rem; height: auto; }
.footer-contacts { font-style: normal; }
.footer-contacts__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.footer-contacts__name { font-size: var(--text-body-md); }
.footer-contacts__big { font-family: var(--font-heading); font-size: var(--text-h3); line-height: var(--lh-tight); }
.footer-contacts__note { margin: var(--space-3) 0 0; font-size: var(--text-body-md); color: var(--color-text-muted); }
.site-footer__marks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.footer-mark { display: inline-flex; }
.footer-mark img { height: auto; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6) var(--space-5);
  padding-block: var(--space-6);
}
.legal-nav__list { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin: 0; padding: 0; list-style: none; }
.legal-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  font-family: var(--font-heading);
  font-size: var(--text-nav);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
}
.site-footer__copyright { margin: 0; font-size: var(--text-body-md); }
.site-footer__end { display: flex; align-items: center; gap: var(--space-4); }
.site-footer__end .icon-button { flex: none; }

/* ---------- Corpo do lab (não é componente do tema) ---------- */
main:focus { outline: none; }
.prose { max-width: var(--measure); }
kbd { font-family: var(--font-body); font-size: var(--text-body-md); padding: 0 var(--space-1); border: var(--border-width) solid color-mix(in srgb, var(--color-text) 35%, transparent); border-radius: 4px; }

/* Atributo hidden vence o display dos componentes */
.piece [hidden], .lightbox [hidden] { display: none; }

/* ---------- Migalhas de pão: traço antes de cada nível ---------- */
.breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--breadcrumb-gap); margin: 0; padding: 0; list-style: none; }
.breadcrumbs__item { display: flex; align-items: center; gap: var(--breadcrumb-gap); min-width: 0; }
.breadcrumbs__item::before { content: ""; width: 1.125rem; height: 2px; background: currentColor; flex: none; }
.breadcrumbs__link, .breadcrumbs__current {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-tight);
}
.breadcrumbs__link {
  /* 0.22.0 (chat 34): alvo com 44px de largura também em rótulos curtos («Início», «Blog») */
  min-width: var(--target-min);
  justify-content: center;
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.5em;
  transition: color var(--duration-fade) var(--ease), text-decoration-thickness var(--duration-fade) var(--ease);
}
.breadcrumbs__link:hover { color: var(--color-link-hover); }
/* A página atual não é ligação: fica a cinzento (revisto no lab 7) */
.breadcrumbs__current { color: var(--color-text-subtle); }
.breadcrumbs__current { display: block; padding-block: 0.9rem; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.breadcrumbs__more { display: none; }
/* Telemóvel: reticências e os dois níveis anteriores, sempre numa linha.
   Os níveis que saem do ecrã continuam a ser lidos por leitores de ecrã. */
@media (max-width: 47.99em) {
  /* O recorte (overflow) cortava o anel de foco: a lista ganha por dentro o espaço do anel
     (foco + folga) e devolve-o em margem negativa, para nada mudar de sítio */
  .breadcrumbs__list { flex-wrap: nowrap; overflow: hidden; margin: calc(-1 * var(--focus-width) - var(--focus-offset)); padding: calc(var(--focus-width) + var(--focus-offset)); }
  /* O «…» nasce `hidden` (sem CSS não aparece; tema 0.30.7): esta regra tem de ganhar ao `.page [hidden]` */
  .breadcrumbs .breadcrumbs__list > .breadcrumbs__more { display: flex; align-items: center; min-height: var(--target-min); flex: none; font-size: var(--text-body-md); letter-spacing: var(--ls-body); }
  .breadcrumbs__item:nth-last-child(n+4), .breadcrumbs__item:last-child {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .breadcrumbs__item { flex: 0 1 auto; }
  /* O nível mais antigo nunca passa de 45% da linha; quem corta primeiro é o pai */
  .breadcrumbs__item:nth-last-child(3) { flex-shrink: 0; max-width: 45%; }
  .breadcrumbs__link { display: block; min-width: var(--target-min); padding-block: 0.9rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; }
}

/* ---------- Título e número de inventário ---------- */
.piece__title { margin: var(--space-5) 0 0; font-size: var(--text-h1-entry); }
@media (min-width: 64em) { .piece__title { margin-top: var(--space-6); } }
.badge {
  display: inline-block;
  margin: var(--space-3) 0 0;
  padding: var(--space-1) var(--space-2);
  color: var(--color-on-accent);
  background: var(--color-accent);
  font-size: var(--text-body-md);
  line-height: 1.4;
  letter-spacing: var(--ls-body);
}


.block-title { margin: 0 0 var(--space-heading); }
/* Alinhamento do título (campo comum, decisões 2.1). O título está limitado a
   --measure: ao centro e à direita a caixa também se desloca. */
.block-title--center { margin-inline: auto; text-align: center; }
.block-title--right { margin-left: auto; text-align: right; }

/* ---------- Divulgação: descrição do vídeo, transcrição do áudio ---------- */
.disclosure__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  font-family: var(--font-body);
  font-size: var(--text-button);
  font-weight: var(--weight-medium);
  letter-spacing: 0;   /* chat 18: maiúsculas em Montserrat a 0, como os botões */
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.disclosure__summary::-webkit-details-marker { display: none; }
.disclosure__label { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.4em; transition: text-decoration-thickness var(--duration-fade) var(--ease), color var(--duration-fade) var(--ease); }
.disclosure__summary:hover .disclosure__label { color: var(--color-link-hover); }
.disclosure__icon { width: 2.5rem; height: 2.5rem; }
.disclosure.is-expanded .disclosure__icon { transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) { .disclosure__icon { transition: transform var(--duration-motion) var(--ease); } }
.disclosure__body { max-width: var(--measure); padding-top: var(--space-3); overflow: hidden; }


/* ---------- Parallax ----------
   Só imagens, só sem movimento reduzido, só com animações ligadas ao scroll.
   A linha de tempo é ligada pelo JS; as animações e os valores vivem aqui. */
/* Sentido do scroll: ao descer a página, a imagem desce dentro da moldura (revisto no lab 8) */
@keyframes parallax-drift {
  from { transform: translateY(calc(var(--parallax-drift) * var(--drift, 0) * -1)); }
  to { transform: translateY(calc(var(--parallax-drift) * var(--drift, 0))); }
}
.icon.is-off { display: none; }

/* Botões sem serifa (decisão do lab 3: botões e divulgações em Montserrat) */
.button { font-family: var(--font-body); }
/* Botões a 16px (C8): um rótulo longo que não cabe na largura ("Conhecer o colecionador" a 320px) passa a duas linhas, em vez de criar scroll horizontal */
.button-row .button { max-width: 100%; padding-block: var(--space-2); white-space: normal; text-align: center; }
.button-row .button .icon-sm { flex: none; }

/* ---------- Rodapé, igual ao atual ---------- */
.site-footer__main { display: grid; gap: var(--space-7); padding-top: var(--space-8); }
/* Ordem no DOM e no Tab: logótipo e contactos, selo, livro de reclamações */
@media (min-width: 64em) { .site-footer__main { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--grid-gap); } .site-footer__entity { grid-column: 1; grid-row: 1; } .site-footer__seal { grid-column: 2; grid-row: 1 / span 2; align-self: center; } .site-footer__complaints { grid-column: 1; grid-row: 2; } }
.site-footer__entity { display: grid; justify-items: start; gap: 0; }
.site-footer .footer-logo { width: 12.5rem; }
.footer-contacts { margin-top: var(--space-7); }
.footer-contacts__list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.footer-contacts__big { font-family: var(--font-heading); font-size: var(--text-footer-contact); line-height: var(--lh-tight); }
.footer-contacts__link { color: var(--color-link); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; transition: color var(--duration-fade) var(--ease); }
.footer-contacts__link:hover { color: var(--color-link-hover); }
.footer-contacts__note { margin: var(--space-3) 0 0; font-size: var(--text-body-md); font-weight: 400; color: var(--color-text); }
.site-footer__seal { justify-self: start; }
.site-footer__complaints { justify-self: start; }
@media (min-width: 64em) { .site-footer__seal { justify-self: end; } }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5) var(--space-6); margin-top: var(--space-7); padding-block: 0 var(--space-7); }
.legal-nav__list { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); margin: 0; padding: 0; list-style: none; }
@media (max-width: 47.99em) { .legal-nav__list { flex-direction: column; align-items: flex-start; } }
.legal-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--color-link);
  font-family: var(--font-heading);
  font-size: var(--text-nav);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  /* Sublinhada como as outras ligações em texto (chat 18, C16) */
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--duration-fade) var(--ease);
}
@media (hover: hover) { .legal-nav__link:hover { color: var(--color-link-hover); } }
/* Telemóvel: ligações empilhadas a 44px, encostadas; o anel de foco fica por dentro, para não tapar a vizinha */
@media (max-width: 47.99em) { .legal-nav__link:focus-visible { outline-offset: calc(-1 * var(--focus-width)); box-shadow: none; } }
.site-footer__end { display: flex; align-items: center; gap: var(--space-4); }
.site-footer__copyright { margin: 0; font-family: var(--font-heading); font-size: var(--text-body-md); text-transform: uppercase; }
/* Voltar ao topo fixo em todas as larguras (revisto no lab 7), só depois de descer um ecrã.
   Desktop: na vertical da lupa, a 64px do fundo. Abaixo de 1024px: no canto, a 24px do fundo. */
.back-to-top {
  position: fixed;
  z-index: 15;
  right: calc(max(0px, (100vw - var(--container-max)) / 2) + var(--page-margin));
  bottom: var(--space-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-fade) var(--ease), visibility var(--duration-fade), background-color var(--duration-fade) var(--ease), border-color var(--duration-fade) var(--ease);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; }
.site-footer__end { padding-inline-end: calc(var(--icon-button) + var(--space-4)); }
@media (min-width: 64em) { .back-to-top { bottom: var(--space-7); } }

/* Cabeçalho fixo: fundo a 90%, só com a altura do logótipo compacto e o mesmo espaço em cima e em baixo */
.site-header.is-sticky { background: var(--header-sticky-bg); }
@media (max-width: 63.99em) { .site-header.is-sticky { background: var(--color-bg); } }
/* O menu fica sempre na mesma posição: centrado na faixa do logótipo compacto, no cabeçalho normal e no fixo */
.site-header { --logo-compact: 3rem; }
@media (min-width: 64em) { .site-header { --logo-compact: 3.5rem; } }
.site-logo .site-logo__compact { width: var(--logo-compact); height: var(--logo-compact); }
.site-header__tools, .site-header.is-sticky .site-header__tools { align-self: flex-start; min-height: var(--logo-compact); padding-top: 0; align-items: center; align-content: center; }
.site-header.is-sticky .site-logo__full { position: absolute; top: 0; left: 0; }
.site-header.is-sticky .site-logo__compact { position: static; }

/* ---------- Data da última atualização (requisito das checklists), em todas as páginas ---------- */
.page-updated { display: flex; justify-content: flex-end; margin-top: calc(2 * var(--space-section)); }  /* revisto no lab 8: o dobro do ritmo entre blocos */
.page-updated__box {
  display: inline-block;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  color: var(--color-text);
  background: var(--color-surface);
  font-size: var(--text-body-md);
  line-height: 1.4;
  letter-spacing: var(--ls-body);
}
/* Texto "ATUALIZADO | 19 . 10 . 2026" (chat 18, R8): a barra é decorativa; o leitor de ecrã ouve "Atualizado: 19 de outubro de 2026" */
.page-updated__label { letter-spacing: 0; text-transform: uppercase; }

/* ---------- Zoom das imagens no hover e no foco: uma só regra para todo o site ----------
   Imagem principal da peça, galerias, cartões de peças, de países e das listagens.
   Só a imagem se aproxima, dentro da moldura; o cartão nunca se mexe. */
@media (prefers-reduced-motion: no-preference) {
  .piece__open img, .gallery__open img, .piece-card__media img, .country-card__media img, .listing-card__media img, .publication-card__media img, .feature__media img { transition: transform var(--duration-hover) var(--ease-hover); }
  .piece__open:hover img, .piece__open:focus-visible img,
  .gallery__open:hover img, .gallery__open:focus-visible img,
  .piece-card:hover .piece-card__media img, .piece-card:focus-within .piece-card__media img,
  .country-card:hover .country-card__media img, .country-card:focus-within .country-card__media img,
  .listing-card:hover .listing-card__media img, .listing-card:focus-within .listing-card__media img,
  .publication-card:hover .publication-card__media img, .publication-card:focus-within .publication-card__media img,
  .feature__media:hover img, .feature:has(.feature__text:hover) .feature__media img, .feature:focus-within .feature__media img { transform: scale(var(--hover-zoom)); }
}
/* ---------- Lightbox: imagem, ficha da peça e vídeo ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--color-text);
  background: var(--color-bg);   /* opaco: a peça vê-se sobre preto, sem a página por trás */
  overflow: hidden;
}
.lightbox::backdrop { background: transparent; }
/* Com a lightbox aberta (opaca, ecrã inteiro) a página por trás não se pinta */
html:has(.lightbox[open]) body > :not(.lightbox):not(script) { visibility: hidden; }
.lightbox[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "close close" "content content" "controls controls" "prev next";
  gap: var(--space-3);
  padding: var(--space-3) var(--page-margin);
  animation: lightbox-in var(--duration-fade) var(--ease);
}
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox__close { grid-area: close; justify-self: end; }
.lightbox__prev { grid-area: prev; justify-self: start; }
.lightbox__next { grid-area: next; justify-self: end; }
.lightbox__content { grid-area: content; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); min-height: 0; }
.lightbox__controls { grid-area: controls; }
@media (min-width: 48em) {
  .lightbox[open] {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "close close close" "prev content next" "controls controls controls";
    column-gap: var(--space-4);
    padding-block: var(--space-4);
  }
  .lightbox__prev, .lightbox__next { align-self: center; }
  .lightbox__content { flex-direction: row; }
}
.lightbox .icon-button { width: var(--media-control); height: var(--media-control); }

/* Imagem */
.lightbox__figure { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; min-height: 0; max-height: 100%; margin: 0; }
.lightbox__img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 15rem); object-fit: contain; }
.lightbox__footer { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-body-md); color: var(--color-text-muted); }
.lightbox__footer:empty { display: none; }
@media (min-width: 48em) { .lightbox__img { max-height: calc(100dvh - 10rem); } }

/* Ficha da peça ao lado da imagem (abaixo em telemóvel) */
.lightbox__panel { flex: none; display: grid; gap: var(--space-3); width: 100%; max-width: var(--measure); }
.lightbox__panel-title { margin: 0; font-family: var(--font-heading); font-size: var(--text-h3); line-height: var(--lh-heading); }
.lightbox__panel-details { margin: 0; color: var(--color-text-muted); white-space: pre-line; }
.lightbox__content--panel .lightbox__img { max-height: 45dvh; }
@media (min-width: 48em) {
  .lightbox__panel { width: 20rem; }
  .lightbox__content--panel .lightbox__img { max-height: calc(100dvh - 10rem); }
}

/* Vídeo */
.lightbox__video { width: min(100%, calc((100dvh - 14rem) * 16 / 9)); aspect-ratio: 16 / 9; background: var(--neutral-0); }
.lightbox__video iframe, .lightbox__video video { display: block; width: 100%; height: 100%; border: 0; }
.lightbox__fallback { margin: 0; max-width: var(--measure); text-align: center; }

/* Consentimento para os cookies do YouTube */
.lightbox__consent { display: grid; gap: var(--space-4); justify-items: center; max-width: 40rem; padding: var(--space-6) var(--space-4); background: var(--color-surface); text-align: center; }
.lightbox__consent p { margin: 0; }
.lightbox__consent-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-4); }

/* Comandos do leitor: botões nossos, dentro da prisão de foco */
.lightbox__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); }
.lightbox__controls-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); }
.player-control .is-off { display: none; }
.player-control[aria-pressed="true"] { color: var(--color-on-accent); background: var(--color-accent); }
.player-volume { display: inline-flex; align-items: center; gap: var(--space-3); padding-inline-end: var(--space-4); border-radius: var(--radius-pill); background: var(--color-surface); }
.player-volume__range { width: 6rem; accent-color: var(--color-accent); }
.player-volume__range:focus-visible { outline-offset: 6px; }



/* ---------- page_header: migalhas e H1 em destaque (tipo "display") ---------- */
/* Topo de todas as páginas (revisto no lab 7): migalhas logo abaixo do cabeçalho; migalhas → H1 36px, 48px a partir de 1024px */
.page-header { padding-top: 0; }
/* Abaixo de 390px o H1 em destaque desce com a largura do ecrã, de 40px a 390px até 32px a 320px, para "COLECIONADOR" caber (chat 15) */
.page-header__title { margin: var(--space-5) 0 0; max-width: none; font-size: var(--text-h1-hp); text-transform: uppercase; }
@media (max-width: 24.375em) { .page-header__title { font-size: min(var(--text-h1-hp), calc(11.429vw - 0.2857rem)); } }
@media (min-width: 64em) { .page-header__title { margin-top: var(--space-6); } }
/* Tipo "entry": migalhas e H1 em --text-h1, sem maiúsculas (atividade, artigo de blog) */
.page-header--entry .page-header__title { max-width: none; font-size: var(--text-h1); text-transform: none; }
/* Desktop: o H1 vai até meio da página */
@media (min-width: 64em) { .page-header--entry .page-header__title { max-width: 50%; } }
/* Chat 35: H1 dos tipos de conteúdo (atividade, artigo) a 56 - 36; a pesquisa e a declaração ficam no --text-h1 */
.single-activity .page-header--entry .page-header__title, .single-blog_post .page-header--entry .page-header__title { font-size: var(--text-h1-entry); }

/* ---------- Páginas em blocos ---------- */
.page [hidden] { display: none; }

/* ---------- Ritmo vertical: igual à peça, ao país e à coleção ---------- */
/* Espaço acima: o do bloco (campo comum, decisões 2.1), senão o da página
   (`page_spacing`, no <article>, decisões 2.42), senão --space-section.
   --block-space-mobile e --page-space-mobile abaixo de 768px, os outros a partir daí. */
.page > .container > * + * { margin-top: var(--block-space-mobile, var(--page-space-mobile, var(--space-section))); }
@media (min-width: 48em) { .page > .container > * + * { margin-top: var(--block-space, var(--page-space, var(--space-section))); } }

/* As secções com âncora param abaixo do cabeçalho fixo e da barra do índice */
.page-section { scroll-margin-top: calc(var(--header-offset, 0px) + var(--anchors-bar, 0px) + var(--space-4)); }

/* ---------- Botões ---------- */
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
/* Botões no fim de um bloco (página inicial): 48px depois do conteúdo, em todas as larguras */
.button-row--block { margin-top: var(--space-6); }
/* Centrados só a partir de 768px; em telemóvel alinham à esquerda */
@media (min-width: 48em) { .button-row--center { justify-content: center; } }
/* Alinhamento do Buttons à direita (campo da intranet, chat 27) */
@media (min-width: 48em) { .button-row--right { justify-content: flex-end; } }

/* ---------- Ligação com linha (lab 8): texto e linha à frente, sem sublinhado ----------
   "Ver peça" (ligação) e "Loja online" (rótulo do cartão das publicações, decorativo).
   Numa linha própria, sem quebrar o texto; espaçamento entre letras 0, como nos botões.
   Em cartões estreitos a linha encolhe até 16px e, se mesmo assim não couber, passa para baixo.
   No hover a linha cresce até 96px, se houver espaço.
   No hover e no foco a linha passa de 48 a 96px: entra em 450ms com a travagem dos
   botões e volta em 250ms. Sem movimento com movimento reduzido. */
.line-link {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  white-space: nowrap;
  min-height: var(--target-min);
  color: var(--color-link);
  font-size: var(--text-button);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
}
/* A linha parte de 16px e cresce até 48px (96px no hover) conforme o espaço que houver */
/* O espaço da linha maior (96px) fica sempre reservado: a ligação não muda de tamanho
   no hover nem no foco (o anel e a área de clique não mexem). A linha desenhada
   (::before) vai até 48px e cresce até ao fim do espaço reservado. */
.line-link__line { position: relative; display: block; flex: 1 1 var(--space-3); width: var(--space-8); max-width: var(--space-8); height: var(--border-width); }
.line-link__line::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: var(--space-6); max-width: 100%; background: currentColor; }
.line-link:hover .line-link__line::before, .line-link:focus-visible .line-link__line::before,
.publication-card:hover .line-link__line::before, .publication-card:focus-within .line-link__line::before,
.feature:has(.feature__media:hover) .line-link__line::before, .feature__text:hover .line-link__line::before { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .line-link__line::before { transition: width var(--duration-fade) var(--ease); }
  .line-link:hover .line-link__line::before, .line-link:focus-visible .line-link__line::before,
  .publication-card:hover .line-link__line::before, .publication-card:focus-within .line-link__line::before,
  .feature:has(.feature__media:hover) .line-link__line::before, .feature__text:hover .line-link__line::before { transition: width calc(var(--duration-hover) / 2) var(--ease-hover); }
}

/* Telemóvel (chat 17): botões do cabeçalho alinhados pelo topo, o círculo do Menu à altura do botão do tema */
@media (max-width: 63.99em) { .site-header .site-header__tools, .site-header.is-sticky .site-header__tools { align-items: flex-start; } }
@media (max-width: 63.99em) { .site-header__tools > .lang-switch { min-height: var(--icon-button); } }
@media (max-width: 23.99em) { .site-header__tools > .lang-switch { min-height: var(--target-min); } }
/* Abaixo de 384px: 16px entre os botões (com 24px, a 320px passavam a margem da página) */
@media (max-width: 23.99em) { .site-header__tools { gap: var(--space-3); } }
/* Abaixo de 340px o logótipo fica a 64px: a 320px com barra de scroll (zoom a 400%, WCAG 1.4.10) os botões não cabiam com o logótipo a 80px */
@media (max-width: 21.24em) { .site-logo .site-logo__full { width: 4rem; height: 4rem; } }

/* Clique nas outras ligações (chat 35): o mesmo fundo cinzento, na caixa da própria ligação.
   Com «html» à frente: ganha aos hovers de cada componente, também os dos ficheiros dos blocos (o clique também é hover). */
html .breadcrumbs__link:active, html a.submenu-link:active, html a.drawer-nav__link:active, html .lang-switch:active,
html .legal-nav__link:active, html .footer-contacts__link:active, html .anchors__link:active, html .search-result:active .search-result__title,
html .disclosure__summary:active .disclosure__label, html .pagination__page:active, html .pagination__step:active, html .file-card__download:active .file-card__name,
html .cookie-info-link:active {
  color: var(--color-link);
  background-color: var(--color-link-active-bg);
}

/* assets/css/blocks/media.css */
/* Galeria, vídeo e áudio */
/* ---------- Galeria: 4 colunas em masonry com deslocamento ----------
   Sem JS: grelha simples. Com JS: cada imagem entra na coluna mais curta. */
.gallery {
  display: grid;
  grid-template-columns: repeat(var(--gallery-columns), minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}
.gallery.is-masonry { grid-auto-rows: 4px; row-gap: 0; }
/* Linha de tempo da galeria inteira: o parallax das imagens usa-a (R6, chat 17) */
.gallery { view-timeline: --gallery block; }
.gallery__item { margin: 0; }
/* Galeria com título por cima (lab 9): o parallax sobe as imagens até à deriva base;
   o espaço com o valor da deriva impede que passem por cima do título. */
.block-title + .gallery { padding-top: var(--parallax-drift); }
.gallery__item:nth-child(4n+1) { padding-top: var(--gallery-shift-1); }
.gallery__item:nth-child(4n+2) { padding-top: var(--gallery-shift-2); }
.gallery__item:nth-child(4n+3) { padding-top: var(--gallery-shift-3); }
.gallery__item:nth-child(4n+4) { padding-top: var(--gallery-shift-4); }
.gallery__open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: none;
  cursor: zoom-in;
}
.gallery__open img { width: 100%; height: auto; }
/* Ícone de ampliar das galerias (C12): mais pequeno que o da imagem principal, para não tapar a
   imagem; 24px em telemóvel (a 320px a imagem tem 128px), 40px a partir de 768px */
.gallery__open .media-open__zoom { right: var(--space-2); bottom: var(--space-2); width: 1.5rem; height: 1.5rem; }
.gallery__open .media-open__zoom .icon { width: 0.875rem; height: 0.875rem; }
@media (min-width: 48em) {
  .gallery__open .media-open__zoom { right: var(--space-3); bottom: var(--space-3); width: 2.5rem; height: 2.5rem; }
  .gallery__open .media-open__zoom .icon { width: 1.25rem; height: 1.25rem; }
}

/* ---------- Vídeo: fachada com capa; o leitor abre na lightbox ---------- */
.figure-row { display: grid; gap: var(--space-6) var(--grid-gap); }
@media (min-width: 48em) { .figure-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.video-item { display: grid; gap: var(--space-3); align-content: start; }
.video-item .figure { margin: 0; }
.video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.video__cover { position: absolute; inset: 0; }
.video__photo { position: absolute; inset: 0; background-position: center; background-size: cover; }
.video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--play-size);
  height: var(--play-size);
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  color: var(--button-primary-text);
  background: var(--button-primary-bg);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: background-color var(--duration-fade) var(--ease);
  --play-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z'/%3E%3C/svg%3E");
}
.video__play .icon { width: 40%; height: 40%; margin-inline-start: 6%; }
/* Play do site SCML (Bloco 46), sem contorno (chat 18, C18 e R5): o play em contorno enche-se
   da esquerda para a direita no hover e no foco. O ::after é o mesmo play cheio, por cima do SVG
   (40% do botão, deslocado 6% para a direita: começa a 33% e a 30%). */
.video__play::after {
  content: "";
  position: absolute;
  top: 30%;
  left: 33%;
  width: 40%;
  height: 40%;
  background: currentColor;
  -webkit-mask: var(--play-fill) center / contain no-repeat;
  mask: var(--play-fill) center / contain no-repeat;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}
.video__play:focus-visible::after { clip-path: inset(0); }
@media (hover: hover) {
  .video__play:hover { background: var(--button-primary-bg-hover); }
  .video__play:hover::after { clip-path: inset(0); }
}
/* Foco sobre imagem ou vídeo: anel branco com preto dos dois lados, visível sobre qualquer fundo */
.video__play:focus-visible {
  outline: var(--focus-width) solid var(--neutral-100);
  outline-offset: var(--focus-width);
  box-shadow: 0 0 0 calc(3 * var(--focus-width)) var(--neutral-0);
}
/* Cortina como nos botões: entra em 450ms, sai em 250ms. Sem transição com movimento reduzido. */
@media (prefers-reduced-motion: no-preference) {
  .video__play::after { transition: clip-path var(--duration-fade) var(--ease); }
  .video__play:focus-visible::after { transition: clip-path calc(var(--duration-hover) / 2) var(--ease-hover); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .video__play:hover::after { transition: clip-path calc(var(--duration-hover) / 2) var(--ease-hover); }
}


/* ---------- Áudio: comandos próprios, sem caixa ---------- */
.audio { display: grid; gap: var(--space-3); }
.audio__title { margin: 0; font-family: var(--font-heading); font-size: var(--text-h3); line-height: var(--lh-heading); }
.audio__player { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.audio__time { font-size: var(--text-body-md); font-variant-numeric: tabular-nums; color: var(--color-text-muted); white-space: nowrap; }
.audio__progress { flex: 1 1 8rem; min-width: 8rem; }
.audio__volume { display: inline-flex; align-items: center; gap: var(--space-2); }
.audio__volume .range { width: 5rem; }

/* Barra de tempo e de volume: traço fino, cursor redondo */
.range { height: var(--target-min); margin: 0; background: transparent; accent-color: var(--color-accent); cursor: pointer; }
[data-theme="light"] .range { accent-color: var(--color-text); }

/* Galeria: colunas do bloco (campo da intranet, chat 27) a partir de 1024px; 4 por omissão.
   Abaixo, 2 (tokens.css). */
@media (min-width: 64em) {
  .gallery--3 { --gallery-columns: 3; }
  .gallery--5 { --gallery-columns: 5; }
}
/* Galeria de vídeos (decisões 2.29, agora no bloco Gallery): o vídeo do lab 3 em grelha;
   2 a partir de 768px, as colunas do bloco a partir de 1024px */
.video-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--grid-gap); align-items: start; }
@media (min-width: 48em) { .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) {
  .video-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .video-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .video-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Áudio a duas colunas (campo da intranet, chat 27): a partir de 768px */
.audio-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--grid-gap); align-items: start; }
@media (min-width: 48em) { .audio-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* assets/css/blocks/piece.css */
/* Peça: ritmo, título, imagem principal, ficha e colunas de leitura */
/* ---------- Ritmo vertical ----------
   Dentro do topo: migalhas → título 24. O inventário fica na ficha (chat 38).
   Entre blocos (topo, imagem, cada bloco): --space-section, sempre. */
.piece__head { padding-top: 0; }
.piece > .container > * + * { margin-top: var(--space-section); }

/* ---------- Imagem principal e ficha técnica ---------- */
.piece__hero { display: grid; gap: var(--space-4); }
.piece__media { margin: 0; }
.piece__open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: zoom-in;
}
.piece__open { overflow: clip; }
.piece__open img { width: 100%; height: auto; }
/* Indicação visível de que a imagem amplia: não depende do hover */
.piece__zoom, .media-open__zoom {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--media-control);
  height: var(--media-control);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-round);
  color: var(--button-primary-text);
  background: var(--button-primary-bg);
  transition: background-color var(--duration-fade) var(--ease), border-color var(--duration-fade) var(--ease);
}
.piece__open:hover .piece__zoom, .media-open:hover .media-open__zoom, .gallery__open:hover .media-open__zoom { background: var(--button-primary-bg-hover); border-color: var(--button-primary-text); }
.piece__details { margin: 0; font-size: var(--text-body); line-height: var(--lh-body); color: var(--color-text-muted); }
/* Inventário por baixo da ficha, sem badge, a 14px; o mesmo espaço do cartão (chat 38) */
.piece__info > .piece__inventory { margin: 0; font-size: var(--text-body-md); line-height: var(--lh-body); color: var(--color-text-muted); }
.piece__info > .piece__details + .piece__inventory { margin-top: var(--space-2); }


/* ---------- Colunas de leitura: narrativas e áudio começam na coluna 5 ---------- */
.page__block--measure { max-width: var(--measure); }

@media (min-width: 64em) {
  .piece__hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
  .piece__media { grid-column: 5 / span 4; }
  /* A ficha acompanha a imagem enquanto ela está no ecrã */
  .piece__info { grid-column: 9 / span 3; align-self: start; position: sticky; top: calc(var(--header-offset, 0px) + var(--space-6)); margin-top: var(--space-7); transition: top var(--duration-motion) var(--ease); }
  .page__block--measure {
    max-width: none;
    padding-inline-start: calc((100% - 11 * var(--grid-gap)) / 12 * 4 + 4 * var(--grid-gap));
    padding-inline-end: calc((100% - 11 * var(--grid-gap)) / 12 * 3 + 3 * var(--grid-gap));
  }
}

/* assets/css/blocks/country.css */
/* ==========================================================================
   Lab 4 — País. Herda os tokens do lab 1, os componentes do lab 2 e do lab 3.
   Cabeçalho de página "país" (mapa, título, salas, introdução), zonas de
   blocos antes e depois das peças, filtros por categoria e grelha de peças.
   ========================================================================== */

:root {
  --pieces-columns: 2;
  --pieces-column-gap: var(--space-3);   /* 16 */
  --pieces-row-gap: var(--space-5);      /* 36 em todas as larguras (revisto no lab 9; antes 24 em telemóvel) */
}
@media (min-width: 48em) { :root { --pieces-columns: 3; --pieces-column-gap: var(--grid-gap); --pieces-row-gap: var(--space-5); } }
@media (min-width: 64em) { :root { --pieces-columns: 5; --pieces-column-gap: var(--space-6); } }

.country [hidden] { display: none; }

/* ---------- Ritmo vertical: igual à peça ---------- */
.country__head { padding-top: 0; }
.country > .container > * + * { margin-top: var(--space-section); }

/* Migalhas: as reticências só aparecem quando há um nível escondido à frente */
@media (max-width: 47.99em) {
  .breadcrumbs__list:not(:has(> :nth-child(5))) > .breadcrumbs__more { display: none; }
}

/* ---------- Cabeçalho de país: mapa, título com salas, introdução ---------- */
.country__intro-grid { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
@media (min-width: 64em) { .country__intro-grid { margin-top: var(--space-6); } }
.country__map { margin: 0; }
.country__map img { display: block; width: 100%; height: auto; }
/* O mapa é branco sobre transparente: no tema claro passa a preto */
[data-theme="light"] .country__map img { filter: invert(1); }
.country__title { margin: 0; font-size: var(--text-h1-entry); }
.country__intro { max-width: var(--measure); margin-top: var(--space-block); }
.country__intro p { margin: 0; }
/* Chat 36: o espaço entre parágrafos da introdução, como no texto */
.country__intro p + p { margin-top: var(--space-paragraph); }

@media (min-width: 64em) {
  .country__intro-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: 0; align-items: start; }
  .country__map { grid-column: 1 / span 4; grid-row: 1; }
  .country__heading { grid-column: 5 / span 8; grid-row: 1; padding-top: var(--space-4); }
  /* A introdução sobe para dentro da altura do mapa, como no desenho atual */
  .country__intro { grid-column: 7 / span 6; grid-row: 2; margin-top: calc(-1 * var(--space-7)); }
  /* Sem mapa (0.21.0, chat 34): o título fica à esquerda, nas colunas 1 a 6; a introdução não muda */
  .country__intro-grid--no-map .country__heading { grid-column: 1 / span 6; }
}

/* ---------- Filtros: traço entre opções, como as migalhas (sem traço antes da primeira) ----------
   Opção ativa: fundo na cor do texto e texto na cor do fundo (branco e preto no escuro, o
   inverso no claro). Todas as opções têm a mesma margem interior: a fila não mexe ao trocar. */
.filters__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--breadcrumb-gap); margin: 0; padding: 0; list-style: none; }
.filters__item { display: flex; align-items: center; gap: var(--breadcrumb-gap); }
.filters__item::before { content: ""; width: 1.125rem; height: 2px; background: currentColor; flex: none; }
.filters__item:first-child::before { display: none; }
.filters__button {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: 0 var(--space-3);
  border: 0;
  color: var(--color-link);
  background: none;
  font-family: var(--font-body);
  font-size: var(--text-body);
  letter-spacing: var(--ls-body);   /* chat 18: sem maiúsculas, espaçamento do texto */
  line-height: var(--lh-tight);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.5em;
  cursor: pointer;
  transition: color var(--duration-fade) var(--ease), background-color var(--duration-fade) var(--ease), text-decoration-thickness var(--duration-fade) var(--ease);
}
.filters__button:hover { color: var(--color-link-hover); }
.filters__button[aria-pressed="true"] { color: var(--color-bg); background: var(--color-text); text-decoration-line: none; cursor: default; }

/* ---------- Filtros em telemóvel: select (combobox de escolha única do site SCML, Fix 07) ----------
   Abaixo de 768px os botões dão lugar ao select; em desktop ficam os botões.
   Desenho próprio, diferente do índice (chat 17): sem título à vista (como em desktop; o nome do
   grupo fica para leitores de ecrã), campo de 48px com linha cinza de 2px em baixo e chevron à
   direita. Campo e opções com 52px e o mesmo fundo (--color-surface: --neutral-20 / --neutral-90).
   A opção escolhida com o filete cinza de 4px à esquerda, como a página atual no submenu.
   Espaço: 24px do título ao select e 36px do select à grelha. Hover das opções: sublinhado.
   Não fica preso ao topo. */
.filter-select { --filter-row: 3.25rem; }   /* 52px */
@media (max-width: 47.99em) {
  .listing .filters.has-select { margin-top: var(--space-4); }
  .filters.has-select + .listing__grid,
  .filters.has-select + .pieces__grid { margin-top: var(--space-5); }
}
.filter-select { display: none; }
@media (max-width: 47.99em) {
  .filters.has-select .filters__list { display: none; }
  .filters.has-select .filter-select { position: relative; display: block; }
}
.filter-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--filter-row);
  padding: 0 var(--space-3);
  border: 0;
  border-bottom: 2px solid var(--color-text-subtle);
  color: var(--color-text);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--text-body);
  letter-spacing: var(--ls-body);
  text-align: start;
  cursor: pointer;
}
.filter-select__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-select__chevron { flex: none; width: 1.5rem; height: 1.5rem; }
.filter-select__trigger[aria-expanded="true"] .filter-select__chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) { .filter-select__chevron { transition: transform var(--duration-motion) var(--ease); } }
.filter-select__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 3;
  max-height: calc(6 * var(--filter-row));
  overflow-y: auto;
  background: var(--color-surface);
}
.filter-select__list[hidden] { display: none; }
/* A lista recebe o foco ao abrir; o foco à vista é o anel da opção em destaque */
.filter-select__list:focus-visible { outline: none; box-shadow: none; }
.filter-select__option {
  display: flex;
  align-items: center;
  min-height: var(--filter-row);
  padding: 0 var(--space-3);
  border-inline-start: 4px solid transparent;
  color: var(--color-text);
  font-size: var(--text-body);
  line-height: var(--lh-tight);
  cursor: pointer;
}
.filter-select__option + .filter-select__option { border-top: var(--border-width) solid var(--color-divider); }
.filter-select__option[aria-selected="true"] { border-inline-start-color: var(--color-text-subtle); }
@media (hover: hover) { .filter-select__option:hover { text-decoration: underline; text-underline-offset: 0.3em; } }
/* Opção em destaque ao navegar com o teclado: o anel de foco, por dentro */
.filter-select__option.is-active { outline: var(--focus-width) solid var(--color-focus); outline-offset: calc(-1 * var(--focus-width)); }

/* ---------- Grelha de peças ---------- */
.pieces__grid {
  display: grid;
  grid-template-columns: repeat(var(--pieces-columns), minmax(0, 1fr));
  column-gap: var(--pieces-column-gap);
  row-gap: var(--pieces-row-gap);
  align-items: start;
  margin: var(--space-block) 0 0;
  padding: 0;
  list-style: none;
}
.piece-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "media" "title" "details" "inventory";
  align-content: start;
}
.piece-card__media { grid-area: media; margin: 0; overflow: hidden; }
/* Hover 3D: regra partilhada no CSS do lab 3 (só a imagem se mexe; o cartão nunca) */
.piece-card__media img { display: block; width: 100%; height: auto; }
.piece-card__title { grid-area: title; margin: var(--space-3) 0 0; font-family: var(--font-body); letter-spacing: var(--ls-body); font-size: var(--text-body-xl); }
.piece-card__link {
  color: var(--color-link);
  text-decoration-line: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--duration-fade) var(--ease);
}
/* O cartão inteiro abre a peça; a ligação continua a ser só uma */
.piece-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.piece-card__link:focus-visible { outline: none; box-shadow: none; }
.piece-card__link:focus-visible::after { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.piece-card:hover .piece-card__link, .piece-card__link:focus-visible { color: var(--color-link-hover); text-decoration-line: underline; }
[data-theme="light"] .piece-card__link:focus-visible { color: var(--color-link); }
.piece-card__details { grid-area: details; margin: var(--space-2) 0 0; font-size: var(--text-body); line-height: var(--lh-body); color: var(--color-text-muted); }
/* Inventário por baixo da ficha, sem badge, a 14px; o mesmo espaço do título para a ficha (chat 38) */
.piece-card .piece-card__inventory { grid-area: inventory; margin: var(--space-2) 0 0; font-size: var(--text-body-md); line-height: var(--lh-body); color: var(--color-text-muted); }

/* assets/css/blocks/country-grid.css */
/* ==========================================================================
   Lab 5 — Índice da coleção. Herda os labs 1 a 4.
   Cabeçalho de página "display" (migalhas e título em destaque) e grelha
   de países (country_grid): foto da sala, salas e nome do país.
   ========================================================================== */

:root {
  --countries-columns: 2;
  --countries-column-gap: var(--space-3);   /* 16 */
  --countries-row-gap: var(--space-5);     /* 36 em todas as larguras (revisto no lab 9; antes 24 em telemóvel) */
}
@media (min-width: 48em) { :root { --countries-column-gap: var(--grid-gap); --countries-row-gap: var(--space-5); } }
@media (min-width: 64em) { :root { --countries-columns: 3; --countries-column-gap: var(--space-6); } }

/* ---------- Ritmo vertical: igual à peça e ao país ---------- */
.collection > .container > * + * { margin-top: var(--space-section); }

/* ---------- Grelha de países ---------- */
.country-grid {
  display: grid;
  grid-template-columns: repeat(var(--countries-columns), minmax(0, 1fr));
  column-gap: var(--countries-column-gap);
  row-gap: var(--countries-row-gap);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.country-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "media" "rooms" "title";
  align-content: start;
}
.country-card__media { grid-area: media; margin: 0; overflow: hidden; aspect-ratio: 16 / 9; }
.country-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.country-card .country-card__rooms {
  grid-area: rooms;
  margin: var(--space-3) 0 0;
  font-size: var(--text-body-md);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
}
.country-card__title {
  grid-area: title;
  margin: var(--space-2) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-body-xl);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-body);   /* chat 18: sem maiúsculas */
}
.country-card__link {
  color: var(--color-link);
  text-decoration-line: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--duration-fade) var(--ease);
}
/* O cartão inteiro abre o país; a ligação continua a ser só uma */
.country-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.country-card__link:focus-visible { outline: none; box-shadow: none; }
.country-card__link:focus-visible::after { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.country-card:hover .country-card__link, .country-card__link:focus-visible { color: var(--color-link-hover); text-decoration-line: underline; }
[data-theme="light"] .country-card__link:focus-visible { color: var(--color-link); }

/* Cards links (chat 27): a grelha de países é o desenho do Cards links. Colunas do bloco a partir
   de 1024px (3 por omissão); abaixo, 2. */
@media (min-width: 64em) {
  .country-grid--1 { --countries-columns: 1; }
  .country-grid--2 { --countries-columns: 2; }
  .country-grid--4 { --countries-columns: 4; }
}

/* assets/css/blocks/anchors.css */
/* ---------- Índice da página (anchors) ---------- */
.anchors {
  display: inline-block;
  max-width: 100%;
  padding: var(--space-4);
  background: var(--color-surface);
}
/* Título "Nesta página" (chat 17): 16px e cor do texto (eram 14px em --color-text-subtle) */
.anchors__label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);   /* chat 18: o rótulo é o título do índice, em Lora; as ligações em Montserrat */
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
}
/* D2 (chat 18): o rótulo é um h2 dentro da nav, com o tamanho de texto (16px); não segue a regra dos h2 */
.anchors__toggle { display: none; }
/* 8px entre linhas (0.21.2, chat 34): com 0 o anel de foco (6px para fora) passava por cima da linha de cima e de baixo */
.anchors__list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; }
/* Linhas do índice com a largura de leitura (cerca de 80 caracteres, nunca mais de 100): rótulos longos passam à linha seguinte */
@media (min-width: 48em) { .anchors__list { max-width: var(--measure); } }
.anchors__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--target-min);   /* alvo de 44×44px também em rótulos curtos (letras do glossário), com o texto ao centro */
  min-height: var(--target-min);
  color: var(--color-link);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-body);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: color var(--duration-fade) var(--ease);
}
@media (hover: hover) { .anchors__link:hover { color: var(--color-link-hover); } }

/* Telemóvel: o índice passa a lista desdobrável, presa ao topo ao descer (padrão do site SCML) */
@media (max-width: 47.99em) {
  .anchors.is-enhanced { display: block; padding: 0; }
  .anchors.is-enhanced .anchors__label { display: none; }
  .anchors.is-enhanced .anchors__toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--space-7);
    padding: 0 var(--space-3);
    border: 0;
    border-bottom: 2px solid var(--color-accent);
    color: var(--color-text);
    background: var(--neutral-30);
    font-family: var(--font-body);
    font-size: var(--text-body);
    letter-spacing: var(--ls-body);
    text-align: start;
    cursor: pointer;
  }
  /* Botão "Nesta página" (chat 17): ícone list-plus antes do texto, sem chevron, fundo próprio (--neutral-30 no escuro, --neutral-95 no claro) */
  [data-theme="light"] .anchors.is-enhanced .anchors__toggle { background: var(--neutral-95); }   /* chat 18: filete amarelo também no claro */
  .anchors__icon { flex: none; width: 1.5rem; height: 1.5rem; }
  .anchors.is-enhanced .anchors__toggle:focus-visible { outline-offset: calc(-1 * var(--focus-width)); box-shadow: none; }
  .anchors.is-enhanced .anchors__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2;
    display: block;
    max-height: calc(6 * var(--space-7));
    overflow-y: auto;
    background: var(--color-surface);
  }
  .anchors.is-enhanced .anchors__list[hidden] { display: none; }
  .anchors.is-enhanced .anchors__item + .anchors__item { border-top: var(--border-width) solid var(--color-divider); }
  .anchors.is-enhanced .anchors__link {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    min-height: var(--space-7);
    padding: 0 var(--space-3);
    border-inline-start: 4px solid transparent;
    font-family: var(--font-body);
    font-size: var(--text-body);
    letter-spacing: var(--ls-body);
    text-transform: none;
    text-decoration-line: none;
  }
  .anchors.is-enhanced .anchors__link:hover { text-decoration-line: underline; }
  .anchors.is-enhanced .anchors__link:focus-visible { outline-offset: calc(-1 * var(--focus-width)); box-shadow: none; }
  /* A secção onde se está: filete como a página atual no submenu */
  .anchors.is-enhanced .anchors__link[aria-current="location"] { border-inline-start-color: var(--color-text-subtle); }   /* D5 (chat 18): cinzento nos dois temas, como a página atual no submenu */
  .anchors { position: relative; }
  /* Presa ao topo (chat 17): largura toda do ecrã, com o fundo e o filete do botão de ponta a ponta;
     ícone, texto e opções na mesma posição que tinham soltos (margem da página + 16px) */
  .anchors.is-stuck {
    position: fixed;
    top: var(--header-offset, 0px);
    left: 0;
    right: 0;
    z-index: 15;
    padding: 0;
    background: none;
    transition: top var(--duration-motion) var(--ease);
  }
  .anchors.is-stuck .anchors__toggle,
  .anchors.is-stuck .anchors__link { padding-inline: calc(var(--page-margin) + var(--space-3)) var(--page-margin); }
  .anchors.is-stuck .anchors__list { left: 0; right: 0; }
}

/* assets/css/blocks/text.css */
/* Texto por coluna e destaque */
/* ---------- Texto: coluna escolhida no bloco (esquerda, centro, direita) ---------- */
.text-block > * { max-width: var(--measure); }
/* Lead (campo da intranet, chat 27): o «texto maior» do lab 9, escrito à parte e à frente do texto */
.prose .text-block__lead { font-size: var(--text-lead); line-height: var(--lh-body); }
@media (min-width: 64em) {
  .text-block { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .text-block > * { grid-column: 1 / span 6; }
  .text-block--center > * { grid-column: 4 / span 6; }
  .text-block--right > * { grid-column: 7 / span 6; }
}


/* ---------- Destaque (callout): caixa de superfície com filete ---------- */
.callout { padding: var(--space-4); border-inline-start: 4px solid var(--color-accent); background: var(--color-surface); }
[data-theme="light"] .callout { border-inline-start-color: var(--color-text); }

/* assets/css/blocks/image.css */
/* Imagem e imagem e texto */
:root {
  --media-band-height: clamp(30rem, 27.214rem + 11.429vw, 37.5rem);   /* 480 → 600px */
}

/* ---------- Faixa de imagem: recortada, parallax por dentro, abre na lightbox ---------- */
.media-band { margin: 0; }
.media-open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  overflow: clip;
  color: inherit;
  background: var(--color-surface);
  cursor: zoom-in;
}
.media-band__open { height: var(--media-band-height); }
/* A imagem é mais alta que a faixa pela deriva do parallax, em cima e em baixo */
/* Deriva ao dobro da galeria (96px para cada lado): o parallax tem de se notar */
.media-band__drift { position: absolute; inset: calc(-2 * var(--parallax-drift)) 0; --drift: 2; }
.media-band__img { width: 100%; height: 100%; object-fit: cover; }
.media-open:focus-visible { outline-offset: var(--focus-offset); }

/* ---------- Imagem solta (lab 10): proporção real, largura do sítio onde está ---------- */
.image-block { margin: 0; }
.image-block img { width: 100%; height: auto; }

/* ---------- Imagem e texto ---------- */
.image-text { display: grid; gap: var(--space-block); align-items: var(--image-text-align, center); }
.image-text__media { margin: 0; }
/* Proporção da imagem (campo da intranet, chat 27): 3:2 por omissão (lab 6); original sem corte;
   altura fixa com a largura da coluna */
.image-text__media img { width: 100%; aspect-ratio: var(--image-text-ratio, 3 / 2); object-fit: cover; }
.image-text--original .image-text__media img { aspect-ratio: auto; height: auto; }
.image-text--fixed .image-text__media img { aspect-ratio: auto; height: var(--image-text-height); }
/* Título do texto (intranet): texto, não cabeçalho; com o tamanho do texto maior */
.image-text__title { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-body-xl); line-height: var(--lh-heading); }
.image-text__text > * { max-width: var(--measure); }
@media (min-width: 64em) {
  .image-text { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  /* Imagem e texto lado a lado: sempre 72px entre os dois (24px da grelha + 48px), como na
     peça em destaque (revisto no lab 9; antes o texto começava na coluna 8, a 138px).
     A largura do texto continua limitada por --measure (cerca de 80 caracteres). */
  .image-text__media { grid-column: 1 / span 6; }
  .image-text__text { grid-column: 7 / span 6; margin-left: var(--space-6); }
  /* Invertido: texto à esquerda, imagem à direita. No HTML a imagem vem sempre primeiro */
  .image-text--reverse .image-text__media { grid-column: 7 / span 6; grid-row: 1; }
  .image-text--reverse .image-text__text { grid-column: 1 / span 6; grid-row: 1; margin-left: 0; margin-right: var(--space-6); }
}

/* ---------- Imagem e texto, forma da página inicial (lab 8, "O colecionador") ----------
   Título por cima da imagem; imagem na proporção real (--ar), com parallax por dentro
   da moldura; ao lado, filete por cima do texto e botão em baixo, alinhado com o fundo
   da imagem. Telemóvel: tudo empilhado. */
.image-text--titled { align-items: stretch; row-gap: var(--space-heading); }
.image-text--titled .block-title { margin: 0; }
.image-text__media--drift { position: relative; aspect-ratio: var(--ar); overflow: clip; }
.image-text__drift { position: absolute; inset: calc(-1 * var(--parallax-drift)) 0; --drift: 1; }
.image-text__media--drift img { height: 100%; aspect-ratio: auto; }
.image-text--titled .image-text__text { display: flex; flex-direction: column; align-items: flex-start; padding-top: var(--space-block); border-top: var(--border-width) solid var(--color-border); }
.image-text--titled .image-text__text > * { max-width: var(--measure); }
.image-text--titled .button-row { margin-top: var(--space-block); }
@media (min-width: 64em) {
  .image-text--titled .block-title { grid-column: 1 / span 7; grid-row: 1; }
  .image-text--titled .image-text__media { grid-column: 1 / span 7; grid-row: 2; }
  .image-text--titled .image-text__text { grid-column: 8 / span 5; grid-row: 2; margin-left: var(--space-6); }
  .image-text--titled .button-row { margin-top: auto; }
}


/* ---------- Tema (chat 24): casos dos campos que os labs não mostram ---------- */
/* Imagem com a proporção escolhida no bloco (1:1, 4:5, 3:2, 16:9), recortada */
.image-block--ratio img { aspect-ratio: var(--ratio); object-fit: cover; }
/* Faixa de imagem sem lightbox: a mesma moldura, sem botão */
.media-band__frame { position: relative; display: block; overflow: clip; background: var(--color-surface); }
/* Imagem e texto com título e lightbox: o botão ocupa a moldura */
.image-text__media--drift > .media-open { position: absolute; inset: 0; }

/* assets/css/blocks/files.css */
/* ---------- Ficheiros: card de descarga, com acordeão opcional ---------- */
.files__grid {
  display: grid;
  grid-template-columns: repeat(var(--files-columns), minmax(0, 1fr));
  gap: var(--space-4) var(--space-6);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.files__grid { --files-columns: 1; }
/* Colunas escolhidas no bloco (2, 3 ou 4) a partir de 1024px. Por omissão 3: um card não ocupa mais
   de um terço da largura (com 1 ou 2 cards, a terceira coluna fica vazia). 2 colunas só quando escolhidas
   (revisto no lab 9: pisos do lab 6, 2 a 2). 2 no máximo entre 768 e 1023px; 1 em telemóvel */
@media (min-width: 48em) { .files__grid--2, .files__grid--3, .files__grid--4 { --files-columns: 2; } }
@media (min-width: 64em) { .files__grid { --files-columns: 3; } .files__grid--2 { --files-columns: 2; } .files__grid--4 { --files-columns: 4; } }
.file-card { display: grid; background: var(--color-surface); }
.file-card__heading { max-width: none; margin: 0; font: inherit; }
.file-card__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: var(--target-min);
  padding: var(--space-4);
  border: 0;
  color: var(--color-text);
  background: none;
  font-family: var(--font-body);
  text-align: start;
  cursor: pointer;
}
.file-card__toggle:focus-visible { outline-offset: calc(-1 * var(--focus-width)); box-shadow: none; }
.file-card__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); min-width: 0; }
/* O círculo é a caixa e o SVG fica a 24px exatos dentro dele (chat 15, como em cards-content.css): com o SVG a ocupar o círculo e espaço interior ficava a 22px e desfocado */
.file-card__icon { display: flex; flex: none; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: var(--border-width) solid currentColor; border-radius: var(--radius-round); }
.file-card__icon svg { display: block; width: 1.5rem; height: 1.5rem; }
.file-card__toggle[aria-expanded="true"] .file-card__icon { transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) { .file-card__icon { transition: transform var(--duration-motion) var(--ease); } }
.file-card__title {
  font-size: var(--text-body-xl);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-body);   /* chat 18: sem maiúsculas, espaçamento do texto */
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  transition: color var(--duration-fade) var(--ease), text-decoration-color var(--duration-fade) var(--ease);
}
.file-card__toggle:hover .file-card__title { color: var(--color-link-hover); text-decoration-color: currentColor; }
.file-card__subtitle { font-size: var(--text-body-md); letter-spacing: var(--ls-body); color: var(--color-text-muted); }
.file-card__panel { overflow: hidden; }
.file-card__body { padding: 0 var(--space-4) var(--space-4); }
.file-card__download {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--target-min);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  text-decoration: none;
}
.file-card__heading + .file-card__panel + .file-card__download { border-top: var(--border-width) solid var(--color-divider); }
.file-card__download:focus-visible { outline-offset: calc(-1 * var(--focus-width)); box-shadow: none; }
.file-card__file { display: grid; gap: var(--space-1); }
.file-card__name {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: color var(--duration-fade) var(--ease), text-decoration-thickness var(--duration-fade) var(--ease);
}
.file-card__download-icon { flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .file-card__download-icon { transition: transform var(--duration-fade) var(--ease); }
  .file-card__download:hover .file-card__download-icon { transform: scale(1.2); }
}
.file-card__download:hover .file-card__name { color: var(--color-link-hover); }
.file-card__meta { font-size: var(--text-body-md); color: var(--color-text-muted); }

/* Dentro do card a lista é de primeiro nível: o card já é um item de lista */
.file-card__body ul { list-style-type: disc; }

/* Acordeão isolado (decisões 2.29): itens uns por baixo dos outros, uma coluna em todas as
   larguras (tema, chat 24) */
@media (min-width: 64em) { .files__grid--1 { --files-columns: 1; } }

/* Documentos no Archives (chat 29): a referência do documento por baixo do nome, como o
   tipo e o tamanho (só quando o campo tem valor, intranet) */
.file-card__reference { font-size: var(--text-body-md); color: var(--color-text-muted); }
/* FAQ no Archives: os blocos da pergunta por baixo da resposta, dentro do painel */
.file-card__blocks > * + *, .file-card__body > p + .file-card__blocks { margin-top: var(--space-4); }

/* assets/css/blocks/contact.css */
/* ==========================================================================
   Lab 7 — Contactos (contact): título do bloco e cards de superfície
   (marcações, horários, visitas guiadas). Email e telefone com o esquema
   escrito pelo tipo do contacto; texto livre nas outras linhas.
   3 colunas a partir de 1024px, 2 entre 768 e 1023px, 1 em telemóvel.
   ========================================================================== */

.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4) var(--space-6); align-items: stretch; margin: 0; padding: 0; list-style: none; }
@media (min-width: 48em) { .contact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .contact__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.contact__card { padding: var(--space-4); background: var(--color-surface); }
@media (min-width: 48em) { .contact__card { padding: var(--space-5); } }
.contact__title { margin: 0 0 var(--space-2); font-size: var(--text-h3); }   /* chat 18: título em Lora, como os outros H3 */
.contact__list { margin: 0; padding: 0; list-style: none; }
.contact__list li { margin: 0; line-height: var(--lh-body); }
/* Ligações de contacto: alvo de 44px de altura, sublinhado sempre */
.contact__list .link { display: inline-flex; align-items: center; min-height: var(--target-min); }
.contact .contact__note { margin: var(--space-2) 0 0; font-size: var(--text-body-md); line-height: var(--lh-body); color: var(--color-text-muted); }

/* Colunas (campo da intranet, chat 27): 3 por omissão; 1, 2 ou 4 a partir de 1024px */
.contact__grid--1 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48em) { .contact__grid--1 { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 64em) {
  .contact__grid--1 { grid-template-columns: minmax(0, 1fr); }
  .contact__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* assets/css/blocks/listing.css */
/* ==========================================================================
   Lab 7 — Listagem (listing): título, filtros opcionais, grelha de cartões
   e paginação no servidor. Cartão com uma só ligação, no título, alargada
   ao cartão inteiro (A11Y-47, A11Y-58); imagem decorativa; zoom da regra
   única de main.css.
   ========================================================================== */

:root {
  --listing-columns: 2;
  --listing-column-gap: var(--space-3);   /* 16 */
  --listing-row-gap: var(--space-5);      /* 36 em todas as larguras (revisto no lab 9; antes 24 em telemóvel) */
}
@media (min-width: 48em) { :root { --listing-columns: 3; --listing-column-gap: var(--grid-gap); --listing-row-gap: var(--space-5); } }
@media (min-width: 64em) { :root { --listing-columns: 5; --listing-column-gap: var(--space-6); } }
/* Colunas como campo do bloco: 5 por omissão (atividades), 4 no blog */
@media (min-width: 64em) { .listing__grid--4 { --listing-columns: 4; } }
/* Blog (4 colunas, imagens 16:9): um cartão por linha em telemóvel */
@media (max-width: 47.99em) { .listing__grid--4 { --listing-columns: 1; } }

.listing [hidden] { display: none; }
.listing .filters { margin-top: var(--space-3); }

/* Número de peças do país (0.21.0): por baixo dos filtros, à esquerda, com 16px de espaço,
   como a contagem da pesquisa (search.css) */
.listing__count { margin: 0; font-size: var(--text-body-md); color: var(--color-text-muted); }
.listing .filters + .listing__count { margin-top: var(--space-3); }

/* ---------- Grelha ---------- */
.listing__grid {
  display: grid;
  grid-template-columns: repeat(var(--listing-columns), minmax(0, 1fr));
  column-gap: var(--listing-column-gap);
  row-gap: var(--listing-row-gap);
  align-items: start;
  margin: var(--space-block) 0 0;
  padding: 0;
  list-style: none;
}

/* ---------- Cartão ---------- */
.listing-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "media" "mark" "title" "badge" "meta" "date" "times";
  align-content: start;
}
.listing-card__media { grid-area: media; margin: 0; overflow: hidden; }
.listing-card__media img { display: block; width: 100%; height: auto; }
/* Títulos dos cartões sem serifa: a Lora fica só nos títulos das páginas e dos blocos (revisto no lab 7) */
.listing-card__title { grid-area: title; margin: var(--space-3) 0 0; font-family: var(--font-body); letter-spacing: var(--ls-body); font-size: var(--text-body-xl); }
.listing-card__link {
  color: var(--color-link);
  text-decoration-line: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--duration-fade) var(--ease);
}
/* O cartão inteiro abre a atividade; a ligação continua a ser só uma */
.listing-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.listing-card__link:focus-visible { outline: none; box-shadow: none; }
.listing-card__link:focus-visible::after { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.listing-card:hover .listing-card__link, .listing-card__link:focus-visible { color: var(--color-link-hover); text-decoration-line: underline; }
[data-theme="light"] .listing-card__link:focus-visible { color: var(--color-link); }
/* Recorrentes: traço amarelo de 50px entre a imagem e o título (cor do texto no claro) */
.listing-card__mark { grid-area: mark; display: block; width: 50px; height: 2px; margin-top: var(--space-3); background: var(--color-accent); }
[data-theme="light"] .listing-card__mark { background: var(--color-text); }
/* Data das próximas (destaque) ou "Recorrente" (contorno): a 16px do título, como imagem → título */
.listing-card .listing-card__badge { grid-area: badge; justify-self: start; margin: var(--space-3) 0 0; }
.badge--outline { padding-block: calc(var(--space-1) - var(--border-width)); padding-inline: calc(var(--space-2) - var(--border-width)); border: var(--border-width) solid var(--color-border); color: var(--color-text); background: none; }
/* Idades das recorrentes, data das passadas: texto como vem do conteúdo.
   A 16px do título; a 8px quando vem depois do badge. */
.listing-card .listing-card__meta {
  grid-area: meta;
  margin: var(--space-3) 0 0;
  font-size: var(--text-body-md);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text-muted);
}
.listing-card .listing-card__badge ~ .listing-card__meta { margin-top: var(--space-2); }

/* ---------- Paginação: ao centro em telemóvel, só números e setas; à direita a partir de 768px ---------- */
.pagination { margin-top: var(--space-block); }
/* Anterior e Seguinte fora da lista (ASI #49); a lista só tem os números */
.pagination__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); }
.pagination__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48em) { .pagination__bar { justify-content: flex-end; } }
@media (max-width: 47.99em) {
  .pagination__step-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
.pagination__slot { visibility: hidden; }
/* O título recebe o foco ao mudar de página: sem anel, não é um controlo */
.listing .block-title:focus, .page-header__title[tabindex="-1"]:focus { outline: none; box-shadow: none; }
.pagination__page, .pagination__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--target-min);
  min-height: var(--target-min);
  padding: 0 var(--space-2);
  color: var(--color-link);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-tight);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.5em;
  transition: color var(--duration-fade) var(--ease), text-decoration-thickness var(--duration-fade) var(--ease);
}
.pagination__page:hover, .pagination__step:hover { color: var(--color-link-hover); }
/* A página atual deixa de parecer ligação e ganha contorno */
.pagination__page[aria-current="page"] { color: var(--color-text); text-decoration-line: none; border: var(--border-width) solid var(--color-border); }

/* ---------- Blog na página inicial (lab 8): título com filete até meio, dois cartões desencontrados ----------
   Cartões iguais aos do arquivo do blog (título, data). Desktop: o primeiro cartão nas
   colunas 1 a 6, mais abaixo; o segundo nas colunas 7 a 12, logo abaixo do filete.
   Telemóvel: empilhados. */
.listing--home .block-title { padding-bottom: var(--space-heading); border-bottom: var(--border-width) solid var(--color-border); }
.listing__grid--stagger { --listing-columns: 1; }
@media (min-width: 64em) {
  .listing--home .block-title { width: 50%; }
  /* Espaço entre os dois cartões: 96px, o dobro das listagens */
  /* 2 colunas com 96px entre elas, o mesmo desenho das colunas 1 a 6 e 7 a 12; com 12 colunas os 11 espaços de 96px criavam scroll horizontal entre 1024 e 1100px (chat 15) */
  .listing__grid--stagger { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); margin-top: 0; }
  .listing__grid--stagger .listing-card:nth-child(odd) { grid-column: 1; margin-top: var(--space-9); }
  .listing__grid--stagger .listing-card:nth-child(even) { grid-column: 2; grid-row: 1; }
}

/* ---------- Colunas do Archives (chat 29): 2 e 3 a partir de 1024px; 4 e 5 como acima ---------- */
@media (min-width: 64em) { .listing__grid--3 { --listing-columns: 3; } .listing__grid--2 { --listing-columns: 2; } }
/* As grelhas de cards (FAQ, Documentos) a seguir ao título ou ao filtro, à distância das outras grelhas */
.listing .files__grid, .listing .glossary, .listing .publications { margin-top: var(--space-block); }
.listing > :first-child { margin-top: 0; }
@media (max-width: 47.99em) {
  .filters.has-select + .files__grid,
  .filters.has-select + .listing__column { margin-top: var(--space-5); }
}

/* Atividades (chat 35): as datas (badge amarelo nas próximas; texto pequeno nas
   passadas) e todos os horários por baixo, em texto pequeno */
.listing-card .listing-card__date { grid-area: date; justify-self: start; margin: var(--space-3) 0 0; }
.listing-card .listing-card__date--past { font-size: var(--text-body-md); line-height: var(--lh-body); color: var(--color-text-muted); }
.listing-card__times { grid-area: times; margin: var(--space-2) 0 0; padding: 0; list-style: none; font-size: var(--text-body-md); line-height: var(--lh-body); color: var(--color-text-muted); }

/* assets/css/blocks/spacer.css */
/* ==========================================================================
   Lab 7 — Espaçador (spacer), como na intranet: espaço vazio ou filete
   entre dois blocos. Altura escolhida da escala (2.12), uma para desktop e
   outra para telemóvel. O espaço é um div com aria-hidden; o filete é um
   <hr>, com o traço a meio da altura (texto a 20%, como nos cards de ficheiro).
   Como na intranet, é espaço a mais: soma-se ao espaço normal entre blocos
   (0.21.0, chat 34; antes anulava-o e o espaço não crescia).
   ========================================================================== */

.spacer {
  --spacer-mobile: var(--space-6);
  --spacer-desktop: var(--space-6);
  --spacer: var(--spacer-mobile);
  display: block;
  height: var(--spacer);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
@media (min-width: 48em) { .spacer { --spacer: var(--spacer-desktop); } }

/* Filete: a altura escolhida fica acima e abaixo do traço */
.spacer--line {
  height: calc(2 * var(--spacer) + var(--border-width));
  color: inherit;
  background: linear-gradient(var(--color-divider), var(--color-divider)) center / 100% var(--border-width) no-repeat;
}

/* Altura em desktop */
.spacer--24 { --spacer-desktop: var(--space-4); }
.spacer--36 { --spacer-desktop: var(--space-5); }
.spacer--48 { --spacer-desktop: var(--space-6); }
.spacer--64 { --spacer-desktop: var(--space-7); }
.spacer--96 { --spacer-desktop: var(--space-8); }
.spacer--120 { --spacer-desktop: var(--space-9); }

/* Altura em telemóvel */
.spacer--m-24 { --spacer-mobile: var(--space-4); }
.spacer--m-36 { --spacer-mobile: var(--space-5); }
.spacer--m-48 { --spacer-mobile: var(--space-6); }
.spacer--m-64 { --spacer-mobile: var(--space-7); }
.spacer--m-96 { --spacer-mobile: var(--space-8); }
.spacer--m-120 { --spacer-mobile: var(--space-9); }


/* assets/css/blocks/activity.css */
/* ==========================================================================
   Lab 7 — Atividade (single-activity): imagem destacada, conteúdo em blocos
   e painel com públicos, horários, marcações e inscrições.
   Desktop (a partir de 1024px): imagem e conteúdo nas colunas 1 a 7; painel
   nas colunas 9 a 12, preso por baixo do cabeçalho fixo enquanto o conteúdo
   está no ecrã, como a ficha da peça.
   Telemóvel: imagem, painel e conteúdo, empilhados; nada fica preso.
   Ordem do HTML = ordem de leitura: imagem, painel, conteúdo.
   ========================================================================== */

.activity {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-block);
  align-items: start;
}
/* Mais perto do título que o ritmo entre blocos: 24px, 48px a partir de 768px */
.page > .container > .page-header--entry + .activity,
.page > .container > .activity__lead + .activity { margin-top: var(--space-block); }
/* Lead por baixo do título, a 16px (chat 35) */
.page > .container > .activity__lead { max-width: var(--measure); margin: var(--space-heading) 0 0; font-size: var(--text-lead); line-height: var(--lh-body); }
.activity__media { margin: 0; }
.activity__media img { width: auto; max-width: 100%; height: auto; }

/* Conteúdo: blocos na coluna da atividade, com o ritmo das páginas */
.activity__body > * + * { margin-top: var(--space-section); }
.activity__body .text-block { display: block; }
.activity__body .text-block > * { max-width: var(--measure); }

/* ---------- Painel ---------- */
.activity-panel { padding: var(--space-4); background: var(--color-surface); }
@media (min-width: 48em) { .activity-panel { padding: var(--space-5); } }
.activity-panel__section + .activity-panel__section {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-divider);
}
.activity-panel__title {
  max-width: none;
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);   /* chat 18: rótulo em Lora 16px, sem maiúsculas, como o "Nesta página" */
  font-size: var(--text-body);
  line-height: var(--lh-heading);
  color: var(--color-text);
}
.activity-panel__value { margin: 0; }
.activity-panel .badge { margin: 0; }
.activity-panel__list { margin: 0; padding: 0; list-style: none; }
.activity-panel__list li { margin: 0; line-height: var(--lh-body); }
/* Ligações de contacto: alvo de 44px de altura, sublinhado sempre */
.activity-panel__list .link { display: inline-flex; align-items: center; min-height: var(--target-min); }
/* Informações (chat 38): com título, antes das Marcações, texto a 16px; listas com bolas, como no texto */
.activity-panel__info { font-size: var(--text-body); line-height: var(--lh-body); }
.activity-panel__info > * { font-size: inherit; }
.activity-panel__info > :first-child { margin-top: 0; }
.activity-panel__info > :last-child { margin-bottom: 0; }
.activity-panel__info li:first-child { margin-top: 0; }
.activity-panel__info li:last-child { margin-bottom: 0; }
.activity-panel .activity-panel__note { margin: var(--space-2) 0 0; font-size: var(--text-body-md); line-height: var(--lh-body); color: var(--color-text-muted); }

@media (min-width: 64em) {
  .activity { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .activity__media { grid-column: 1 / span 7; grid-row: 1; }
  .activity__body { grid-column: 1 / span 7; grid-row: 2; }
  .activity-panel {
    grid-column: 9 / span 4;
    grid-row: 1 / span 2;
    align-self: start;
    position: sticky;
    top: calc(var(--header-offset, 0px) + var(--space-6));
    transition: top var(--duration-motion) var(--ease);
  }
}

/* Horários (chat 35): uma linha por horário, em texto, sem badge */
.activity-panel__times li + li { margin-top: var(--space-1); }
/* Email e telefone nas Informações, com marcador amarelo (no tema claro, na cor do texto,
   como os números das listas); a nota do custo da chamada por baixo, sem marcador (chat 38) */
.activity-panel__contacts { margin: 0; padding-inline-start: var(--space-5); list-style: disc; }  /* o recuo das listas do texto (36px) */
.activity-panel__info + .activity-panel__contacts { margin-top: var(--space-3); }
.activity-panel__contacts li { margin: 0; line-height: var(--lh-body); }
.activity-panel__contacts li::marker { font-size: 1.25em; line-height: 1; color: var(--color-accent); }
[data-theme="light"] .activity-panel__contacts li::marker { color: var(--color-text); }
.activity-panel__contacts .link { display: inline-flex; align-items: center; min-height: var(--target-min); }
.activity-panel .button-row { margin: 0; }

/* Marcações: 16px entre o título e o botão (chat 38) */
/* (as margens juntam-se: os 8px do título ficam dentro dos 16) */
.activity-panel .activity-panel__title + .activity-panel__register { margin-top: var(--space-3); }

/* assets/css/blocks/article.css */
/* ==========================================================================
   Lab 7 — Artigo de blog (single-blog): imagem destacada e texto.
   Desktop (a partir de 1024px): imagem nas colunas 1 a 5, texto nas colunas
   7 a 12, na largura de leitura, como no desenho atual. Telemóvel: imagem e
   texto empilhados. A imagem fica presa enquanto se lê o lead e o primeiro texto.
   Depois, os blocos do artigo, à largura da página: os de texto começam na coluna 1,
   por baixo da imagem.
   ========================================================================== */

/* Data do artigo por baixo do H1: 14px, como a data dos cartões */
.page-header__meta { margin: var(--space-3) 0 0; font-size: var(--text-body-md); line-height: var(--lh-body); color: var(--color-text-muted); }

.article { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-block); align-items: start; }
.page > .container > .page-header--entry + .article { margin-top: var(--space-block); }
.article__media { margin: 0; }
.article__media img { width: 100%; height: auto; }
.article__body { max-width: var(--measure); }
/* Lead: texto maior, como o texto de entrada das páginas */
.article .article__lead { margin: 0 0 var(--space-paragraph); font-size: var(--text-lead); line-height: var(--lh-body); }

@media (min-width: 64em) {
  .article { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  /* A imagem fica presa enquanto se lê o primeiro texto, como no site atual */
  .article__media { grid-column: 1 / span 5; align-self: start; position: sticky; top: calc(var(--header-offset, 0px) + var(--space-6)); transition: top var(--duration-motion) var(--ease); }
  .article__body { grid-column: 7 / span 6; }
}

/* assets/css/blocks/publications.css */
/* ==========================================================================
   Lab 7 — Publicações (publications): um destaque e uma grelha de cartões,
   todos com ligação para a loja online.
   Cartão: uma só ligação, no título, alargada ao cartão inteiro (A11Y-47,
   A11Y-58); imagem decorativa na proporção real; zoom da regra única de
   main.css; "Loja online" visível por baixo, dentro do nome da ligação.
   Grelha: 5 colunas a partir de 1024px, 3 entre 768 e 1023px, 2 em telemóvel.
   ========================================================================== */

.publications__grid {
  display: grid;
  grid-template-columns: repeat(var(--listing-columns), minmax(0, 1fr));
  column-gap: var(--listing-column-gap);
  row-gap: var(--listing-row-gap);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cada cartão ocupa duas linhas da grelha (imagem e texto) em subgrid: em cada
   linha, as imagens alinham pela base e os textos começam todos à mesma altura */
.publication-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
}
/* O texto vem primeiro no HTML (título primeiro); a imagem aparece por cima */
.publication-card__text { grid-column: 1; grid-row: 2; align-self: start; display: grid; justify-items: start; }
.publication-card__media { grid-column: 1; grid-row: 1; align-self: end; margin: 0; overflow: hidden; }
.publication-card__media img { display: block; width: 100%; height: auto; }
.publication-card__title { margin: var(--space-3) 0 0; font-family: var(--font-body); letter-spacing: var(--ls-body); font-size: var(--text-body-xl); }
.publication-card__link { color: var(--color-link); text-decoration-line: none; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--duration-fade) var(--ease); }
.publication-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.publication-card__link:focus-visible { outline: none; box-shadow: none; }
.publication-card__link:focus-visible::after { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.publication-card:hover .publication-card__link, .publication-card__link:focus-visible { color: var(--color-link-hover); text-decoration-line: underline; }
[data-theme="light"] .publication-card__link:focus-visible { color: var(--color-link); }
.publication-card .publication-card__subtitle { margin: var(--space-2) 0 0; font-size: var(--text-body-md); line-height: var(--lh-body); color: var(--color-text-muted); }
/* "Loja online": ligação com linha (main.css), decorativa: a ligação é o título */
.publication-card .publication-card__shop { margin: var(--space-2) 0 0; }

/* Destaque e disposição, como no site atual (revisto no lab 7):
   grelha de 5 colunas a partir de 1024px. O destaque ocupa as colunas 1 a 3,
   com a imagem na primeira metade e o texto logo ao lado, ao centro.
   Os dois cartões seguintes ficam nas colunas 4 e 5, com as capas alinhadas
   pela base com a do destaque; os
   restantes seguem na linha seguinte, a partir da coluna 1. */
@media (min-width: 64em) {
  .publications__grid { --listing-columns: 5; }
  .publication-card--featured { grid-column: 1 / span 3; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }
  .publication-card--featured .publication-card__text { grid-column: 2; grid-row: 1; align-self: center; }
  .publication-card--featured .publication-card__title { margin-top: 0; }
}
/* Entre 768 e 1023px o destaque ocupa a linha inteira, com o texto ao lado */
@media (min-width: 48em) and (max-width: 63.99em) {
  .publication-card--featured { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--listing-column-gap); }
  .publication-card--featured .publication-card__text { grid-column: 2 / span 2; grid-row: 1; align-self: center; }
  .publication-card--featured .publication-card__title { margin-top: 0; }
}
/* Telemóvel: o destaque ocupa a linha inteira, empilhado */
@media (max-width: 47.99em) { .publication-card--featured { grid-column: 1 / -1; } }

/* assets/css/blocks/hero.css */
/* ==========================================================================
   Lab 8 — page_header forma hp (página inicial), como a página atual.
   Cabeça de Buda ao centro e, à direita, H1 com o nome do museu (A11Y-12)
   e texto de entrada com o propósito do site (A11Y-97).
   O topo ocupa o resto do primeiro ecrã (100svh menos o cabeçalho, medido
   pelo main.js em --header-height): a cabeça encolhe para caber e, em
   telemóvel, a cabeça, o título e o texto aparecem sempre sem scroll.
   Sem migalhas. Larguras em colunas da grelha.
   ========================================================================== */

.page-header--hp {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: var(--grid-gap);
  row-gap: var(--space-4);
  min-height: calc(100svh - var(--header-height, 0px));
  padding-bottom: var(--space-4);
}
/* Desktop: a cabeça vai até ao fundo do ecrã */
@media (min-width: 64em) { .page-header--hp { padding-bottom: 0; } }
/* A imagem ocupa a altura que sobra, sem empurrar a grelha, e encolhe por inteiro (contain) */
.hero__media { position: relative; grid-column: 1 / -1; min-height: var(--space-9); margin: 0; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hero__text { grid-column: 1 / -1; }
.page-header--hp .page-header__title { margin: 0; max-width: none; font-size: var(--text-h1); text-transform: none; }
.hero__lead { margin: var(--space-heading) 0 0; }

/* A partir de 768px: imagem e texto lado a lado, o texto ao centro da altura */
@media (min-width: 48em) {
  .page-header--hp { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); align-items: center; }
  .hero__media { grid-column: 1 / span 4; align-self: stretch; }
  .hero__text { grid-column: 5 / span 4; }
}
@media (min-width: 64em) {
  .page-header--hp { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hero__media { grid-column: 5 / span 4; }
  /* Título nas colunas 9 a 12; texto de entrada só com 3 colunas de largura */
  .hero__text { grid-column: 9 / span 4; }
  .hero__lead { max-width: calc((100% - 3 * var(--grid-gap)) / 4 * 3 + 2 * var(--grid-gap)); margin-top: var(--space-6); }
}

/* assets/css/blocks/slider.css */
/* ==========================================================================
   Lab 8 — Slider ("Em destaque"), com o desenho da página atual.
   Gestão como na intranet: tipo de conteúdo Slider com os painéis e a ordem;
   o bloco só escolhe qual mostra. Sem rotação automática.
   Painel: imagem à largura do contentor, recortada, com parallax por dentro
   da moldura (deriva ao dobro, como a faixa de imagem); por cima, em baixo
   à esquerda, o título numa caixa clara, a data noutra caixa clara com a
   mesma largura e o botão "Saiba mais" (a única ligação).
   Exceção aceite: o título do painel é em Lora.
   Data: só quando o conteúdo de destino a tem, no formato desse conteúdo
   (atividade: a data da atividade; artigo de blog: a data de publicação,
   DD . MM . AAAA). Páginas, peças e ligações externas não têm data.
   Altura: 480px em telemóvel → 700px a 1440px (pedido no lab 8).
   Anterior e seguinte por baixo da imagem, ao centro, só com 2 ou mais
   painéis. O painel novo entra de lado (da direita no seguinte, da esquerda
   no anterior) e o antigo sai para o lado oposto; com movimento reduzido a
   troca é imediata. Sem JS, os painéis ficam empilhados e os botões escondidos.
   ========================================================================== */

/* Painéis numa lista (ul > li, sem role: ASI #51, CMRA #54), sem marcador nem recuo */
.slider__track { display: grid; row-gap: var(--space-block); margin: 0; padding: 0; list-style: none; }
.slider.is-ready .slider__track { row-gap: 0; }
.slider__slide { position: relative; }
.slider__slide[hidden] { display: none; }
/* Com JS: os painéis ocupam a mesma célula e a pista corta o que sai de lado */
.slider.is-ready .slider__track { overflow: clip; }
.slider.is-ready .slider__slide { grid-area: 1 / 1; }
@media (prefers-reduced-motion: no-preference) {
  .slider__slide.is-in-next { animation: slider-in-next calc(var(--duration-hover) / 2) var(--ease-hover); }
  .slider__slide.is-in-prev { animation: slider-in-prev calc(var(--duration-hover) / 2) var(--ease-hover); }
  .slider__slide.is-out-next { animation: slider-out-next calc(var(--duration-hover) / 2) var(--ease-hover) forwards; }
  .slider__slide.is-out-prev { animation: slider-out-prev calc(var(--duration-hover) / 2) var(--ease-hover) forwards; }
}
@keyframes slider-in-next { from { transform: translateX(100%); } to { transform: none; } }
@keyframes slider-in-prev { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes slider-out-next { from { transform: none; } to { transform: translateX(-100%); } }
@keyframes slider-out-prev { from { transform: none; } to { transform: translateX(100%); } }

/* Imagem recortada, 480 → 700px */
.slider { --slider-height: clamp(30rem, 24.895rem + 20.952vw, 43.75rem); }
.slider__media { position: relative; height: var(--slider-height); margin: 0; overflow: clip; background: var(--color-surface); }
.slider__drift { position: absolute; inset: calc(-2 * var(--parallax-drift)) 0; --drift: 2; }
/* Alinhamento vertical do painel (chat 38): 50% por omissão; o painel escreve --slider-focus só quando muda */
.slider__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--slider-focus, 50%); }

/* Caixas por cima da imagem (tema claro fixo: caixa branca, botão preto) */
.slider__overlay {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  display: grid;
  justify-items: stretch;
  color: var(--color-text);
}
.slider__overlay .button-row { justify-self: start; }
.slider__title, .slider__date { margin: 0; padding: var(--space-2) var(--space-4); background: var(--color-bg); }
.slider__title { font-size: var(--text-slider); }
.slider__date { margin-top: var(--space-3); font-size: var(--text-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); }
.slider__overlay .button-row { margin-top: var(--space-4); }
@media (min-width: 64em) {
  /* Caixas com 4 colunas de largura */
  .slider__overlay { right: auto; width: calc((100% - 11 * var(--grid-gap)) / 3 + 3 * var(--grid-gap)); }
  .slider__title { padding-inline-end: var(--space-6); }
  .slider__date { padding-inline-end: var(--space-6); }
  .slider__overlay .button-row { margin-top: var(--space-6); }
}

/* Botões anterior e seguinte: por baixo da imagem, ao centro */
.slider__controls { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }
.slider__controls[hidden] { display: none; }

/* assets/css/blocks/feature.css */
/* ==========================================================================
   Lab 8 — Destaque com ligação (feature_link, forma side): "Peça em destaque",
   com o desenho da página atual.
   A peça é escolhida da coleção: título, ficha e inventário (por baixo da ficha, sem badge, chat 38) vêm
   da peça, como no lab 3.
   Imagem da peça na proporção real, sem recorte, com a largura da capa do
   destaque das publicações (vertical, quadrada ou horizontal: a largura é a
   mesma e a altura segue a imagem). Sem parallax: a peça mostra-se inteira e o
   deslocamento que cabia entre o título e o botão (48px) não se notava (lab 8). Ao lado: título,
   ficha, inventário e uma só ligação, "Ver peça", com a linha à frente
   (título da peça em texto escondido). Funciona como cartão: um clique na
   imagem ou no texto abre a peça (feature.js); no teclado e nos leitores
   de ecrã há só a ligação. Zoom da regra única (2.16).
   Desktop: o texto começa em cima e fica preso (sticky) até à base da
   imagem. Telemóvel: imagem → texto a 16px, como nos cartões.
   ========================================================================== */

.feature { display: grid; gap: var(--space-3); align-items: start; }
.feature__media { margin: 0; overflow: clip; }
.feature__media, .feature__text { cursor: pointer; }
.feature__media img { display: block; width: 100%; height: auto; }
.feature__text > * { max-width: var(--measure); }
.feature__title { margin: 0; font-family: var(--font-body); font-size: var(--text-body-xl); letter-spacing: var(--ls-body); }
.feature__details { margin: var(--space-4) 0 0; line-height: var(--lh-body); letter-spacing: var(--ls-body); }
/* Inventário por baixo da ficha, sem badge, a 14px, como no cartão da peça (chat 38) */
.feature__text > .feature__inventory { margin: var(--space-2) 0 0; font-size: var(--text-body-md); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--color-text-muted); }

.feature__text .line-link { margin-top: var(--space-3); }

@media (min-width: 48em) {
  .feature { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .feature__media { grid-column: 1 / span 4; }
  .feature__text { grid-column: 5 / span 4; margin-left: var(--space-6); }
}
@media (min-width: 64em) {
  .feature { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  /* Imagem nas colunas 5 a 8, encostada ao texto, com a largura da capa do destaque das
     publicações: metade de 3 colunas da grelha de 5 (48px entre colunas) menos 24px.
     A área das colunas 5 a 8 (100%) vale um terço do contentor menos 2 espaços da grelha.
     Simplificado: 90% + 0,6 × espaço da grelha − 0,2 × 48px − 0,5 × 24px. */
  .feature__media { grid-column: 5 / span 4; justify-self: end; width: calc(90% + 0.6 * var(--grid-gap) - 0.2 * var(--space-6) - 0.5 * var(--space-4)); }
  /* Texto a 72px da imagem (24 + 48); preso por baixo do cabeçalho fixo até à base da imagem */
  .feature__text { grid-column: 9 / span 4; position: sticky; top: calc(var(--header-offset, 0px) + var(--space-6)); transition: top var(--duration-motion) var(--ease); }
}

/* assets/css/blocks/timeline.css */
/* ---------- Linha do tempo (timeline, lab 9, "O edifício") ----------
   Lista ordenada de anos; cada ano é um título (nível escolhido no bloco, h3 por omissão)
   seguido da lista de acontecimentos, sempre à vista (antes: um acordeão por ano).
   Desktop (a partir de 1024px): ano em Lora nas colunas 1 a 3, alinhado à direita, a 48px da
   linha; linha vertical de 2px (texto a 20%) no início da coluna 4, com um ponto em cada ano;
   acontecimentos em texto normal, a 48px da linha, até 6 colunas (limitados por --measure).
   Telemóvel: linha à esquerda, ano por cima dos acontecimentos.
   Ao descer (timeline.js), a linha enche-se de amarelo até 60% da altura do ecrã, o ponto de cada
   ano que passou acende e o ano activo cresce 25% para o lado da linha. Com movimento reduzido a
   linha não enche e o ano muda de tamanho sem animação. Sem JS: linha fixa, todos iguais.
   O ano tem só a largura do texto (fit-content): ao crescer não passa da largura da página
   (revisto no lab 9: com a largura da coluna, crescia para fora e criava scroll horizontal).
   No tema claro, o amarelo passa à cor do texto (o amarelo sobre branco não se vê).
   Tudo o que é linha e ponto é decorativo (aria-hidden). */
.timeline__list { margin: 0; padding: 0; list-style: none; }
.timeline__item { display: grid; grid-template-columns: var(--border-width) minmax(0, 1fr); column-gap: var(--space-4); }
/* A linha vai do centro da primeira bola ao centro da última (decisões 2.39, ponto 3, chat 27):
   cada ano desenha só o troço do centro da sua bola ao centro da bola seguinte (::after, que passa
   por baixo da bola seguinte, desenhada depois), e o último não desenha troço. O enchimento segue
   os troços. */
.timeline { --timeline-dot-top: 10px; --timeline-dot-center: calc(var(--timeline-dot-top) + var(--space-3) / 2); }
.timeline__rail { position: relative; grid-column: 1; grid-row: 1 / span 2; }
.timeline__rail::after { content: ""; position: absolute; top: var(--timeline-dot-center); bottom: calc(-1 * var(--timeline-dot-center)); left: 0; width: 100%; background: var(--color-divider); }
.timeline__item:last-child .timeline__rail::after, .timeline__item:last-child .timeline__fill { display: none; }
.timeline__rail::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: var(--timeline-dot-top);
  left: -7px;
  width: var(--space-3);
  height: var(--space-3);
  border: var(--border-width) solid color-mix(in srgb, var(--color-text) 40%, transparent);
  border-radius: var(--radius-round);
  background: var(--color-bg);
  transition: background-color var(--duration-fade) var(--ease), border-color var(--duration-fade) var(--ease);
}
.timeline__fill { position: absolute; top: var(--timeline-dot-center); bottom: calc(-1 * var(--timeline-dot-center)); left: 0; width: 100%; background: var(--color-accent); transform: scaleY(var(--timeline-progress, 0)); transform-origin: top; }
.timeline__item.is-active .timeline__rail::before { border-color: var(--color-accent); background: var(--color-accent); }
[data-theme="light"] .timeline__fill { background: var(--color-text); }
[data-theme="light"] .timeline__item.is-active .timeline__rail::before { border-color: var(--color-text); background: var(--color-text); }
.timeline__year { grid-column: 2; grid-row: 1; align-self: start; justify-self: start; width: fit-content; margin: 0; padding-bottom: var(--space-3); font-size: var(--text-h2); transform-origin: left center; }
.timeline__item.is-current .timeline__year { transform: scale(1.25); }
@media (prefers-reduced-motion: no-preference) { .timeline__year { transition: transform calc(var(--duration-hover) / 2) var(--ease-hover); } }
.timeline__events { grid-column: 2; grid-row: 2; max-width: var(--measure); margin: 0; padding: 0 0 var(--space-6) 1.5em; list-style-type: disc; }
.timeline__item:last-child .timeline__events { padding-bottom: 0; }
.timeline__events li { margin-block: 0 var(--space-2); }
.timeline__events li::marker { font-size: 1.25em; line-height: 1; color: var(--color-text-subtle); }
@media (min-width: 64em) {
  .timeline__item { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .timeline__year { grid-column: 1 / span 3; grid-row: 1; justify-self: end; margin-right: var(--space-6); padding-bottom: 0; line-height: 1; text-align: end; transform-origin: right center; }
  .timeline__rail { grid-column: 4; grid-row: 1; justify-self: start; width: var(--border-width); }
  .timeline__events { grid-column: 4 / span 6; grid-row: 1; padding-left: var(--space-6); }
}

/* assets/css/blocks/columns.css */
/* ==========================================================================
   Lab 10 — Colunas (columns): marcador que põe os blocos seguintes lado a lado.
   Título e âncora opcionais do grupo, por cima das colunas.
   Coluna presa (campo do marcador: nenhuma, 1.ª ou 2.ª): só a partir de
   1024px, por baixo do cabeçalho fixo (regra 17). Abaixo de 768px empilha.
   Entre colunas, 72px a partir de 1024px (24px da grelha + 48px de margem),
   como a imagem com texto ao lado (2.12).
   ========================================================================== */
.columns__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-block); align-items: start; }
.columns__col { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-width: 0; }
.columns__col > * { margin: 0; }
@media (min-width: 48em) {
  .columns__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gap); }
}
@media (min-width: 64em) {
  .columns__col + .columns__col { margin-left: var(--space-6); }
  .columns__col--sticky { position: sticky; top: calc(var(--header-offset, 0px) + var(--space-6)); transition: top var(--duration-motion) var(--ease); }
}

/* 3 e 4 colunas (tema, chat 24): o número escolhido a partir de 1024px; entre 768 e 1023px
   ficam 2 por linha (a regra base), como na intranet. Entre colunas o mesmo espaço de 72px
   (grelha + 48px), sem a margem da 2.ª coluna, que com mais de duas as fazia desiguais */
@media (min-width: 64em) {
  .columns__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .columns__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .columns__grid--3, .columns__grid--4 { column-gap: calc(var(--grid-gap) + var(--space-6)); }
  .columns__grid--3 > .columns__col + .columns__col, .columns__grid--4 > .columns__col + .columns__col { margin-left: 0; }
}

/* Alinhamento vertical e espaço entre colunas (campos da intranet, chat 27). O espaço usa a
   escala do Casa Ásia: `--columns-gap` a partir de 768px (substitui os 72px), `--columns-gap-m`
   entre as colunas empilhadas em telemóvel. */
.columns__grid[data-valign="center"] { align-items: center; }
.columns__grid[data-valign="end"] { align-items: end; }
@media (max-width: 47.9375em) {
  .columns__grid[style*="--columns-gap-m"] { gap: var(--columns-gap-m); }
}
@media (min-width: 48em) {
  .columns__grid[style*="--columns-gap:"] { column-gap: var(--columns-gap); }
}
@media (min-width: 64em) {
  .columns__grid[style*="--columns-gap:"] > .columns__col + .columns__col { margin-left: 0; }
  .columns__grid--3[style*="--columns-gap:"], .columns__grid--4[style*="--columns-gap:"] { column-gap: var(--columns-gap); }
}

/* Os blocos de coluna de texto (Text, List, Text quote, Text highlight, HTML, Accordion) dentro
   de umas Columns ocupam a coluna toda, até à largura de leitura: a grelha de 12 da coluna de
   texto é da página, não da coluna (chat 27). */
.columns__col .text-block { display: block; }

/* assets/css/blocks/cards-content.css */
/* ==========================================================================
   Lab 10 — Cartões de conteúdo (cards_content), não clicáveis.
   Desenho dos cards do contact (lab 7): superfície, 24px de espaço interior
   (36px a partir de 768px). Ícone Lucide opcional, 24px num círculo de 40px
   com contorno de 1px (o do card de ficheiro), na cor do texto. Decorativo.
   Com título, o título fica à frente do ícone; sem título, o ícone fica
   sozinho por cima do texto (como o cabeçalho "ao lado" da intranet).
   Lista em 2 colunas: campo do card, só a partir de 1024px.
   ========================================================================== */
.cards-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.cards-content__card { padding: var(--space-4); background: var(--color-surface); }
@media (min-width: 48em) { .cards-content__card { padding: var(--space-5); } }
/* O círculo é a caixa; o SVG fica a 24px exactos (escalado dentro do círculo ficava a 22px, com traço desfocado) */
.cards-content__icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: var(--space-3); border-radius: var(--radius-round); color: var(--color-on-accent); background: var(--color-accent); }   /* chat 18: ícone decorativo, fundo amarelo sem contorno (o contorno fica para os controlos) */
.cards-content__icon svg { display: block; width: 1.5rem; height: 1.5rem; }
.cards-content__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.cards-content__head .cards-content__icon { flex: none; margin: 0; }
.cards-content__head .cards-content__title { margin: 0; }
.cards-content__title { margin: 0 0 var(--space-2); font-size: var(--text-h3); }   /* chat 18: título em Lora, como os outros H3 */
.cards-content__text { overflow-wrap: break-word; hyphens: manual; }
.cards-content__text > * { max-width: var(--measure); }
.cards-content__text > :first-child { margin-top: 0; }
.cards-content__text > :last-child { margin-bottom: 0; }
/* Lista em 2 colunas (campo do card): a partir de 1024px; em telemóvel e tablet, 1 coluna */
@media (min-width: 64em) {
  .cards-content__text--columns { max-width: none; }
  /* A 2.ª coluna começa onde começa o texto do card da 2.ª coluna da grelha de cima (columns, 72px entre colunas):
     espaço = grelha + 96 + 36, com o recuo da lista (36) igual ao espaço interior do card (36) */
  .cards-content__text--columns > ul { max-width: none; columns: 2; column-gap: calc(var(--grid-gap) + var(--space-8) + var(--space-5)); }
  .cards-content__text--columns li { break-inside: avoid; }
  .cards-content__text--columns li:first-child { margin-top: 0; }
}

/* Colunas (campo da intranet, chat 27): 2 a partir de 768px; 3 e 4 a partir de 1024px */
@media (min-width: 48em) {
  .cards-content--2, .cards-content--3, .cards-content--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .cards-content--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards-content--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* assets/css/blocks/list.css */
/* ==========================================================================
   List (list, chat 27; decisões 2.39 e 2.41).
   - Forma «Badge»: cada linha numa caixa amarela, o desenho do preçário do
     lab 10 (antes o bloco prices). As linhas escrevem-se como se leem.
   - Colunas (campo da intranet): uma lista só, partida em colunas por CSS,
     lida do princípio ao fim pelo leitor de ecrã. 2 a partir de 768px; 3 e 4
     a partir de 1024px.
   - Estilo «Badge» no editor de texto (`<span class="badge">`, coordenadas do
     lab 10): dentro de um parágrafo, sem a margem de cima do badge solto.
   ========================================================================== */
.list-badge { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.block-title + .list-badge { margin-top: 0; }
.list-badge__item { margin: 0; padding: var(--space-2) var(--space-3); color: var(--color-on-accent); background: var(--color-accent); line-height: var(--lh-body); }
.list-badge__item a { color: inherit; }

@media (min-width: 48em) {
  .list-cols[data-cols] { columns: 2; column-gap: var(--grid-gap); }
  .list-cols[data-cols] > li { break-inside: avoid; }
  .list-cols[data-cols] > li:first-child { margin-top: 0; }
  .list-badge[data-cols] { display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; gap: var(--space-2) var(--grid-gap); }
}
@media (min-width: 64em) {
  .list-cols[data-cols="3"] { columns: 3; }
  .list-cols[data-cols="4"] { columns: 4; }
  .list-badge[data-cols="3"] { grid-template-columns: repeat(3, max-content); }
  .list-badge[data-cols="4"] { grid-template-columns: repeat(4, max-content); }
}

.prose .badge { margin: 0; }

/* assets/css/blocks/not-found.css */
/* ==========================================================================
   Página não encontrada (lab 11)
   Ecrã inteiro, sem cabeçalho nem rodapé, sempre em tema escuro. Logótipo no
   canto superior esquerdo (sem ligação: o botão é o caminho de volta); em
   baixo à esquerda, o título (Erro 404), a frase e o botão.
   Fundo: linhas de varrimento e ruído por cima do fundo escuro, decorativos
   (aria-hidden), como no site da TMSR. Com movimento reduzido ficam parados.
   ========================================================================== */
.not-found {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: var(--color-text);
  background: var(--color-bg);
}
.not-found__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
  padding-block: var(--space-3);
}
@media (min-width: 64em) { .not-found__inner { padding-block: var(--space-4); } }
.not-found__logo { grid-row: 1; width: 4rem; height: auto; }
@media (min-width: 64em) { .not-found__logo { width: 7.5rem; } }
.not-found__body { grid-row: 3; max-width: var(--measure); }

.not-found__title { margin: 0; max-width: none; }
.not-found__label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-text-subtle);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  text-transform: uppercase;
}
.not-found__code { display: block; color: var(--color-text); font-size: var(--text-h1-hp); line-height: 1; }
.not-found__text { margin: var(--space-4) 0 0; }
.not-found__action { margin: var(--space-5) 0 0; }

/* Fundo (TMSR): linhas de varrimento de 2px e ruído de pontos */
.not-found__scanlines,
.not-found__noise { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.not-found__scanlines {
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 1px, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0.5) 2px);
  opacity: 0.5;
}
.not-found__noise {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    radial-gradient(circle at 75% 70%, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px, 7px 7px;
  opacity: 0.7;
}
/* Chat 36 (decidido no chat 15, 2.27): as linhas e o ruído animam 5 segundos
   e desaparecem num fade de 600ms; fica o fundo do site. As contagens param
   as animações aos 5 segundos (6s × 0,8333; 0,15s × 33,333). */
@media (prefers-reduced-motion: no-preference) {
  .not-found__scanlines { animation: not-found-scan 6s 0.8333 linear forwards, not-found-fade 600ms ease 5s forwards; }
  .not-found__noise { animation: not-found-noise 0.15s steps(3) 33.333 forwards, not-found-fade 600ms ease 5s forwards; }
}
@keyframes not-found-fade { to { opacity: 0; } }
@keyframes not-found-scan {
  0% { background-position: 0 0; }
  100% { background-position: 0 200px; }
}
@keyframes not-found-noise {
  0% { background-position: 0 0, 0 0, 0 0; }
  20% { background-position: -2px 1px, 1px -2px, 2px 1px; }
  40% { background-position: 2px -1px, -2px 1px, -1px -2px; }
  60% { background-position: -1px 2px, 2px -1px, 1px 2px; }
  80% { background-position: 1px -2px, -1px 2px, -2px -1px; }
  100% { background-position: 0 0, 0 0, 0 0; }
}

/* ==========================================================================
   Mosaico «404» (chat 25, decisões 2.39, ponto 14) — variante not-found--mosaic
   Sem logótipo. «Erro» por cima do mosaico (o 404 só para leitores de ecrã);
   o mosaico ao centro do ecrã; o texto e o botão (sem seta) centrados no
   espaço por baixo. Três algarismos feitos de quadrados, cada um com a sua
   imagem base e sempre uma só imagem em todos os quadrados. Cada grupo de
   quadrados tem uma imagem: com o rato num grupo, o algarismo todo vira para
   a imagem desse grupo; quando o rato sai do algarismo, volta à base. O mosaico inclina-se um pouco na direção
   do rato. Nada se mexe sozinho. Decorativo (aria-hidden). Com movimento
   reduzido: troca sem virar e sem inclinação.
   ========================================================================== */
/* Linhas 1fr · auto · 1fr: o mosaico fica ao centro do ecrã e o texto ao
   meio do espaço de baixo. */
.not-found--mosaic .not-found__inner { grid-template-rows: 1fr auto 1fr; padding-block: 0; }
.nf-mosaic-wrap {
  grid-row: 2;
  justify-self: center;
}
.not-found--mosaic .not-found__body {
  grid-row: 3;
  align-self: center;
  justify-self: center;
  text-align: center;
  padding-block: var(--space-4);
}
.not-found--mosaic .not-found__text {
  margin: 0;
  color: var(--color-text-subtle);
  font-family: var(--font-body);
  font-size: 1rem;
}
.nf-mosaic-wrap .not-found__title { margin: 0 0 var(--space-2); text-align: center; }
.nf-mosaic {
  --gap: 4px;
  --tile: min(6rem, calc((100vw - var(--page-margin) * 2 - 1rem - var(--gap) * 10) / 11));
  --box-w: calc(3 * var(--tile) + 2 * var(--gap));
  --box-h: calc(5 * var(--tile) + 4 * var(--gap));
  display: flex;
  gap: calc(var(--tile) + 2 * var(--gap));
  transition: transform 300ms var(--ease-hover);
}
@media (min-width: 48em) { .nf-mosaic { --gap: 8px; } }
/* Em desktop o quadrado limita-se também pela altura do ecrã, para o mosaico
   ao centro deixar espaço para o texto por baixo (nunca abaixo de 40px). */
@media (min-width: 64em) {
  .nf-mosaic { --tile: max(2.5rem, min(6rem, calc((100svh - 32rem) / 5))); }
}
.nf-mosaic__digit {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, var(--tile));
  grid-template-rows: repeat(5, var(--tile));
  gap: var(--gap);
  perspective: 800px;
}
.nf-mosaic__tile {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 400ms var(--ease-hover);
}
.nf-mosaic__tile.is-turned { transform: rotateY(180deg); }
.nf-mosaic__face {
  --img-w: calc(var(--box-h) * var(--ratio, 1));
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  background-color: var(--color-surface);
  background-repeat: no-repeat;
  /* Sem JS: a fotografia inteira pela altura do algarismo, ao centro. Com JS,
     o mosaic.js enquadra a imagem no algarismo (--iw, --ih, --px, --py, em píxeis). */
  background-size: var(--iw, var(--img-w)) var(--ih, var(--box-h));
  background-position:
    var(--px, calc((var(--box-w) - var(--img-w)) / 2 - var(--x) * (var(--tile) + var(--gap))))
    var(--py, calc(0px - var(--y) * (var(--tile) + var(--gap))));
}
.nf-mosaic__face--back { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) {
  .nf-mosaic, .nf-mosaic__tile { transition: none; }
}

/* assets/css/blocks/search.css */
/* ==========================================================================
   Página de resultados da pesquisa (lab 11)
   Contagem, filtro por tipo (o componente dos filtros de 2.15, igual às peças do
   país e às atividades) e uma só grelha com os cartões das listagens (2.19),
   todos os tipos misturados. A pesquisa muda-se na lupa do cabeçalho.
   ========================================================================== */
/* Contagem: por baixo dos filtros, à esquerda, com 16px de espaço; sem
   resultados, sozinha no lugar da grelha. */
.search-page__count { margin: 0; font-size: var(--text-body-md); color: var(--color-text-muted); }
.listing .filters + .search-page__count { margin-top: var(--space-3); }
.search-page__count:empty { display: none; }

/* assets/css/blocks/html.css */
/* ==========================================================================
   Lab 12 — Bloco html: HTML em bruto (declaração de acessibilidade, tabela de
   cookies). Usa a coluna e a tipografia do bloco de texto (.text-block .prose).
   A marcação do gerador da declaração (mr-*) fica intacta; aqui só se dá
   espaço aos títulos, à lista de contactos, ao filete e à tabela.
   Os títulos com id dentro do bloco são destinos do índice da página.
   ========================================================================== */

.html-block [id] { scroll-margin-top: calc(var(--header-offset, 0px) + var(--anchors-bar, 0px) + var(--space-4)); }

/* Títulos dentro do conteúdo: 48px por cima (36px no h3), 16px até ao texto */
.html-block .prose h2 { margin: var(--space-6) 0 var(--space-heading); }
.html-block .prose h3 { margin: var(--space-5) 0 var(--space-heading); }
.html-block .prose > :first-child { margin-top: 0; }

/* Lista de definições (contactos do gerador): rótulo a 14px, valor por baixo */
.html-block .prose dl { margin: 0 0 var(--space-paragraph); }
.html-block .prose dt { font-size: var(--text-body-md); color: var(--color-text-subtle); }
.html-block .prose dd { margin: 0; }

/* Filete: texto a 20%, como o espaçador e os cards */
.html-block .prose hr {
  height: var(--border-width);
  margin: var(--space-6) 0;
  border: 0;
  background: var(--color-divider);
}

/* Tabela (tabela de cookies), com o desenho do site atual: cabeçalho em faixa amarela,
   cada linha numa caixa de superfície, 4px entre linhas, 24px de espaço interior.
   Telemóvel (abaixo de 768px): cada linha passa a card, com o rótulo da coluna
   (data-label, escrito pelo plugin) por cima de cada valor; o cabeçalho fica
   escondido só visualmente e continua a ser lido. */
.html-block table { width: 100%; margin: 0 0 var(--space-paragraph); border-collapse: separate; border-spacing: 0 var(--space-1); }
.html-block th, .html-block td { padding: var(--space-4); text-align: start; vertical-align: top; }
.html-block th { color: var(--color-on-accent); background: var(--color-accent); font-weight: var(--weight-regular); line-height: var(--lh-tight); }
.html-block td { background: var(--color-surface); }
.html-block td { overflow-wrap: break-word; }
/* Com tabela, o bloco sai da largura de leitura: 9 colunas a partir de 1024px (3/4, como no site atual) */
.html-block > .prose:has(table) { max-width: none; }
/* Coluna da descrição com a largura de leitura (C 2.3: ASI #23, CMRA Fix 36); a tabela não estica acima disso */
@media (min-width: 48em) {
  .html-block .cookie_display { width: auto; max-width: 100%; }
  .html-block .cookie_display th:nth-child(2) { width: var(--measure); }
}
@media (min-width: 64em) { .html-block > .prose:has(table) { grid-column: 1 / span 9; } }

@media (max-width: 47.99em) {
  .html-block table, .html-block tbody, .html-block tr, .html-block td { display: block; }
  .html-block thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .html-block tr { padding: var(--space-4); background: var(--color-surface); }
  .html-block tr + tr { margin-top: var(--space-3); }
  .html-block td { padding: 0; background: none; }
  .html-block td + td { margin-top: var(--space-3); }
  .html-block td::before { content: attr(data-label); display: block; font-size: var(--text-body-md); color: var(--color-text-subtle); }
}

/* Tabela do SCML Cookie Manager 4.1.1 (classe nova, chat 29): a mesma coluna da descrição;
   o <caption> escondido só visualmente (o título do bloco já o mostra, lab 12) e o texto
   de ajuda do plugin (.sr-only) escondido como o .visually-hidden do tema */
@media (min-width: 48em) {
  .html-block .scml-cookies-table { width: auto; max-width: 100%; }
  .html-block .scml-cookies-table th:nth-child(2) { width: var(--measure); }
}
.html-block .scml-cookies-table caption,
.html-block .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* assets/css/blocks/glossary.css */
/* ==========================================================================
   Lab 12 — Glossário (glossary): lista de definições numa só <dl>, por ordem
   do conteúdo. Cada termo é um <div> com <dt> e <dd> (válido em <dl>), com
   âncora própria (A11Y-98). O índice da página (anchors) mostra as letras e
   cada letra liga ao primeiro termo dessa letra.
   3 colunas a partir de 1024px, 2 a partir de 768px, 1 em telemóvel.
   Filete por baixo de cada termo, como no site atual. Sem negrito.
   Espaço por baixo em margem: na quebra de coluna a margem cai e as colunas
   começam todas à mesma altura.
   ========================================================================== */

.glossary__list { margin: 0; column-gap: var(--grid-gap); }
@media (min-width: 48em) { .glossary__list { columns: 2; } }
@media (min-width: 64em) { .glossary__list { columns: 3; column-gap: var(--space-6); } }

.glossary__item {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-divider);
  break-inside: avoid;
  scroll-margin-top: calc(var(--header-offset, 0px) + var(--anchors-bar, 0px) + var(--space-4));
}

.glossary__term { font-size: var(--text-body-xl); line-height: var(--lh-heading); letter-spacing: var(--ls-body); }
.glossary__definition { margin: var(--space-2) 0 0; }
.glossary__definition p { margin: 0; }
.glossary__note, .glossary__source { margin-top: var(--space-2); font-size: var(--text-body-md); color: var(--color-text-muted); }
.glossary__definition .glossary__note, .glossary__definition .glossary__source { margin-top: var(--space-2); }

/* assets/css/blocks/cookies.css */
/* ==========================================================================
   Aviso de cookies (SCML Cookie Manager 4.1.2; o tema dá o lugar e o desenho,
   inc/cookies.php; A11Y-86).
   Desenho do site atual: caixa clara fixa no canto inferior esquerdo, título
   «Cookies» em Lora, a mensagem (com a ligação para a página de cookies) e
   dois botões secundários iguais: «Apenas os necessários» e «Aceitar todos».
   A caixa usa os tokens do tema claro nos dois temas (tokens.css).
   No HTML vem logo a seguir ao «Saltar para o conteúdo»: o Tab chega lá antes
   do resto da página.
   Telemóvel: a largura toda, com 16px de margem. A partir de 768px: 576px de
   largura (os dois botões numa linha, com o texto a 16px), a 48px do canto.
   ========================================================================== */

.cookie-banner {
  position: fixed;
  z-index: 50;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  max-height: calc(100dvh - 2 * var(--space-3));
  overflow-y: auto;
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  color: var(--color-text);
  background: var(--color-bg);
}
@media (min-width: 48em) {
  .cookie-banner {
    left: var(--space-6);
    right: auto;
    bottom: var(--space-6);
    width: 36rem;
    max-width: calc(100% - 2 * var(--space-6));
    max-height: calc(100dvh - 2 * var(--space-6));
    padding: var(--space-5);
  }
}

.cookie-banner__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-body-xl);
  font-weight: var(--weight-regular);
  line-height: var(--lh-heading);
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text);
}
.cookie-message p {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
}
.cookie-message a,
.cookie-info-link {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.cookie-message a:hover,
.cookie-info-link:hover { color: var(--color-link-hover); }
.cookie-message a:focus-visible,
.cookie-info-link:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }

.cookie-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.cookie-info-section { margin-top: var(--space-3); }
.cookie-info-link { display: inline-flex; align-items: center; min-height: var(--target-min); }