/* ============================
   Single Programas
   ============================ */

/* ── Breadcrumb ────────────────────────────────────── */
.sp-breadcrumb {
  background-color: var(--color-gray-300);
  padding: 1rem;
}

@media (min-width: 768px) {
  .sp-breadcrumb {
    padding: 1rem 2rem;
  }
}

@media (min-width: 1536px) {
  .sp-breadcrumb {
    padding: 1rem 4rem;
  }
}

.sp-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  list-style-type: none;
}

@media (min-width: 768px) {
  .sp-breadcrumb__list {
    gap: 0.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.sp-breadcrumb__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sp-breadcrumb__link:hover {
  text-decoration: underline;
}

.sp-breadcrumb__current {
  font-weight: 500;
}

/* ── Hero / Intro ──────────────────────────────────── */
.sp-intro {
  padding: 1rem;
}

@media (min-width: 768px) {
  .sp-intro {
    padding: 2rem;
  }
}

@media (min-width: 1536px) {
  .sp-intro {
    padding: 4rem;
  }
}

.sp-intro__inner {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

.sp-intro__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Back button ───────────────────────────────────── */
.sp-back {
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  border: 1px solid var(--color-gray-100);
  border-radius: 9999px;
  padding: 0.5rem;
  padding-right: 1rem;
}

.sp-back__icon {
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-secondary);
  color: var(--color-white);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Title ─────────────────────────────────────────── */
.sp-title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 500;
  text-wrap: balance;
  text-align: center;
}

@media (min-width: 768px) {
  .sp-title {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

/* ── Excerpt / Intro text ──────────────────────────── */
.sp-excerpt {
  text-align: center;
  color: var(--color-gray-500);
}

/* ── Badges / Pastillas ────────────────────────────── */
.sp-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}

.sp-badges--hidden {
  display: none;
}

/* ── Start date ────────────────────────────────────── */
.sp-start-date {
  text-align: center;
}

/* ── Featured Image ────────────────────────────────── */
.sp-featured-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-left: 77px solid var(--color-secondary);
}

@media (min-width: 768px) {
  .sp-featured-image {
    height: 522px;
  }
}

/* ── Content section ───────────────────────────────── */
.sp-content {
  padding: 1rem;
}

@media (min-width: 768px) {
  .sp-content {
    padding: 2rem;
  }
}

@media (min-width: 1536px) {
  .sp-content {
    padding: 4rem;
  }
}

.sp-content__inner {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

/* ── Content body (wrapper for prose + profiles + requirements) ── */
.sp-content__body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ── Prose (content from editor) ───────────────────── */
.sp-prose {
  max-width: none;
}

/* Vertical rhythm between Gutenberg blocks */
.sp-prose > * + * {
  margin-top: 1.25rem;
}

.sp-prose h2,
.sp-prose h3,
.sp-prose h4,
.sp-prose h5,
.sp-prose h6 {
  border-left: 4px solid var(--color-secondary);
  padding-left: 0.5rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.sp-prose p {
  line-height: 1.625;
}

.sp-prose ul {
  list-style-type: square;
  margin-left: 18px;
}

/* Tables inside prose */
.sp-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.sp-prose table td,
.sp-prose table th {
  border: 1px solid var(--color-gray-100);
  padding: 0.625rem 0.75rem;
  vertical-align: top;
}

.sp-prose table td:first-child,
.sp-prose table th:first-child {
  font-weight: 600;
}

@media (min-width: 768px) {
  .sp-prose table {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

/* ── Error message ─────────────────────────────────── */
.sp-error {
  color: var(--color-error);
}

/* ── Dirigido a (Profiles) ─────────────────────────── */
.sp-profiles {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sp-profiles__title {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  border-left: 4px solid var(--color-secondary);
  padding-left: 0.5rem;
}

.sp-profiles__scroll {
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .sp-profiles__scroll {
    padding-bottom: 0;
  }
}

.sp-profiles__grid {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
}

/* ── Profile card ──────────────────────────────────── */
.sp-profile-card {
  position: relative;
}

.sp-profile-card__picture {
  display: block;
  overflow: hidden;
  border-radius: 0.75rem;
}

.sp-profile-card__image {
  min-width: 200px;
  height: 220px;
  object-fit: cover;
  transition: transform 300ms ease;
}

@media (min-width: 768px) {
  .sp-profile-card__image {
    width: 270px;
    height: 300px;
  }
}

.sp-profile-card:hover .sp-profile-card__image {
  transform: scale(1.2);
}

.sp-profile-card__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1rem;
  background: linear-gradient(220deg, oklch(from var(--color-secondary) l c h / 0.4), transparent, var(--color-black));
  color: var(--color-white);
  display: flex;
  align-items: flex-end;
  border-radius: 0.75rem;
}

.sp-profile-card__name {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 500;
  font-style: italic;
  font-family: var(--font-publico);
}

/* ── Requirements ──────────────────────────────────── */
.sp-requirements {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sp-requirements__title {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  border-left: 4px solid var(--color-secondary);
  padding-left: 0.5rem;
}

.sp-requirements__content {
  max-width: none;
}

.sp-requirements__content ul {
  list-style-type: square;
  margin-left: 18px;
}

/* ── CTA button ────────────────────────────────────── */
.sp-cta {
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .sp-cta {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

/* ── Bottom divider ────────────────────────────────── */
.sp-divider {
  padding: 1rem;
}

@media (min-width: 768px) {
  .sp-divider {
    padding: 1rem 2rem;
  }
}

@media (min-width: 1536px) {
  .sp-divider {
    padding: 1rem 4rem;
  }
}

.sp-divider__inner {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.sp-divider__line {
  border-color: var(--color-gray-100);
}