/*
  Programa (spec 6.6: objetivos, alcance, perfiles e itinerarios, llamada al registro)
  Responsive: móvil de base, tablet >= 768px, escritorio >= 1280px.
*/

/* =====================================================================
   Objetivos
   ===================================================================== */

.objectives__layout {
  display: grid;
  gap: var(--gap-10);
}

.objectives__head {
  display: grid;
  gap: var(--gap-5);
  align-content: start;
}

.objectives__head p {
  color: var(--text-muted);
}

.objectives__list {
  display: grid;
  gap: var(--gap-8);
}

.objective {
  display: grid;
  gap: var(--gap-3);
  padding-top: var(--padding-5);
  border-top: 1px solid var(--rule);
}

.objective p {
  color: var(--text-muted);
}

/* =====================================================================
   Alcance
   ===================================================================== */

.scope {
  background: var(--surface-alt);
}

.scope__layout {
  display: grid;
  gap: var(--gap-10);
}

.scope__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--border-radius-lg);
}

.scope__content {
  display: grid;
  gap: var(--gap-6);
  align-content: start;
  /* Sin esto, el texto ampliado ensancha la columna de la rejilla (WCAG 1.4.4) */
  min-width: 0;
}

/* La lista de datos clave es un componente común (shared/components/facts.css) */

/* =====================================================================
   Perfiles e itinerarios
   ===================================================================== */

.profiles__head {
  display: grid;
  gap: var(--gap-5);
  margin-bottom: var(--padding-12);
}

.profiles__head p {
  color: var(--text-muted);
}

.profiles__list {
  display: grid;
  gap: var(--gap-16);
}

.profile-row {
  display: grid;
  gap: var(--gap-6);
}

.profile-row__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--border-radius-lg);
}

.profile-row__body {
  display: grid;
  gap: var(--gap-6);
  align-content: start;
}

.profile-row__title {
  font-size: var(--font-size-7);
  line-height: var(--line-height-11);
}

.profile-row__block {
  display: grid;
  gap: var(--gap-2);
}

.profile-row__block h4 {
  font-family: var(--ui);
  font-size: var(--font-size-3);
  line-height: var(--line-height-7);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
}

.profile-row__block p,
.profile-row__block li {
  color: var(--text-muted);
}

.profile-row__block ul {
  display: grid;
  gap: var(--gap-2);
  padding-left: 1.25em;
}

.profile-row__block li::marker {
  color: var(--primary-600);
}

/* =====================================================================
   Tablet (>= 768px)
   ===================================================================== */

@media (min-width: 768px) {
  .objectives__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-10) var(--gap-8);
  }

  .scope__layout {
    grid-template-columns: 2fr 3fr;
    gap: var(--gap-10);
    align-items: start;
  }

  .profile-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-10);
    align-items: center;
  }

  .profile-row__media {
    aspect-ratio: 4 / 5;
  }
}

/* =====================================================================
   Escritorio (>= 1280px)
   ===================================================================== */

@media (min-width: 1280px) {
  .objectives__layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap-6);
  }

  .objectives__head {
    grid-column: 1 / 5;
    position: sticky;
    top: calc(var(--header-height) + var(--padding-10));
    align-self: start;
  }

  .objectives__list {
    grid-column: 6 / 13;
    gap: var(--gap-12) var(--gap-10);
  }

  .scope__layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap-6);
  }

  .scope__media {
    grid-column: 1 / 6;
    aspect-ratio: 3 / 4;
  }

  .scope__content {
    grid-column: 7 / 13;
    padding-top: var(--padding-12);
  }

  .profiles__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap-6);
    align-items: end;
    margin-bottom: var(--padding-20);
  }

  .profiles__head h2 {
    grid-column: 1 / 7;
  }

  .profiles__head > div {
    grid-column: 8 / 13;
    display: grid;
    gap: var(--gap-3);
  }

  .profiles__list {
    gap: var(--gap-25);
  }

  /* Filas alternas: foto a un lado y texto al otro, con proporciones editoriales */
  .profile-row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap-6);
  }

  .profile-row__media {
    grid-column: 1 / 7;
    grid-row: 1;
  }

  .profile-row__body {
    grid-column: 8 / 13;
    grid-row: 1;
  }

  .profile-row:nth-child(even) .profile-row__media {
    grid-column: 7 / 13;
  }

  .profile-row:nth-child(even) .profile-row__body {
    grid-column: 1 / 6;
  }

  .profile-row__title {
    font-size: var(--font-size-8);
    line-height: var(--line-height-12);
  }
}