/* /equipa: o topo com o monte de 27 pedras, o docente, a turma (retratos 4:5, raio 0), como nasceu, contacto.
   Sem fotografia, cada pessoa é um seixo desenhado (equipa.mjs) com as iniciais a marcador. */

/* ── Topo ── */
.equipa__topo {
  display: grid; gap: var(--s-6); align-items: end;
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "abertura" "muro" "colofao";
  padding-bottom: var(--s-6);
}
.equipa__abertura { grid-area: abertura; }
.colofao { grid-area: colofao; }
.muro { grid-area: muro; }
.equipa__abertura { display: grid; gap: var(--s-4); }
.equipa__titulo-grande {
  font-size: clamp(2.625rem, 1.5rem + 5vw, 5.25rem); line-height: 1; letter-spacing: -.025em;
  /* com a letra do navegador muito aumentada, «primeira» deixava de caber num ecrã estreito */
  font-size: min(clamp(2.625rem, 1.5rem + 5vw, 5.25rem), 15vw); overflow-wrap: break-word;
}
.equipa__lede { font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); line-height: 1.5; color: var(--c-text-2); max-width: 38ch; }

/* Colofão: o curso e a casa, compostos como a página de rosto de um livro */
.colofao { border-top: var(--line) solid var(--c-line-strong); padding-top: var(--s-4); display: grid; gap: var(--s-2); max-width: 36rem; }
.colofao__curso { font-family: var(--f-serif); font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem); font-weight: 600; line-height: 1.2; text-wrap: balance; }
.colofao__uc {
  display: flex; flex-wrap: wrap; gap: 0 var(--s-2);
  font-family: var(--f-ui); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-text-2);
}
/* o separador fica no fim do item anterior: quando a linha parte, nunca começa por «·» */
.colofao__uc span:not(:last-child)::after { content: "·"; margin-left: var(--s-2); color: var(--c-text-3); }
.colofao__escola { margin-top: var(--s-3); padding-top: var(--s-3); border-top: var(--line) solid var(--c-line); color: var(--c-text-2); line-height: 1.35; }
.colofao__universidade { font-family: var(--f-serif); font-style: italic; font-size: 1.125rem; color: var(--c-text); line-height: 1.3; }

/* O monte de pedras */
.muro { display: grid; gap: var(--s-2); }
/* nunca mais alto do que o ecrã útil: em janelas baixas o monte encolhe e fica ao centro */
.muro__desenho {
  aspect-ratio: 760 / 410; width: min(100%, calc((100svh - var(--header-h) - 4.5rem) * 760 / 410)); margin-inline: auto;
}
/* L0 (280 a 359 px): o monte fica dentro das margens de 16 px, como o resto da página (antes saía delas e a última
   pedra ficava cortada à direita) */
.muro__svg { width: 100%; height: 100%; overflow: visible; }
.muro__chao { stroke: var(--c-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.muro__pedra { cursor: pointer; }
.muro__mexe { transform-box: fill-box; transform-origin: 50% 100%; }
.muro--a-cair .muro__mexe { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
.muro--assente .muro__mexe {
  transform: none; opacity: 1;
  transition: transform 1100ms cubic-bezier(.2, .8, .25, 1) var(--atraso), opacity 300ms linear var(--atraso);
}
.muro--pronto .muro__mexe { transition: transform var(--t-ui) var(--ease-out); }
.muro--pronto .muro__pedra--apontada .muro__mexe { transform: translateY(-16px) rotate(-3deg); }
.muro__pedra--apontada .seixo__contorno { stroke: var(--c-text-2); }
.muro__legenda {
  min-height: 1.75rem; text-align: center;
  font-family: var(--f-ui); font-size: var(--fs-small); color: var(--c-text-3);
}
.muro__nome--ativo { font-family: var(--f-serif); font-size: 1.0625rem; color: var(--c-text); }

@media (min-width: 960px) {
  .equipa__topo {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "abertura muro" "colofao muro";
    gap: var(--s-6) var(--s-7); /* sem padding-top a mais: a página começa à altura das outras */
  }
  .muro { align-self: center; }
}
/* A-baixa (telemóvel deitado): o mesmo topo em duas colunas, a abertura ao lado do monte */
@media (min-width: 30em) and (max-height: 35em) and (orientation: landscape) {
  .equipa__topo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "abertura muro" "colofao muro";
    gap: var(--s-4) var(--s-6);
  }
  .equipa__titulo-grande { font-size: clamp(2.25rem, 1rem + 4vw, 3.25rem); }
  .muro { align-self: start; padding-top: var(--s-5); } /* inteiro logo no primeiro ecrã */
}

/* ── Retrato: o enquadramento comum ── */
.retrato {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--c-surface); border: var(--line) solid var(--c-line); border-radius: var(--r-0);
  transition: border-color var(--t-panel) var(--ease-out);
}
.retrato > svg, .retrato > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.retrato__foto {
  object-fit: cover; object-position: 50% 30%;
  filter: grayscale(1) contrast(1.04) brightness(.94);
  transition: filter var(--t-panel) var(--ease-out);
}
.retrato--ativo .retrato__foto { filter: none; }

/* ── O seixo ── */
.seixo__chao { stroke: var(--c-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.seixo__assento { fill: var(--c-deep); opacity: .7; transform-box: fill-box; transform-origin: center; transition: transform var(--t-panel) var(--ease-out), opacity var(--t-panel); }
.seixo__pedra { transform-box: fill-box; transform-origin: 50% 100%; transition: transform var(--t-panel) var(--ease-out); }
.seixo__contorno { fill: none; stroke: var(--c-line-strong); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: stroke var(--t-ui); }
.seixo__veio { fill: none; stroke: var(--c-text); stroke-opacity: .13; stroke-linecap: round; }
.seixo__brilho { fill: none; stroke: var(--c-text); stroke-opacity: .16; stroke-width: 2; stroke-linecap: round; }
.seixo__iniciais { font-family: var(--f-hand); font-weight: 400; fill: var(--c-text); letter-spacing: -.02em; }
/* O seixo é uma pedra a sério (granito, xisto: escura nos dois temas) e as iniciais são marcador branco. No dia de cal
   a tinta do texto ficaria preta sobre a pedra; o marcador, os veios e o brilho passam ao branco do papel. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) .seixo__iniciais { fill: var(--c-surface); }
  :root:not([data-tema="escuro"]) .seixo__veio, :root:not([data-tema="escuro"]) .seixo__brilho { stroke: var(--c-surface); }
}
:root[data-tema="claro"] .seixo__iniciais { fill: var(--c-surface); }
:root[data-tema="claro"] .seixo__veio, :root[data-tema="claro"] .seixo__brilho { stroke: var(--c-surface); }

/* Ao passar o rato (ou tocar): a pedra levanta-se um pouco e roda; a fotografia ganha cor. */
.retrato--ativo .seixo__pedra { transform: translateY(-14px) rotate(-3.5deg); }
.retrato--ativo .seixo__assento { transform: scaleX(.86); opacity: .45; }
.retrato--ativo { border-color: var(--c-line-strong); }
@media (hover: hover) {
  .retrato:hover .seixo__pedra { transform: translateY(-14px) rotate(-3.5deg); }
  .retrato:hover .seixo__assento { transform: scaleX(.86); opacity: .45; }
  .retrato:hover .retrato__foto { filter: none; }
  .retrato:hover { border-color: var(--c-line-strong); }
}

/* ── Docente ── */
.docente { display: grid; gap: var(--s-5); align-items: end; scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.docente .retrato { width: min(100%, 220px); }
.docente__texto { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.docente__nome { font-family: var(--f-serif); font-size: var(--fs-h2); font-weight: 600; line-height: 1.15; }
.docente__ficha { display: grid; max-width: 36rem; border-top: var(--line) solid var(--c-line); margin-top: var(--s-2); }
.docente__ficha > div {
  display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: var(--s-3);
  padding-block: var(--s-2); border-bottom: var(--line) solid var(--c-line);
}
.docente__ficha dt {
  font-family: var(--f-ui); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-text-3); padding-top: .2em;
}
.docente__ficha dd { color: var(--c-text); min-width: 0; overflow-wrap: break-word; }
/* Em em, e não em px: com a letra do navegador aumentada, a ficha passa a uma coluna mais cedo */
@media (max-width: 23.74em) { .docente__ficha > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
@media (min-width: 40em) {
  .docente { grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-6); }
  .docente .retrato { width: 100%; }
}
@media (min-width: 60em) { .docente { grid-template-columns: 260px minmax(0, 1fr); gap: var(--s-7); } }

/* ── A turma ── */
.equipa__titulo { display: flex; gap: .4em; align-items: baseline; }
.equipa__quantos { font-variant-numeric: tabular-nums; color: var(--c-text-3); }
.equipa__grelha {
  display: grid; gap: var(--s-5) var(--s-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 60vh; /* reserva o espaço enquanto a lista chega */
}
.equipa__grelha:has(.pessoa) { min-height: 0; }
/* Letra do navegador muito grande num ecrã estreito: duas colunas já não deixam ler os nomes, fica uma.
   Com a letra normal, 280 px (248 de conteúdo) ainda leva duas colunas: 13em = 221 px. */
.equipa__turma { container-type: inline-size; }
@container (max-width: 13em) { .equipa__grelha { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 520px) { .equipa__grelha { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px) { .equipa__grelha { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); } }
@media (min-width: 1040px) { .equipa__grelha { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .equipa__grelha { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); } }

.pessoa { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.pessoa__figura { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.pessoa__nome { font-family: var(--f-serif); font-size: 1.0625rem; line-height: 1.25; color: var(--c-text); padding-top: var(--s-1); text-wrap: balance; overflow-wrap: break-word; }
.pessoa__apelido { color: var(--c-text-2); }
.pessoa:target .retrato, .docente:target .retrato { border-color: var(--c-text-2); }
.pessoa--chamada .retrato { animation: chamada 1800ms var(--ease-out) 1; }
@keyframes chamada { 0%, 30% { border-color: var(--c-text); } 100% { border-color: var(--c-text-2); } }

.equipa__nota { margin-top: var(--s-6); max-width: var(--measure); }

/* ── Como nasceu ── */
.cronologia { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
.cronologia__item {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1); align-content: start;
  padding: 0 0 var(--s-5) var(--s-5); border-left: var(--line) solid var(--c-line);
}
.cronologia__item:last-child { padding-bottom: 0; border-left-color: transparent; }
.cronologia__item::before {
  content: ""; position: absolute; left: -4.5px; top: .35em; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-bg); border: 1.5px solid var(--c-line-strong);
}
.cronologia__data {
  font-family: var(--f-ui); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--c-text-2); font-variant-numeric: tabular-nums; line-height: 1.3;
}
.cronologia__texto h3 { font-size: var(--fs-h3); margin-bottom: var(--s-1); overflow-wrap: break-word; hyphens: auto; }
.cronologia__texto p { color: var(--c-text-2); max-width: 42ch; }
.cronologia__texto .endereco { font-size: 1.15em; }
.cronologia__texto .endereco, .cronologia__texto .ui { overflow-wrap: anywhere; }

@media (min-width: 1200px) {
  .cronologia { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); border-top: var(--line) solid var(--c-line); margin-top: var(--s-4); }
  .cronologia__item, .cronologia__item:last-child { padding: var(--s-5) 0 0; border-left: 0; }
  .cronologia__item::before { left: 0; top: -4.5px; }
  .cronologia__texto .endereco { font-size: 1em; }
}

/* ── Contacto ── */
.equipa__email-frase { color: var(--c-text-2); }
.equipa__email { margin-top: var(--s-2); font-family: var(--f-serif); font-size: clamp(1.0625rem, .6rem + 2.4vw, 2rem); line-height: 1.2; overflow-wrap: break-word; }
.equipa__email a { overflow-wrap: anywhere; }
@media (pointer: coarse) {
  .equipa__email a { display: inline-block; max-width: 100%; padding-block: max(0px, calc((44px - 1.2em) / 2)); }
}
/* quando a lista não carrega, o monte e o docente saem; só fica o aviso na turma */
.equipa--sem-dados .muro, .equipa--sem-dados .equipa__docente { display: none; }
.equipa--sem-dados .equipa__grelha { min-height: 0; }
.equipa__grelha > .vazio-curto { grid-column: 1 / -1; }

/* ── Impressão: papel branco, pouca tinta ── */
@media print {
  /* o seixo fica só com o contorno e as iniciais; sem as manchas escuras do granito */
  .seixo__pedra > path:not(.seixo__contorno) { fill: #fff; }
  .seixo__pedra > g { display: none; }
  .seixo__contorno { stroke: #888; }
  .seixo__iniciais { fill: #000; }
  .seixo__assento { display: none; }
  .retrato { background: #fff; }
  .cronologia__item, .pessoa, .docente { break-inside: avoid; page-break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  .retrato, .retrato__foto, .seixo__pedra, .seixo__assento, .muro__mexe { transition: none !important; }
  .retrato--ativo .seixo__pedra, .muro--pronto .muro__pedra--apontada .muro__mexe { transform: none; }
  .pessoa--chamada .retrato { animation: none; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .retrato:hover .seixo__pedra { transform: none; }
}