/* Shared hero quillo-d (stacked-wide/statement-photo-stat) — Grayskills library. Scoped to .sh-quillo-d. */
/* Shared hero: quillo-d — lifted from Quillo variants "hero-d". An oversized editorial headline across the page
   (optional second phrase in --muted), a row with the lead left and the button right, then a wide photo beside a
   number card on the light surface. Contract tokens only (heroes/CONTRACT.md). */
.sh-quillo-d { padding-top: calc(var(--hero-pad-top, 48px) + 16px); }
.sh-quillo-d .sh-wrap { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.sh-quillo-d .sh-eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-label, var(--font)); font-size: var(--label-size, 14px); font-weight: var(--label-weight, 400); letter-spacing: var(--label-tracking, .04em); text-transform: var(--label-transform, uppercase); line-height: 1.5; color: var(--text); }
.sh-quillo-d .sh-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.sh-quillo-d h1 { margin: 32px 0 0; max-width: 13em; font-family: var(--font-display); font-weight: var(--display-weight, 400); font-size: min(calc(var(--display-size, 66px) * var(--sh-scale, 1.45)), 112px); line-height: 1.04; letter-spacing: var(--display-tracking, -.03em); color: var(--text); text-wrap: balance; }
.sh-quillo-d h1 em { font-style: var(--display-em, italic); }
.sh-quillo-d .sh-tail { color: var(--muted); }
.sh-quillo-d .sh-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: 48px; }
.sh-quillo-d .sh-lead { margin: 0; max-width: 460px; font-size: var(--lead-size, 18px); line-height: 1.5; font-weight: var(--body-weight, 400); color: var(--text-2); }
.sh-quillo-d .sh-ctas { display: flex; flex-wrap: wrap; gap: 16px; }
.sh-quillo-d .sh-band { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; margin-top: 64px; }
.sh-quillo-d .sh-media { margin: 0; aspect-ratio: 840 / 470; border-radius: var(--r-hero, var(--r)); overflow: hidden; }
.sh-quillo-d .sh-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--sh-focus, 50% 50%); }
.sh-quillo-d .sh-band { position: relative; }
.sh-quillo-d .sh-story { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 24px; border-radius: var(--r-hero, var(--r)); background: var(--surface); color: var(--text); }
/* freedom: the build picks the spot — the panel right of the photo (source), left of it, or a small panel on the photo's lower-left corner; never over a face */
.sh-quillo-d .sh-band:has(> .sh-story[data-pos="side-left"]) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.sh-quillo-d .sh-story[data-pos="side-left"] { order: -1; }
.sh-quillo-d .sh-band:has(> .sh-story[data-pos="on-photo"]) { grid-template-columns: 1fr; }
.sh-quillo-d .sh-band:has(> .sh-story[data-pos="on-photo"]) .sh-media { aspect-ratio: 1280 / 560; }
.sh-quillo-d .sh-story[data-pos="on-photo"] { position: absolute; z-index: 2; left: 16px; bottom: 16px; width: min(340px, calc(100% - 32px)); gap: 16px; }
/* the story kit: plain blocks inside the panel (or the host skill's own kit) */
.sh-quillo-d .sh-story .sh-card { display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.5; color: var(--text-2); text-align: left; }
.sh-quillo-d .sh-story .sh-card > br { display: none; }
.sh-quillo-d .sh-story .sh-card b, .sh-quillo-d .sh-story .sh-card strong { font-family: var(--font-display); font-weight: var(--display-weight, 400); font-size: 26px; line-height: 1.25; letter-spacing: -.3px; color: var(--text); }
.sh-quillo-d .sh-story .sh-card small { font-size: 15px; color: var(--text-2); }
.sh-quillo-d .sh-story .sh-label { margin: 0; font-family: var(--font-label, var(--font)); font-size: var(--label-size, 14px); letter-spacing: var(--label-tracking, .04em); text-transform: var(--label-transform, uppercase); line-height: 1.5; color: var(--text-2); }
.sh-quillo-d .sh-story .sh-num { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 400); font-size: 40px; line-height: 1.2; letter-spacing: -.5px; color: var(--text); }
@media (max-width: 1100px) { .sh-quillo-d h1 { font-size: min(calc(var(--display-size, 66px) * 1.09), 84px); } }
@media (max-width: 900px) {
  .sh-quillo-d .sh-row { flex-direction: column; align-items: flex-start; }
  .sh-quillo-d .sh-band, .sh-quillo-d .sh-band:has(> .sh-story[data-pos]) { grid-template-columns: 1fr; }
  .sh-quillo-d .sh-story[data-pos="side-left"] { order: 0; }
  .sh-quillo-d .sh-story[data-pos="on-photo"] { position: static; width: auto; }
}
@media (max-width: 640px) {
  .sh-quillo-d { padding-top: 32px; }
  .sh-quillo-d h1 { font-size: calc(var(--display-size-sm, 42px) * 1.1); }
}