/**
 * Generic inner-page hero. Merges the former about-hero and contact-hero looks
 * into one set of .dsc-hero* classes; the differences are opt-in:
 *   .dsc-hero--v1 / --v2      → gradient direction + column ratio
 *   .dsc-hero__metrics        → number/label/desc tiles (about look)
 *   .dsc-hero__links          → label/value chips (contact look)
 *   .dsc-hero__side--panel    → side cards wrapped in a panel surface
 *   .dsc-hero__card--brand/--soft → accent surfaces
 */

.dsc-hero-band { padding: 0 0 10px; }

.dsc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr);
  align-items: start;
  gap: 18px;
  padding: 24px;
  border-radius: 30px;
  background:
    radial-gradient(circle at top right, rgba(var(--glow-1),0.14), transparent 24%),
    radial-gradient(circle at bottom left, rgba(var(--glow-2),0.12), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,0.96), rgba(242,250,255,0.92));
  box-shadow: 0 18px 40px rgba(44,48,72,0.08);
  border: 1px solid rgba(255,255,255,0.9);
}

/* Variant 2 (the former contact look): different gradient origin + ratio. */
.dsc-hero--v2 {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
  background:
    radial-gradient(circle at top left, rgba(var(--glow-1),0.15), transparent 24%),
    radial-gradient(circle at bottom right, rgba(var(--glow-2),0.12), transparent 24%),
    linear-gradient(145deg, rgba(255,255,255,0.98), rgba(239,248,255,0.94));
}

.dsc-hero__copy, .dsc-hero__side { min-width: 0; }

/* --- highlights: metrics --- */
.dsc-hero__metrics {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 24px;
}
.dsc-hero__metric {
  padding: 24px;
  border-radius: 24px;
  background: rgba(255,255,255,0.78);
  box-shadow: inset 0 0 0 1px rgba(44,48,72,0.07), 0 18px 32px rgba(44,48,72,0.05);
}
.dsc-hero__metric strong { display: block; font-size: 1.8rem; margin-bottom: 8px; }
.dsc-hero__metric span   { font-weight: 700; }
.dsc-hero__metric p      { color: var(--muted); line-height: 1.8; margin: 8px 0 0; }

/* --- highlights: links --- */
.dsc-hero__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.dsc-hero__link {
  display: grid;
  gap: 8px;
  padding: 20px;
  border-radius: 24px;
  background: rgba(255,255,255,0.82);
  box-shadow: inset 0 0 0 1px rgba(44,48,72,0.08), 0 18px 32px rgba(44,48,72,0.05);
  text-decoration: none;
  color: var(--text);
}
a.dsc-hero__link { transition: transform 0.2s ease, box-shadow 0.2s ease; }
a.dsc-hero__link:hover { transform: translateY(-2px); }
.dsc-hero__link-label { display: block; color: var(--brand-strong); font-weight: 700; }
.dsc-hero__link strong { margin: 0; }

/* --- side column + cards --- */
.dsc-hero__side { display: grid; gap: 18px; align-content: start; }
.dsc-hero__side--panel {
  padding: 22px;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,0.75);
}
.dsc-hero__card {
  padding: 24px;
  border-radius: 24px;
  background: rgba(255,255,255,0.78);
  box-shadow: inset 0 0 0 1px rgba(44,48,72,0.07), 0 18px 32px rgba(44,48,72,0.05);
}
.dsc-hero__card--brand { background: linear-gradient(135deg, rgba(44,48,72,0.18), rgba(196,122,46,0.16)); }
.dsc-hero__card--soft  { background: linear-gradient(135deg, rgba(44,48,72,0.08), rgba(196,122,46,0.12)); }
.dsc-hero__eyebrow { display: block; color: var(--brand-strong); font-weight: 700; }
.dsc-hero__card h2 { margin: 0; }
.dsc-hero__card p  { color: var(--muted); line-height: 1.8; margin: 8px 0 0; }

@media (max-width: 980px) {
  .dsc-hero, .dsc-hero--v2, .dsc-hero__metrics { grid-template-columns: 1fr; }
}