[data-component-id="usfq_theme:section_cards_colegios"] {
  /* @todo Add your styles here. */
  display: column;
  width: 100%;

  .section-cards-colegios__grid {
    justify-content: center;
  }

  [data-component-id="usfq_theme:text_block"] {
    .title {
      color: var(--primary) !important;
    }
  }
}

[data-component-id="usfq_theme:section_cards_colegios"] [data-component-id="usfq_theme:link"] .link-divider__text {
  color: var(--secondary) !important;
}

/* [data-component-id="usfq_theme:icon"] {
  color: var(--secondary) !important;
} */


:where(html[data-theme="dark"]) [data-component-id="usfq_theme:icon"],
:where(html[data-theme="dark"]) [data-component-id="usfq_theme:link"] [data-component-id="usfq_theme:icon"] {
  color: var(--white) !important;
}

:where(html[data-theme="dark"]) [data-component-id="usfq_theme:section_cards_colegios"] [data-component-id="usfq_theme:link"] .link-divider__text {
  color: var(--white) !important;
}

:where(html[data-theme="dark"]) [data-component-id="usfq_theme:section_cards_colegios"] [data-component-id="usfq_theme:text_block"] {
  .title {
    color: var(--white) !important;
  }
}

/* La vista Colegios pinta la imagen con el formateador de Drupal, que pone
   width/height del derivado. Su franja de 175px salia del alto de venue_card;
   con card_colegios (850 de alto) se iria al tope de 250 de card.css. */
[data-component-id="usfq_theme:section_cards_colegios"].section-cards-colegios--view .card-colegios_card-image img {
  height: 175px;
}

/* Curso: "Fechas, modalidad e inversión". Acotado a .curso-layout porque el
   organismo lo comparte la sección de colegios/decanatos. */

.curso-layout [data-component-id="usfq_theme:section_cards_colegios"] {

  /* Las tarjetas del Figma son más altas que las de colegios/decanatos, que
     se diseñaron para imagen + texto corto. */
  .card-colegios {
    min-height: 280px;
  }

  /* La tarjeta de Curso no lleva imagen: el wrapper vacío dejaba hueco. */
  .card-colegios_card-img-top:has(.card-colegios_card-image:empty) {
    display: none;
  }

  .colegios_card-body {
    padding: 24px;
    gap: 12px;
  }

  .colegios_card-title {
    margin-bottom: 4px;
  }

  .colegios_card-text p {
    margin-bottom: 0.75rem;
  }

  .colegios_card-text p:last-child {
    margin-bottom: 0;
  }

  /* Estas tarjetas son de color fijo (rojo del Figma), no invierten con el
     esquema, así que el texto va blanco en los dos, fuera de cualquier media
     query.

     Se cuelga del cuerpo de la tarjeta y no de `.colegios_card-text` a
     propósito: el componente pinta ese texto dentro de un `<p>`, y el
     contenido que le llega desde el nodo trae sus propios `<p>`. Un `<p>` no
     puede anidar otro, así que el navegador cierra el de fuera y deja los de
     dentro como HERMANOS de `.colegios_card-text`. Colgarlo de esa clase
     dejaba el cuerpo en negro sobre rojo en claro. */
  .colegios_card-body,
  .colegios_card-body * {
    color: var(--white) !important;
  }

  /* TABLET */
  @media (min-width: 768px) and (max-width: 1024px) {
    .card-colegios {
      min-height: 320px;
    }
  }

  /* DESKTOP */
  @media (min-width: 1025px) {
    /* .card-colegios {
      min-height: 380px;
    } */
  }

  /* El Figma no lleva hover en estas tarjetas: se quedan siempre en rojo.
     card.css les pone un hover genérico (fondo blanco, título rojo) porque
     comparten `.card--colegios` con colegios/decanatos -- combinación
     `card--bg-primary.card--colegios` que solo usa este bloque de Curso. */
  .card--bg-primary.card--colegios:hover {
    background-color: var(--primary) !important;
    color: var(--white) !important;
  }

  .card--bg-primary.card--colegios:hover .h4.colegios_card-title {
    color: var(--white) !important;
  }
}

/* Las 4 tarjetas en una fila sin flechas en desktop se consiguen desde
   field--node--field-er-highlight-two.html.twig, subiendo cards_per_slide;
   el .carousel-track ya reparte con flex, no hace falta CSS aquí. */