/* ─────────────────────────────────────────────────────────────────────────
   app_hero — standardised app dashboard / surface hero.

   Use via `templates/includes/app_hero.html`. Every tenant app (appointments,
   subscriptions, messaging, shopping, blog, …) should render its top
   section through this partial so the platform looks consistent.

   Layout: two-column on ≥lg, single column below.
     Left  — eyebrow chip + title + lead + optional search + optional CTA row
     Right — up to 3 metric tiles + optional footer note

   Theming: pulls from existing platform tokens — --theme-primary,
   --theme-secondary, --public-text-strong, --public-text-muted,
   --public-card-bg, --public-subcard-bg, --public-divider-color.
   Dark mode is handled automatically because every value resolves
   through the public-* token chain (which site.css overrides for
   body.theme-dark / body.ui-mode-dark).

   No hard-coded hex outside var() fallbacks.
   ───────────────────────────────────────────────────────────────────── */

/* Section is full-width by default. The PARENT container (.page-shell,
   .appt-app-shell, .mx-auto .max-w-*) controls horizontal alignment so
   the hero stays flush with cards below it. Don't add max-width here. */
.app-hero-section {
  width: 100%;
  margin-bottom: 1.5rem;
}

.app-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid var(--public-divider-color, rgba(148, 163, 184, 0.18));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--theme-primary, #2563eb) 6%, var(--public-card-bg, #ffffff)) 0%,
    var(--public-card-bg, #ffffff) 60%
  );
  padding: 2rem 1.5rem;
  box-shadow:
    0 24px 48px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 color-mix(in srgb, #ffffff 60%, transparent);
}

@media (min-width: 768px) {
  .app-hero { padding: 2.5rem 2.25rem; }
}

.app-hero::before {
  content: '';
  position: absolute;
  inset: -40% -20% auto auto;
  width: 32rem; height: 32rem;
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--theme-primary, #2563eb) 18%, transparent) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.app-hero > * { position: relative; z-index: 1; }

.app-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: flex-start;
}

@media (min-width: 1024px) {
  .app-hero-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 1fr);
    gap: 3rem;
  }
}

/* ─── copy column ─── */

.app-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--public-divider-color, rgba(148, 163, 184, 0.22));
  background: color-mix(in srgb, var(--public-card-bg, #ffffff) 88%, transparent);
  padding: 0.4rem 0.95rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--public-text-muted, #475569);
  margin-bottom: 1.1rem;
}

.app-hero-eyebrow-dot {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--theme-primary, #2563eb);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary, #2563eb) 22%, transparent);
}

.app-hero-title {
  font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--public-text-strong, #0f172a);
  margin-bottom: 0.85rem;
}

.app-hero-lead {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--public-text-muted, #475569);
  max-width: 44rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) { .app-hero-lead { font-size: 1.05rem; } }

/* ─── search bar (optional) ─── */

.app-hero-search {
  position: relative;
  display: flex; align-items: center;
  border-radius: 999px;
  border: 1px solid var(--public-divider-color, rgba(148, 163, 184, 0.22));
  background: color-mix(in srgb, var(--public-card-bg, #ffffff) 92%, transparent);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(20px) saturate(150%);
  max-width: 36rem;
  margin-bottom: 1.25rem;
}

.app-hero-search-input {
  flex: 1;
  padding: 1rem 4.25rem 1rem 1.4rem;
  border: 0; background: transparent;
  color: var(--public-text-strong, #0f172a);
  font-size: 0.95rem; font-weight: 600;
}

.app-hero-search-input::placeholder {
  color: var(--public-text-muted, #64748b); font-weight: 500;
}

.app-hero-search-input:focus { outline: none; }

.app-hero-search-submit {
  position: absolute; right: 0.45rem; top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.65rem; height: 2.65rem;
  border-radius: 999px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--theme-primary, #2563eb), var(--theme-secondary, #0891b2));
  color: #ffffff;
  box-shadow: 0 12px 22px color-mix(in srgb, var(--theme-primary, #2563eb) 32%, transparent);
  transition: transform 0.15s ease;
}

.app-hero-search-submit:hover { transform: translateY(-50%) scale(1.03); }

/* ─── CTA row (optional) ─── */

.app-hero-cta-row {
  display: flex; flex-wrap: wrap; gap: 0.65rem;
  align-items: center;
}

.app-hero-cta {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.65rem 1.1rem; border-radius: 0.75rem;
  font-size: 0.85rem; font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.app-hero-cta:hover { opacity: 0.92; }

.app-hero-cta-primary {
  background: linear-gradient(135deg, var(--theme-primary, #2563eb), var(--theme-secondary, #0891b2));
  color: #ffffff;
  box-shadow: 0 12px 22px color-mix(in srgb, var(--theme-primary, #2563eb) 28%, transparent);
}

.app-hero-cta-secondary {
  background: color-mix(in srgb, var(--public-card-bg, #ffffff) 92%, transparent);
  color: var(--public-text-strong, #0f172a);
  border: 1px solid var(--public-divider-color, rgba(148, 163, 184, 0.22));
}

/* ─── metrics column ─── */

.app-hero-metrics {
  display: grid; gap: 0.85rem;
  padding: 1.25rem;
  border-radius: 1.4rem;
  border: 1px solid var(--public-divider-color, rgba(148, 163, 184, 0.18));
  background: color-mix(in srgb, var(--public-subcard-bg, #f1f5f9) 75%, transparent);
}

.app-hero-stat {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.05rem;
  border-radius: 1.1rem;
  border: 1px solid var(--public-divider-color, rgba(148, 163, 184, 0.18));
  background: color-mix(in srgb, var(--public-card-bg, #ffffff) 92%, transparent);
}

.app-hero-stat-body { min-width: 0; }

.app-hero-stat-label {
  font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--public-text-muted, #64748b);
}

.app-hero-stat-value {
  margin-top: 0.2rem;
  font-size: 1.5rem; font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--public-text-strong, #0f172a);
}

.app-hero-stat-badge {
  flex: 0 0 auto;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--theme-primary, #2563eb) 12%, transparent);
  color: var(--theme-primary, #2563eb);
  white-space: nowrap;
}

.app-hero-metrics-note {
  font-size: 0.78rem; line-height: 1.5;
  color: var(--public-text-muted, #64748b);
  margin-top: 0.4rem;
}

/* ─── dark-mode polish — only touch what site.css doesn't already cover ─── */

:is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .app-hero {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--theme-primary, #2563eb) 14%, var(--public-card-bg, #0f172a)) 0%,
    var(--public-card-bg, #0f172a) 60%
  );
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

/* ─────────────────────────────────────────────────────────────────────
   COMPACT variant — `app-hero--compact`
   Single-row layout: title + lead on the left, metric chips inline.
   Matches the visual rhythm of the platform Apps page (/apps/).
   Use for sub-pages or apps where the dashboard already has a big
   data card immediately below — keeps the hero from dwarfing it.
   ───────────────────────────────────────────────────────────────── */

.app-hero.app-hero--compact {
  padding: 1.4rem 1.5rem;
  border-radius: 1.25rem;
}

@media (min-width: 768px) {
  .app-hero.app-hero--compact { padding: 1.6rem 2rem; }
}

.app-hero.app-hero--compact::before { display: none; }

.app-hero.app-hero--compact .app-hero-grid {
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .app-hero.app-hero--compact .app-hero-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
  }
}

.app-hero.app-hero--compact .app-hero-eyebrow {
  margin-bottom: 0.65rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
}

.app-hero.app-hero--compact .app-hero-title {
  font-size: clamp(1.25rem, 1.4vw + 0.6rem, 1.65rem);
  margin-bottom: 0.4rem;
  line-height: 1.2;
}

.app-hero.app-hero--compact .app-hero-lead {
  font-size: 0.88rem;
  margin-bottom: 0.9rem;
  max-width: 60rem;
}

.app-hero.app-hero--compact .app-hero-cta-row { gap: 0.5rem; }
.app-hero.app-hero--compact .app-hero-cta     { padding: 0.5rem 0.9rem; font-size: 0.8rem; }

/* Metric column collapses to an inline chip row */
.app-hero.app-hero--compact .app-hero-metrics {
  display: flex; flex-direction: row; flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.app-hero.app-hero--compact .app-hero-stat {
  flex: 0 0 auto;
  padding: 0.5rem 0.85rem;
  gap: 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--public-card-bg, #ffffff) 95%, transparent);
}

.app-hero.app-hero--compact .app-hero-stat-body {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
}

.app-hero.app-hero--compact .app-hero-stat-label {
  font-size: 0.6rem; letter-spacing: 0.14em; margin: 0;
}

.app-hero.app-hero--compact .app-hero-stat-value {
  font-size: 1rem; margin: 0; letter-spacing: -0.01em;
}

.app-hero.app-hero--compact .app-hero-stat-badge {
  padding: 0.15rem 0.45rem;
  font-size: 0.6rem;
}

.app-hero.app-hero--compact .app-hero-metrics-note { display: none; }