/* 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) */
.opening-status--mobile { align-items: flex-start; }
.opening-status--mobile .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; }
}
.opening-status--mobile { display: flex; padding-block: 0 var(--space-3); }
@media (min-width: 64em) { .opening-status--mobile { display: none; } }
/* 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) */
.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)); }
  .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);
}