/* ── Admin landing hero — shared aurora surface ────────────────
 *
 * Generalises the "Today, at a glance" hero that ships on the
 * staff-absences admin hub so every admin landing can wear the
 * same Apple-HIG command-surface aesthetic:
 *   * paper-on-paper aurora in light mode, navy-on-navy in dark
 *   * Instrument Serif italic accent in the title
 *   * teal radial glow anchored top-right
 *   * optional glass-pill KPI row beneath
 *
 * Driven by the {% from 'admin/_admin_hero.html' %} macro in
 * Jinja so each landing just supplies (eyebrow, title, italic,
 * sub, icon, pills, cta) — the visual recipe lives here.
 * ─────────────────────────────────────────────────────────── */

.adm-hero {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  margin: 14px 0 26px;
  padding: 36px clamp(20px, 3vw, 36px) 32px;
  /* Signature navy "command surface" in BOTH themes (May 21) — matches
     the v2 admin hero (.av2-hero) + the My Day heroes: navy gradient +
     teal/sky aurora top-right + a squared grid accent (the ::before). */
  background:
    radial-gradient(120% 130% at 100% -20%, rgba(37, 214, 173, 0.30) 0%, rgba(56, 189, 248, 0.16) 28%, transparent 62%),
    linear-gradient(180deg, #0E1A33 0%, #0A1224 100%);
  color: #ECF2FF;
  border: 0.5px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 14px 40px rgba(8, 14, 28, 0.40);
}
/* Slim variant — title-only section heroes (e.g. Account/settings): less
   vertical padding + tighter margin so the banner reads as a slim header. */
.adm-hero--slim {
  padding: 20px clamp(20px, 3vw, 36px) 18px;
  margin: 10px 0 16px;
}
/* The hero adopts its parent's width — no internal max-width cap.
 * Pages that want a centered narrow column wrap their whole content
 * (hero included) in `.page-centered`; pages with data-dense grids
 * stay full-bleed. Matches the prop-hero / ml-hero behaviour the
 * landings used before this rollout. */
/* Squared grid accent, masked to fade into the upper-right — mirrors
   .av2-hero::after / .mdt-hero::after. */
.adm-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(60% 90% at 100% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(60% 90% at 100% 0%, #000 0%, transparent 70%);
}
.adm-hero > * { position: relative; z-index: 1; }

/* ── Head row — icon chip + eyebrow / title / sub ── */
.adm-hero-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 8px;
}
.adm-hero-head-icon {
  width: 64px;
  height: 64px;
  border-radius: 22.37%;          /* squircle ratio */
  background: linear-gradient(135deg, var(--brand-teal-bright, #25D6AD), var(--brand-teal, #0F9F87));
  box-shadow:
    0 8px 22px rgba(37, 214, 173, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.10) inset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-navy, #0A1628);
  flex: 0 0 auto;
}
@media (min-width: 1024px) { .adm-hero-head-icon { width: 72px; height: 72px; } }
@media (min-width: 1920px) { .adm-hero-head-icon { width: 80px; height: 80px; } }
.adm-hero-head-icon svg { width: 50%; height: 50%; stroke-width: 2; }

.adm-hero-titles { min-width: 0; }

.adm-hero-eyebrow {
  font: 600 10.5px/1 var(--brand-font-body, system-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.adm-hero-eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.adm-hero-title {
  font: 400 clamp(36px, 4.5vw, 56px)/1.05 'Instrument Serif', Georgia, serif;
  color: #fff;
  margin: 10px 0 4px;
  letter-spacing: -0.01em;
}
.adm-hero-title em {
  font-style: italic;
  color: var(--brand-teal-bright, #25D6AD);
}
.adm-hero-sub {
  font: 400 15px/1.5 var(--brand-font-body, system-ui);
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
  max-width: 64ch;
}

/* ── Glass-pill KPI row (optional) ── */
.adm-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.adm-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px) saturate(140%);
          backdrop-filter: blur(8px) saturate(140%);
}
.adm-hero-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand-teal, #0F9F87);
  flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(37, 214, 173, 0.20);
}
.adm-hero-pill-dot.is-amber { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22); }
.adm-hero-pill-dot.is-rose  { background: #e11d48; box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.22); }
.adm-hero-pill-dot.is-indigo{ background: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22); }
.adm-hero-pill-label {
  font: 600 10px/1 var(--brand-font-body, system-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}
.adm-hero-pill-value {
  font: 600 14px/1 var(--brand-font-body, system-ui);
  color: var(--brand-teal-bright, #25D6AD);
  white-space: nowrap;
}
.adm-hero-pill-value.is-amber { color: #fcd34d; }
.adm-hero-pill-value.is-rose  { color: #fb7185; }

/* ── Optional CTA aligned right (hidden on phones) ── */
.adm-hero-cta {
  display: none;
}
@media (min-width: 768px) {
  .adm-hero-head {
    align-items: center;
  }
  .adm-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 0.55rem 1rem;
    background: var(--brand-teal-bright, #25D6AD);
    color: var(--brand-navy, #0A1628);
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 0.625rem;
    text-decoration: none;
    transition: background-color 0.15s;
    flex-shrink: 0;
  }
  .adm-hero-cta:hover { background: #43e9be; color: var(--brand-navy, #0A1628); }
}