/* ==========================================================================
   Page hero — header band for topic pages (blog, lessons, …)
   ========================================================================== */

.page-hero {
  padding-block: var(--cds-spacing-07) var(--cds-spacing-09);
  background: var(--cds-background);
  border-bottom: 1px solid var(--cds-border-subtle);
}

/* A full-width sticky bar at the very top of every page: the back link plus the language and
   theme controls stay reachable however far you scroll. It is a direct child of <main>, so it
   stays stuck for the whole page (not just one section). Sits just below the "latest" banner. */
.page-hero__top {
  position: sticky;
  top: var(--banner-h);
  z-index: 30;
  background: var(--cds-background-alt);
  box-shadow: inset 0 -1px 0 var(--cds-border-subtle);
}
/* When the holiday/event ribbon is up, the banner sits lower, so the bar follows. */
html.has-event-ribbon .page-hero__top {
  top: calc(var(--banner-h) + var(--event-ribbon-h));
}
.page-hero__topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cds-spacing-05);
  padding-block: var(--cds-spacing-04);
}

.page-hero__back {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-02);
  font-size: 0.875rem;
}
/* The back arrow lives in CSS so it is always present and consistent, no matter what the
   translated label is. (The label strings no longer include it.) */
.page-hero__back::before,
.guide-hero__back::before {
  content: "←";
  font-size: 1em;
  line-height: 1;
}

.page-hero__eyebrow {
  display: block;
  margin-bottom: var(--cds-spacing-03);
  color: var(--cds-text-secondary);
}

.page-hero__rule {
  width: var(--cds-spacing-09);
  height: 0.25rem;
  margin-bottom: var(--cds-spacing-05);
  background: var(--cds-interactive);
}

.page-hero__title {
  max-width: 24ch;
  margin-bottom: var(--cds-spacing-05);
  overflow-wrap: break-word;
}

.page-hero__lead {
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 1.625rem;
  color: var(--cds-text-secondary);
}

.page-hero__meta {
  margin-top: var(--cds-spacing-05);
  color: var(--cds-text-helper);
}

.page-body {
  padding-block: var(--cds-spacing-08) var(--cds-spacing-09);
}

@media (min-width: 66rem) {
  .page-hero {
    padding-block: var(--cds-spacing-09) var(--cds-spacing-10);
  }
}