/** ==========================================================================
 * Componente «AreaIntro» — la cabecera de una página de área (landing_area.php)
 *
 *   <div class="AreaIntro">
 *     <h1  class="AreaIntro-h1">        Estudios de Diseño Gráfico…
 *     <h2  class="AreaIntro-h2">        el resumen de filtros (oculto, para buscadores)
 *     <div class="AreaIntro-texto">     la entradilla, sobre el panel del color del área
 *     <ul  class="AreaIntro-lista">     los tipos de estudio, enlazados a sus secciones
 *     <div class="AreaIntro-img">       la imagen destacada del área
 *
 * CUATRO PIEZAS HERMANAS, NO DOS COLUMNAS (Eduardo, 08/09/2026).
 *
 * Antes eran dos `.col2` con el listado y la imagen anidados dentro de la
 * segunda. Cada columna medía lo que su propio contenido, así que las dos
 * mitades no terminaban nunca a la misma altura y el cuadre había que
 * perseguirlo a base de alturas: primero la foto crecía y la entradilla se
 * quedaba corta; después un alto fijo al texto y otro a la foto dejaron un
 * hueco en blanco bajo la imagen.
 *
 * Con las cuatro piezas en una rejilla no hay nada que cuadrar. La entradilla
 * ocupa las dos filas de contenido de la primera columna; en la segunda van el
 * listado y, debajo, la imagen en una fila `1fr`, que es exactamente el hueco
 * que deja la entradilla. Se cuadra sola a cualquier alto de texto, de listado
 * y de ventana, y lo único que se declara es cuánto puede crecer la entradilla,
 * que es lo que decide el alto de la cabecera.
 *
 * Nombres SUIT CSS: el componente en PascalCase y sus partes con guión. Las
 * clases heredadas que había aquí (.Areas-intro, .Areas-lista--tipos,
 * .cabecera_area_imagen, .col2) no se usaban en ninguna otra plantilla, así que
 * se han retirado con sus reglas de style.css.
 *
 * La carga functions.php con las hojas de la plantilla de áreas.
 * ========================================================================== */

.AreaIntro {
  /*
   * El alto de la cabecera, en un solo sitio. En vh para que se adapte a la
   * ventana, con suelo y techo para que ni en un portátil bajo se coma el
   * texto ni en una pantalla alta se estire sin motivo.
   */
  --AreaIntro-alto: clamp(320px, 52vh, 620px);

  /* Colores del panel: los de cada área, más abajo. Estos son los de reserva. */
  --AreaIntro-fondo: #1d246f;
  --AreaIntro-tinta: var(--Area-Tech-Secondary);

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  /* El tope va en la cabecera entera y no solo en la entradilla (Eduardo,
     08/09/2026): asi manda sobre el titulo, el listado y la imagen a la vez. */
  max-height: var(--AreaIntro-alto);
  /* La fila del título separa lo mismo que un h2.tipo_curso de su contenido;
     entre columnas, 32. */
  gap: var(--Global-Espacio-TituloContenido) 32px;
  align-items: stretch;
}

/* --------------------------------------------------------------------------
 * Las cuatro piezas en la rejilla
 * -------------------------------------------------------------------------- */

.AreaIntro-h1,
.AreaIntro-h2 {
  grid-column: 1 / -1;
  /* El h1 traía margin-bottom: 30px, que se sumaba al hueco de la fila y dejaba
     62px donde las secciones dejan 24. Aquí el espacio lo pone el row-gap.
     El tipo sigue viniendo de `#Content.AREAS h1` (css/templates/areas.css),
     que lo comparte con la otra plantilla de áreas. */
  margin: 0;
}

/*
 * La entradilla ocupa las dos filas de contenido. `min-height: 0` deja que la
 * caja pueda ser más baja que su texto, que es lo que permite el desplazamiento
 * interior; el tope de altura lo pone la cabecera entera, más arriba.
 */
.AreaIntro-texto {
  grid-column: 1;
  grid-row: 2 / span 2;
  box-sizing: border-box;
  min-height: 0;
  padding: var(--Global-Espacio-TituloContenido);
  border-radius: var(--Global-Radio-Panel);
  background-color: var(--AreaIntro-fondo);
  color: var(--AreaIntro-tinta);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  overflow-wrap: break-word;
}

/* Texto corrido: Global-p, un escalón por encima (Size-20) por ser entradilla. */
.AreaIntro-texto p {
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-20);
  font-weight: var(--Font-Weight-400);
  line-height: normal;
  letter-spacing: var(--Font-Letter-spacing-0);
  color: inherit;
  margin: 0 0 var(--Global-Espacio-TituloContenido);
}

.AreaIntro-texto p:last-child {
  margin-bottom: 0;
}

/*
 * El contenido de la entrada va dentro del panel y está vacío en las siete
 * áreas; con `:empty` no deja un hueco, y el día que se escriba algo aparecerá
 * sin tener que acordarse de esta regla.
 */
.AreaIntro-texto > div:empty {
  display: none;
}

/*
 * El listado de tipos, arriba de la segunda columna.
 *
 * Global-h3--italic: Size-29, peso regular, interlineado 110% y tracking -2%.
 * Sube un escalón desde Size-19 porque hace de índice bajo el título; el aire
 * entre líneas va en el hueco de la lista, no en el interlineado, que es parte
 * del estilo de texto. Los tipos se separan con un guión.
 */
.AreaIntro-lista {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-flow: row wrap;
  row-gap: calc(var(--Global-Espacio-TituloContenido) / 2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.AreaIntro-lista,
.AreaIntro-lista li,
.AreaIntro-lista a {
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-29);
  font-weight: var(--Font-Weight-400);
  font-style: italic;
  line-height: var(--Font-Line-height-110);
  letter-spacing: var(--Font-Letter-spacing-2);
  color: var(--Global-Color-Black);
}

.AreaIntro-lista li {
  display: flex;
  flex-flow: row nowrap;
}

.AreaIntro-lista li::after {
  content: '-';
  margin: 0 1rem;
}

.AreaIntro-lista li:last-child::after {
  content: none;
  margin: 0;
}

/*
 * La imagen, en la fila que sobra. `min-height: 0` es imprescindible: sin él,
 * el alto natural de la foto (proporción 980x528) sería el mínimo de la fila y
 * volvería a empujar la cabecera hacia abajo, que es justo lo que se quería
 * evitar.
 */
.AreaIntro-img {
  grid-column: 2;
  grid-row: 3;
  min-height: 0;
  border-radius: var(--Global-Radio-Panel);
  /* El contenedor no pinta nada suyo: el radio solo se nota si recorta. */
  overflow: hidden;
}

/* La <picture> intermedia tiene que transmitir el alto: sin esto su alto es
   «auto», el 100% de la imagen no tiene de qué colgar y la foto sale a su alto
   natural, recortada por arriba en vez de centrada por object-fit. */
.AreaIntro-img picture {
  display: block;
  height: 100%;
}

.AreaIntro-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--Global-Radio-Panel);
}

/* --------------------------------------------------------------------------
 * El color del panel, por área
 *
 * La clase del área la pone el tema en #Content (`.AREAS.grafico`, `.web`…), así
 * que el selector tiene que empezar ahí. Se usa el token cuando el color del
 * área ya existe en el sistema; los que no están en Figma se quedan con su
 * valor y una nota, para saber cuáles faltan el día que se definan.
 * -------------------------------------------------------------------------- */
.AREAS.grafico .AreaIntro {
  --AreaIntro-fondo: var(--Area-Grafico-Secondary);
  --AreaIntro-tinta: #f53256; /* sin token: rosa fuerte del área */
}

.AREAS.web .AreaIntro {
  --AreaIntro-fondo: var(--Area-Web-Secondary);
  --AreaIntro-tinta: #1d246f; /* sin token: azul oscuro del área */
}

.AREAS.marketing-digital .AreaIntro {
  --AreaIntro-fondo: var(--Global-Background-Fundae);
  --AreaIntro-tinta: var(--Area-Marketing-Oscuro);
}

.AREAS.interiores-arquitectura .AreaIntro {
  --AreaIntro-fondo: var(--Area-Arquitectura-Secondary);
  --AreaIntro-tinta: #f97052; /* sin token: naranja del área */
}

.AREAS.videojuegos .AreaIntro {
  --AreaIntro-fondo: var(--Area-Videojuegos-Primary);
  --AreaIntro-tinta: var(--Area-Videojuegos-Secondary);
}

.AREAS.video-vfx-motion-graphics .AreaIntro {
  --AreaIntro-fondo: #8a5aab; /* sin token: morado del área */
  --AreaIntro-tinta: var(--Area-Audiovisual-Secondary);
}

.AREAS.tecnologias-emergentes .AreaIntro {
  --AreaIntro-fondo: #1d246f; /* sin token: azul oscuro del área */
  --AreaIntro-tinta: var(--Area-Tech-Secondary);
}

.AREAS.intensivo .AreaIntro {
  --AreaIntro-fondo: #30164a; /* sin token */
  --AreaIntro-tinta: var(--Global-Background-Fundae);
}

.AREAS.udima .AreaIntro {
  --AreaIntro-fondo: #5f9271; /* sin token */
  --AreaIntro-tinta: #f6abc8; /* sin token */
}

.AREAS.fin-de-semana .AreaIntro {
  --AreaIntro-fondo: var(--Area-Tech-Secondary);
  --AreaIntro-tinta: #f53256; /* sin token */
}

/* --------------------------------------------------------------------------
 * Responsive
 *
 * Por debajo de 900 el listado y la imagen no se muestran: las secciones de más
 * abajo ya listan los tipos de estudio, y la foto no aporta en un canal
 * estrecho. La cabecera se queda con el título y la entradilla, a una columna.
 * -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .AreaIntro {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .AreaIntro-texto {
    grid-column: 1;
    grid-row: auto;
    max-height: none;
  }

  .AreaIntro-lista,
  .AreaIntro-img {
    display: none;
  }
}

/*
 * En móvil la entradilla no se muestra (Eduardo, 09/09/2026).
 *
 * Estuvo acotada a un cuarto de ventana, con desplazamiento por dentro y el
 * borde inferior desvanecido con una máscara para avisar de que el texto
 * seguía. La señal no se leía como tal: lo que se veía era un degradado a
 * blanco comiéndose media frase, y por debajo aún quedaban varias pantallas de
 * texto antes de las formaciones.
 *
 * Son tres párrafos de contexto, no información que haga falta para decidir:
 * en un canal estrecho la página arranca en el título y va directa a las
 * formaciones, que es a lo que se viene. El <h1> y el <h2> de buscadores se
 * quedan, así que el contenido indexable no cambia.
 */
@media (max-width: 767.98px) {
  .AreaIntro-texto {
    display: none;
  }
}