/* ==========================================================================
   Risos Shared — Marketing Hero Section
   Derived from: tokens.css fluid-type scale (--fs-h1, --fs-display)
                 + legal.html h1.lg-title pattern (display+grad-text)
   Created: 28 Mei 2026 for risos.co.id + risos.id

   Structure:
     <section class="rs-hero">
       <div class="rs-hero__inner">
         <span class="rs-hero__kicker">PT RISET SINERGI SOSIAL</span>
         <h1 class="rs-hero__title">
           Riset akademik <em>diperkuat AI</em>.
         </h1>
         <p class="rs-hero__lede">Sub-headline / value prop ...</p>
         <div class="rs-hero__cta">
           <a class="btn btn-primary btn-lg" href="...">Mulai gratis</a>
           <a class="btn btn-ghost btn-lg" href="...">Pelajari lebih</a>
         </div>
       </div>
     </section>

   Modifier:
     .rs-hero--dark      navy gradient bg (for landing pages)
     .rs-hero--compact   smaller padding for inner pages

   Depends: tokens.css, button.css (for .btn-primary in CTA)
   ========================================================================== */

.rs-hero {
  position: relative;
  padding: clamp(72px, 12vw, 140px) var(--container-pad, clamp(1.25rem, 4vw, 2.5rem)) clamp(56px, 10vw, 110px);
  background: var(--bg, var(--bg-elev, #ffffff));
  overflow: hidden;
}

.rs-hero__inner {
  max-width: var(--container, 1240px);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.rs-hero__kicker {
  display: inline-block;
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--txt-faint, var(--text-disabled, #94a3b8));
  margin-bottom: 18px;
  padding: 4px 12px;
  border: 1px solid var(--line, var(--border-default, #e2e8f0));
  border-radius: 999px;
}

.rs-hero__title {
  font-family: var(--ff-display, 'Playfair Display', serif);
  font-weight: 500;
  font-size: var(--fs-h1, clamp(2.6rem, 1.5rem + 4.5vw, 5.8rem));
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--txt, var(--text-primary, #0f172a));
  margin: 0 0 22px;
  max-width: 920px;
}
.rs-hero__title em {
  font-style: italic;
  background: var(--grad-text, linear-gradient(120deg, #1e40af, #06b6d4));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.rs-hero__lede {
  font-family: var(--ff-body, system-ui, sans-serif);
  font-size: var(--fs-lede, clamp(1.05rem, 1rem + 0.4vw, 1.2rem));
  line-height: 1.55;
  color: var(--txt-muted, var(--text-muted, #475569));
  margin: 0 0 32px;
  max-width: 640px;
}

.rs-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Optional decorative blob (uses pseudo-element so no extra markup) */
.rs-hero::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, color-mix(in oklab, var(--c-brand, #1e40af) 12%, transparent), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* ── Modifier: dark hero (for landing) ──────────────────────────────── */
.rs-hero--dark {
  background: linear-gradient(180deg, var(--c-brand-deep, #0c1c3d) 0%, var(--c-brand-mid, #1e3a8a) 100%);
  color: var(--c-text-on-dark, #f1f5f9);
}
.rs-hero--dark .rs-hero__title { color: var(--c-text-on-dark, #f1f5f9); }
.rs-hero--dark .rs-hero__lede  { color: var(--c-text-on-dark-muted, #cbd5e1); }
.rs-hero--dark .rs-hero__kicker {
  color: var(--c-text-on-dark-faint, #94a3b8);
  border-color: var(--c-line-dark, rgba(255,255,255,0.08));
}

/* ── Modifier: compact hero (inner pages) ───────────────────────────── */
.rs-hero--compact {
  padding-top: clamp(48px, 7vw, 80px);
  padding-bottom: clamp(32px, 5vw, 56px);
}
.rs-hero--compact .rs-hero__title {
  font-size: var(--fs-h2, clamp(2rem, 1.4rem + 2.4vw, 3.6rem));
}