/* Shared hero covra-overlap (card-on-photo/overlap-card) — Grayskills library. Scoped to .sh-covra-overlap. */
/* Shared hero: covra-overlap — lifted from Covra variants "hero-f". A wide rounded photo, and a dark title card that
   rises over its lower edge, centred, carrying the whole copy block. Contract tokens only (heroes/CONTRACT.md). */
.sh-covra-overlap { padding-top: calc(var(--hero-pad-top, 0px) + 8px); }
.sh-covra-overlap .sh-wrap { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.sh-covra-overlap .sh-media { height: clamp(400px, 50vh, 560px); border-radius: var(--r-hero, var(--r-lg)); overflow: hidden; background: var(--surface-2); }
.sh-covra-overlap .sh-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--sh-focus, 50% 30%); }
.sh-covra-overlap .sh-card { position: relative; width: min(780px, calc(100% - 48px)); margin: -200px auto 0; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 44px 56px 48px; border-radius: var(--r-lg); background: var(--ink-bg); color: var(--on-dark); text-align: center; }
.sh-covra-overlap .sh-eyebrow { margin: 0; font-family: var(--font-label, var(--font)); font-size: var(--label-size, 14px); font-weight: var(--label-weight, 500); letter-spacing: var(--label-tracking, .04em); text-transform: var(--label-transform, uppercase); line-height: 1.5; color: color-mix(in srgb, var(--on-dark) 80%, transparent); }
.sh-covra-overlap h1 { margin: 0; max-width: 640px; font-family: var(--font-display); font-weight: var(--display-weight, 300); font-size: min(var(--display-size, 64px), 64px); line-height: var(--display-lh, 1.08); letter-spacing: var(--display-tracking, -.02em); color: var(--on-dark); text-wrap: balance; }
.sh-covra-overlap h1 em { font-style: var(--display-em, italic); }
.sh-covra-overlap .sh-lead { margin: 0; max-width: 500px; font-size: var(--lead-size, 18px); line-height: 1.55; font-weight: var(--body-weight, 400); color: color-mix(in srgb, var(--on-dark) 86%, transparent); text-wrap: pretty; }
.sh-covra-overlap .sh-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
@media (max-width: 1100px) { .sh-covra-overlap h1 { font-size: calc(var(--display-size, 64px) * .8); } }
@media (max-width: 600px) {
  .sh-covra-overlap .sh-media { height: 340px; }
  .sh-covra-overlap .sh-card { width: calc(100% - 24px); margin-top: -80px; padding: 28px 20px; gap: 16px; }
  .sh-covra-overlap h1 { font-size: var(--display-size-sm, 44px); }
}