/* Applicaa audit hero — interactive behaviour + preview styles
 * Companion to hero-audit.js. Scoped under [data-hero]; brand colour via the
 * compiled design-system --color-* custom properties.
 * The audit preview (.audit-page) is em-based: ONE font-size on .audit-page is
 * the single knob — everything inside sizes in em — and the frame is fixed at
 * aspect-ratio 1.4 with the overflow faded out at the bottom, so the section
 * stays compact regardless of content length (ported from the prototype).
 */

/* ---- hero headline: smaller than .h1 so it wraps to ~3 lines ---- */
[data-hero] .hero-h1 { font-size: 44px; line-height: 1.06; letter-spacing: -0.02em; }
@media (max-width: 991px) { [data-hero] .hero-h1 { font-size: 38px; } }
@media (max-width: 640px)  { [data-hero] .hero-h1 { font-size: 30px; line-height: 1.1; } }

/* ---- live "audit running" pulse dot ---- */
[data-hero] .hero-pulse {
  display: inline-block; width: 8px; height: 8px; border-radius: 9999px;
  background: var(--color-ok-green);
  box-shadow: 0 0 0 0 rgba(26, 138, 63, 0.55);
  animation: hero-pulse 2.2s infinite;
}
@keyframes hero-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(26, 138, 63, 0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(26, 138, 63, 0); }
}

/* ---- sector chips — base look + active state (layout stays on DS utilities) ---- */
[data-hero] .hero-chip {
  cursor: pointer; border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.70);
  transition: background .15s, color .15s, border-color .15s;
}
[data-hero] .hero-chip:hover { color: #fff; background: rgba(255, 255, 255, 0.18); }
[data-hero] .hero-chip.is-active { background: #fff; color: var(--color-ink-deep); font-weight: 600; }

/* ---- rotating preview fade ---- */
[data-hero] .is-fading { opacity: 0; }
[data-hero] .hero-mis { color: #1F9D55; font-weight: 600; }

/* ---- grade colours (badge + dimension chips), gradient like the prototype ---- */
[data-hero] .hero-grade--a { background: linear-gradient(135deg, #2BAE5E 0%, #1E8A48 100%); color: #fff; }
[data-hero] .hero-grade--b { background: linear-gradient(135deg, #4BB573 0%, #358F58 100%); color: #fff; }
[data-hero] .hero-grade--c { background: linear-gradient(135deg, #E8852B 0%, #C9651A 100%); color: #fff; }
[data-hero] .hero-grade--d { background: linear-gradient(135deg, #DD5F2A 0%, #BC4818 100%); color: #fff; }
[data-hero] .hero-grade--f { background: linear-gradient(135deg, #D14040 0%, #A82D2D 100%); color: #fff; }

/* ---- search field + typeahead dropdown ---- */
[data-hero] .hero-search { position: relative; }
[data-hero] .hero-input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 15px; color: var(--color-ink-deep); padding: 8px 0;
}
[data-hero] .hero-input::placeholder { color: var(--color-ink-mute); opacity: 1; }
[data-hero] .hero-suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--color-rule); border-radius: 14px;
  box-shadow: var(--shadow-mock); max-height: 320px; overflow-y: auto;
}
[data-hero] .hero-suggest[hidden] { display: none; }
[data-hero] .hero-suggest-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border-radius: 9px; cursor: pointer;
}
[data-hero] .hero-suggest-item.is-active,
[data-hero] .hero-suggest-item:hover { background: var(--color-primary-100); }
[data-hero] .hero-suggest-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
[data-hero] .hero-suggest-name {
  font-size: 14px; font-weight: 600; color: var(--color-ink-deep);
  display: flex; align-items: center; gap: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-hero] .hero-suggest-meta {
  font-size: 12px; color: var(--color-ink-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-hero] .hero-suggest-badge {
  flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-ok-green); background: rgba(26, 138, 63, 0.12);
  border-radius: 9999px; padding: 1px 7px;
}
[data-hero] .hero-suggest-cta { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--color-coral-500); white-space: nowrap; }
[data-hero] .hero-suggest-empty { padding: 12px; text-align: center; font-size: 13px; color: var(--color-ink-mute); }

/* ======================================================================
   AUDIT PREVIEW — em-based, single font-size knob, fixed 1.4 aspect-ratio
   ====================================================================== */
[data-hero] .preview-card {
  background: #fff; border-radius: 18px; overflow: hidden; min-width: 0; position: relative;
  box-shadow: 0 30px 60px -20px rgba(15,26,79,0.18), 0 18px 36px -18px rgba(15,26,79,0.12), 0 0 0 1px rgba(15,26,79,0.04);
}
[data-hero] .audit-page {
  font-size: 12px;            /* the single knob — everything below is em */
  width: 100%;
  aspect-ratio: 1.4;          /* fixed compact frame */
  padding: 1.571em 1.714em 1.714em;
  background: #F2F5FB;
  color: var(--color-ink-deep);
  font-family: var(--font-sans);
  overflow: hidden;
  position: relative;
}
[data-hero] .audit-page::after {   /* fade the clipped content at the bottom */
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 8em;
  background-image: linear-gradient(0deg, #F2F5FB, transparent); pointer-events: none;
}
@media (max-width: 991px) { [data-hero] .audit-page { font-size: 1.7vw; } }
@media (max-width: 640px)  { [data-hero] .audit-page { font-size: 2.8vw; } }

[data-hero] .audit-header { margin-bottom: 0.9em; position: relative; }
[data-hero] .audit-eyebrow {
  font-family: var(--font-heading); font-weight: 700; font-size: 0.75em;
  color: var(--color-ink-mute); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.571em;
}
[data-hero] .audit-school-name {
  font-family: var(--font-heading); font-weight: 800; font-size: 1.571em;
  letter-spacing: -0.02em; color: var(--color-ink-deep); margin: 0; transition: opacity .25s ease;
}
[data-hero] .audit-school-meta {
  font-size: 0.929em; color: var(--color-ink-mute);
  position: absolute; right: 0; bottom: 0.18em; transition: opacity .25s ease;
}

[data-hero] .audit-grid { display: grid; grid-template-columns: 20em 1fr; gap: 1.143em; align-items: start; }
[data-hero] .audit-score-card {
  background: #fff; border-radius: 1em; padding: 1.286em 1.143em; text-align: center;
  box-shadow: 0 0.071em 0 rgba(15,26,79,0.04); margin-bottom: 0.714em;
}
[data-hero] .audit-score-label {
  font-family: var(--font-heading); font-weight: 700; font-size: 0.786em;
  color: var(--color-ink-mute); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.091em;
}
[data-hero] .audit-score-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 2.571em; width: 1.778em; height: 1.778em; border-radius: 0.444em;
  font-family: var(--font-heading); font-weight: 800;
  box-shadow: 0 0.167em 0.389em -0.111em rgba(15,26,79,0.30); transition: opacity .25s ease;
}
[data-hero] .audit-score-title {
  font-size: 1.143em; margin-top: 0.625em; font-family: var(--font-heading); font-weight: 700;
  color: var(--color-ink-deep); transition: opacity .25s ease;
}
[data-hero] .audit-score-desc { font-size: 0.857em; margin-top: 0.5em; color: var(--color-ink-mute); line-height: 1.4; }
[data-hero] .audit-dim-list { display: flex; flex-direction: column; gap: 0.3em; }
[data-hero] .audit-dim {
  font-size: 0.929em; border-radius: 0.769em; padding: 0.649em 0.923em; background: #fff;
  display: flex; justify-content: space-between; align-items: center; color: var(--color-ink-deep);
  box-shadow: 0 0.077em 0 rgba(15,26,79,0.03);
}
[data-hero] .audit-dim-grade {
  font-size: 0.846em; width: 2em; height: 2em; border-radius: 0.545em;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; transition: opacity .25s ease; flex-shrink: 0;
}
[data-hero] .audit-panels { display: flex; flex-direction: column; gap: 0.5em; }
[data-hero] .audit-panel { background: #fff; border-radius: 1em; padding: 1em 1.286em; box-shadow: 0 0.071em 0 rgba(15,26,79,0.04); }
[data-hero] .audit-panel h4 {
  font-size: 1em; margin: 0 0 0.229em; gap: 0.571em; display: flex; align-items: center;
  font-family: var(--font-heading); font-weight: 700; color: var(--color-ink-deep);
}
[data-hero] .audit-panel p { font-size: 0.857em; margin: 0; color: var(--color-ink-mute); line-height: 1.4; }