/* Shared breadcrumb rhythm. Authority: Design/Website_Style_Guide.md.
   News & Insights supplied the reference: 8px above; 44px below reduced by 30%.
   Breadcrumbs own the gap so hero padding cannot add a second layer of space. */
:root {
  --breadcrumb-space-before: 8px;
  --breadcrumb-space-after: 30.8px;
}
@media (max-width: 640px) {
  :root { --breadcrumb-space-after: 22.4px; }
}
@media (max-width: 600px) {
  :root { --breadcrumb-space-after: 21px; }
}

body[data-page] :is(.product-breadcrumb, .careers-breadcrumb) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-block: 0;
  padding-block: var(--breadcrumb-space-before) var(--breadcrumb-space-after);
  font-size: 11px;
}
@media (max-width: 600px) {
  body[data-page] :is(.product-breadcrumb, .careers-breadcrumb) { font-size: 10px; }
}

body[data-page] :is(.product-breadcrumb, .careers-breadcrumb) + * {
  margin-top: 0;
  padding-top: 0;
}

/* Keep the first content column at the same starting point even when a neighboring
   illustration or panel is taller. The other columns retain their own alignment. */
body[data-page] .product-breadcrumb + :is(
  .cv-hero-grid, .procurement-hero-grid, .services-hero-grid, .odin-hero-content,
  .training-hero-grid, .vendor-hero-grid, .course-hero-grid, .schedule-hero-grid
) > :first-child {
  align-self: start;
}

/* Careers nests its breadcrumb inside the copy column; remove its outer top gap. */
body[data-page] :is(.careers-hero-inner, .job-hero-inner) { padding-top: 0; }
body[data-page] .careers-copy { align-self: start; }

/* This hero has another copy wrapper inside the layout below the breadcrumb. */
body[data-page] .communications-copy { padding-top: 0; }