/**
 * @file
 * Styles for the public "How admission works" applicant explainer page.
 *
 * Scopes every component under a dedicated tp-aproc-* namespace so it never
 * collides with the homepage components (tp-paths / tp-stats). The page sits
 * inside the portal's centred .tp-main column, so these styles only handle
 * vertical rhythm between sections and the internal layout of each block.
 *
 * Brand (USL): primary navy #1b3a6b, accent/danger crimson #be123c, success
 * green #15803d. Contrast safety: any element with a navy or crimson
 * BACKGROUND uses white (#fff) text, and anchor buttons pin color:#fff on
 * :hover / :focus-visible to defeat the theme's global a:hover colour.
 *
 * Layout: desktop multi-column, single column on mobile; the channel grid
 * steps 4 -> 2 -> 1, the card grids 3 -> 1, and the timeline stays single
 * column and collapses its left gutter on small screens.
 */

.tp-aproc {
  /* Component-local design tokens with hard hex fallbacks so the page is
     self-contained even if the theme tokens are unavailable. */
  --tp-aproc-navy: var(--tp-color-brand-primary, #1b3a6b);
  --tp-aproc-crimson: var(--tp-color-brand-accent, #be123c);
  --tp-aproc-surface: var(--tp-color-surface-default, #fff);
  --tp-aproc-text: var(--tp-color-text-default, #1a2230);
  --tp-aproc-muted: var(--tp-color-text-muted, #5b6473);
  --tp-aproc-border: var(--tp-color-border-default, #e3e8ef);
  --tp-aproc-radius: var(--tp-border-radius-lg, 14px);
  --tp-aproc-shadow: 0 1px 2px rgba(16, 24, 40, 0.04),
    0 8px 24px rgba(16, 24, 40, 0.06);

  display: flex;
  flex-direction: column;
  gap: var(--tp-spacing-8, 3rem);
  color: var(--tp-aproc-text);
}

/* ---- Section heads (eyebrow + title + lede) ---------------------------- */

.tp-aproc .tp-section-head {
  max-width: 52rem;
  margin: 0 0 var(--tp-spacing-6, 1.75rem);
}

.tp-aproc .tp-section-head__eyebrow {
  margin: 0 0 var(--tp-spacing-2, 0.5rem);
  font-size: var(--tp-font-size-xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tp-aproc-crimson);
}

.tp-aproc .tp-section-head__title {
  margin: 0 0 var(--tp-spacing-3, 0.75rem);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  line-height: 1.2;
  color: var(--tp-aproc-navy);
}

.tp-aproc .tp-section-head__lede {
  margin: 0;
  font-size: var(--tp-font-size-lg, 1.0625rem);
  line-height: 1.6;
  color: var(--tp-aproc-muted);
}

/* ---- Card grids (highlights + self-service) ---------------------------- */

.tp-aproc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tp-spacing-5, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tp-aproc-card {
  display: flex;
  flex-direction: column;
  gap: var(--tp-spacing-3, 0.75rem);
  padding: var(--tp-spacing-6, 1.5rem);
  background: var(--tp-aproc-surface);
  border: 1px solid var(--tp-aproc-border);
  border-radius: var(--tp-aproc-radius);
  box-shadow: var(--tp-aproc-shadow);
}

.tp-aproc-card__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  /* Navy background -> white glyph (a11y contract). */
  color: #fff;
  background: var(--tp-aproc-navy);
  border-radius: 50%;
}

.tp-aproc-card__title {
  margin: 0;
  font-size: var(--tp-font-size-lg, 1.125rem);
  color: var(--tp-aproc-navy);
}

.tp-aproc-card__text {
  margin: 0;
  line-height: 1.6;
  color: var(--tp-aproc-muted);
}

/* ---- Channel grid (four "how to start" cards) -------------------------- */

.tp-aproc-channel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tp-spacing-5, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tp-aproc-channel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--tp-spacing-2, 0.5rem);
  padding: var(--tp-spacing-6, 1.5rem);
  /* Extra top padding leaves room for the absolutely-placed badge pill. */
  padding-top: var(--tp-spacing-8, 3rem);
  background: var(--tp-aproc-surface);
  border: 1px solid var(--tp-aproc-border);
  border-radius: var(--tp-aproc-radius);
  box-shadow: var(--tp-aproc-shadow);
}

.tp-aproc-channel__badge {
  position: absolute;
  top: var(--tp-spacing-4, 1rem);
  right: var(--tp-spacing-4, 1rem);
  padding: 0.25rem 0.625rem;
  font-size: var(--tp-font-size-xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  /* Crimson background -> white text (a11y contract). */
  color: #fff;
  background: var(--tp-aproc-crimson);
  border-radius: 999px;
}

.tp-aproc-channel__title {
  margin: 0;
  font-size: var(--tp-font-size-lg, 1.125rem);
  color: var(--tp-aproc-navy);
}

.tp-aproc-channel__strapline {
  margin: 0;
  font-size: var(--tp-font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--tp-aproc-crimson);
}

.tp-aproc-channel__text {
  margin: var(--tp-spacing-1, 0.25rem) 0 0;
  line-height: 1.6;
  color: var(--tp-aproc-muted);
}

.tp-aproc-channel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tp-spacing-2, 0.5rem);
  margin: var(--tp-spacing-3, 0.75rem) 0 0;
  padding: 0;
  list-style: none;
}

.tp-aproc-channel__tag {
  padding: 0.1875rem 0.5rem;
  font-size: var(--tp-font-size-xs, 0.75rem);
  font-weight: 600;
  color: var(--tp-aproc-navy);
  background: var(--tp-color-surface-subtle, #eef1f5);
  border-radius: 999px;
}

/* ---- Journey timeline (13 numbered steps) ------------------------------ */

.tp-aproc-timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tp-aproc-step {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--tp-spacing-4, 1rem);
  padding-bottom: var(--tp-spacing-6, 1.5rem);
}

.tp-aproc-step:last-child {
  padding-bottom: 0;
}

/* The continuous vertical spine runs through the centre of the markers; it
   stops at the last marker so the line never dangles below the final step. */
.tp-aproc-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 2.5rem;
  bottom: 0;
  left: 1.25rem;
  width: 2px;
  background: var(--tp-aproc-border);
  transform: translateX(-1px);
}

.tp-aproc-step__marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--tp-font-size-sm, 0.9375rem);
  font-weight: 700;
  /* Navy circle -> white numeral (a11y contract). */
  color: #fff;
  background: var(--tp-aproc-navy);
  border-radius: 50%;
}

.tp-aproc-step__body {
  padding-top: 0.25rem;
}

.tp-aproc-step__title {
  margin: 0 0 var(--tp-spacing-1, 0.25rem);
  font-size: var(--tp-font-size-lg, 1.0625rem);
  color: var(--tp-aproc-navy);
}

.tp-aproc-step__num {
  display: block;
  font-size: var(--tp-font-size-xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tp-aproc-crimson);
}

.tp-aproc-step__text {
  margin: 0;
  line-height: 1.6;
  color: var(--tp-aproc-muted);
}

/* ---- Call-to-action band ----------------------------------------------- */

.tp-aproc-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tp-spacing-5, 1.5rem);
  padding: var(--tp-spacing-8, 3rem) var(--tp-spacing-6, 1.5rem);
  text-align: center;
  /* Navy background -> white text (a11y contract). */
  color: #fff;
  background: var(--tp-aproc-navy);
  border-radius: var(--tp-aproc-radius);
}

.tp-aproc-cta__title {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  color: #fff;
}

.tp-aproc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tp-spacing-3, 0.75rem);
}

.tp-aproc-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--tp-border-radius-md, 8px);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tp-aproc-cta__btn--primary {
  /* Crimson button on the navy band -> white label, pinned on hover/focus to
     defeat the theme's global a:hover colour rule. */
  color: #fff;
  background: var(--tp-aproc-crimson);
}

.tp-aproc-cta__btn--primary:hover,
.tp-aproc-cta__btn--primary:focus-visible {
  color: #fff;
  background: var(--tp-color-brand-accent-hover, #9f1239);
}

.tp-aproc-cta__btn--ghost {
  color: #fff;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.65);
}

.tp-aproc-cta__btn--ghost:hover,
.tp-aproc-cta__btn--ghost:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
}

.tp-aproc-cta__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---- Responsive: tablet ------------------------------------------------ */

@media (max-width: 64rem) {
  .tp-aproc-channel-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Responsive: mobile ------------------------------------------------ */

@media (max-width: 48rem) {
  .tp-aproc {
    gap: var(--tp-spacing-7, 2.5rem);
  }

  .tp-aproc-cards,
  .tp-aproc-channel-grid {
    grid-template-columns: 1fr;
  }

  /* Tighten the timeline gutter on small screens. */
  .tp-aproc-step {
    grid-template-columns: 2rem 1fr;
    gap: var(--tp-spacing-3, 0.75rem);
  }

  .tp-aproc-step__marker {
    width: 2rem;
    height: 2rem;
    font-size: var(--tp-font-size-xs, 0.8125rem);
  }

  .tp-aproc-step:not(:last-child)::before {
    top: 2rem;
    left: 1rem;
  }

  .tp-aproc-cta__btn {
    width: 100%;
  }
}