/* ==========================================================================
   Program page hero – same design as the homepage hero (home-hero.css),
   plus the parts only program pages need: breadcrumb, Google rating line,
   key-facts box and certification logos. Load after home-hero.css.
   ========================================================================== */

/* Less top space than the homepage: the breadcrumb already sits up there */
.tp-hero--program { padding-top: clamp(20px, 1vw + 14px, 32px); }

/* Program H1s are long (SEO wording), so use the page-H1 size, not display */
.tp-hero--program .tp-hero__title {
  max-width: 960px;
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-h1);
  text-wrap: balance;
}
.tp-hero--program :where(ol) { margin: 0; padding: 0; list-style: none; }

/* Breadcrumb. The wrapper undoes the legacy bare `nav {}` rule in
   new-program-page.css (sticky bar with a background). */
.tp-hero__crumbs-nav {
  display: block;
  position: static;
  padding: 0;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  z-index: auto;
  transition: none;
}
.tp-hero__crumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: var(--space-3);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-text-secondary);
}
.tp-hero__crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.tp-hero__crumbs li + li::before { content: "›"; color: var(--color-text-muted); }
.tp-hero__crumbs a { color: var(--color-text-secondary); transition: color var(--duration-fast); }
.tp-hero__crumbs a:hover { color: var(--color-heading); }
.tp-hero__crumbs [aria-current] { color: var(--color-heading); font-weight: var(--weight-semibold); }

/* Social proof: avatars + Google rating */
.tp-hero__proof {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  margin-top: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}
.tp-hero__avatars { display: flex; }
.tp-hero__avatars img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-bg);
  object-fit: cover;
}
.tp-hero__avatars img + img { margin-left: -10px; }
.tp-hero__rating { display: grid; gap: 2px; text-align: left; color: inherit; }
.tp-hero__rating-top { display: flex; align-items: center; gap: 6px; }
.tp-hero__rating strong { font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--color-heading); }
.tp-hero__stars { display: flex; gap: 1px; color: var(--color-accent); }
.tp-hero__stars svg { width: 14px; height: 14px; fill: currentColor; }
.tp-hero__google { width: 16px; height: 16px; }
.tp-hero__rating:hover span { color: var(--color-heading); }

/* Key facts – same box as the homepage "Popular programs" list */
.tp-hero__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 960px;
  margin: var(--space-6) auto 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
  overflow: hidden;
}
.tp-hero__facts li {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: 20px var(--space-3);
  text-align: left;
}
.tp-hero__facts li + li { border-left: 1px solid var(--color-border); }
.tp-hero__fact-ico {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}
.tp-hero__fact-ico .tp-ico { width: 20px; height: 20px; }
.tp-hero__fact-body { display: grid; gap: 2px; }
.tp-hero__fact-name { font-size: var(--text-body); font-weight: var(--weight-bold); line-height: 1.3; color: var(--color-heading); }
.tp-hero__fact-tag { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-text-secondary); }
.tp-hero.surface-light .tp-hero__facts { background: var(--color-surface); box-shadow: 0 12px 32px -20px rgba(13,15,20,.18); }

/* Certification logos: plain colour logos, no tiles */
.tp-hero__certs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  margin-top: var(--space-4);
}
.tp-hero__certs-label {
  margin-right: var(--space-1);
  font-size: var(--text-eyebrow);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.tp-hero__certs ul { display: flex; align-items: center; gap: var(--space-4); }
.tp-hero__certs li { display: flex; align-items: center; height: 40px; }
.tp-hero__certs img { display: block; width: auto; height: 34px; }
/* Source files carry built-in white space, so they are drawn larger */
.tp-hero__cert--ibm img { height: 52px; mix-blend-mode: multiply; } /* JPG: hide its white box */
.tp-hero__cert--aws img { height: 56px; }

/* Motion: same rise-in as the homepage hero */
.tp-hero__crumbs,
.tp-hero__proof,
.tp-hero__facts,
.tp-hero__certs { animation: tp-rise 700ms var(--ease-out) both; }
.tp-hero__proof { animation-delay: 280ms; }
.tp-hero__facts { animation-delay: 340ms; }
.tp-hero__certs { animation-delay: 440ms; }

@media (prefers-reduced-motion: reduce) {
  .tp-hero__crumbs, .tp-hero__proof, .tp-hero__facts, .tp-hero__certs { animation: none; }
}

/* Tablet: facts 2 × 2 */
@media (max-width: 1023px) {
  .tp-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-hero__facts li:nth-child(3) { border-left: 0; }
  .tp-hero__facts li:nth-child(n+3) { border-top: 1px solid var(--color-border); }
}

/* Phone */
@media (max-width: 767px) {
  /* One line; the current page (repeated in the H1) is cut off if needed */
  .tp-hero__crumbs { flex-wrap: nowrap; margin-bottom: var(--space-2); }
  .tp-hero__crumbs li { flex-shrink: 0; }
  .tp-hero__crumbs li:last-child { flex-shrink: 1; min-width: 0; }
  .tp-hero__crumbs [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tp-hero__proof { margin-top: var(--space-3); }
  .tp-hero__facts { margin-top: var(--space-4); }
  .tp-hero__facts li { flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-2); }
  .tp-hero__fact-ico { width: 36px; height: 36px; }
  .tp-hero__certs { flex-direction: column; gap: var(--space-1); }
  .tp-hero__certs-label { margin-right: 0; }
  .tp-hero__certs ul { gap: var(--space-3); }
  .tp-hero__certs img { height: 28px; }
  .tp-hero__cert--ibm img { height: 44px; }
  .tp-hero__cert--aws img { height: 46px; }
}

/* ==========================================================================
   Dark program hero (class="surface-dark"): same centred layout as the
   homepage, dark ground so program pages don't look like the homepage.
   ========================================================================== */
.tp-hero--program.surface-dark {
  background: radial-gradient(120% 90% at 50% 0%, rgba(243,189,0,.10), transparent 60%), var(--color-bg);
}
.tp-hero--program.surface-dark .tp-hero__facts { background: var(--color-surface); box-shadow: 0 24px 60px -24px rgba(0,0,0,.6); }
.tp-hero--program.surface-dark .tp-hero__fact-ico { background: rgba(243,189,0,.12); color: var(--color-accent); }
/* Logos are dark artwork, so they sit on small white tiles */
.tp-hero--program.surface-dark .tp-hero__certs ul { gap: var(--space-1); }
.tp-hero--program.surface-dark .tp-hero__certs li {
  justify-content: center;
  height: 52px;
  min-width: 96px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  background: var(--white);
  overflow: hidden;
}
.tp-hero--program.surface-dark .tp-hero__certs img { height: 26px; }
.tp-hero--program.surface-dark .tp-hero__cert--ibm img { height: 40px; }
.tp-hero--program.surface-dark .tp-hero__cert--aws img { height: 46px; }
@media (max-width: 767px) {
  .tp-hero--program.surface-dark .tp-hero__certs li { height: 44px; min-width: 0; padding: 0 var(--space-1-5); }
  .tp-hero--program.surface-dark .tp-hero__certs img { height: 22px; }
  .tp-hero--program.surface-dark .tp-hero__cert--ibm img { height: 34px; }
  .tp-hero--program.surface-dark .tp-hero__cert--aws img { height: 38px; }
}

/* ==========================================================================
   Hero decoration (program pages): faint grid texture and floating
   tool-logo tiles at the sides (no frame lines in the hero).
   Purely decorative (aria-hidden). Logos show on wide screens only.
   ========================================================================== */
.tp-hero__deco {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* grid texture, fading out from the top centre */
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(75% 85% at 50% 30%, #000 30%, transparent 85%);
  mask-image: radial-gradient(75% 85% at 50% 30%, #000 30%, transparent 85%);
}