/* ════════════════════════════════════════════════════════════════
   Tool Night Hero — shared premium hero + bookend for bespoke tool
   pages. Composes the night kit (components/night.css). Layout only.
   A bespoke tool page loads this AFTER tools.css and uses:
     <section class="tnh night night--panel"> ... eyebrow / H1 / sub
     <section class="tnh-final night night--panel"> ... bookend
   plus .tnh-trust / .tnh-features / .tnh-feature under its input.
   The SVG depth gradients (ids tnhGraphStroke / tnhGraphFill) live in
   the hero markup; the bookend reuses them by reference.
   Titles/subs also carry the global night__title / night__sub classes
   so they degrade gracefully if this file is ever served stale.
   ════════════════════════════════════════════════════════════════ */

/* ══ Hero ══════════════════════════════════════════════════════════ */
.tnh {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Cap the width so the hero reads consistently across tools, even on the
       full-width .page-container pages (e.g. the thumbnail previewer). The tool
       body below can still use the full container. */
    max-width: 760px;
    margin: 0 auto var(--space-4);
    padding: var(--space-12) var(--space-6) var(--space-16);
    text-align: center;
}
.tnh__bg,
.tnh-final__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.tnh__grid {
    position: absolute;
    inset: -1px;
    background-image:
        linear-gradient(rgba(148, 163, 220, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 220, 0.055) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 78%);
    mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 78%);
}
.tnh__graph {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 62%;
    opacity: 0.9;
}
/* Graph is drawn at rest (no entrance animation) so the hero never shows an
   unpainted/stalled frame over the dark surface. */
.tnh__inner {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
}
.tnh__title {
    margin: var(--space-5) auto 0;
    max-width: 600px;
    font-size: clamp(2rem, 5vw, 3.15rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.07;
    text-wrap: balance;
}
.tnh__sub {
    max-width: 560px;
    margin: var(--space-4) auto 0;
    text-wrap: pretty;
}

/* ══ Trust line + feature chips (optional, under the tool input) ════ */
.tnh-trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: var(--space-4) 0 0;
    justify-content: center;
}
.tnh-trust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-600);
}
.tnh-trust i { color: var(--color-success); }
.tnh-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: var(--space-5);
}
.tnh-feature {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-gray-600);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    padding: 6px 11px;
    border-radius: var(--radius-full);
}
.tnh-feature i { color: var(--color-primary); font-size: 0.8rem; }

/* ══ Bookend — the night final CTA ═════════════════════════════════ */
.tnh-final {
    position: relative;
    overflow: hidden;
    max-width: 760px;
    margin: var(--space-10) auto;
    padding: var(--space-12) var(--space-6);
    text-align: center;
    border-radius: var(--radius-2xl);
}
.tnh-final__inner {
    position: relative;
    z-index: 1;
    max-width: 620px;
    margin: 0 auto;
}
.tnh-final .night__eyebrow { margin-bottom: var(--space-5); }
.tnh-final__title {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 5vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: var(--color-white);
    margin: 0;
    text-wrap: balance;
}
.tnh-final__title em { font-style: normal; color: #a5b4fc; }
.tnh-final__sub {
    max-width: 520px;
    margin: var(--space-4) auto var(--space-8);
    font-size: var(--font-size-lg);
    color: var(--night-text-dim, #b9c2e0);
    line-height: 1.6;
    text-wrap: pretty;
}
.tnh-final__hint {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin: var(--space-4) 0 0;
}

/* ══ Mobile ════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .tnh {
        padding: var(--space-10) var(--space-5) var(--space-12);
        margin-bottom: 0;
    }
    .tnh__sub { font-size: var(--font-size-base); }
    .tnh-final { padding: var(--space-10) var(--space-5); margin: var(--space-8) 0; }
    .tnh-final .button { max-width: 100%; white-space: normal; }
}