:root {
  --oasis-navy: #0e2a4d;
  --oasis-blue-dark: #123a63;
  --oasis-blue: #1c3766;
  --oasis-blue-light: #4fb3e8;
  --oasis-orange: #f3a13a;
  --oasis-green: #8bc34a;
  --oasis-bg: #eef2f5;
  --oasis-white: #ffffff;
  --oasis-grey: #f1f2f2;
  --oasis-text: #2c2c2c;
  --oasis-text-muted: #6b6f76;
  --oasis-radius-lg: 28px;
  --oasis-radius-pill: 999px;
  --oasis-container: 1458px;
  --oasis-gutter: clamp(16px, 4vw, 48px);
  --oasis-agenda-bg-image: url("https://oasis.tecnico.ulisboa.pt/wp-content/uploads/2026/09/OASIS-HOMEPAGE-bolas-fundo-Agenda.svg");
}

/*
 * Necessário porque .oasis-hero usa a técnica "full-bleed" (100vw)
 * para escapar ao container centrado do tema-pai. Sem isto, o 100vw
 * conta a largura da scrollbar vertical e cria um scroll horizontal
 * fantasma de alguns pixels.
 */
html, body { overflow-x: hidden; }

.oasis-home * { box-sizing: border-box; }
.oasis-home img { max-width: 100%; display: block; }
.oasis-home a { text-decoration: none; color: inherit; }
.oasis-home ul { list-style: none; margin: 0; padding: 0; }

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

/*
  Modificador para secções com um contentor mais largo que o
  padrão (ex: a grelha da Agenda usa 1458px em vez de 1200px,
  para caber os cards do mockup). Usa-se em conjunto com
  .oasis-wrap: <div class="oasis-wrap oasis-wrap--wide">.
*/
.oasis-wrap--wide {
  max-width: 1458px;
}

/*
  Título de secção (barra azul-escura "NOTÍCIAS" / "AGENDA").
  Fica aqui em base.css, e não num component-*.css, porque é
  partilhado por mais do que uma secção.
*/
.oasis-section-title {
  width: 100%;
  background: var(--oasis-navy);
  color: var(--oasis-white);
}

.oasis-section-title h2 {
  max-width: var(--oasis-container);
  margin: 0 auto;
  padding: 10px var(--oasis-gutter);
  color: var(--oasis-white);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1.2;
  text-align: left;
}

@media (max-width: 600px) {
  .oasis-section-title h2 {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 1.9rem;
  }
}