/* Car Show HQ — Hero block */
body.cshq .cshq-hero__inner { position: relative; z-index: 1; }
body.cshq .cshq-hero__back { display: inline-block; font-size: 14px; color: var(--cshq-on-navy-eyebrow); margin-bottom: 14px; }
body.cshq .cshq-hero__back:hover { color: #fff; }
body.cshq .cshq-hero__eyebrow { display: block; font-size: 13px; margin-bottom: 0; }
body.cshq .cshq-hero__h1 { color: #fff; margin: 16px 0 18px; }
body.cshq .cshq-hero__sub { color: var(--cshq-on-navy-body); }
body.cshq .cshq-hero__ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 28px; }
body.cshq .cshq-hero__reassure { margin-top: 20px; font-size: 15px; color: rgba(255,255,255,.6); }

/* Pill eyebrow (home) */
body.cshq .cshq-hero__pill {
  display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1);
  color: #cfe0ff; font-size: 13px; font-weight: 600; padding: 6px 13px; border-radius: 999px;
  margin-bottom: 24px; border: 1px solid rgba(255,255,255,.16);
}
body.cshq .cshq-hero__pill .cshq-flag { outline: none; }

/* Media column */
body.cshq .cshq-hero__media--framed {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px; box-shadow: var(--cshq-sh-dark); padding: 12px;
  /* shrink-wrap the (possibly portrait) screenshot instead of leaving empty glass gutters */
  width: fit-content; height: fit-content; justify-self: center; margin-inline: auto;
}
/* Give the hero phone shot more presence than the default 440px portrait frame */
body.cshq .cshq-hero--editorial .cshq-hero__media--framed .cshq-slot { height: 520px !important; }
body.cshq .cshq-hero__media .cshq-slot { overflow: hidden; }

/* ---- Variant: editorial (home) ---- */
body.cshq .cshq-hero--editorial .cshq-hero__inner {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center;
  padding-block: 84px 76px;
}
body.cshq .cshq-hero--editorial .cshq-hero__h1 { font-size: 60px; line-height: 1.0; margin: 0 0 20px; text-wrap: pretty; }
body.cshq .cshq-hero--editorial .cshq-hero__sub { font-size: 20px; line-height: 1.55; max-width: 44ch; margin-bottom: 0; }

/* ---- Variant: split (feature page) ---- */
body.cshq .cshq-hero--split .cshq-hero__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center;
  padding-block: 70px 60px;
}
body.cshq .cshq-hero--split .cshq-hero__h1 { font-size: 48px; margin: 14px 0 16px; }
body.cshq .cshq-hero--split .cshq-hero__sub { font-size: 19px; line-height: 1.6; max-width: 42ch; }

/* ---- Variant: centered ---- */
body.cshq .cshq-hero--centered .cshq-hero__inner {
  max-width: 820px; margin: 0 auto; text-align: center; padding-block: 70px 58px;
}
body.cshq .cshq-hero--centered .cshq-hero__h1 { font-size: 52px; line-height: 1.05; }
body.cshq .cshq-hero--centered .cshq-hero__sub { margin-left: auto; margin-right: auto; max-width: 52ch; }
body.cshq .cshq-hero--centered .cshq-hero__ctas { justify-content: center; }

/* ---- Variant: left ---- */
body.cshq .cshq-hero--left .cshq-hero__inner { max-width: 880px; margin: 0 auto; padding-block: 72px 62px; }
body.cshq .cshq-hero--left .cshq-hero__h1 { font-size: 52px; line-height: 1.04; }
body.cshq .cshq-hero--left .cshq-hero__sub { max-width: 58ch; }

/* Image placeholder slot (all launch imagery is client-supplied later) */
body.cshq .cshq-slot {
  position: relative; width: 100%; height: 100%; background: rgba(255,255,255,.04);
  display: flex; align-items: center; justify-content: center;
}
body.cshq .cshq-hero--split .cshq-slot,
body.cshq .cshq-hero--editorial .cshq-slot { background: rgba(255,255,255,.06); }
body.cshq .cshq-slot__ph {
  font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.5); text-align: center;
  padding: 16px; max-width: 30ch;
}

@media (max-width: 860px) {
  body.cshq .cshq-hero--editorial .cshq-hero__inner,
  body.cshq .cshq-hero--split .cshq-hero__inner { grid-template-columns: 1fr; gap: 32px; padding-block: 52px 44px; }
  body.cshq .cshq-hero--editorial .cshq-hero__h1 { font-size: 40px; }
  body.cshq .cshq-hero--split .cshq-hero__h1,
  body.cshq .cshq-hero--centered .cshq-hero__h1,
  body.cshq .cshq-hero--left .cshq-hero__h1 { font-size: 36px; }
}