/* ════════════════════════════════════════════════════════════════
   /tools directory (index.twig) — layout only. Composes the night kit
   (components/night.css) + the shared bookend (tool-night-hero.css).
   The hero is a full-container-width night band with the search on it;
   the card grid, filters, and cards get a premium but light restyle.
   Every JS hook (tools-directory.js) is preserved.
   ════════════════════════════════════════════════════════════════ */

.tools-index-page { background: var(--color-gray-50); }

/* ══ Hero — full-width night band with the search as the do-first action ══ */
.ti-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-bottom: var(--space-6);
    padding: var(--space-16) var(--space-6);
    text-align: center;
    border-radius: var(--radius-2xl);
}
.ti-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ti-hero__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%);
}
/* Graph is drawn at rest (no entrance animation) so the hero never has an
   unpainted/stalled frame. */
.ti-hero__graph { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 60%; opacity: 0.9; }

.ti-hero__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.ti-hero__title {
    margin: var(--space-5) auto 0;
    max-width: 640px;
    font-size: clamp(2rem, 5vw, 3.15rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.07;
    text-wrap: balance;
}
.ti-hero__sub { max-width: 560px; margin: var(--space-4) auto 0; text-wrap: pretty; }

/* Search box on the night surface (the primary action) */
.ti-hero .tools-search { max-width: 560px; margin: var(--space-8) auto 0; }
.ti-hero .tools-search__wrap { position: relative; }
.ti-hero .tools-search__icon {
    position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
    color: var(--night-text-faint); font-size: 16px; pointer-events: none; z-index: 1;
}
/* tools.css .tools-search__input sets background/border with !important, so the
   night restyle must use !important + higher specificity to win. */
.ti-hero .tools-search__input {
    height: 56px;
    padding: 14px 46px !important;
    font-size: var(--font-size-base) !important;
    background: rgba(20, 26, 48, 0.72) !important;
    border: 1px solid rgba(165, 180, 252, 0.28) !important;
    color: var(--color-white);
    border-radius: var(--radius-full) !important;
    box-shadow: none !important;
}
.ti-hero .tools-search__input::placeholder { color: var(--night-text-faint); }
.ti-hero .tools-search__input:focus {
    border-color: var(--color-primary-light) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
    outline: none;
}
.ti-hero .tools-search__clear {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: var(--night-text-faint); cursor: pointer; font-size: 15px; z-index: 1;
}
.ti-hero .tools-search__clear:hover { color: var(--color-white); }
.ti-hero .tools-search__count { margin-top: var(--space-3); font-size: var(--font-size-sm); color: var(--night-text-dim); font-weight: 600; }

/* Trust chips under the search */
.ti-hero__feats {
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4);
    margin: var(--space-5) 0 0;
}
.ti-hero__feats span {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: var(--font-size-sm); font-weight: 600; color: var(--night-text-dim);
}
.ti-hero__feats i { color: #34d399; }

/* ══ Category filters — pill row ═══════════════════════════════════ */
.tools-filters { margin: 0 0 var(--space-6); }
.tools-filters .tabs {
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2);
    border: 0;
}
.tools-filters .tabs__item {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    min-height: 44px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    background: var(--color-white);
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    margin: 0;
}
.tools-filters .tabs__item:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);
}
.tools-filters .tabs__item.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-sm);
}
.tools-filters .tabs__item i { font-size: 0.85rem; }
.tools-filters .tabs__count {
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    background: var(--color-gray-100);
    color: var(--color-gray-500);
}
.tools-filters .tabs__item.active .tabs__count { background: rgba(255, 255, 255, 0.22); color: var(--color-white); }

/* ══ Tool card grid — premium light cards ═════════════════════════ */
.tools-index-page .tools-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
    margin-top: 0;
}
.tools-index-page .tool-card {
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}
.tools-index-page .tool-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}
.tools-index-page .tool-card__header { margin-bottom: var(--space-4); }
.tools-index-page .tool-card__icon {
    width: 46px; height: 46px;
    border-radius: var(--radius-lg);
    background: var(--color-primary-soft, #EEF2FF);
    color: var(--color-primary);
    font-size: 1.15rem;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.tools-index-page .tool-card:hover .tool-card__icon {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-1px);
}
.tools-index-page .tool-card__title { font-size: var(--font-size-lg); font-weight: 700; }
.tools-index-page .tool-card__description { font-size: var(--font-size-sm); line-height: 1.55; }
.tools-index-page .tool-card__cta {
    margin-top: var(--space-4);
    font-weight: 700;
    color: var(--color-primary);
}

/* ══ Bottom bookend — full container width to match the hero + grid ══
   The shared .tnh-final caps at 760px for the narrow individual tool pages;
   this directory runs full width, so uncap it here (inner content stays
   centered) so the panel does not visibly shrink below the grid. */
.tools-index-page .tnh-final {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* ══ Section rhythm ════════════════════════════════════════════════ */
.tools-index-page .tool-content,
.tools-index-page .tool-faq-section { max-width: 900px; margin-left: auto; margin-right: auto; }

/* ══ Mobile ════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .ti-hero { padding: var(--space-10) var(--space-5) var(--space-12); border-radius: var(--radius-xl); }
    .ti-hero__sub { font-size: var(--font-size-base); }
    .ti-hero .tools-search { margin-top: var(--space-6); }
    .tools-filters .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--space-2);
        -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
        mask-image: linear-gradient(90deg, #000 90%, transparent);
    }
    .tools-filters .tabs__item { flex-shrink: 0; }
    .tools-index-page .tools-grid { grid-template-columns: 1fr; }
}