/* El Figma de Curso solo tiene modo claro, pero la página sí soporta dark:
   los colores del diseño cuelgan de `:where(html:not([data-theme="dark"]))`
   y en oscuro gana la paleta que ya trae el sitio. */
:where(html:not([data-theme="dark"])) .curso-layout {
  --bs-heading-color: var(--dark);
  --bs-body-color: var(--dark);
  --bs-link-color-rgb: var(--secondary);
  --bs-link-hover-color-rgb: var(--secondary);
  --bs-border-color: var(--secondary);
  color: var(--dark);
}

:where(html:not([data-theme="dark"])) .curso-layout p {
  color: var(--dark) !important;
}

[data-component-id="usfq_theme:section_hero_careers"] {

  >div {
    min-height: 90vh;
  }

  /* Caja de referencia del panel de creditos, que va en position: absolute. */
  .section-hero-careers__image {
    position: relative;
  }

  .section-hero-careers__image div {
    height: 100%;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .content {
    padding: 2rem 0;
    align-self: center;
  }

  .content h2.h1.title {
    color: var(--primary);
  }

  .text-block {
    padding: 0 1rem;
  }

  .curso-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 0.5rem 0 1rem;
    font-size: 0.9rem;
  }

  .curso-meta__date {
    color: var(--dark);
  }

  .curso-meta__status {
    color: var(--primary);
    font-weight: 600;
  }

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

        .subtitle-s1 {
          color: var(--white) !important;
        }
      }
    }
  }

  /* TABLET */
  @media (min-width: 768px) and (max-width: 1024px) {
    .content {
      padding: 6rem 0;
    }

    .text-block {
      padding: 0 1.5rem;
    }
  }

  /* DESKTOP */
  @media (min-width: 1025px) {
    .section-hero_careers__breadcrumb {
      padding: 0 4rem;
      margin-bottom: 1rem;
    }

    .section-hero_careers__link {
      margin-top: 3rem;
    }
  }

  [data-component-id="usfq_theme:link"] {
  /* Variantes color */
    &.link--color-secondary, .link--color-primary,
    .link--color-light{
      color: inherit !important;
    }
  }

}
/* ===========================================================================
   Curso · Hero, ajustado al Figma "Mockups web USFQ - FASE 1" (node 150-6593)
   Todo va acotado a .curso-layout: section_hero_careers lo comparte
   node--academic-program--full.html.twig y no puede moverse.
   =========================================================================== */

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

  /* Contenido arriba, no centrado como el resto del organismo. El CTA va
     pegado a la description (margin-top de .section-hero_careers__link más
     abajo), no empujado al fondo del hero: `space-between` lo dejaba a 90vh
     de distancia en cursos con poco texto. */
  .content {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    padding: clamp(3rem, 7vw, 7.5rem) 0 0;
  }

  [data-component-id="usfq_theme:nav-breadcrumb"] {
    margin-bottom: 1.25rem;
  }

  .text-block .title {
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
    max-width: 34rem;
    margin-bottom: 0;
  }

  .curso-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin: 2.5rem 0 1.5rem;
    font-size: 1rem;
  }

  /* Acento de marca: rojo en los dos esquemas. */
  .curso-meta__date,
  .curso-meta__status {
    color: var(--primary);
    font-size: 1rem;
    font-weight: 500;
  }

  .curso-meta__date {
    font-size: 1.0625rem;
  }

  .text-block .description {
    margin-bottom: 0;
  }

  .text-block .description p {
    font-size: 1rem;
    line-height: 1.5;
    max-width: 34rem;
    margin-bottom: 0;
  }

  /* CTA: la línea cruza la columna entera y el texto queda debajo, a la
     derecha, con el mismo respiro que la flecha. */
  .section-hero_careers__link {
    margin-top: 3rem;
  }

  .section-hero_careers__link .link-divider__text {
    font-size: 0.875rem;
    padding: 0.75rem 0;
  }

  /* TABLET */
  @media (min-width: 768px) and (max-width: 1024px) {
    .content {
      padding: 4rem 0 0;
    }

    .section-hero_careers__link .link-divider__text {
      padding-right: 1.5rem;
    }
  }

  /* DESKTOP */
  @media (min-width: 1025px) {
    .section-hero_careers__link .link-divider__text {
      padding-right: 4rem;
    }
  }

  /* Solo modo claro: en oscuro gana el blanco del sitio sin tocar nada. */
  :where(html:not([data-theme="dark"])) & {
    /* !important para ganar a `.title` de text_block.css. */
    .text-block .title {
      color: var(--primary) !important;
    }

    [data-component-id="usfq_theme:nav-breadcrumb"] {
      color: var(--dark);
    }

    .text-block .description p {
      color: var(--dark) !important;
    }

    .section-hero_careers__link .link-divider {
      color: var(--dark);
    }

    /* El twig le pasa `icon--color-white`, invisible sobre el panel claro. */
    .section-hero_careers__link .link-divider__icon .icon,
    .section-hero_careers__link .link-divider__icon .icon svg {
      color: var(--dark) !important;
    }
  }
}