/**
 * AI Categories (`/ai-categories/`) — refinement layer.
 *
 * Prints after `modules/tool/assets/css/categories-page.css`, which stays the
 * design of record: the hero structure, the card, the subcategory rows, the
 * counts, the ordering and the grid are the parent's and are not touched here.
 * This file adjusts type scale, hero measure and vertical rhythm so the page
 * reads as part of the same header system as `/tools/`.
 *
 * Every selector is one the parent already declares, at the same specificity,
 * so ordering alone decides the winner and nothing here needs `!important`.
 * That also means the parent's own `@media (max-width: 768px)` block — which
 * re-sets the hero padding and the H1 size — is superseded by the fluid values
 * below at every width, which is why this file carries no mobile breakpoint of
 * its own: the clamps already cover 360px through 1440px.
 *
 * Reference values measured on `/tools/` at 1440px (`.tr-tools__*`):
 *   masthead padding-block 56px / 36px, intro padding-block-end 56px,
 *   breadcrumb margin-bottom 16px, head measure 62ch, title 44px/1.1 balanced,
 *   deck 18px/1.5 at 54ch, 12px under the title.
 *
 * @package TiorAI
 */

/* ==========================================================================
   Hero — one continuous surface
   ========================================================================== */

/*
 * The crop.
 *
 * The hero paints nothing of its own, so it shows the body surface (#070B12 in
 * dark), while the section that follows sets `--color-bg-primary` (#0B0F17).
 * Two page backgrounds meeting at the hero's bottom edge draw a hard horizontal
 * rule right under the deck — the hero looked cut off because a visible seam
 * ends it, not because its content is clipped.
 *
 * Dropping the second background puts the whole page on one surface, which is
 * what `/tools/` does (`.tr-tools` paints once, across masthead and results
 * alike). `transparent` rather than a named token deliberately: it inherits
 * whatever the body is painting, so light and dark stay continuous without this
 * file having to pick a value for either.
 *
 * The hero's `overflow: hidden` was inspected and left alone — its `::before`
 * is `inset: 0`, so nothing reaches the edge to be clipped. There is no fixed
 * height, max-height, negative margin or absolutely positioned content in the
 * hero; its height is the sum of its padding and its three text blocks, and
 * stays that way below.
 */
.tiorai-categories-page {
	background-color: transparent;

	/* Air between the deck and the first row of cards. Paired with the hero's
	   own bottom padding below, the introduction is separated from the index by
	   72px at desktop and 52px at phone widths, instead of the deck sitting
	   directly on the grid. */
	padding-top: var(--space-6);
}

/*
 * Content-driven height: padding only, no height of any kind, so the band grows
 * with its text at every width. Top and bottom are both fluid, and the inline
 * padding now matches the grid's own gutter — `clamp(16px, 4vw, 24px)` in
 * `.categories-container` — so the hero text and the cards share one left edge
 * on narrow screens instead of stepping 4px apart.
 */
.tiorai-categories-hero {
	padding: clamp(2.25rem, 4.5vw, 4rem) clamp(16px, 4vw, 24px) clamp(1.75rem, 3.5vw, 3rem);
}

/*
 * The hero measure, in characters rather than pixels so it holds if the type
 * scale moves — the same unit `/tools/` uses on `.tr-tools__masthead-head`.
 *
 * 68ch, not that hero's 62ch. The two decks are not the same length: `/tools/`
 * runs 140 characters, this one 165, and at 62ch (626px) the extra 25 characters
 * tip it onto a third line. The threshold was measured, not guessed — this deck
 * breaks to two lines at 660px and to three at 659px — so the measure is set
 * ~28px clear of it, which leaves room for the count in the sentence to reach
 * five digits without the block growing a line.
 *
 * Still a refinement of the parent's 750px in the direction the brief asks for:
 * narrower, and paired with the smaller type below it turns a ~94-character
 * line into a balanced pair of ~82.
 */
.hero-container {
	max-width: 68ch;
}

/* 16px under the trail, matching `.tr-tools__masthead .tr-breadcrumbs`. The
   trail itself is already the shared `.tr-breadcrumbs` component on both pages
   — same renderer, same type, same colours, same hover and focus — so spacing
   is the only thing left to unify. */
.tiorai-categories-hero .tiorai-breadcrumb {
	margin-bottom: var(--space-4);
}

/* ==========================================================================
   Hero typography
   ========================================================================== */

/*
 * 40px → 36.8px at desktop, an 8% reduction, and fluid the whole way down
 * rather than stepping to a flat 32px at 768px. Lower bound is 1.75rem, the
 * same floor `/tools/` uses, so the two headlines shrink into the same size at
 * phone widths.
 *
 * The weight and the tracking are the parent's and are left alone.
 */
.tiorai-categories-hero h1 {
	font-size: clamp(1.75rem, 1.05rem + 1.9vw, 2.3rem);
	line-height: 1.15;
	margin-bottom: var(--space-4);

	/* Breaks at a phrase boundary instead of wherever the box ends, which is
	   what keeps the wrapped mobile headline reading as two even lines. */
	text-wrap: balance;

	/*
	 * Solid ink, not the brand gradient — the same three declarations
	 * `.tr-tools__title` uses, so the two headlines are now painted the same
	 * way as well as sized the same way.
	 *
	 * `--color-text-primary` rather than a literal white: it is `#F8FAFC` in
	 * dark, which is the white being asked for, and `#0B0F17` in light, where
	 * a literal white headline would be invisible on the white page.
	 *
	 * All three declarations are needed. Dropping the gradient alone leaves
	 * `-webkit-text-fill-color: transparent` in force, which paints nothing at
	 * all; `background-clip` is left to the parent since it has no effect once
	 * there is no background image to clip.
	 */
	background: none;
	-webkit-text-fill-color: currentColor;
	color: var(--color-text-primary);
}

/*
 * 17.6px → 16px, and the leading down from 1.6 to the theme's own
 * `--line-height-normal`, which is what `/tools/` sets on its deck.
 *
 * Width is the bigger change. The copy is ~165 characters; at the old 750px it
 * ran as two lines of roughly 94 characters, well past a comfortable measure.
 * Inheriting the 62ch container and balancing gives two even lines at every
 * desktop width, and the smaller type is what keeps it at two rather than
 * pushing it to three.
 */
.tiorai-categories-hero .hero-subtitle {
	font-size: var(--font-size-base);
	line-height: var(--line-height-normal);
	text-wrap: balance;
}

/* ==========================================================================
   Category card — type only
   ==========================================================================
   Structure, padding, row height, separators and grid gaps are the parent's
   and are untouched. The four rules below change nothing but font size, weight
   and one padding that pairs with its own type reduction.
   ========================================================================== */

/* 19.2px → 18px (`--font-size-lg`). */
.parent-info h2 {
	font-size: var(--font-size-lg);
}

/* The group total, quieter: 15.2px → 14px (`--font-size-sm`) and 800 → 700.
   It stays the pill the approved design gives it — same tint, same border,
   same radius — it just stops competing with the category name beside it. */
.tools-badge strong {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
}

/* 15.2px → 14.4px. The count next to it keeps its size and its tertiary
   colour, so the gap that marks it as secondary widens rather than closes. */
.child-name {
	font-size: 0.9rem;
}

/*
 * A collision guard, not a spacing change.
 *
 * The row is `justify-content: space-between` with no gap, so once a long name
 * wraps to the width of its cell the count is pushed flush against it — at
 * 360px "AI Content Creation Tools1,315" runs as one string. `gap` on a
 * space-between row only takes effect when the two items would otherwise sit
 * closer than the gap, so this changes nothing at any width where the row has
 * slack: padding, row height and separator spacing are untouched.
 */
.child-item {
	gap: var(--space-3);
}

/* 15.2px → 14px, and 14px of padding → 12px so the row tightens with its own
   text instead of leaving the reduction as slack. */
.view-all-link,
.direct-tools-link {
	font-size: var(--font-size-sm);
	padding: var(--space-3);
}