/* =============================================================================
 * INESC-ID — Folha de estilos principal  (ibat.inesc-id.pt)
 * -----------------------------------------------------------------------------
 * Organizada POR PÁGINA. Cada secção indica em que URLs do site o bloco é
 * efectivamente usado, apurado a 2026-09-21 percorrendo o site a partir do
 * sitemap (wp-sitemap.xml): as 70 páginas publicadas mais uma amostra de posts,
 * eventos, arquivos de categoria e tipos de evento — 83 URLs ao todo — e
 * cruzando o HTML servido com os selectores desta folha.
 *
 * Como ler os cabeçalhos
 *   Páginas: onde o bloco aparece mesmo no HTML servido (contagem real).
 *   Hooks:   classes/ids que o bloco estiliza.
 *   AVISO:   hook não encontrado no site, ou regra com problema.
 *
 * Regra de ouro ao editar
 *   A ordem das secções é significativa. As PARTES 1 a 5 vão do mais genérico
 *   ao mais específico, e a PARTE 6 (camada final) tem de ficar sempre em
 *   último lugar, porque sobrepõe-se a tudo o que vem antes.
 *
 * -----------------------------------------------------------------------------
 * ÍNDICE
 *
 * PARTE 1 — FUNDAÇÕES (aplicam-se a todas as páginas)
 *   1.1  Design tokens (:root)
 *   1.2  Reset & base
 *   1.3  Tipografia
 *   1.4  Menu principal
 *
 * PARTE 2 — CHROME DE PÁGINA (blocos repetidos em muitas páginas)
 *   2.1  Cabeçalho cinzento com imagem ........................... 58 páginas
 *   2.2  Breadcrumbs ............................................. 58 páginas
 *   2.3  Faixas de título (big-titles-*) ......................... 59 páginas
 *   2.4  Bloco "Join us / Subscribe newsletter" ....... home + posts + eventos
 *
 * PARTE 3 — COMPONENTES DE CONTEÚDO (plugin INESC Content)
 *   3.1  Estrutura conteúdo + sidebar ............................ 32 páginas
 *   3.2  Pessoas ................................................. 23 páginas
 *   3.3  Linha de ícones ......................................... 16 páginas
 *   3.4  Tiles (cartão imagem + texto) ........................... 13 páginas
 *   3.5  Image cards .............................................. 1 página
 *   3.6  Imagem com moldura verde ................................ 10 páginas
 *   3.7  Botões de download (sidebar) ............................. 2 páginas
 *   3.8  Separadores ............................................. 14 páginas
 *   3.9  Related links ............................................ 5 páginas
 *
 * PARTE 4 — PÁGINAS
 *   4.1  Home — fundo e vídeo hero ............................... /
 *   4.2  Home — títulos das faixas ............................... /
 *   4.3  Cartões das linhas temáticas ...... / + /research/thematic-lines/
 *   4.4  Faixa "home section 1" ............ / + /research/thematic-lines/
 *   4.5  Linhas temáticas — títulos ........ /research/thematic-lines/
 *   4.6  Áreas científicas ................. /research/scientific-areas/
 *   4.7  Spin-offs ......................... /research/spin-offs/
 *   4.8  Páginas-índice de secção ................................. 7 páginas
 *   4.9  About INESC-ID .................... /about-2/about-inesc-id/
 *   4.10 Documentos institucionais ................................ 2 páginas
 *   4.11 INESCapable ID ..................... /news-and-events/inescapable-id/
 *   4.12 Formatos de post de notícia ........ /130206-2/
 *
 * PARTE 5 — NÃO UTILIZADO NO SITE (candidato a remoção)
 *   5.1  Matriz linhas temáticas × áreas científicas (protótipo)
 *   5.2  Latest news / Research highlights / cartões de post (WPBakery Grid)
 *   5.3  Filtro de categorias da página de notícias (WPBakery Grid)
 *   5.4  Botões .green-btn / .gray-btn / .caw-btn
 *   5.5  Mapa circular (.map-images)
 *   5.6  Hooks órfãos
 *
 * PARTE 6 — CAMADA FINAL (tem de ficar sempre em último lugar)
 *   6.1  WPBakery — rows "Stretch row and content"
 *   6.2  Ecrãs grandes (>1366px)
 *
 * -----------------------------------------------------------------------------
 * PROBLEMAS CONHECIDOS (mantidos tal como estavam, para não alterar o site)
 *
 *   AVISO 4.10  "@media(max)" não tem condição válida nem bloco próprio: o
 *               parser engole a regra seguinte, ".institutional-docs-title
 *               h5 a", que por isso nunca chega a ser aplicada. Apagar a linha
 *               "@media(max)" repõe o padding de 14px nesses links.
 *   AVISO 4.9   ".about-values-row > *" declara "width: 16,66%" (vírgula em vez
 *               de ponto). Declaração inválida, ignorada pelo browser: acima de
 *               1230px as colunas ficam em largura automática.
 *   AVISO 5.x   Nenhum hook da PARTE 5 existe no HTML servido. O site passou
 *               para as classes BEM do plugin (inesc-latest-news__grid,
 *               inesc-people__card, inesc-news-listing__grid, iidc-btn--*),
 *               enquanto estas regras ainda usam os hooks antigos.
 *
 * -----------------------------------------------------------------------------
 * O QUE MUDOU NESTA REORGANIZACAO
 *
 *   Nenhuma declaração foi alterada: todas as regras foram movidas tal e qual
 *   e a ordem relativa entre regras que disputam a mesma propriedade foi
 *   preservada. As únicas diferenças em relação à versão anterior são:
 *     · as secções passaram a estar agrupadas por página (ver índice);
 *     · três @media (max-width: 768px) foram divididos em sete, para que
 *       cada página/componente leve o seu próprio bloco responsivo junto;
 *     · foi removido um @media (max-width: 677px) que estava duplicado,
 *       linha a linha, na antiga secção 16 (About).
 * ========================================================================== */


/* #############################################################################
 * PARTE 1 — FUNDAÇÕES
 * Aplicam-se às 83 páginas analisadas.
 * ######################################################################### */


/* =============================================================================
 * 1.1 · DESIGN TOKENS
 * -----------------------------------------------------------------------------
 * Páginas: todas
 * Hooks:   :root
 * ========================================================================== */

:root {
  /* --- Brand palette --- */
  --primary-color: #005f80;
  --secondary-color: #97ca3d;
  --accent-color: #ff6b35;
  --text-dark: #000000;
  --text-light: #ffffff;
  --border-color: #e0e0e0;
  --bg-light: #f5f5f5;
  --blue: #005f80;
  --dark-blue: #004d6d;
  --green: #97ca3d;
  --gray: #6a858e;
  --dark-gray: #5a5d55;
  --green-tint: #d6e6a8;

  /* --- Typography --- */
  --font-main: "Titillium Web", sans-serif;
  --font-heading: "Titillium Web", sans-serif;
  --extra-light: 200;
  --light: 300;
  --normal: 400;
  --medium:  500;
  --semi-bold: 600;
  --bold: 700;

  /* --- Fluid boundaries (referência 768px → 1366px) --- */
  --fluid-min-width: 768px;   
  --fluid-max-width: 1366px; 

/* --- Border radius --- */
--radius-sm: 0rem; /* 0px */
--radius-md: 0.0357rem; /* 0.5px */
--radius-lg: clamp(0.60714rem, -0.7689rem + 2.8668vw, 1.6786rem); /* 9px → 23.5px */
--radius-xl: clamp(0.8571rem, -0.4732rem + 2.7714vw, 1.8929rem); /* 12px → 26.5px */

/* --- Fluid font sizes (mobile → desktop) --- */
--text-11:   clamp(0.6083rem, 0.3966rem + 0.3143vw, 0.6463rem); /* 9.73px → 10.34px */
--text-12:   clamp(0.6635rem, 0.4366rem + 0.3143vw, 0.705rem);  /* 10.62px → 11.28px */
--text-14:   clamp(0.7741rem, 0.5541rem + 0.3143vw, 0.8225rem); /* 12.39px → 13.16px */
--text-16:   clamp(0.8847rem, 0.6030rem + 0.3949vw, 0.94rem);   /* 14.16px → 15.04px */
--text-17:   clamp(0.9396rem, 0.6634rem + 0.3924vw, 0.9983rem); /* 15.03px → 15.97px */
--text-17-5: clamp(0.9670rem, 0.6259rem + 0.4703vw, 1.0274rem); /* 15.47px → 16.44px */
--text-18:   clamp(0.9953rem, 0.6539rem + 0.4728vw, 1.0575rem); /* 15.92px → 16.92px */
--text-19:   clamp(1.0502rem, 0.7142rem + 0.4703vw, 1.1158rem); /* 16.80px → 17.85px */
--text-19-5: clamp(1.0777rem, 0.6768rem + 0.5483vw, 1.145rem);  /* 17.24px → 18.32px */
--text-20:   clamp(1.1059rem, 0.5029rem + 0.7863vw, 1.175rem);  /* 17.69px → 18.8px */
--text-21:   clamp(1.1608rem, 0.7630rem + 0.5508vw, 1.2333rem); /* 18.57px → 19.73px */
--text-22:   clamp(1.2165rem, 0.8222rem + 0.5508vw, 1.2925rem); /* 19.46px → 20.68px */
--text-22-5: clamp(1.2439rem, 0.8514rem + 0.5508vw, 1.3216rem); /* 19.90px → 21.15px */
--text-24:   clamp(1.3271rem, 1.0064rem + 0.4728vw, 1.41rem);   /* 21.23px → 22.56px */
--text-25:   clamp(1.3807rem, 0.9970rem + 0.5508vw, 1.467rem);  /* 22.09px → 23.47px */
--text-26:   clamp(1.4377rem, 1.0572rem + 0.5508vw, 1.5275rem); /* 23.00px → 24.44px */
--text-27-5: clamp(1.5200rem, -0.0620rem + 1.9642vw, 1.615rem); /* 24.32px → 25.84px */
--text-30:   clamp(1.6589rem, 1.3570rem + 0.4728vw, 1.7625rem); /* 26.54px → 28.2px */
--text-33:   clamp(1.8243rem, 0.4728rem + 2.8294vw, 1.9383rem); /* 29.19px → 30.99px */
--text-35:   clamp(1.9349rem, 1.3171rem + 0.8652vw, 2.0558rem); /* 30.96px → 32.89px */
--text-36:   clamp(1.9906rem, -0.0322rem + 2.5141vw, 2.115rem); /* 31.85px → 33.84px */
--text-38:   clamp(2.1012rem, 1.4273rem + 0.9431vw, 2.2325rem); /* 33.62px → 35.72px */
--text-49:   clamp(2.7091rem, 1.8713rem + 1.1795vw, 2.8783rem); /* 43.35px → 46.05px */

/* --- Fluid spacing --- */
--spacing-xs:  clamp(0.000rem, -0.0796rem + 0.1659vw, 0.062rem);    /* 0px → 1px */
--spacing-sm:  clamp(0.125rem, -0.0355rem + 0.3344vw, 0.250rem);    /* 2px → 4px */
--spacing-md:  clamp(0.500rem, 0.1789rem + 0.6689vw, 0.750rem);    /* 8px → 12px */
--spacing-lg:  clamp(0.750rem, 0.1079rem + 1.3378vw, 1.250rem);    /* 12px → 20px */
--spacing-xl:  clamp(1.250rem, 0.6079rem + 1.3378vw, 1.750rem);    /* 20px → 28px */
--spacing-2xl: clamp(1.750rem, 0.4657rem + 2.6756vw, 2.750rem);    /* 28px → 44px */
--spacing-3xl: clamp(1.750rem, -11.0928rem + 26.7559vw, 11.750rem); /* 28px → 188px */
--spacing-4xl: clamp(0.75rem, -3.4237rem + 8.6957vw, 4rem); /* 12px → 64px (768 → 1366) */

--content-margin: 2rem;

  --website-margin: 5vw;

  /* --- Layout ---
   * Nota sobre zoom (Ctrl -/+): unidades vw NÃO reagem ao zoom (100vw é sempre
   * a largura física do ecrã), enquanto rem/px reagem. Por isso, acima do teto
   * fluido (1366px) todas as medidas horizontais são limitadas em rem com
   * min(Xvw, Yrem) — abaixo de 1366px continuam a usar vw (comportamento
   * idêntico ao anterior), acima disso passam a seguir o :root font-size,
   * que é o único "botão" de escala. Assim texto e layout encolhem juntos.
   * Conversão usada: 1vw @1366px = 0.8538rem.
   *
   * --zoom: fator de zoom do browser (1 = 100%, 0.8 = um Ctrl -), escrito pelo
   * JS do plugin INESC Core (assets/zoom.js) no , antes do primeiro
   * paint. O CSS não tem forma de ler o zoom sozinho, e sem esse número
   * qualquer medida "de ponta a ponta" fica presa ao vw e imune ao Ctrl -.
   * Com ele, `100vw * var(--zoom)` é exatamente a largura do ecrã a 100% e
   * encolhe na proporção do zoom — ponta a ponta em qualquer ecrã, sem teto.
   * Se o JS não correr, o valor 1 aqui declarado mantém o site como estava. */
  --zoom: 1;
  --menu-height: 136px;
  --container-width: 84.125rem;  /* 1346px */

  /* Teto de largura do container do tema (.ct-container). Até 1920px é o valor
     do Blocksy (1366px); acima é reescrito no bloco @media 120rem, onde o
     próprio site alarga o container para 90vw. Usado por --content-edge para
     alinhar faixas full-bleed com o conteúdo (ver secção 7). */
  --container-max: var(--theme-normal-container-max-width, 85.375rem);
  --breakpoint-tablet: 48rem;    /* 768px  */
  --offset: 5%;
  --inner-padding: 5.5vw;

  /* Largura do conteúdo dentro de rows "Stretch row and content" (ver secção 23).

     A 100% de zoom isto é exatamente 100vw: ponta a ponta em QUALQUER ecrã
     (1920, 2560, 4K, 8K) — não há breakpoint nem teto para afinar. Ao fazer
     Ctrl - encolhe na proporção do zoom e a margem aparece sozinha.

     Antes era um teto fixo em rem (122rem ≈ 2560px), e essa largura era ao
     mesmo tempo o ponto onde a margem surgia e o ponto onde o Ctrl - começava
     a funcionar — abaixo dela o conteúdo ocupava o ecrã todo e não tinha para
     onde encolher. Com --zoom os dois deixam de estar amarrados. */
  --stretch-max: calc(100vw * var(--zoom));
  --content-edge: max(0px, calc(
    (100cqw - min(100cqw, var(--theme-container-width-base, 84vw), var(--container-max))) / 2
  ));
}


/* =============================================================================
 * 1.2 · RESET & BASE
 * -----------------------------------------------------------------------------
 * Páginas: todas
 * ========================================================================== */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  font-size: var(--text-18);
  line-height: 1.4;
  color: var(--text-dark);
}


/* =============================================================================
 * 1.3 · TIPOGRAFIA
 * -----------------------------------------------------------------------------
 * Páginas: todas
 * Hooks:   h1–h6, p, a, li
 * ========================================================================== */

h1, h2, h3, h4, h5, h6, p {
  font-family: var(--font-heading);
  color: var(--primary-color);
  white-space: normal;
  line-height: 1.5 !important;
  margin: 0;
}

h1 {
  font-size: var(--text-33);
  text-transform: uppercase;
  font-weight: var(--semi-bold);
  max-width: 100%;
  letter-spacing: 0.02em;
}

h2 {
  font-size: var(--text-33);
  font-weight: var(--semi-bold);
}

h3 {
  font-size: var(--text-33);
  font-weight: var(--normal);
  line-height: 2 !important;
}

h3 strong,
h3 b {
  font-weight: var(--bold);
}

h4 {
  font-size: var(--text-24);
  font-weight: var(--semi-bold);
}

h5 {
  font-size: var(--text-19);
  font-weight: var(--semi-bold);
}

h6 {
  font-size: var(--text-18);
  margin-bottom: var(--spacing-md);
  font-weight: var(--normal);
  color: var(--dark-blue) !important;
}

p {
  font-size: var(--text-18);
  font-weight: var(--normal);
  line-height: 2 !important;
}

a {
  color: var(--blue) ;
  text-decoration: underline;
  transition: color 0.3s ease;
}

a:hover {
  font-weight: bold;

}

li {
  color: var(--blue);
  line-height: 2 !important;
}



/* =============================================================================
 * 1.4 · MENU PRINCIPAL
 * -----------------------------------------------------------------------------
 * Páginas: todas (83/83)
 * Hooks:   #header-menu-1, ul.menu, li.menu-item, a.ct-menu-link
 * Nota:    o fundo azul do header e as cores de hover/activo vivem no
 *          "Additional CSS" do Customizer (bloco wp-custom-css), não aqui.
 * ========================================================================== */

@media (min-width: 1000px) {
  #header-menu-1 ul.menu {
    display: flex;
    align-items: flex-end;
    padding-bottom: 2rem !important;
  }

  #header-menu-1 ul.menu > li.menu-item {
    position: relative;
    display: flex;
    align-items: flex-end;
  }

  #header-menu-1 ul.menu > li.menu-item > a.ct-menu-link {
    line-height: 1;
    display: inline-flex;
    align-items: flex-end;
    padding: 0 0.7rem 0 1.3rem;
    margin: 0;
  }

  #header-menu-1 ul.menu > li.menu-item::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    height: 2.5rem;
    border-right: 2px solid rgba(255, 255, 255, 0.9);
    pointer-events: none;
  }
}


/* #############################################################################
 * PARTE 2 — CHROME DE PÁGINA
 * Blocos que se repetem em muitas páginas interiores.
 * ######################################################################### */


/* =============================================================================
 * 2.1 · CABEÇALHO CINZENTO COM IMAGEM
 * -----------------------------------------------------------------------------
 * Páginas: 58/83 — todas as interiores. NÃO aparece na home, nas páginas-índice
 *          de secção (/about-2/, /research/, /team/, /project/,
 *          /news-and-events/, /internal-area/, /about-2/support-offices/),
 *          nos arquivos de categoria e tipo de evento, nem nas páginas do
 *          plugin de eventos (/all-events/, /booking/, /venues/, ...).
 * Hooks:   .header-image (+ ::before overlay, ::after imagem)
 * ========================================================================== */

/* Section needs position:relative to anchor the ::before overlay. */
.header-image {
  position: relative;
  padding: 10rem 0 !important;
  margin-top: 0; 
}

/* Overlay */
.header-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(90, 93, 85, 0.3);
  z-index: 1;
  pointer-events: none;
}

/* Imagem por cima do overlay */
.header-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/wp-content/uploads/2026/04/g464.png') top center / cover no-repeat;
    z-index: 2;
    pointer-events: none;
}


/* Content (title + breadcrumbs) must sit above the overlay image. */
.header-image .breadcrumbs-row {
  position: relative;
  z-index: 3;
}

@media (max-width: 768px) {
  .header-image {
    padding: 10vh 0;
    background-size: contain !important;

    background-repeat: no-repeat;
  }
}

/* =============================================================================
 * 2.2 · BREADCRUMBS
 * -----------------------------------------------------------------------------
 * Páginas: 58/83 — sempre dentro de .header-image (ver 2.1)
 * Hooks:   .breadcrumbs-row, .ct-breadcrumbs .first-item / .last-item
 * ========================================================================== */
.breadcrumbs-row .wpb_column:first-child,
.breadcrumbs-row .wpb_column:last-child {
  width: 50% !important;
  flex: 0 0 50%;
  max-width: 50%;
}


.breadcrumbs-row {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-right: 3% !important;
  border-radius: 0 var(--radius-xl) 0 0 !important;
  overflow: hidden;
}

.breadcrumbs-text {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.breadcrumbs-col > *{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.breadcrumbs-col{
  padding-left: 2rem;
}

.breadcrumbs-content{
  padding-left: 0;
  margin-left: 0;
}

.ct-breadcrumbs .last-item {
  font-weight: var(--bold);
}

.breadcrumbs-landing-pages-content{
  text-align: right;
}

@media (max-width: 768px) {
  .breadcrumbs-row .wpb_column:first-child,
  .breadcrumbs-row .wpb_column:last-child {
    width: 100% !important;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .breadcrumbs-col{
    padding-left: var(--content-edge) !important;
  }

  .breadcrumbs-row {
    margin-right: 0 !important;
    border-radius: 0 !important;
    overflow: hidden;
  }

  .breadcrumbs-landing-pages-content{
    text-align: left;
}
}


/* =============================================================================
 * 2.3 · FAIXAS DE TÍTULO (big-titles-*)
 * -----------------------------------------------------------------------------
 * Páginas: .big-titles-left-green em 59/83 · .big-titles-right-blue em 4
 *          (home, /about-2/about-inesc-id/, /about-2/governance/, /outreach/)
 *          · .big-titles-right-gray em 2 (home, /about-2/governance/)
 * Hooks:   .big-titles-left-green, .big-titles-right-blue,
 *          .big-titles-right-gray
 * ========================================================================== */

/* Alinhamento do texto das faixas com o conteúdo da página.
 *
 * As faixas são full-bleed (começam em x=0), o conteúdo vive dentro do
 * .ct-container do tema. Um `padding-left: 8vw` NÃO alinha com o "Content Edge
 * Spacing: 8vw" do Blocksy, por duas razões:
 *
 *   1. O tema não aplica 8vw como padding: define o container com
 *      width: min(100%, 84vw) e centra-o. Como o vw inclui a barra de scroll
 *      mas a centragem é feita na largura útil (clientWidth), a margem real
 *      fica 8vw MENOS metade da barra de scroll (~7,5px no Windows).
 *   2. O .vc_column-inner do WPBakery acrescenta ainda 15px de padding.
 *
 * Solução: repetir a conta do tema — (largura útil − largura do container) / 2.
 * O 100cqw dá a largura útil real (sem barra de scroll) porque a secção que
 * envolve as faixas é declarada container de query aqui em baixo; se não
 * houver container, cqw cai para o viewport e volta-se ao comportamento
 * antigo. Funciona em qualquer largura, incluindo >1920px, onde o teto do
 * container passa a 90vw (ver --container-max em :root). */
.vc_section:has([class*="big-titles-"]) {
  container-type: inline-size;
}


.big-titles-right-gray,
.big-titles-right-blue,
.big-titles-left-green {
  display: flex;
  align-items: center !important;
  margin-top: 0;
  min-height: 4rem !important;
  margin-bottom: 0;
  padding-left: var(--content-edge);
  box-sizing: border-box;
}


.big-titles-right-blue {
  background-color: var(--dark-blue);
  border-radius: 0 0 0 var(--radius-xl);
}

.big-titles-right-gray {
  background-color: var(--gray);
  border-radius: 0 0 0 var(--radius-xl);
}

.big-titles-left-green {
  background-color: var(--green);
  border-radius: 0 0 var(--radius-xl) 0;
}

/* No mobile o Blocksy usa outro "Content Edge Spacing" (88vw em vez de 84vw),
   mas --content-edge lê a variável do tema e acompanha sozinho — só é preciso
   descontar o recuo próprio de cada faixa:
   · gray/blue já entram 5% pela margem, logo o padding é o que falta. O
     min(5%, ...) impede que o recuo da caixa ultrapasse a margem do conteúdo
     em ecrãs muito estreitos (aí o texto ficaria à direita e sem forma de
     recuar, porque não há paddings negativos);
   · green começa em x=0, usa o valor cheio herdado da regra base. */
@media (max-width: 768px) {
  .big-titles-right-gray,
  .big-titles-right-blue {
    margin-left: var(--content-edge);
    padding-left: var(--content-edge);
    border-radius: 0 0 0 1.5rem;
  }

  .big-titles-right-blue
  .big-titles-left-green {
    margin-right: var(--content-edge);
    padding-right: var(--content-edge);
    border-radius: 0 0 1.5rem 0;
  }
}


/* =============================================================================
 * 2.4 · BLOCO "JOIN US / SUBSCRIBE NEWSLETTER"
 * -----------------------------------------------------------------------------
 * Páginas: 11/83 — home, todos os posts de notícias e todas as páginas de
 *          evento. É o bloco de rodapé com imagem de fundo e botão de
 *          subscrição.
 * Hooks:   #row-com-imagem, #subscribe-image-column, #Subscribe-newsletter,
 *          .join-us, .subscribe-btn
 * ========================================================================== */

.subscribe-btn {
  padding: 0.2rem 0.5rem !important;
  font-size: var(--text-19-5) !important;
  font-weight: var(--semi-bold) !important;
}

#subscribe-image-column {
  padding: 0 1rem !important;
}

.join-us p {
  font-family: var(--font-heading);
  color: var(--blue);
  font-size: var(--text-20) !important;
}

#row-com-imagem {
  position: relative !important;
  overflow: hidden !important;
  padding: 1rem 0 !important;
}

#row-com-imagem::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/wp-content/uploads/2026/11/Untitled-1.png') !important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 2 !important;
  pointer-events: none;
  display: block !important;
}

#row-com-imagem > * {
  position: relative;
  z-index: 1;
}

#Subscribe-newsletter {
  display: flex;
  justify-content: flex-end;
  margin: 1rem 0 !important;
  padding: 3.8rem min(1vw, 0.85rem) !important;
}

#Subscribe-newsletter img {
  width: 90%; /* intentionally not 100% */
  height: auto;
}

@media (max-width: 768px) {
  #subscribe-image-column {
    height: 100% !important;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
  }

  #row-com-imagem {
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  #row-com-imagem::before {
    background-size: cover;
    background-repeat: no-repeat;
  }

  #Subscribe-newsletter {
    margin: 3rem 0 !important;
    padding: 3vw !important;
  }

  .subscribe-btn {
    margin: 1rem 0 !important;
  }
}


/* #############################################################################
 * PARTE 3 — COMPONENTES DE CONTEÚDO
 * Blocos do plugin INESC Content, partilhados entre páginas de área científica,
 * linha temática, gabinete de apoio e afins.
 * ######################################################################### */


/* =============================================================================
 * 3.1 · ESTRUTURA CONTEÚDO + SIDEBAR
 * -----------------------------------------------------------------------------
 * Páginas: .inesc-content-row em 32/83 · .inesc-sidebar em 25/83 — as 10 áreas
 *          científicas, as 4 linhas temáticas, os 8 gabinetes de apoio,
 *          /research/spin-offs/, /research/inesc-id-awards/, /outreach/,
 *          /prr-inesc-id/, /branding-visual-identity/, /terms-of-use/,
 *          /about-2/contacts/, /about-2/governance/,
 *          /news-and-events/submit-content/, /template-page/
 * Hooks:   .inesc-content-row, .inesc-sidebar
 * ========================================================================== */


.content-section,
.inesc-content-row,
.inesc-main-content,
.inesc-sidebar {
  margin-top: 0 !important;
  padding-top: 0 !important;
}




@media (max-width: 768px) {

  .inesc-content-row{
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

@media (max-width: 768px) {
  .inesc-content-row {
    display: flex !important;
    flex-direction: column-reverse !important;
  }

  .inesc-sidebar {
    align-items: center !important;
    text-align: center;
  }
}


/* =============================================================================
 * 3.2 · PESSOAS
 * -----------------------------------------------------------------------------
 * Páginas: 23/83 — as 10 áreas científicas, as 4 linhas temáticas, 7 gabinetes
 *          de apoio, /template-page/, /130206-2/
 * Hooks:   .inesc-person-name, .inesc-person-role, .inesc-person-mail,
 *          .inesc-person-photo
 * Nota:    as listagens de equipa (/team/...) usam as classes BEM do plugin
 *          (.inesc-people__card) e não são afectadas por este bloco.
 * ========================================================================== */

.inesc-person-name h4,
.inesc-person-name {
  color: var(--blue) !important;
  text-align: center;
  font-weight: var(--semi-bold);
  font-size: var(--text-21);
}

.inesc-person-role h6,
.inesc-person-role {
  line-height: 0.5;
  text-align: center;
  color: var(--gray);
  font-size: var(--text-18);
  font-weight: var(--bold);
}

.inesc-person-mail h4,
.inesc-person-mail {
  text-align: center;
  color: var(--blue);
  font-weight: var(--semi-bold);
  font-size: var(--text-21);
}

.inesc-person-photo img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  display: block;
}


.onograma {
  padding: 0 clamp(0.100rem, -13.895rem + 29.174vw, 12.500rem) !important; /* 1.6px → 200px */
}

/* =============================================================================
 * 3.3 · LINHA DE ÍCONES
 * -----------------------------------------------------------------------------
 * Páginas: 16/83 — as 10 áreas científicas, as 4 linhas temáticas,
 *          /about-2/support-offices/innovation-management-office/,
 *          /template-page/
 * Hooks:   .inesc-icons-row, .inesc-icon-col, .inesc-icon-label
 * ========================================================================== */

.inesc-icons-row,
.inesc-icon-col {
  display: flex;
}

.inesc-icon-label h4,
.inesc-icon-label {
  display: flex;
  flex-direction: column;
  width: 100%;

  font-weight: var(--bold);
  font-size: var(--text-21);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: auto;
}

/* Espaçamentos da célula de ícone: .inesc-icon-item na inner column,
 * .inesc-icon no ícone */
.inesc-icon-item > .vc_column-inner {
  padding-top: 0.5rem !important;
}

.inesc-icon {
  margin-bottom: 0 !important;
  padding-bottom: 0.5rem !important;
}


/* =============================================================================
 * 3.4 · TILES (cartão imagem + texto)
 * -----------------------------------------------------------------------------
 * Páginas: 13/83 — /about-2/about-inesc-id/, /about-2/contacts/,
 *          /about-2/institutional-documents/, 5 gabinetes de apoio,
 *          /data-protection/, /outreach/, /prr-inesc-id/,
 *          /research/spin-offs/, /template-page/
 * Hooks:   .inesc-tiles, .inesc-tiles-image, .inesc-tiles-title,
 *          .inesc-tiles-read-more, .inesc-tiles-image-left/-right (+ -col),
 *          .inesc-tiles-text-left
 * ========================================================================== */

.inesc-tiles-title{
  padding-bottom: 2rem;
  margin-bottom: 1rem;
}

.inesc-tiles-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;      /* centra na vertical */
    justify-content: center;  /* centra na horizontal */
    overflow: hidden;
}

/* qualquer wrapper que o WordPress meta entre o cartão e a imagem */
.inesc-tiles-image > * {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
}

.inesc-tiles-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover !important;
    display: block;
}

.inesc-tiles-title h5 {
  text-transform: uppercase;
}

.inesc-tiles-read-more h6,
.inesc-tiles-read-more a {
  font-size: var(--text-19-5);
  font-weight: var(--normal);
  font-style: italic;
  text-decoration: none;
  color: var(--gray);
}
.inesc-tiles-read-more a:hover {
  font-weight: var(--bold);

}

.inesc-tiles-image-right,
.inesc-tiles-image-left{
    margin-top: 2rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .inesc-tiles-image-right {
    display: grid !important;
    flex-direction: column-reverse !important;
  }

  .inesc-tiles-image-right{
    order: 1 !important;

  }

  .inesc-tiles-text-left{
    order: 2 !important;
  }

  .inesc-tiles-image-left,
  .inesc-tiles-image-right {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }


  .inesc-tiles-image-left-col,
  .inesc-tiles-image-right-col {
    padding: 0 !important;
  }
}


/* =============================================================================
 * 3.5 · IMAGE CARDS
 * -----------------------------------------------------------------------------
 * Páginas: 1/83 — /template-page/
 * Hooks:   .inesc-image-cards
 * ========================================================================== */

.inesc-image-cards h3 {
  font-size: var(--text-22-5);
  font-weight: var(--semi-bold);
  text-transform: uppercase;
}

.inesc-image-cards img {
  aspect-ratio: 16 / 10 !important;
  display: block;
}

.inesc-image-cards * {
  width: 100% !important;
}


/* =============================================================================
 * 3.6 · IMAGEM COM MOLDURA VERDE
 * -----------------------------------------------------------------------------
 * Páginas: 10/83 — /about-2/about-inesc-id/,
 *          /about-2/institutional-documents/, 5 gabinetes de apoio,
 *          /outreach/, /prr-inesc-id/, /research/scientific-areas/aips-2/
 * Hooks:   .inesc-about-image-col, .inesc-about-image
 * Ver:     4.7 para a variante usada nos spin-offs
 * ========================================================================== */

.inesc-about-image-col {
    position: relative;
}

.inesc-about-image {
    position: relative;
    z-index: 1;

}

.inesc-about-image img {
  border-radius: 27px !important;

}

/* Borda verde */
.inesc-about-image::after {
    content: "";
    position: absolute;
    right: -1vw;
    bottom: -1vw;
    width: 5vw;
    height: 5vw;
    border-right: 4px solid var(--green);
    border-bottom: 4px solid var(--green);
    border-radius: 0 0 30px 0;
    z-index: 0;
}


/* =============================================================================
 * 3.7 · BOTÕES DE DOWNLOAD (sidebar)
 * -----------------------------------------------------------------------------
 * Páginas: 2/83 — /branding-visual-identity/, /template-page/
 * Hooks:   .inesc-download-btn
 * ========================================================================== */

.inesc-download-btn {
  display: block !important;
  width: 100% !important;
}

.inesc-download-btn button {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  border-radius: 6px !important;
  font-size: var(--text-21) !important;
  font-weight: var(--semi-bold) !important;
  text-transform: none;
  box-shadow: none;
  text-align: left !important;
}

@media (max-width: 768px) {
  .inesc-download-btn button {
    width: auto !important;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
    display: block;
  }
}


/* =============================================================================
 * 3.8 · SEPARADORES
 * -----------------------------------------------------------------------------
 * Páginas: 14/83 — as 10 áreas científicas e 4 gabinetes de apoio
 * Hooks:   .inesc-separator
 * ========================================================================== */

.inesc-separator{ 
  border-width: 0.1875rem !important;
 }


/* =============================================================================
 * 3.9 · RELATED LINKS
 * -----------------------------------------------------------------------------
 * Páginas: 5/83 — /research/scientific-areas/aips-2/,
 *          /news-and-events/submit-content/ e 3 gabinetes de apoio
 *          (communications-outreach, innovation-management,
 *          technological-infrastructures)
 * Hooks:   .related-links
 * ========================================================================== */

.related-links h1 {
  font-size: var(--text-22-5) !important;
  font-weight: var(--bold) !important;
  text-transform: uppercase !important;
}

.related-links h4 {
  font-size: var(--text-20) !important;
  font-weight: var(--semi-bold) !important;
}


.related-links li {
  color: var(--green) !important;
}

.related-links ul {
    list-style-position: inside;
    padding-left: 0;   /* tira o avanço à esquerda */

}


/* #############################################################################
 * PARTE 4 — PÁGINAS
 * Blocos ligados a uma página concreta (ou a um par de páginas).
 * ######################################################################### */


/* =============================================================================
 * 4.1 · HOME — FUNDO E VÍDEO HERO
 * -----------------------------------------------------------------------------
 * Páginas: 1/83 — /
 * Hooks:   body.home, .hero, .inesc-video
 * ========================================================================== */

.home {
  background-image: url("/wp-content/uploads/2026/03/Background-1.svg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}




/* =============================================================================
 * 4.2 · HOME — TÍTULOS DAS FAIXAS
 * -----------------------------------------------------------------------------
 * Páginas: 1/83 — /
 * Hooks:   #latest-news-big-title, #research-highlights-big-title
 * Ver:     2.3 para o desenho das faixas em si
 * ========================================================================== */

.home-big-title {
  margin-top: var(--content-margin);  
 
}

#upcoming-events{
    margin-top: var(--content-margin);  
}




/* =============================================================================
 * 4.3 · CARTÕES DAS LINHAS TEMÁTICAS
 * -----------------------------------------------------------------------------
 * Páginas: 2/83 — / e /research/thematic-lines/
 * Hooks:   .thematic-cards-row, .thematic-cards, .thematic-card-text,
 *          .first, .second, .thematic-page
 * Nota:    .thematic-page só existe em /research/thematic-lines/ e serve para
 *          essa página variar o espaçamento e o tamanho do título.
 * ========================================================================== */

/* --- Cards grid ----------------------------------------------------------- */

.thematic-page.thematic-cards-row {
  gap: 5rem
}

.thematic-cards-row {
  display: flex;
  gap: 5rem;
  margin-bottom: 2rem;
  margin-left: 10vw !important;
  margin-right: 10vw !important;
}

.thematic-cards-row .first,
.thematic-cards-row .second {
  flex: 1;
}

.thematic-cards {
  flex: 1;
  aspect-ratio: 1.48 / 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border: 3px solid var(--green) !important;
  border-radius: var(--radius-lg) 0 var(--radius-lg) 0 !important;
  overflow: hidden;
  margin-top: 0.5rem;
}

.thematic-cards:hover {
  border: 3px solid var(--green);
}

.thematic-cards:hover * {
  color: var(--green) !important;
}

.thematic-card-text {
  padding: 0.25rem 0 !important;
  margin-bottom: 2.5rem;
}

.thematic-card-text h3 {
  line-height: 1.2 !important;
}

.thematic-cards-row .thematic-card-text h3 span{
  font-size: clamp(1rem, -0.0620rem + 1.9642vw, 1.615rem);
}



@media (max-width: 767px) {
  /* colunas iguais, encolhem para caber com as margens */
  .thematic-cards-row > * {
    flex: 1 1 0% !important;
    max-width: none !important;
    min-width: 0 !important;
    width: auto !important;
  }
  .thematic-cards-row * {
    min-width: 0;
  }
  .thematic-cards-row .thematic-card-text {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .thematic-cards-row .thematic-card-text h3 {
    overflow-wrap: anywhere;
  }
}

/* tamanho do título (substitui o seletor coste na homepage) */
.thematic-cards-row .thematic-card-text h3 {
  font-size: clamp(1rem, -0.0620rem + 1.9642vw, 1.615rem);
}



@media (max-width: 768px) {
  .thematic-cards-row {
    gap: 0 !important;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .thematic-cards-row .first {
    margin-left: 4.5vw !important;
    margin-right: 1.5vw !important;
  }

  .thematic-cards-row .second {
    margin-left: 1.5vw !important;
    margin-right: 4vw !important;
  }

  .thematic-cards {
    aspect-ratio: 1.48 / 1;
    border: 2px solid var(--green) !important;
  }

  .thematic-card-text {
    padding: 0 1.5rem !important;
    margin-bottom: 1rem;
  }

  .thematic-card-text h3 {
    line-height: 1.2 !important;
  }
}


/* =============================================================================
 * 4.4 · FAIXA "HOME SECTION 1"
 * -----------------------------------------------------------------------------
 * Páginas: 2/83 — / e /research/thematic-lines/
 * Hooks:   .home-section-1
 * ========================================================================== */

.thematic-page.home-section-1 {
  padding: 0 min(7vw, 5.98rem);
}

.home-section-1 {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}

.home-section-1 .btn {
  background-color: #ffffff;
}

@media (max-width: 768px) {
  .thematic-page.home-section-1 {
    padding: 0;
  }
}


/* =============================================================================
 * 4.5 · LINHAS TEMÁTICAS — TÍTULOS DE SECÇÃO
 * -----------------------------------------------------------------------------
 * Páginas: 1/83 — /research/thematic-lines/
 * Hooks:   .thematic-lines h2/h6, #subtitle h4
 * ========================================================================== */

.thematic-lines h2 {
  font-size: var(--text-30);
  font-weight: var(--semi-bold);
  color: var(--blue);
}

.thematic-lines h6 {
  font-size: var(--text-22);
  font-weight: var(--semi-bold);
  color: var(--green);
}

#subtitle h4 {
  line-height: 1.5;
}


/* =============================================================================
 * 4.6 · ÁREAS CIENTÍFICAS
 * -----------------------------------------------------------------------------
 * Páginas: 1/83 — /research/scientific-areas/
 * Hooks:   .scientific-areas, .scientific-areas-image,
 *          .scientific-areas-paragrph-columns, .dynamic-grid
 * AVISO:   ".scientific-area-images" (dentro do @media 768px) está no singular
 *          e não existe no HTML — ver 5.6.
 * ========================================================================== */

.scientific-areas-image {
  flex: 1;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border: 3px solid var(--green) !important;
  border-radius: var(--radius-lg) 0 var(--radius-lg) 0 !important;
  overflow: hidden;
  margin: 5% 0;
  padding: 25% 49%;
}

.scientific-areas-paragrph-columns {
  border-left: 3px solid var(--green) !important;
}

.scientific-areas-paragrph-columns a {
  text-decoration: none !important;
}
.scientific-areas-image,
.scientific-areas-paragrph-columns {
  transition: border-color 0.3s;
}

.scientific-areas:hover .scientific-areas-image,
.scientific-areas:hover .scientific-areas-paragrph-columns {
  border-color: var(--blue) !important;
}

.dynamic-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
}

.dynamic-grid.last-cell > .wpb_column:last-child,
.dynamic-grid.last-cell > .vc_column_container:last-child {
  margin-left: auto !important;
  margin-right: auto !important;
}

.dynamic-grid > .wpb_column,
.dynamic-grid > .vc_column_container {
  width: calc(33.333% - (2% * 2) / 3);
}

@media (max-width: 768px) {
  .scientific-areas-image {
    aspect-ratio: 1.3 / 1;
  }

  .scientific-area-images {
    aspect-ratio: 1.3 / 1;
    border: 1px solid var(--blue) !important;
  }




  .dynamic-grid > .wpb_column,
  .dynamic-grid > .vc_column_container {
    width: calc(50% - (5% / 2)) !important;
  }
}


/* =============================================================================
 * 4.7 · SPIN-OFFS
 * -----------------------------------------------------------------------------
 * Páginas: 1/83 — /research/spin-offs/
 * Hooks:   .inesc-spinoff-image
 * ========================================================================== */

.inesc-spinoff-image {
    position: relative;
    z-index: 1;

}

.inesc-spinoff-image img {
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.3);
  border-radius: 27px !important;
}

/* Borda verde */
.inesc-spinoff-image::after {
    content: "";
    position: absolute;
    right: -1vw;
    bottom: -1vw;
    width: 5vw;
    height: 5vw;
    border-right: 4px solid var(--green);
    border-bottom: 4px solid var(--green);
    border-radius: 0 0 30px 0;
    z-index: 0;
}


/* =============================================================================
 * 4.8 · PÁGINAS-ÍNDICE DE SECÇÃO (grelha de cartões)
 * -----------------------------------------------------------------------------
 * Páginas: 7/83 — /about-2/, /about-2/support-offices/, /research/, /team/,
 *          /project/, /news-and-events/, /internal-area/
 * Hooks:   .about-hero-section, .about, .about-grid, .about-grid-section,
 *          .about-card, .about-card-title
 * Nota:    apesar do prefixo "about-", este bloco é o template das páginas-
 *          índice de todas as secções, não da página About.
 * ========================================================================== */

.about-hero-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    url('/wp-content/uploads/2026/04/g4967.svg') left center / contain no-repeat,
    url('/wp-content/uploads/2026/04/g4825.svg') right center / contain no-repeat;
}

.about {
  margin: 0 var(--spacing-3xl) !important;
  border-radius: 0 var(--radius-lg) 0 0 !important;
  min-height: 8rem;
  padding: 1rem 2rem;
}

.about p {
  color: var(--blue);
  line-height: 2;
}

.about-grid h2 {
  font-size: var(--text-22);
  font-weight: var(--bold);
  color: #ffffff;
  text-transform: uppercase;
}

.about-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: 4rem !important;
  border: 0;
  aspect-ratio: 525 / 362;
}

.about-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 77, 109, 0.3);
  z-index: 1;
  pointer-events: none;
}

.about-card-title,
.about-card-title h2 {

  color: #ffffff;
  padding: 0.5rem 1rem !important;
  margin: 0;
}

.about-card,
.about-card-title {
  background: var(--blue);
  border-radius: var(--radius-lg) 0 var(--radius-lg) 0 !important;
}

.about-card:hover .about-card-title {
  background-color: var(--green) !important;
}

.about-grid {
  margin: 0 var(--spacing-3xl) !important;
}

.about-grid-section {
  background-image: url('/wp-content/uploads/2026/04/g4681.svg');
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media (max-width: 768px) {
  .about-grid {
    margin: 0 4vw !important;
  }

  .about {
    margin: 0 5vw !important;
    padding: 1rem 5vw !important;
  }

}


/* =============================================================================
 * 4.9 · ABOUT INESC-ID
 * -----------------------------------------------------------------------------
 * Páginas: 1/83 — /about-2/about-inesc-id/
 * Hooks:   .about-numbers-column, .about-numbers-innerow, .about-values,
 *          .about-values-row, section.about-bar-left, section.about-bar-rigth,
 *          .mission-vision, .inesc-estatisticas, .about-buttons
 * ========================================================================== */

.about-numbers-column {
  margin: 1rem 0;
  padding: 0;
}

.about-numbers-innerow {
  padding: 0 calc(var(--website-margin)/4);
}

.about-numbers-innercol {
  padding: 0 !important;
  border-left: 1px dashed var(--gray);
} 


.about-values h4 {
  font-weight: var(--normal);
}

.about-values {
  padding-left: min(1vw, 0.85rem);
  border-left: 4px solid var(--green);
}

section.about-bar-rigth {
  background-position: right center !important;
  background-size: auto 100% !important;
}

section.about-bar-left {
  background-position: left center !important;
  background-size: auto 100% !important;
  padding: 0 min(8.5vw, 7.26rem) !important;
}

.about-values-row {
    display: flex;
    flex-wrap: wrap;
}

.about-values-row > * {
    width: 16,66%;
    box-sizing: border-box;
}

@media (max-width: 1230px) {
    .about-values-row > * {
        width: 33.33%;
    }
}

@media (max-width: 677px) {
    .about-values-row > * {
        width: 50%;
    }
}

.mission-vision-title{
  margin-left: var(--website-margin) !important;
  margin-right: var(--website-margin) !important;
}

.mission-vision {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 1rem var(--website-margin) !important;
  gap: 3rem;
}


.mission-vision > div {
  flex: 1;
}

@media (max-width: 768px) {
  .mission-vision {
    flex-direction: column;
    gap: 2rem;
  }
}

.inesc-estatisticas h2{
  font-size: var(--text-49);
}

.about-buttons{
    justify-content: center;

}

@media(max-width: 1000px){
  .about-buttons{
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .about-buttons > .column {
        width: 100%;
    }
}

@media (max-width: 768px) {
  section.about-bar-left {
    padding: 0 1.5rem !important;
  }
}


/* =============================================================================
 * 4.10 · DOCUMENTOS INSTITUCIONAIS
 * -----------------------------------------------------------------------------
 * Páginas: 2/83 — /about-2/institutional-documents/, /data-protection/
 * Hooks:   .institutional-docs-title, .lang-tag
 * Nota:    a etiqueta .lang-tag é injectada por JS carregado em todas as
 *          páginas, mas só há markup para ela nestas duas.
 *
 * AVISO:   a linha "@media(max)" abaixo é um resto de edição. Não tem condição
 *          válida nem bloco próprio, por isso o parser usa a regra seguinte
 *          (".institutional-docs-title h5 a") como corpo da media query e essa
 *          regra nunca é aplicada. Mantida tal e qual para não alterar o que
 *          está no ar; apagar a linha repõe o padding de 14px.
 * ========================================================================== */

@media(max)

/*************************************************/
.institutional-docs-title h5 a{
  padding: 14px 0px !important;
}

.institutional-docs-title h5 span:not(.lang-tag){
  margin-left: 0px;
  padding-left: 1vw;
  border-left: 4px solid var(--green);
}

.institutional-docs-title h5 a i::before {
  border-color: var(--green) !important;
}

.institutional-docs-title *{
  color: var(--blue);
}

.lang-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 8px;
    border: 1px solid var(--green);
    border-radius: 4px;
    color: var(--green);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: middle;
}


/* =============================================================================
 * 4.11 · INESCAPABLE ID
 * -----------------------------------------------------------------------------
 * Páginas: 1/83 — /news-and-events/inescapable-id/
 * Hooks:   #inescapable-newsletter, #inescapable-col, .inesc-capable-intro
 * ========================================================================== */

#inescapable-newsletter{
  padding: 2rem !important;
}

#inescapable-col{
  padding-left: var(--website-margin); !important;
  z-index: 0 !important;
}

@media (max-width: 768px) {
  #inescapable-col{
    margin-left: 0vw !important;
  } 
}

.inesc-capable-intro{
  position: relative;
  z-index: 5 !important;
}

/* =============================================================================
 * 4.12 · FORMATOS DE POST DE NOTÍCIA
 * -----------------------------------------------------------------------------
 * Páginas: 1/83 — /130206-2/ (página de demonstração dos 5 formatos)
 * Hooks:   .news-format-1 ... .news-format-5, .news-format-5-col,
 *          .right-quote, .img-1, .img-2
 * Nota:    os posts publicados não usam estas classes; servem de referência
 *          para a maquetagem manual de notícias.
 * ========================================================================== */

.news-format-1 h2 {
  font-family: var(--font-main);
  font-size: var(--text-26) !important;
  font-weight: var(--semi-bold);
  color: var(--blue);
  line-height: 1.5;
}

.news-format-4 h3,
.news-format-2 h3 {
  font-family: var(--font-main) !important;
  font-size: var(--text-24) !important;
  font-style: italic !important;
  font-weight: var(--normal) !important;
  line-height: 1.5;
}

.news-format-5 h4,
.news-format-3 h3 {
  font-family: var(--font-main);
  font-size: var(--text-18) !important;
  font-weight: var(--normal);
  line-height: 1.5;
}

.news-format-5 h3 {
  font-family: var(--font-main);
  font-size: var(--text-24) !important;
  font-weight: var(--bold);
  line-height: 1.5;
}

.right-quote {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end;
}

.news-format-5-col {
  display: flex;
}

.news-format-5-col > div {
  display: flex;
  flex: 1;
}

.news-format-5-col > div > div {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.img-1,
.img-2 {
  flex: 1;
  width: 100%;
}

.img-1 img,
.img-2 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* #############################################################################
 * PARTE 5 — NÃO UTILIZADO NO SITE
 * Nenhum dos hooks abaixo foi encontrado no HTML servido pelas 83 páginas
 * analisadas. Fica aqui, isolado e no fim da cascata, para poder ser removido
 * de uma vez depois de confirmado. Mantém-se a ordem relativa original.
 * ######################################################################### */




/* =============================================================================
 * 5.2 · LATEST NEWS / RESEARCH HIGHLIGHTS / CARTÕES DE POST
 * -----------------------------------------------------------------------------
 * Páginas: 0/83
 * Hooks:   .latest-news, .research-highlights, .post-title, .post-date,
 *          .post-excerpt, .post-button, .post-category, .post-card-gray,
 *          .post-card-green, .vc_gitem-zone-a, .vc_grid*
 * Motivo:  a home e a página de notícias passaram a usar o plugin INESC
 *          Content, que gera .inesc-latest-news__grid e
 *          .inesc-news-listing__grid (CSS em
 *          plugins/inesc-content/assets/), em vez do WPBakery Grid Builder.
 * ========================================================================== */

.latest-news .vc_gitem-zone-a,
.research-highlights .vc_gitem-zone-a {
  overflow: hidden;
  aspect-ratio: 1.57 / 1;
}

.latest-news .vc_gitem-zone-a {
  border: solid var(--green);
}

.research-highlights .vc_gitem-zone-a {
  border: solid var(--gray);
}

.latest-news,
.research-highlights {
  margin: 0;
  padding: 2rem 0 1rem;
}

.latest-news .vc_grid-item,
.research-highlights .vc_grid-item {
  padding-bottom: 1.5rem;
}

.latest-news .vc_grid,
.research-highlights .vc_grid {
  padding: 0 min(5vw, 4.27rem) !important;
}

.post-title,
.post-title a,
.post-title h1,
.post-title h2,
.post-title h3,
.post-title h4,
.post-title h5,
.post-title h6,
.post-date,
.post-excerpt,
.post-button a {
  font-family: var(--font-main);
  line-height: 1.5;
}

.post-title,
.post-title a,
.post-title h1,
.post-title h2,
.post-title h3,
.post-title h4,
.post-title h5,
.post-title h6 {
  font-size: var(--text-19);
  font-weight: var(--bold);
  color: var(--blue);
  line-height: 1.3;
}

.post-excerpt {
  font-size: var(--text-18);
  font-weight: var(--normal);
  color: var(--blue);
  line-height: 1.5;
}

.post-excerpt p {
  margin-bottom: 0.5rem;
}

.post-date,
.post-date p {
  font-size: var(--text-19-5) !important;
  font-style: italic !important;
  color: var(--gray) !important;
  font-weight: var(--normal) !important;
  line-height: 1.4 !important;
  margin: 0 0 0.25rem !important;
}

.post-card-gray,
.post-card-green {
  margin-top: 1rem !important;
  padding-left: min(1.8vw, 1.54rem) !important;
  border-left: 5px solid var(--green);
}

.post-card-gray h4,
.post-card-gray p,
.post-card-green h4,
.post-card-green p {
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
}

.post-card-gray {
  border-left: 5px solid var(--gray);
}

.post-button a,
.post-date {
  font-size: var(--text-19) !important;
  font-style: italic !important;
  color: var(--gray);
  font-weight: var(--normal) !important;
  margin-left: 0 !important;
}

.post-button a {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  min-height: auto !important;
  text-transform: none;
  padding: 0 0 0 calc(min(1.8vw, 1.54rem) + 5px) !important;
}

.post-button a:hover {
  color: var(--green) !important;
}

.post-category {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.post-category > div {
  margin: 0.25rem 0 !important;
}

.post-category > div span {
  font-family: var(--font-main);
  font-size: var(--text-12);
  color: #ffffff;
  text-transform: uppercase;
  font-weight: var(--bold);
  margin-right: 0.25rem !important;
  padding: 0 0.5rem !important;
}

@media (max-width: 768px) {
  .latest-news,
  .research-highlights {
    margin: 3vw 2vw 0 2vw !important;
    padding: 0;
  }

  .latest-news .vc_grid.vc_row.vc_grid-gutter-30px .vc_grid-item {
    padding-bottom: 0;
  }
}

/* --- Latest news filter widget (shared) ----------------------------------- */

.latest-news .vc_column-inner {
  margin: 0;
}

.latest-news .vc_grid-filter-item span {
  color: #ffffff;
  transition: color 0.3s ease;
}

.latest-news .vc_grid-filter-item:hover span,
.latest-news .vc_grid-filter-item.vc_active span {
  background: none !important;
  color: var(--green) !important;
}


/* =============================================================================
 * 5.3 · FILTRO DE CATEGORIAS DA PÁGINA DE NOTÍCIAS
 * -----------------------------------------------------------------------------
 * Páginas: 0/83 — /news-and-events/news/ usa agora .inesc-filter-tabs
 * Hooks:   .latest-news ul[data-vc-grid-filter="category"]
 * ========================================================================== */

.latest-news ul[data-vc-grid-filter="category"] {
  justify-content: flex-start !important;
  align-items: flex-start !important;
  background-color: var(--blue) !important;
}

.latest-news ul li,
.latest-news ul li span {
  font-size: var(--text-24) !important;
  text-transform: uppercase;
  color: #ffffff !important;
  background: transparent !important;
}


/* =============================================================================
 * 5.4 · BOTÕES .green-btn / .gray-btn / .caw-btn
 * -----------------------------------------------------------------------------
 * Páginas: 0/83 — os botões do site são agora .iidc-btn--* do plugin
 *          inesc-wpbakery-elements (assets/button.css)
 * Hooks:   .green-btn, .gray-btn, .caw-btn, button::-moz-focus-inner
 * Nota:    ".home-section-1 .btn" (secção 4.4) também depende de .btn, que
 *          igualmente já não existe no HTML.
 * ========================================================================== */

/* Firefox: remove the inner dotted focus border and extra padding it adds
   to  elements (no other engine does this). */
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.green-btn,
.gray-btn {
  margin: 1.5rem 0 2rem !important;
}

.green-btn button,
.gray-btn button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-main) !important;
  font-size: var(--text-19-5) !important;
  font-weight: var(--semi-bold) !important;
  background-color: #ffffff !important;
  padding: 0.35rem 1.1rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-radius: var(--radius-md) !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
  cursor: pointer;
}

.green-btn button i,
.gray-btn button i {
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  margin-left: 0.5rem !important;
  display: inline-block !important;
  line-height: 1 !important;
}

.gray-btn button:hover {
  background-color: var(--gray) !important;
  color: #ffffff !important;
}

.green-btn button:hover {
  background-color: var(--green) !important;
  color: #ffffff !important;
}

.caw-btn {
  font-size: var(--text-19-5) !important;
  font-weight: var(--semi-bold);
}


/* =============================================================================
 * 5.5 · MAPA CIRCULAR
 * -----------------------------------------------------------------------------
 * Páginas: 0/83 — era o mapa recortado em círculo de /about-2/contacts/
 * Hooks:   .map-images
 * ========================================================================== */

.map-images {
    width: 300px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    position: relative;

}

/* todas as divs intermédias dentro do círculo */
.map-images > div,
.map-images div {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;   /* mata o padding-bottom: 56.25% */
    margin: 0 !important;
    position: static;
}

.map-images iframe {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    display: block;
}


/* =============================================================================
 * 5.6 · HOOKS ÓRFÃOS
 * -----------------------------------------------------------------------------
 * Páginas: 0/83 para todos. Regras soltas cujo markup desapareceu ou nunca
 * chegou a existir:
 *
 *   #governance h2         /about-2/governance/ não tem id="governance"
 *   .inesc-content         o wrapper servido é .inesc-content-row (ver 3.1)
 *   .inesc-people-row      substituído por .inesc-people__grid (plugin)
 *   .separator *           o separador servido é .inesc-separator (ver 3.8)
 *   .sa-icon               ícone das áreas científicas, markup não encontrado
 * ========================================================================== */

#governance h2 {
  font-size: var(--text-36);
  text-transform: uppercase;
  font-weight: var(--semi-bold);
}

.inesc-content {
  padding: 5rem 0;
}

.inesc-people-row {
  padding: 2rem 0;
}

.separator * {
  border-width: 0.1875rem !important;
}

.sa-icon {
  font-size: 1.2rem !important;
  margin-bottom: 0.75rem !important;
}


/* #############################################################################
 * PARTE 6 — CAMADA FINAL: LARGURA E ECRÃS GRANDES
 * -----------------------------------------------------------------------------
 * ESTA PARTE TEM DE FICAR SEMPRE NO FIM DO FICHEIRO. As duas secções abaixo
 * sobrepõem-se a regras de todas as partes anteriores; movê-las para cima muda
 * o resultado no ecrã (por exemplo, o padding de #row-com-imagem, em 2.4, é
 * intencionalmente anulado por 6.1).
 * ######################################################################### */


/* =============================================================================
 * 6.1 · WPBAKERY — ROWS/SECÇÕES "STRETCH ROW AND CONTENT"
 * -----------------------------------------------------------------------------
 * Páginas: todas as construídas com WPBakery (67/83); 117 rows no total nas
 *          83 páginas analisadas
 * Hooks:   [data-vc-stretch-content="true"], .full-bleed
 * -----------------------------------------------------------------------------
 * Com esta opção o WPBakery liga a largura do CONTEÚDO ao viewport (100vw), e
 * o viewport é imune ao zoom do browser: ao fazer Ctrl - o texto encolhe mas
 * as caixas ficam do mesmo tamanho físico — parecem crescer.
 *
 * Solução: manter o stretch (o fundo continua de ponta a ponta, porque padding
 * não afeta o background) e dar ao conteúdo uma largura corrigida pelo zoom,
 * centrada — ver --stretch-max e --zoom em :root. A 100% o padding calculado
 * é zero, portanto o conteúdo toca as bordas em qualquer ecrã; a partir do
 * primeiro Ctrl - encolhe ao mesmo ritmo que o texto.
 *
 * Para uma row ficar mesmo de ponta a ponta (vídeo, imagem full-bleed), basta
 * acrescentar a classe "full-bleed" em "Extra class name" na row/secção.
 * ========================================================================== */

[data-vc-stretch-content="true"]:not(.full-bleed):not(.hero):not(.header-image) {
  padding-left: max(0px, (100vw - var(--stretch-max)) / 2) !important;
  padding-right: max(0px, (100vw - var(--stretch-max)) / 2) !important;
}


/* =============================================================================
 * 6.2 · ECRÃS GRANDES (>1366px)
 * -----------------------------------------------------------------------------
 * Acima do tecto fluido (1366px) tudo continua a crescer proporcionalmente.
 * Tudo o que está em rem (texto, tokens de espaçamento, --container-width,
 * regras vc_custom_* do WPBakery) acompanha o font-size do :root. Acima de
 * 1366px NÃO se usa vw puro: todas as medidas horizontais têm tecto em rem
 * para o zoom do browser escalar tudo em conjunto (ver nota em :root, 1.1).
 *
 * Sobrepõe-se a: 2.3 (faixas), 4.3 (cartões temáticos), 4.8 (páginas-índice),
 * 5.2 (grelhas antigas) e ao bloco .container/.ct-container das listagens
 * filtradas (/team/..., /project/..., /research/publications/,
 * /research/page-supervisions/, /join-us/ — 10 páginas).
 *
 * Nota: ".upcoming-events" (bloco de eventos da home) só é referido aqui, no
 * @media de 2560px; não tem regra base nesta folha.
 * ========================================================================== */

@media (min-width: 85.375rem) { /* 1366px */
  :root {
    /* 0.0041876 = 5px de crescimento / 1194px de intervalo (1366 → 2560).
       Fator sem unidade de propósito: dividir length/length em calc() só
       funciona no Chrome; multiplicar por um número é válido em todo o lado. */
    /* O termo em vw é corrigido pelo zoom: sem isso, ao fazer Ctrl - o viewport
       ganha CSS px, a fórmula lia um ecrã "maior" e aumentava o font-size,
       cancelando parte do zoom (o texto encolhia ~11% em vez de 20%) — e
       passava a andar dessincronizado das caixas, que encolhem a 100%. */
    font-size: clamp(
      1rem,
      calc(1rem + (100vw * var(--zoom) - 85.375rem) * 0.0041876),
      1.3125rem
    );
    /* 1366px → 16px (default) · 1920px → ~18.3px · 2560px+ → 21px (cap) */
  }
}

/* On very wide screens (≥1920px) the default container caps near ~1346px,
   leaving large empty margins. Allow it to grow — 90vw corrigido pelo zoom,
   ou seja 90% do ecrã a 100% (em qualquer largura, sem teto) e encolhendo com
   o Ctrl - ao mesmo ritmo que o texto. Sem a correção o container mantinha a
   largura física enquanto o texto encolhia — o efeito de "os elementos
   aumentam".

   NOTA: media queries não aceitam var(), por isso este breakpoint continua a
   ler o viewport em bruto. Um Ctrl - forte (≤67%) num ecrã pequeno faz o
   viewport passar dos 1920 CSS px e entrar aqui; a diferença é de poucas
   dezenas de px na largura do container, não vale um workaround. */
@media (min-width: 120rem) { /* 1920px */
  :root {
    --container-width: calc(90vw * var(--zoom));
    --container-max: calc(90vw * var(--zoom));
  }

  .container,
  .ct-container,
  .vc_container,
  .wpb_row > .vc_row {
    max-width: calc(90vw * var(--zoom)) !important;
  }
}

/* Ultra-wide screens (4K+): rein in section margins so sections don't lose too
   much horizontal space. Valores em rem = equivalente aos antigos vw a 2560px. */
@media (min-width: 160rem) { /* 2560px */
  .thematic-cards-row {
    margin-left: 9.75rem !important;
    margin-right: 9.75rem !important;
  }

  .upcoming-events {
    margin-left: 14.6rem;
    margin-right: 14.6rem;
  }

  .about {
    margin: 0 18.3rem !important;
  }

  .latest-news .vc_grid,
  .research-highlights .vc_grid {
    padding: 0 4.88rem !important;
  }

  /* As faixas já não precisam de override aqui: o padding calculado na secção
     7 acompanha o container do tema em qualquer largura. */
}



.inesc-shotcode{
  margin-left: -35px;
}

@media (max-width: 1305px) {
  .inesc-shotcode{
    margin-left: 0px;
    margin-right: 0px;
  }

}


.ubtn-inesc *:hover{
  color: white;
}

.ubtn-inesc *,
.ubtn-inesc-cta *{
  right: 10px !important;
}


/* Advanced Carousel + Flip Box */
.flipbox-cover .ifb-front {
    position: relative;
    overflow: hidden;
}

.flipbox-cover .ifb-front .ifb-flip-box-section {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
}

.flipbox-cover .ifb-front .flip-box-icon,
.flipbox-cover .ifb-front .ult-item-wrap,
.flipbox-cover .ifb-front .ult-just-icon-wrapper,
.flipbox-cover .ifb-front .align-icon,
.flipbox-cover .ifb-front .aio-icon-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.flipbox-cover .ifb-front .aio-icon-img img.img-icon {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
}

/* === Newsletter mobile (template Newsletter) === */
@media (max-width: 768px) {
    #Subscribe-newsletter {
        justify-content: center !important;
        margin: 0 !important;
        padding: 1.75rem 0 !important;
    }
    #Subscribe-newsletter img {
        width: 62% !important;
        max-width: 260px;
    }
    #row-com-imagem .vc_col-sm-9 .wpb_single_image {
        margin-top: 1rem !important;
        margin-bottom: .5rem !important;
    }
    #row-com-imagem .vc_col-sm-9 .wpb_single_image img {
        width: 72% !important;
        max-width: 300px;
    }
    #row-com-imagem .vc_separator {
        margin-bottom: .6rem !important;
    }
    .join-us p {
        font-size: 13px !important;
        line-height: 1.4;
        padding: 0 1rem;
    }
    #row-com-imagem .ubtn-inesc-cta {
        transform: scale(.85);
    }
}

/* === Flip cards mobile: anular top:50% do plugin (ifb_disable_middle) === */
.flipbox-cover .ifb-front .ifb-flip-box-section.ifb-flip-box-section-vertical-middle.ifb_disable_middle {
    top: 0 !important;
    transform: none !important;
}