/*
 * sd-hero — hero patterns (Session 2.3; Blueprint 4.18)
 * Internal hero: breadcrumbs, label, H1, lead, actions; optional media or diagram on the right (≥ 1024px).
 * Variant subtle: gray surface. Variant compact: listing and legal pages (no media, smaller space).
 * The homepage hero (Blue Line animation and clinic background, D-025/D-026) is sd-home-hero in home-hero.css
 * (Session 4.1a); it uses the same type and action rules.
 * Exactly one H1 per page; the hero holds at most one primary and one secondary action.
 */

.sd-hero {
  padding-block: var(--sd-space-7) var(--sd-subsection-space);
  background: var(--sd-color-surface);
  border-bottom: var(--sd-border-width) solid var(--sd-color-border-subtle);
}

.sd-hero--subtle { background: var(--sd-color-surface-subtle); }

.sd-hero--compact { padding-block: var(--sd-space-6); }

.sd-hero__inner {
  display: grid;
  gap: var(--sd-space-6);
  align-items: center;
}

@media (min-width: 1024px) {
  .sd-hero--media .sd-hero__inner { grid-template-columns: 7fr 5fr; gap: var(--sd-space-8); }
}

.sd-hero__text {
  display: grid;
  gap: var(--sd-space-4);
  justify-items: start;
  min-width: 0;
}

.sd-hero__title { max-width: 18ch; }
.sd-hero--compact .sd-hero__title { max-width: 24ch; font-size: var(--sd-font-size-h2); line-height: var(--sd-line-height-h2); }

.sd-hero__lead { max-width: 40rem; }

.sd-hero__actions { margin-top: var(--sd-space-2); }

.sd-hero__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--sd-radius-lg);
  background: var(--sd-color-blue-050);
}

.sd-hero__media img,
.sd-hero__media svg {
  width: 100%;
  height: auto;
}

/* Hero breadcrumbs sit directly above the label */
.sd-hero .sd-breadcrumbs { margin-bottom: calc(-1 * var(--sd-space-2)); }

/* Illustration media (Session 4.2 follow-up, owner request: every page hero has a simple, minimal illustration on the
   right, in the approved illustration style B, D-033). Decorative (alt=""), never behind the text.
   Desktop ≥ 1024px: text 7 / illustration 5. Tablet and phone: below the text, centred, smaller. */
.sd-hero__media--illustration {
  border-radius: 0;
  background: none;
  justify-self: center;
  width: 100%;
  max-width: 20rem;
}

@media (min-width: 640px) {
  .sd-hero__media--illustration { max-width: 24rem; }
}

@media (min-width: 1024px) {
  .sd-hero__media--illustration { max-width: 30rem; justify-self: end; }
}