/* =================================================================
   ASJP — Estilo público
   Fiel ao template Bridge (qode) usado no site original
   Cores: vermelho #f23d4c, verde #5BD9AB, fundo creme #fdf5ef
   Fontes: Poppins (TUDO, incluindo headings — h1=96px Poppins 700)
           DM Sans (parágrafos especiais em headings widgets)
   ================================================================= */

:root {
  --color-bg:        #fdf5ef;
  --color-text:      #373b40;
  --color-text-soft: #6c757d;
  --color-muted:     #8a8a8a;
  --color-border:    rgba(55,59,64,0.12);
  --color-primary:   #f23d4c;
  --color-primary-hover: #d83242;
  --color-accent:    #5bd9ab;
  --color-dark:      #000000;

  /* Barra vermelha sob os títulos — dimensão única em todo o site */
  --bar-width:  120px;
  --bar-height: 9px;

  --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-prose:   'DM Sans', 'Poppins', sans-serif;

  --container:    1400px;
  --gutter:       72px;

  --transition:   200ms ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 30px;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary); }

/* Tamanhos exactos do tema original Bridge */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  margin: 0 0 0.4em 0;
  color: var(--color-text);
  font-weight: 700;
  text-transform: none;
}
h1 { font-size: 96px; line-height: 112px; letter-spacing: -4px; }
h2 { font-size: 80px; line-height: 96px;  letter-spacing: -2px; }
h3 { font-size: 60px; line-height: 70px;  letter-spacing: -3.7px; }
h4 { font-size: 48px; line-height: 60px;  letter-spacing: -2px; }
h5 { font-size: 32px; line-height: 40px;  letter-spacing: -1px; }
h6 { font-size: 25px; line-height: 27px;  letter-spacing: -1px; font-weight: 800; }

@media (max-width: 1100px) {
  h1 { font-size: 64px; line-height: 72px; letter-spacing: -2px; }
  h2 { font-size: 56px; line-height: 64px; }
  h3 { font-size: 44px; line-height: 52px; letter-spacing: -2px; }
  h4 { font-size: 36px; line-height: 44px; }
}
@media (max-width: 700px) {
  h1 { font-size: 42px; line-height: 46px; letter-spacing: -1.5px; }
  h2 { font-size: 38px; line-height: 42px; letter-spacing: -1px; }
  h3 { font-size: 32px; line-height: 36px; letter-spacing: -1px; }
  h4 { font-size: 28px; line-height: 32px; }
  h5 { font-size: 22px; line-height: 28px; }
  body { font-size: 17px; line-height: 28px; }
}

p { margin: 0 0 1em 0; }

/* Marca "___" debaixo dos títulos (estética do site original) */
/* Barra vermelha sob os títulos. Renderizada como bloco sólido (não com os
   underscores "___", cujo glifo tem folga lateral e desalinhava da margem). */
.title-mark {
  display: block;
  width: var(--bar-width);
  height: var(--bar-height);
  background: var(--color-primary);
  font-size: 0;          /* esconde os "___" do markup */
  line-height: 0;
  margin-top: 0.9rem;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Header ---------- */
.site-header {
  background: var(--color-bg);
  padding-top: 22px;         /* faixa creme acima (header_top do original) */
}
/* Container alinha as linhas às margens da página (gutter) — largura total menos gutter */
.site-header__container {
  padding: 0 var(--gutter);
}
.site-header__inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 91px;          /* igual ao header original */
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  position: relative;
}
/* Barra vertical à direita — ancorada ao inner (bordas), centrada verticalmente */
.site-header__inner::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 62px;
  width: 1px;
  background-color: #000;
}

.site-logo-wrap {
  display: flex;
  align-items: center;       /* centra o logo na vertical */
  padding-left: 18px;        /* logo uns pixeis para a direita */
  flex: 0 0 auto;            /* o logo nunca encolhe */
}
.site-logo {
  display: flex; align-items: center;
  padding-right: 1.25rem;
  flex: 0 0 auto;
}
/* Logo com rácio e dimensão fixos — max-width:none anula o img{max-width:100%} global,
   que de outra forma comprimiria a largura quando o menu cresce (sessão iniciada). */
.site-logo img { height: 57px; width: auto; max-width: none; flex: 0 0 auto; }  /* logo a 63% da altura, como no original */

.menu-toggle {
  display: none;
  background: none; border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-dark);
  margin-left: auto;
}

/* Tagline na extrema direita, com separador vertical (igual ao original:
   linha preta de 1px, height calc(100% - 15px), centrada, padding 0 35px) */
.site-tagline {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;        /* ocupa toda a altura do header */
  flex: 0 0 auto;             /* tagline com largura fixa, não encolhe */
  padding: 0 22px;            /* compacto — liberta espaço para o menu numa linha */
  margin-left: auto;
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-text);
  letter-spacing: -0.3px;
  white-space: nowrap;
}
/* Separador vertical entre o menu e a tagline — flex item, centrado verticalmente */
.header-divider {
  align-self: center;
  width: 1px;
  height: 62px;
  background-color: #000;
  flex: 0 0 auto;
}

/* Nav principal entre logo e tagline — estrutura nav.main_menu (Bridge "right") */
.main_menu {
  flex: 1 1 auto;
  min-width: 0;                /* deixa o menu encolher em vez do logo */
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* nav.main_menu.right — alinhado à direita */
  padding-right: 14px;
}
.main_menu > ul {
  list-style: none; margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;             /* segurança: nunca distorce o logo se faltar espaço */
  gap: 0.5rem 1.85rem;         /* espaçamento confortável, ainda numa linha */
  align-items: center;
  justify-content: flex-end;
}
.main_menu > ul > li {
  position: relative;
  list-style: none;
}
.main_menu > ul > li > a {
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #8a8a8a;
  padding: 0.5rem 0;
  display: inline-flex;
  align-items: center;
  position: relative;
  text-decoration: none;
}
.main_menu > ul > li > a:hover { color: var(--color-primary); }
.main_menu > ul > li > a > span { display: inline-block; }

/* Submenu — div.second > div.inner > ul (estrutura Bridge, tema escuro) */
.main_menu .second {
  position: absolute;
  top: 100%;
  left: 0;
  width: 340px;              /* largura fixa; itens longos quebram em 2 linhas */
  background: #262626;       /* fundo escuro, como no original */
  border: none;
  padding: 1.5rem 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  z-index: 10;
}
.main_menu > ul > li:hover > .second { opacity: 1; visibility: visible; }
.main_menu .second .inner > ul,
.main_menu .second .inner ul ul {
  list-style: none; margin: 0; padding: 0;
}
.main_menu .second .inner ul li {
  position: relative;
  list-style: none;
}
.main_menu .second .inner ul li a {
  display: block;
  padding: 0.85rem 2.5rem;
  font-size: 12px;
  text-transform: uppercase;       /* items em maiúsculas */
  letter-spacing: 1.2px;
  font-weight: 700;
  color: #9d9d9d;                  /* cinzento, como no original */
  white-space: normal;            /* itens longos quebram em 2 linhas */
  text-decoration: none;
  line-height: 1.4;
}
.main_menu .second .inner ul li a:hover { color: #fff; background: transparent; }

/* Submenu de 2º/3º nível — abre à direita, mesmo tema escuro */
.main_menu .second .inner ul ul {
  position: absolute;
  top: 0;
  left: 100%;
  background: #262626;
  border: none;
  padding: 1.5rem 0;
  min-width: 300px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.main_menu .second .inner ul li:hover > ul { opacity: 1; visibility: visible; }

.main_menu .menu-item-has-children .q_menu_arrow {
  margin-left: 0.5rem;
  font-style: normal;
}

/* Item Login com destaque verde */
.main_menu > ul > li.login > a {
  color: var(--color-accent);
  font-weight: 700;
}
.main_menu > ul > li.login > a:hover { color: var(--color-primary); }

/* Logout dentro do dropdown "Perfil" — aparência de item do submenu, a vermelho */
.main_menu .second .inner ul li form { margin: 0; }
.dropdown-logout-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  padding: 0.85rem 2.5rem;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-primary);
}
.dropdown-logout-btn:hover { color: #fff; }

/* ---------- Página de perfil ---------- */
.profile-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 2rem 2.25rem;
}
.profile-details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.6rem 2rem;
  margin: 0 0 2rem;
}
.profile-details dt {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--color-muted);
  align-self: center;
}
.profile-details dd { margin: 0; font-size: 1.05rem; }
.profile-role {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.2rem 0.7rem;
  border-radius: 10rem;
}
.profile-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.btn--logout { background: var(--color-primary); }
.btn--logout:hover { background: var(--color-primary-hover); }
@media (max-width: 600px) {
  .profile-details { grid-template-columns: 1fr; gap: 0.2rem 0; }
  .profile-details dd { margin-bottom: 0.8rem; }
}

/* ---------- Hero ---------- */
.hero {
  padding: 6rem var(--gutter) 4rem;
  max-width: var(--container);
  margin: 0 auto;
}

/* Homepage: conteúdo alinhado às margens do header (mesmo gutter, sem cap),
   tal como as páginas institucionais (.single--page). Evita o aspeto "boxed". */
.home-page .hero,
.home-page section.block {
  max-width: none;
  margin: 0;
}
.hero h1 {
  margin: 0;
}
.hero h1 em {
  color: var(--color-primary);
  font-style: italic;
  font-weight: 700;
}
.hero h1 .title-mark { margin-top: 1.5rem; }

.divider {
  height: 1px;
  background: var(--color-border);
  margin: 0 var(--gutter);
  max-width: none;
}

/* ---------- Parallax banner ---------- */
.parallax-banner {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 480px;
  margin: 0;
}
@media (max-width: 768px) {
  .parallax-banner { background-attachment: scroll; min-height: 280px; }
}

/* ---------- Section ---------- */
section.block {
  padding: 6rem var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}
.block-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.block-title em { color: var(--color-primary); font-style: italic; font-weight: 700; }

/* ---------- 3-column intro ---------- */
.intro-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
}
.intro-cols .col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.intro-cols .col p:last-child {
  margin-top: auto;
  padding-top: 1.5rem;
}
.intro-cols .col h3 {
  font-family: var(--font-body);
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  margin: 0 0 1.5rem;
  letter-spacing: -0.02em;
}
.intro-cols .col p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
}
.intro-cols .col .title-mark { margin-top: 0.9rem; }
@media (max-width: 900px) { .intro-cols { grid-template-columns: 1fr; gap: 3rem; } }

/* ===== Texto de corpo justificado (esquerda + direita) em toda a app ===== */
.cms-content p:not(.p1),
.intro-cols .col p,
.single p,
.dr-card__text blockquote,
.post-card__excerpt,
.event-card__excerpt {
  text-align: justify;
}
/* Exceções: nomes/listas, assinaturas e títulos mantêm-se à esquerda */
.cms-content p.p1,
.dr-card__text p.p1,
.dr-card__text > p,
.dr-card__text ul,
.dr-card__text li,
.intro-cols .col p:last-child {
  text-align: left;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: transparent;
  color: var(--color-text);
  padding: 0.95rem 2.4rem;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 700;
  border: 2px solid var(--color-dark);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background var(--transition), color var(--transition);
}
.btn:hover { background: var(--color-dark); color: #fff; }
.btn--outline { background: transparent; color: var(--color-dark); border: 2px solid var(--color-dark); }
.btn--outline:hover { background: var(--color-dark); color: #fff; }
.btn--danger { background: var(--color-primary); }
.btn--danger:hover { background: var(--color-primary-hover); }

/* ---------- Direção nacional (grelha única integrada) ---------- */
.direction-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
}
/* Bloco do título + botão ocupa 3 colunas × 2 linhas no canto inferior esquerdo;
   as 10 fotos preenchem o resto: linha de topo (6) + lado direito (3 + 1). */
.direction-intro {
  grid-column: 1 / 4;
  grid-row: 2 / 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.direction-title { margin-top: 0; }

@media (max-width: 1100px) {
  .direction-grid { grid-template-columns: repeat(3, 1fr); }
  .direction-intro { grid-column: 1 / -1; grid-row: auto; margin-bottom: 1rem; }
}
@media (max-width: 700px) {
  .direction-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Team grid ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.team-card { position: relative; overflow: hidden; }
.team-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform 400ms ease; }
.team-card:hover img { transform: scale(1.04); }
.team-card__info {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 1.5rem;
  background: #000;
  color: #fff;
  opacity: 0;
  transition: opacity var(--transition);
  text-align: center;
}
.team-card:hover .team-card__info { opacity: 1; }
.team-card__info h5 { margin: 0 0 0.2rem; color: #fff; font-family: var(--font-body); font-weight: 600; }
.team-card__info span { color: var(--color-accent); font-size: 16px; font-weight: 500; }
@media (max-width: 700px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Latest posts ---------- */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.post-card { display: flex; flex-direction: column; }
.post-card__image {
  width: 100%; aspect-ratio: 3/4; overflow: hidden;
}
.post-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms; }
.post-card:hover .post-card__image img { transform: scale(1.04); }
.post-card__body { padding: 1.2rem 0; }
.post-card__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0 0 0.5rem 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.post-card__meta {
  display: flex; gap: 0.75rem;
  color: var(--color-muted);
  font-size: 12px;
}
@media (max-width: 900px) { .posts-grid { grid-template-columns: 1fr; } }

/* ---------- Single content ---------- */
.single {
  max-width: 800px;
  margin: 4rem auto;
  padding: 0 var(--gutter);
}

/* ---------- Artigo com barra lateral "Últimas notícias" ---------- */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 4rem;
  max-width: var(--container);
  margin: 4rem auto;
  padding: 0 var(--gutter);
  align-items: start;
}
.article-layout .single {
  max-width: none;
  margin: 0;
  padding: 0;
}
.article-sidebar { position: sticky; top: 2rem; }
.article-sidebar__title {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
}
.mini-post {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1.6rem;
  color: inherit;
}
.mini-post__img {
  width: 84px;
  height: 84px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.04);
}
.mini-post__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-post__date { font-size: 12px; color: var(--color-muted); }
.mini-post__title {
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 700;
  margin: 0.25rem 0 0;
  transition: color var(--transition);
}
.mini-post:hover .mini-post__title { color: var(--color-primary); }
@media (max-width: 1000px) {
  .article-layout { grid-template-columns: 1fr; gap: 3rem; }
  .article-sidebar { position: static; }
}
.single h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1rem;
}
.single .meta { color: var(--color-muted); font-size: 14px; margin-bottom: 2rem; }
/* Categoria da notícia em vermelho claro (meta do artigo e cartões) */
.news-cat { color: #f26d78; }
a.news-cat { text-decoration: none; }
a.news-cat:hover { color: var(--color-primary-hover); }
.single img { margin: 1.5rem 0; }
.single p { font-size: 17px; line-height: 1.75; }

/* Páginas institucionais: largura total alinhada com o header (mesmo gutter,
   sem cap), para o conteúdo bater certo com as extremidades do menu. */
.single--page { max-width: none; }

/* ===== Hierarquia de headings consistente em TODAS as páginas ===== */
/* Sizes alinhadas com o WP/Elementor original */
.single--page h2 {
  font-size: clamp(1.75rem, 4.2vw, 4rem);  /* 28px → 64px (cabe título longo numa linha) */
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 2.5rem 0 1.2rem;
  white-space: nowrap;
}
/* Em viewports estreitos, deixa partir a linha (evita texto cortado) */
@media (max-width: 700px) {
  .single--page h2 { white-space: normal; }
}
.single--page h3 {
  font-size: clamp(1.8rem, 3.5vw, 3rem);  /* 28px → 48px */
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 2.2rem 0 0.9rem;
}
.single--page h4 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);  /* 22px → 32px */
  line-height: 1.3;
  font-weight: 700;
  margin: 2rem 0 0.7rem;
}
.single--page h5 {
  font-size: clamp(1.15rem, 2vw, 1.4rem); /* 18px → 22px */
  line-height: 1.35;
  font-weight: 700;
  margin: 1.6rem 0 0.6rem;
}
.single--page h6 {
  font-size: 1rem;                          /* 16px — caption/label */
  font-weight: 700;
  margin: 1.5rem 0 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===== Componentes de conteúdo CMS (cms-*) ===== */

/* Linha em colunas (icon-boxes lado a lado) */
.cms-row {
  display: grid;
  gap: 2.5rem;
  margin: 2.5rem 0;
}
.cms-row--2 { grid-template-columns: repeat(2, 1fr); }
.cms-row--3 { grid-template-columns: repeat(3, 1fr); }
.cms-row--4 { grid-template-columns: repeat(4, 1fr); }
/* Linhas "foto + texto" (mensagem do presidente, estatutos, etc.): quando a 1.ª
   coluna contém uma imagem, fixa-a a 460px para a foto não esticar. Aplica-se a
   todas as páginas automaticamente; as linhas só de texto mantêm-se 50/50. */
.cms-row--2:has(> div:first-child img) { grid-template-columns: 460px 1fr; }
@media (max-width: 800px) { .cms-row { grid-template-columns: 1fr !important; } }

/* Icon-box (contactos, etc.) — ícone pequeno + título + texto, centrado */
.cms-iconbox { text-align: center; }
.cms-iconbox__icon { margin: 0 0 1rem; }
.cms-iconbox__icon svg {
  width: 42px; height: 42px;
  fill: var(--color-primary);
}
.cms-iconbox__title { text-transform: lowercase; margin: 0 0 0.5rem; font-size: 1.3rem; }
.cms-iconbox__title a { color: var(--color-text); }
.cms-iconbox__text { color: var(--color-text); font-size: 0.95rem; line-height: 1.6; }
.cms-iconbox__text p { font-size: 0.95rem; }

/* Limitar SVGs soltos no conteúdo (evita ícones gigantes) */
.cms-content svg { max-width: 42px; max-height: 42px; }

/* Vídeos embebidos do YouTube — responsivos, 16:9 */
.video-embed {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 1.5rem auto;
  aspect-ratio: 16 / 9;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Imagens importadas (capas de livros, fotos avulsas) — cap p/ não esticarem a largura toda */
.cms-content > img,
.cms-content > p > img,
.cms-content > figure > img {
  max-width: 480px;
  height: auto;
  display: block;
  margin: 1.5rem auto;
}

/* Separador horizontal entre secções (estética asjp.pt) */
.single--page hr.section-sep {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.18);
  margin: 4rem 0 3rem;
}

/* Título de secção dentro de uma página com várias secções */
.single--page h2.section-title {
  margin-top: 1.5rem;
}
/* .subsection-title herda dimensões do h3 base — sem override */

/* Subsecções de cada órgão estatutário lado a lado.
   auto-fit + minmax(300px) na coluna de 1100px → 3 colunas no máximo:
   Conselho Geral (4 representações) → 3 + 1; Direção Nacional (2) → 2 colunas. */
.orgaos-reps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.5rem 2rem;
  align-items: start;
  margin: 3.25rem 0 2rem;  /* mais espaço entre o texto introdutório e as colunas */
}
.orgaos-reps .orgao-rep > h3 {
  margin-top: 0;
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  line-height: 1.15;
}
.orgaos-reps .orgao-rep p.p1 { margin: 0 0 0.25rem; line-height: 1.5; }
@media (max-width: 640px) {
  .orgaos-reps { grid-template-columns: 1fr; }
}

/* Conselho Geral: 3 colunas reais (flex) para empacotar os blocos de forma
   compacta — [Nacional] | [Norte, Sul] | [Centro] — sem o espaço em branco que
   o CSS grid deixaria (linhas partilhadas entre colunas). */
.orgaos-reps--3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  align-items: start;
}
.orgaos-reps--3col .orgaos-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (max-width: 640px) {
  .orgaos-reps--3col { grid-template-columns: 1fr; }
}

/* Banner full-width entre secções (substitui parallax do WP) */
.cms-banner {
  position: relative;
  margin: 4rem calc(50% - 50vw);
  width: 100vw;
  height: clamp(220px, 35vh, 420px);
  background-size: cover;
  background-position: center;
}
.cms-banner--parallax {
  background-attachment: fixed;
}
@media (max-width: 900px) {
  .cms-banner--parallax { background-attachment: scroll; }
}

/* Galeria de Honra — grid de cards (foto + nome + período) */
.galeria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2rem;
  margin: 2.5rem 0;
}
.galeria-card {
  display: flex; flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}
.galeria-card img {
  width: 100%; aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  margin: 0;
}
.galeria-card h3 {
  font-size: 1.1rem; margin: 0.8rem 0 0;
  font-weight: 700;
}
.galeria-card__periodo {
  font-size: 0.9rem; color: var(--color-text);
  opacity: 0.75;
}

/* Layout 2-col "capa + texto" — gerado pela migração wrap_pages_two_col.php */
.cms-row--cover-text {
  grid-template-columns: minmax(240px, 1fr) 1.6fr;
  align-items: start;
}
.cms-col-cover img,
.cms-col-cover figure img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0;
}
.cms-col-cover figure { margin: 0; }
.cms-col-text > *:first-child { margin-top: 0; }
@media (max-width: 800px) {
  .cms-row--cover-text { grid-template-columns: 1fr !important; }
}

/* Botão de download / link de ação */
.cms-btn {
  display: inline-block;
  background: var(--color-dark);
  color: #fff;
  padding: 0.85rem 1.6rem;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 600;
  margin: 0.4rem 0.5rem 0.4rem 0;
  transition: background var(--transition);
}
.cms-btn:hover { background: var(--color-primary); color: #fff; }

/* Downloads em PDF aparecem SEMPRE como link simples (ícone + texto), nunca
   como botão — mesmo que o conteúdo ainda tenha class="cms-btn". */
.cms-content a.cms-btn[href$=".pdf" i],
.cms-content a[href$=".pdf" i] {
  display: inline-block;
  background: none;
  color: var(--color-text);
  padding: 0;
  border: 0;
  border-radius: 0;
  text-transform: none;
  font-size: inherit;
  letter-spacing: normal;
  font-weight: inherit;
  margin: 0;
}
.cms-content a.cms-btn[href$=".pdf" i]:hover,
.cms-content a[href$=".pdf" i]:hover { background: none; color: var(--color-primary); }

/* Propostas, Pareceres e Estudos — itens em 2 colunas por ano, títulos menores */
.cms-content h3.parecer-year {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  margin: 2.5rem 0 3.5rem;  /* mais espaço entre o título/linha vermelha e o conteúdo */
}
.cms-content h3.parecer-year::after {
  content: "";
  display: block;
  width: calc(var(--bar-width) / 2);  /* linha vermelha dos h3 a metade (60px) */
  height: var(--bar-height);
  background: var(--color-primary);
  margin-top: 0.6rem;
}
.pareceres-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem 3.5rem;
  margin: 1rem 0 2.5rem;
}
.cms-content .parecer h4 {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.35;
  font-weight: 700;
  text-transform: none;
  margin: 0 0 0.4rem;
}
.parecer p { margin: 0.2rem 0; font-size: 0.95rem; }
.parecer p:last-child { margin-top: 0.6rem; }
@media (max-width: 800px) { .pareceres-grid { grid-template-columns: 1fr; } }

/* Figura / imagem */
.cms-figure { margin: 1.5rem 0; }
.cms-figure img { width: 100%; height: auto; }

/* Galeria de imagens em grid */
.cms-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}
.cms-gallery img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; margin: 0; }
@media (max-width: 700px) { .cms-gallery { grid-template-columns: repeat(2, 1fr); } }

/* Congressos dos juízes — grelha de cartões (cartaz + barra escura com título) */
.congressos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  margin: 2.5rem 0;
}
.congresso-card { display: block; text-decoration: none; transition: transform 0.18s ease; }
.congresso-card:hover { transform: translateY(-4px); }
.congresso-card__cover { position: relative; display: block; overflow: hidden; }
.congresso-card img { width: 100%; height: auto; display: block; margin: 0; }
.congresso-card__mask {
  position: absolute;
  inset: 0;
  background: rgba(35, 59, 64, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.congresso-card:hover .congresso-card__mask,
.congresso-card:focus-visible .congresso-card__mask { opacity: 1; }
.congresso-card__view {
  color: #fff;
  border: 2px solid #fff;
  padding: 0.5rem 1.5rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  font-size: 0.85rem;
  transition: background 0.18s ease, color 0.18s ease;
}
.congresso-card:hover .congresso-card__view { background: var(--color-primary); border-color: var(--color-primary); }
.congresso-card__title {
  display: block;
  background: #373b40;
  color: #fff;
  text-align: center;
  padding: 1.1rem 0.9rem 1.3rem;
}
.congresso-card__name { display: block; color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.35; }
.congresso-card__sep { display: block; width: 32px; height: 3px; background: var(--color-primary); margin: 0.7rem auto 0; }
@media (max-width: 900px) { .congressos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .congressos-grid { grid-template-columns: 1fr; } }

/* Detalhe de congresso — vídeos (mensagem dos associados) */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
  margin: 1.5rem 0 2.5rem;
}
.video-embed { position: relative; padding-top: 56.25%; background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 700px) { .video-grid { grid-template-columns: 1fr; } }
.congresso-voltar { margin-top: 2.5rem; }
.congresso-voltar a { font-weight: 600; }

/* Pessoas / equipa (galeria de honra, órgãos) */
.cms-people {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
}
.cms-person { margin: 0; text-align: center; }
.cms-person img { width: 100%; aspect-ratio: 1/1; object-fit: cover; margin: 0; }
.cms-person__name { display: block; font-weight: 600; margin: 0.6rem 0 0.1rem; font-size: 1rem; }
.cms-person__role { display: block; color: var(--color-accent); font-size: 0.85rem; }
@media (max-width: 900px) { .cms-people { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .cms-people { grid-template-columns: repeat(2, 1fr); } }

.page-hero {
  text-align: left;
  padding: 6rem var(--gutter) 2rem;
  max-width: var(--container);
  margin: 0 auto;
}
.page-hero h1 {
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  margin: 0;
}
.page-hero h1 .title-accent { color: var(--color-primary); }
.docs-content-title { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1; margin-top: 0; }
.page-hero em { color: var(--color-primary); font-style: italic; }

/* ---------- Cards grid ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}
/* Listagem de notícias: imagens mais pequenas, ~6 por linha, responsivo
   (auto-fill reflui sozinho consoante a largura do ecrã). */
.card-grid--6 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }
/* Na homepage a secção é full-width; para as imagens ficarem com a MESMA
   dimensão da listagem, usa-se a mesma regra (minmax(220px,1fr)) e limita-se
   a largura útil à da listagem (1256px) → 5 colunas de ~232px, iguais. */
.home-page .news-home {
  max-width: calc(1256px + 2 * var(--gutter));
  margin-left: auto;
  margin-right: auto;
}
.home-page .card-grid--6 {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
/* Cartões uniformes: imagem sempre com a mesma dimensão, título só 1 linha */
.card-grid--6 .card__media { aspect-ratio: 3/4; }
.card-grid--6 .card__media--placeholder { object-fit: contain; padding: 24%; opacity: 0.55; }
.card-grid--6 .card__title {
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0;
}
.card {
  background: transparent;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition);
}
.card:hover { transform: translateY(-3px); }
.card__media { aspect-ratio: 3/4; overflow: hidden; background: rgba(0,0,0,0.04); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms; }
.card:hover .card__media img { transform: scale(1.04); }
.card__body { padding: 1.2rem 0; flex: 1; display: flex; flex-direction: column; }
.card__title { font-family: var(--font-body); font-weight: 600; font-size: 1.3rem; line-height: 1.25; margin: 0 0 0.4rem; letter-spacing: -0.01em; }
.card__meta { color: var(--color-muted); font-size: 12px; margin-bottom: 0.6rem; }
.card__excerpt { font-size: 14px; line-height: 1.6; color: var(--color-text); flex: 1; }

/* ---------- Forms ---------- */
.form {
  max-width: 480px;
  margin: 4rem auto;
  padding: 2.5rem;
  background: #fff;
  border: 1px solid var(--color-border);
}
.form--wide { max-width: 880px; }
.field { margin-bottom: 1.25rem; }
.field label {
  display: block;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="number"], .field input[type="datetime-local"], .field input[type="date"],
.field input[type="file"],
.field select, .field textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid #d8d2cc;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--color-text);
  border-radius: 0;
}
.field textarea { min-height: 240px; resize: vertical; font-family: inherit; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
.field-error { color: var(--color-primary); font-size: 12px; margin-top: 0.3rem; }
.field-help { color: var(--color-muted); font-size: 12px; margin-top: 0.3rem; }
.field-checkbox { display: flex; align-items: center; gap: 0.5rem; }
.field-checkbox label { display: inline; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 14px; }

/* Flash */
.flash { padding: 1rem 1.2rem; border-left: 4px solid; margin: 0 var(--gutter) 1rem; font-size: 14px; max-width: var(--container); }
.flash--success { background: #ecfdf5; border-color: #10b981; color: #065f46; }
.flash--error   { background: #fef2f2; border-color: var(--color-primary); color: #7f1d1d; }
.flash--warning { background: #fffbeb; border-color: #f59e0b; color: #78350f; }
.flash--info    { background: #eff6ff; border-color: #3b82f6; color: #1e3a8a; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 0.4rem; margin: 4rem 0; }
.pagination a, .pagination span {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--color-border);
  font-size: 13px;
  background: #fff;
}
.pagination .current { background: var(--color-dark); color: #fff; border-color: var(--color-dark); }

/* ---------- Documents area ---------- */
.docs-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  max-width: var(--container);
  margin: 4rem auto;
  padding: 0 var(--gutter);
}
.docs-sidebar {
  /* Sem caixa branca — fica da cor da página, com uma linha vertical a separar do conteúdo */
  border-right: 1px solid var(--color-border);
  padding: 0 2rem 0 0;
  position: sticky;
  top: 110px;
  align-self: start;
}
.docs-sidebar h3 { margin: 0 0 1rem; font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; }
.docs-sidebar ul { list-style: none; padding: 0; margin: 0; }
.docs-sidebar li a {
  display: block;
  padding: 0.7rem 0.85rem;
  border-left: 3px solid transparent;
  font-size: 14px;
}
.docs-sidebar li a:hover { background: rgba(0, 0, 0, 0.04); }
.docs-sidebar li a.active {
  border-color: var(--color-primary);
  background: #fbe9eb;
  color: var(--color-primary);
  font-weight: 600;
}
/* Submenus (ex.: Documentos → Atas, Ofícios) */
.docs-submenu { margin: 0 0 0.3rem !important; }
.docs-submenu li a {
  padding: 0.5rem 0.85rem 0.5rem 1.7rem;
  font-size: 13px;
  color: var(--color-text-soft);
}
.docs-submenu li a::before { content: "› "; opacity: 0.5; }
.docs-sidebar .docs-role-badge {
  display: inline-block;
  font-size: 10px;
  padding: 0.1rem 0.45rem;
  background: var(--color-dark);
  color: #fff;
  margin-left: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Separador de subcategoria na área reservada */
.docs-subhead {
  margin: 2.2rem 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-border);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 700;
}
.docs-subhead .title-mark { margin-top: 0.5rem; }
/* Grelha de documentos (estilo atas/pareceres): ícone PDF + título, 3 colunas */
.docs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem 2rem;
  margin: 1.3rem 0 2.5rem;
}
.docs-grid a {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-text);
}
.docs-grid a:hover { color: var(--color-primary); }
.docs-grid a::before {
  content: "";
  flex: 0 0 auto;
  width: 22px; height: 22px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z'/><path d='M9 12h6v2H9zm0 4h6v2H9z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z'/><path d='M9 12h6v2H9zm0 4h6v2H9z'/></svg>") center/contain no-repeat;
}
.docs-grid__meta { margin-left: calc(22px + 0.55rem); margin-top: 0.2rem; }
.docs-grid__desc { display: block; font-size: 13px; line-height: 1.4; color: var(--color-text-soft); }
.docs-grid__date { display: block; font-size: 12.5px; color: var(--color-text-soft); margin-top: 0.1rem; }
@media (max-width: 900px) { .docs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .docs-grid { grid-template-columns: 1fr; } }

/* Acordeão de protocolos (categoria com conteúdo HTML) */
.proto-acc { margin: 0 0 2rem; border-top: 1px solid var(--color-border); }
.proto-acc__item { border-bottom: 1px solid var(--color-border); }
.proto-acc__item > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.95rem 2.2rem 0.95rem 0;
  position: relative;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: capitalize;
  color: var(--color-text);
}
.proto-acc__item > summary::-webkit-details-marker { display: none; }
.proto-acc__item > summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-primary);
  transition: transform 0.15s ease;
}
.proto-acc__item[open] > summary { color: var(--color-primary); }
.proto-acc__item[open] > summary::after { content: "−"; }
.proto-acc__body {
  padding: 0.25rem 0 1.4rem;
  /* Impede que URLs/tokens longos sem espaços (ex.: links de parceria) estoirem a largura. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.proto-acc__body h5 {
  margin: 1.1rem 0 0.15rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.proto-acc__body h4 {
  margin: 0.3rem 0 0.15rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary);
}
.proto-acc__body ul { margin: 0.15rem 0 0.5rem; padding-left: 1.2rem; }
.proto-acc__body li { font-size: 0.95rem; line-height: 1.55; color: var(--color-text); }
.proto-acc__body p { margin: 0.15rem 0 0.4rem; font-size: 0.95rem; line-height: 1.55; }
.proto-acc__body img { max-width: 100%; height: auto; margin: 0.6rem 0; }
/* Documentos anexados dentro de um acordeão (separados do texto por um filete) */
.proto-acc__docs {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--color-border);
}
.proto-acc__docs li { margin: 0 0 0.4rem; padding-left: 1.5rem; position: relative; }
.proto-acc__docs li::before {
  content: "";
  position: absolute; left: 0; top: 0.15rem;
  width: 1rem; height: 1rem;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
  color: var(--color-primary);
}
.proto-acc__docs a { font-weight: 600; }
/* Anexos embutidos no texto do acordeão (links ?f= para ficheiros protegidos):
   ícone de ficheiro para ficarem homogéneos com os documentos anexados. */
.proto-acc__body a[href*="/area-reservada/ficheiro"] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  word-break: break-word;
}
.proto-acc__body a[href*="/area-reservada/ficheiro"]::before {
  content: "";
  flex: 0 0 auto;
  width: 1rem; height: 1rem;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
}
.docs-list { display: flex; flex-direction: column; gap: 0.75rem; }
.doc-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--color-border);
  background: #fff;
}
.doc-item__icon { font-size: 1.6rem; color: var(--color-primary); width: 32px; text-align: center; }
.doc-item__body { flex: 1; min-width: 0; }
.doc-item__title { font-weight: 600; margin: 0 0 0.25rem; font-size: 15px; }
.doc-item__meta { color: var(--color-muted); font-size: 12px; }
.doc-item__action { white-space: nowrap; }
@media (max-width: 800px) {
  .docs-layout { grid-template-columns: 1fr; }
  .docs-sidebar { position: static; border-right: none; border-bottom: 1px solid var(--color-border); padding: 0 0 1.25rem; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-dark);
  color: #cccccc;
  padding: 4rem var(--gutter) 2.5rem;
  margin-top: 6rem;
  font-size: 14px;
}
.site-footer a { color: #cccccc; }
.site-footer a:hover { color: #fff; }
.site-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 3rem;
}
.site-footer img { max-width: 90px; }
.site-footer p { line-height: 1.8; margin: 0 0 0.5rem; }
.site-footer em { color: var(--color-primary); font-style: italic; }
@media (max-width: 800px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .site-footer__inner { grid-template-columns: 1fr; } }

/* Back to top */
.back-to-top {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  background: var(--color-dark);
  color: #fff;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  opacity: 0;
  transition: opacity var(--transition);
  z-index: 50;
  text-decoration: none;
}
.back-to-top.visible { opacity: 1; }
.back-to-top:hover { background: var(--color-primary); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  :root { --gutter: 40px; }
  .main_menu > ul { gap: 1.1rem; }
  .main_menu > ul > li > a { font-size: 11px; letter-spacing: 1.3px; }
}
@media (max-width: 1100px) {
  :root { --gutter: 24px; }
  .site-tagline { display: none; }
  .header-divider { display: none; }
  .site-header__inner::after { display: none; }
  .menu-toggle { display: block; }
  .site-header__inner { min-height: 80px; }
  .site-logo img { height: 56px; }
  .main_menu {
    position: fixed;
    top: 0; left: -100%;
    width: 320px;
    height: 100vh;
    background: #fff;
    flex-direction: column;
    padding: 5rem 1.5rem 2rem;
    transition: left 300ms ease;
    overflow-y: auto;
    box-shadow: 2px 0 12px rgba(0,0,0,0.1);
    justify-content: flex-start;
    align-items: stretch;
    z-index: 200;
  }
  .main_menu.open { left: 0; }
  .main_menu > ul { flex-direction: column; width: 100%; gap: 0; align-items: stretch; }
  .main_menu > ul > li { width: 100%; border-bottom: 1px solid var(--color-border); }
  .main_menu > ul > li > a { padding: 1rem 0; color: var(--color-text); }
  /* Submenu na gaveta: fundo claro, largura total, colapsado por omissão */
  .main_menu .second {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    width: auto;
    min-width: 0;
    border: none;
    box-shadow: none;
    padding: 0 0 0 0.75rem;
    display: none;
  }
  .main_menu > ul > li.open > .second { display: block; }
  .main_menu .second .inner ul li a {
    color: var(--color-text);
    padding: 0.7rem 0;
    white-space: normal;
    font-size: 12px;
  }
  .main_menu .second .inner ul li a:hover { color: var(--color-primary); }
  /* subníveis (ex.: Responsabilidade Social) também colapsados até ao toque */
  .main_menu .second .inner ul ul {
    position: static;
    opacity: 1;
    visibility: visible;
    background: transparent;
    box-shadow: none;
    border: none;
    padding-left: 0.9rem;
    min-width: 0;
    display: none;
  }
  .main_menu .second .inner ul li.open > ul { display: block; }
}
@media (max-width: 700px) {
  .hero { padding: 3rem var(--gutter) 2rem; }
  section.block { padding: 3rem var(--gutter); }
  .page-hero { padding: 3rem var(--gutter) 1rem; }
}

/* ===== Galeria de Honra — presidentes em 3 colunas com hover ===== */
.galeria-presidentes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
}
.presidente-card { position: relative; }
.presidente-img-wrap { position: relative; overflow: hidden; aspect-ratio: 3/4; }
.presidente-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms; }
.presidente-card:hover .presidente-img-wrap img { transform: scale(1.04); }
.presidente-overlay {
  position: absolute;
  inset: 0;
  background: rgba(242,61,76,0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 300ms;
  padding: 1rem;
  text-align: center;
}
.presidente-card:hover .presidente-overlay { opacity: 1; }
.presidente-overlay h3 { color: #fff; font-size: 1rem; margin: 0 0 0.5rem; font-weight: 600; }
.presidente-overlay span { color: #fff; font-size: 0.85rem; }
@media (max-width: 700px) { .galeria-presidentes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .galeria-presidentes { grid-template-columns: 1fr; } }

/* ===== Títulos de páginas com estilo do site original ===== */
/* Barra vermelha sob o primeiro título de cada página (estética do asjp.pt) */
.single--page > h2:first-child::after,
.single--page > h2:first-child + h2::after {
  content: '';
  display: block;
  width: var(--bar-width);
  height: var(--bar-height);
  background: var(--color-primary);
  margin: 2rem 0 2.5rem;
}

/* Linha fina no fim do conteúdo da página */
.single--page {
  padding-bottom: 4rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  margin-bottom: 3rem;
}

/* <i> em headings dentro de conteúdo CMS — italic + vermelho (estética asjp.pt) */
.cms-content h1 i, .cms-content h2 i,
.cms-content h3 i, .cms-content h4 i,
.cms-content h5 i, .cms-content h6 i {
  font-style: italic;
  color: var(--color-primary);
}

/* Hover nos links de conteúdo */
.cms-content a { transition: color 0.15s ease; }
.cms-content a:hover { color: var(--color-primary); }

/* Ícone PDF antes de links .pdf (herda cor → fica vermelho no hover) */
.cms-content a[href$=".pdf" i]::before,
.cms-content a[href$=".PDF"]::before {
  content: "";
  display: inline-block;
  width: 22px; height: 22px;
  margin-right: 0.55rem;
  vertical-align: -5px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z'/><path d='M9 12h6v2H9zm0 4h6v2H9z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z'/><path d='M9 12h6v2H9zm0 4h6v2H9z'/></svg>") center/contain no-repeat;
}

/* Estado ativo no menu principal */
.main_menu .menu-item.current-menu-item > a,
.main_menu .menu-item.current-menu-ancestor > a {
  color: var(--color-primary);
}

/* duplicados removidos — ver bloco consolidado acima */

/* ===== Congressos dos Juízes — portfolio grid ===== */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
}
.portfolio-item { position: relative; }
.portfolio-item figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4/3;
}
.portfolio-item figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms;
}
.portfolio-item:hover figure img { transform: scale(1.05); }
.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: rgba(242,61,76,0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 300ms;
}
.portfolio-item:hover .portfolio-overlay { opacity: 1; }
.portfolio-overlay span {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.portfolio-title {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0.6rem 0 0;
  text-transform: lowercase;
  color: var(--color-text);
  letter-spacing: 0;
}
@media (max-width: 800px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .portfolio-grid { grid-template-columns: 1fr; } }

/* ===== Polígrafos dos Tribunais — cards ===== */
.poligrafo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin: 2rem 0;
}
.poligrafo-card {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 200ms;
}
.poligrafo-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.10); }
.poligrafo-img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.poligrafo-body { padding: 1.25rem; }
.poligrafo-cat { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-primary); font-weight: 600; }
.poligrafo-title { margin: 0.5rem 0 1rem; font-size: 1rem; line-height: 1.4; }
.poligrafo-title a:hover { color: var(--color-primary); }
.poligrafo-more { font-size: 0.85rem; color: var(--color-primary); font-weight: 600; }
.poligrafo-more:hover { text-decoration: underline; }
@media (max-width: 600px) { .poligrafo-grid { grid-template-columns: 1fr; } }

/* ===== Direções Regionais — grelha de 3 colunas (centro | norte | sul) ===== */
.dr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 2rem;
  align-items: start;
}
.dr-card h3 {
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  font-weight: 700;
  text-transform: lowercase;
  margin: 0 0 1.25rem;
  color: var(--color-text);
}
.dr-card h3 em { font-style: italic; color: var(--color-primary); }
.dr-card__media { margin: 0 0 1.5rem; }
.dr-card__media figure { margin: 0; }
.dr-card__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
.dr-card__text blockquote {
  position: relative;
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
  font-style: normal;
}
.dr-card__text blockquote::before {
  content: "\275D";
  float: left;
  font-size: 3rem;
  line-height: 0.9;
  color: var(--color-accent);
  margin: 0.1rem 0.8rem 0 0;
}
/* Tamanho uniforme em toda a coluna — inclui texto solto e listas (o sul tem
   um <ul> que parte o <p>, deixando texto fora de <p>; sem isto ficava maior). */
.dr-card__text { font-size: 15px; line-height: 1.65; }
.dr-card__text p { font-size: 15px; line-height: 1.65; }
.dr-card__text ul { margin: 0.5rem 0 0.5rem; padding-left: 1.2rem; }
.dr-card__text li { font-size: 15px; line-height: 1.65; margin-bottom: 0.25rem; }
.dr-card__text h6 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 1.4rem 0 0.4rem;
}
.dr-card__text p.p1 { margin: 0 0 0.25rem; line-height: 1.5; }
/* Separador vermelho antes da lista de membros (1.ª secção h6) em cada coluna */
.dr-card__text h6:first-of-type::before {
  content: '';
  display: block;
  width: 44px;
  height: 7px;
  background: var(--color-primary);
  margin: 2rem 0 1.5rem;
}
@media (max-width: 900px) {
  .dr-grid { grid-template-columns: 1fr; gap: 3rem; }
  .dr-card__media img { max-width: 480px; }
}

/* ===== Contactos ===== */
.contact-block { text-align: center; padding: 2rem 1rem; }
.contact-block h5 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin: 1rem 0 0.5rem; }
.contact-block p { margin: 0; color: var(--color-text-soft); }
.contact-block__icon { font-size: 1.5rem; color: var(--color-primary); }

/* ===== Galeria solidários ===== */
.solidarios-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.solidarios-gallery img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  cursor: zoom-in;
  transition: opacity var(--transition);
}
.solidarios-gallery img:hover { opacity: 0.85; }

/* Lightbox / modal de imagem (galerias) */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  z-index: 2000;
}
.lightbox.open { display: flex; }
.lightbox__img {
  max-width: 92vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.lightbox__close {
  position: absolute;
  top: 1.2rem;
  right: 1.6rem;
  background: none;
  border: 0;
  color: #fff;
  font-size: 2.6rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.35);
  border: 0;
  color: #fff;
  font-size: 2.4rem;
  line-height: 1;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.lightbox__nav:hover { background: rgba(0, 0, 0, 0.7); }
.lightbox__prev { left: 1.5rem; }
.lightbox__next { right: 1.5rem; }
.lightbox--single .lightbox__nav { display: none; }
@media (max-width: 600px) {
  .lightbox__nav { width: 2.6rem; height: 2.6rem; font-size: 1.8rem; }
  .lightbox__prev { left: 0.5rem; }
  .lightbox__next { right: 0.5rem; }
}

/* ===== Organizações internacionais ===== */
.org-block {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--color-border);
}
.org-block:last-child { border-bottom: none; }
/* Coluna esquerda: nome (vermelho) + designação + logo por baixo */
.org-block__intro { flex: 0 0 36%; }
.org-block__intro h4 { margin-top: 0; }
.cms-content p.org-block__name,
.single p.org-block__name { font-size: 32px; line-height: 42px; font-weight: 700; letter-spacing: -1.7px; color: var(--color-text); margin: 0.4rem 0 0; }
@media (max-width: 700px) {
  .cms-content p.org-block__name,
  .single p.org-block__name { font-size: 26px; line-height: 34px; }
}
.org-block__intro img { max-width: 260px; height: auto; display: block; margin-top: 2rem; }
.org-block__text { flex: 1; }
.org-block__text > *:first-child { margin-top: 0; }
@media (max-width: 700px) { .org-block { flex-direction: column; } .org-block__intro { flex: none; } }

/* ===== Page separator ===== */
.page-separator {
  color: var(--color-primary);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  margin: 0 0 2rem;
  line-height: 1;
}

/* =================================================================
   Robustez mobile — evita overflow horizontal e melhora o menu
   ================================================================= */

/* iOS não dá zoom ao focar campos quando o tipo de letra é >= 16px */
@media (max-width: 700px) {
  .field input, .field select, .field textarea { font-size: 16px; }
  .form { padding: 1.75rem 1.25rem; margin: 2rem auto; }
}

/* Conteúdo migrado (tabelas, embeds, palavras longas) não rebenta o layout */
.cms-content table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cms-content iframe, .single iframe { max-width: 100%; }
.cms-content pre { overflow-x: auto; }
.cms-content, .single, .single h1, .single h2, .page-hero h1 { overflow-wrap: break-word; word-wrap: break-word; }

/* Tabelas do admin podem fazer scroll horizontal em ecrãs pequenos */
@media (max-width: 900px) { .admin-card { overflow-x: auto; } }

/* Menu mobile: fundo escurecido + bloqueio de scroll do body + botão fechar */
.menu-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  opacity: 0; visibility: hidden; transition: opacity 300ms ease; z-index: 190;
}
.menu-backdrop.open { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }
.menu-close { display: none; }
@media (max-width: 1100px) {
  .menu-close {
    display: block; position: absolute; top: 1rem; right: 1.2rem;
    background: none; border: 0; font-size: 1.9rem; line-height: 1; cursor: pointer;
    color: var(--color-text); padding: 0.25rem 0.5rem;
  }
}

/* Filtro de eventos (Próximos / Anteriores / Todos) — quebra e encolhe no mobile */
.events-filter { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
@media (max-width: 560px) {
  .events-filter { gap: 0.5rem; }
  .events-filter .btn { padding: 0.7rem 1.4rem; letter-spacing: 1px; }
}

/* Página de eventos — secções Próximos / Anteriores */
.events-section-title { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 1.5rem; }
.events-section-title--past { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--color-border); }
.events-empty { color: var(--color-muted); font-size: 1.1rem; padding: 1rem 0 2rem; }

/* Barra de pré-visualização de páginas (backoffice) */
.preview-bar {
  position: sticky; top: 0; z-index: 1000;
  background: #111; color: #fff; text-align: center;
  padding: 0.7rem 1rem; font-size: 0.95rem;
}
.preview-bar a { color: var(--color-accent); margin-left: 0.5rem; text-decoration: underline; }

/* ---------- Cronologia (50 Anos) ---------- */
.page-hero__sub {
  margin: 1.25rem 0 0;
  color: var(--color-text-soft);
  font-size: 1.05rem;
}
.cronologia {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) 4rem;
}
.timeline__years {
  display: grid;
  grid-template-columns: repeat(10, 1fr);  /* 10 anos por linha */
  gap: 1.75rem 0.5rem;
  position: relative;
  margin-bottom: 2.5rem;
}
.timeline__year {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 0 0.5rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  color: var(--color-text);
}
/* Linha cronológica horizontal por trás de cada bola (uma por linha da grelha) */
.timeline__year::after {
  content: '';
  position: absolute;
  top: 29px;            /* centro da bola de 58px */
  left: -0.25rem;
  right: -0.25rem;      /* atravessa o intervalo até à bola vizinha */
  height: 3px;
  background: var(--color-border);
  z-index: -1;
}
/* A "bola" — círculo com a imagem do ano */
.timeline__dot {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--color-border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease, border-color .2s, box-shadow .25s;
  transform-origin: center 50%;
}
.timeline__dot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.timeline__year:hover .timeline__dot { border-color: var(--color-primary); }
/* Ao clicar: a bola (e a imagem lá dentro) aumentam */
.timeline__year.is-active .timeline__dot {
  transform: scale(1.3);
  border-color: var(--color-primary);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}
.timeline__year-num {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}
.timeline__year.is-active { z-index: 2; }  /* a bola ampliada fica por cima das vizinhas */
.timeline__year.is-active .timeline__year-num { color: var(--color-primary); }
.timeline__year-label {
  font-size: 0.72rem;
  color: var(--color-text-soft);
  line-height: 1.2;
}
/* Destaque guardado (escondido) — o JS move o painel ativo para o topo */
.timeline__store { display: none; }

/* Zona no topo onde o artigo do ano aberto aparece (por cima da linha do tempo) */
.timeline__top:not(:empty) { margin-bottom: 2.75rem; }

/* Painel de destaque — ocupa a largura toda, sempre no topo da cronologia */
.timeline__panel {
  position: relative;
  border-top: var(--bar-height) solid var(--color-primary);
  background: #fff;
  border-radius: 0 0 10px 10px;
  padding: 2rem clamp(1.25rem, 3vw, 2.5rem);
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
  /* animação de abrir/fechar (altura + opacidade), gerida pelo JS */
  overflow: hidden;
  opacity: 0;
  transition: max-height .45s cubic-bezier(.4, 0, .2, 1), opacity .35s ease;
}
.timeline__panel[hidden] { display: none; }
/* Botão X para fechar o destaque */
.timeline__close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-text-soft);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.timeline__close:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.timeline__panel-year {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
  padding-right: 3rem;  /* não passar por baixo do X */
}
.timeline__panel-title {
  margin: 0.75rem 0 1.25rem;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
}
.timeline__panel-image {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 0 1.5rem;
}
.timeline__panel-body img { max-width: 100%; height: auto; border-radius: 6px; }

/* Vários artigos por ano, dentro do destaque */
.timeline__articles { margin-top: 1.5rem; display: grid; gap: 2.5rem; }
.timeline__article + .timeline__article {
  border-top: 1px solid var(--color-border);
  padding-top: 2.5rem;
}
.timeline__article-image {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 0 1.25rem;
}
.timeline__article-title {
  margin: 0 0 1rem;
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  line-height: 1.2;
}
.timeline__article-body img { max-width: 100%; height: auto; border-radius: 6px; }
.timeline__empty { color: var(--color-text-soft); margin-top: 1.5rem; }

@media (max-width: 1100px) {
  .timeline__years { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 760px) {
  .timeline__years { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
  .timeline__years { grid-template-columns: repeat(3, 1fr); }
}