/* The learning catalog is the source of the shared heading's type and spacing. */
.catalog-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
}
.catalog-heading-copy { min-width: 0; }
.catalog-heading .catalog-heading-eyebrow {
  color: #71808d;
  font-size: 1rem;
  font-weight: 800;
}
.catalog-heading h1 {
  margin: 5px 0 6px;
  color: #07194a;
  font-size: clamp(1.9rem, 3vw, 3.1rem);
}
.catalog-heading p {
  margin: 0;
  color: #63717d;
  font-size: 1rem;
}
.catalog-heading > .section-icon {
  inline-size: 96px;
  block-size: 96px;
}
.catalog-heading-art {
  position: relative;
  inline-size: clamp(180px, 19vw, 260px);
  margin: 0;
  min-width: 0;
}
.catalog-heading-art canvas {
  display: block;
  inline-size: 100%;
  block-size: 200px;
  pointer-events: none;
}
.catalog-heading-art[data-rive-state="unavailable"] { display: none; }
.catalog-heading-art-toggle {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}
.catalog-heading-art-toggle[hidden] { display: none; }
.catalog-heading-art-toggle:focus-visible { outline: 3px solid #0076a8; outline-offset: 3px; }
@media (max-width: 760px) {
  .catalog-heading {
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
  }
  .catalog-heading h1 { font-size: 1.55rem; }
  .catalog-heading p { font-size: .8rem; }
  .catalog-heading > .section-icon { inline-size: 64px; block-size: 64px; }
  .catalog-heading-art { grid-column: 1 / -1; inline-size: min(260px, 100%); justify-self: center; }
  .catalog-heading-art canvas { block-size: 160px; }
}