/* ==========================================================================
   aims.css — secciones propias de la página Aims (directory/aims.html).
   - .coordination-section (márgenes y títulos de sección) viene de coordination.css: la comparten Aims y Coordination.
   ========================================================================== */

/* Invitación final a unirse (texto + botón "Join us"). Centrada (es corta, tipo "llamada"),
   en una caja con la cuadrícula de cruces de fondo (cross_grid.css) que la separa del resto.
   - position: relative: la cuadrícula (absolute) se coloca respecto a esta caja.
   - overflow: hidden: recorta la última fila de cruces si sobresale, y las esquinas redondeadas.
   - Sin color de fondo (antes --bg-tertiary): el fondo es la cuadrícula. El borde marca dónde acaba la caja. */
.join-us-section {
  position: relative;
  overflow: hidden;
  text-align: center;
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  border: 1px solid var(--border-color);
  border-radius: calc(var(--radius) * 2);
}

/* La cuadrícula: ocupa toda la caja, por detrás del contenido
   - inset: 0: pegada a los cuatro bordes (= top/right/bottom/left 0), así su alto es el de la caja
     y cross_grid.js (data-rows="auto") calcula las filas que caben. */
.join-us-section .cross-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Velo entre la cuadrícula y el contenido: atenúa las cruces para que el texto se lea bien
   - ::before: una capa "falsa" que crea el CSS, sin tocar el HTML.
   - Fondo: el de la página (--bg-secondary: blanco en claro, azul pizarra en oscuro) al 75% de opacidad.
   - pointer-events: none: el ratón lo atraviesa y las cruces de debajo se siguen encendiendo. */
.join-us-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: color-mix(in srgb, var(--bg-secondary) 75%, transparent);
  pointer-events: none;
}

/* El contenido (logo, título, texto, botón): por encima de la cuadrícula y del velo
   - position + z-index: 2: se pinta encima de los dos.
   - pointer-events: none: el ratón lo atraviesa y las cruces de debajo se siguen encendiendo.
   - El botón sí recoge el ratón (auto), para poder pulsarlo. */
.join-us-section > :not(.cross-grid) {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* "Join us": botón de cristal (glassy_button.css), con el tamaño del .btn de antes. */
.join-us-section .glassy-button {
  pointer-events: auto;
  margin-top: 1.5rem;
  --_padding: 0.65rem 1.4rem;
  font-size: 0.95rem;
}

/* Logo del BCB Hub encima del título, centrado (display: block + margin auto) */
.join-us-logo {
  display: block;
  width: clamp(7rem, 5rem + 6vw, 9.5rem);
  height: auto;
  margin: 0 auto 1rem;
}

.join-us-section h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
}