/* OpenPress Tools directory (/tools/). Loaded on the Tool archive only. Uses existing tokens/components. */

/* Page header ------------------------------------------------------------ */
/* Ink hero band shared by every directory archive; always dark, both themes. */
.op-page-header {
	--op-bg: var(--op-black);
	--op-bg-elevated: var(--op-dark-surface);
	--op-text: var(--op-snow);
	--op-text-muted: #A9B3CE;
	--op-border: var(--op-border-dark);
	--op-link: #7CA5FF;
	--op-focus: #7CA5FF;
	color-scheme: dark;
	position: relative;
	overflow: hidden;
	padding-block: var(--op-space-8) var(--op-space-7);
	background:
		radial-gradient(44rem 22rem at 85% -10%, rgb(91 141 255 / 0.28), transparent 70%),
		radial-gradient(36rem 20rem at 0% 110%, rgb(167 139 250 / 0.2), transparent 70%),
		var(--op-black);
	color: var(--op-text);
	border-bottom: 1px solid var(--op-border-dark);
}
.op-page-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgb(160 178 255 / 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgb(160 178 255 / 0.06) 1px, transparent 1px);
	background-size: 3.5rem 3.5rem;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 70%);
	mask-image: linear-gradient(to right, transparent, #000 70%);
	pointer-events: none;
}
.op-page-header > * { position: relative; }
.op-page-header__title {
	margin: 0 0 var(--op-space-4);
	font-size: var(--op-text-h1);
	line-height: 1.02;
	letter-spacing: -0.04em;
	color: #fff;
}
.op-page-header__lead {
	margin: 0;
	max-width: 40rem;
	color: var(--op-text-muted);
	font-size: var(--op-text-lead);
	line-height: 1.55;
}

/* Content ---------------------------------------------------------------- */
/* Bottom spacing comes from the footer's own top margin. */
.op-tools__content { padding-block: var(--op-space-7) 0; }

/* Breadcrumb sits above the eyebrow in the page header */
.op-tools__crumbs { margin-bottom: var(--op-space-4); }

/* Archive header: eyebrow */
.op-page-header__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 var(--op-space-4);
	color: var(--op-link);
	font-family: var(--op-font-display);
	font-size: var(--op-text-meta);
	font-weight: var(--op-weight-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.op-page-header__eyebrow::before { content: ""; width: 2rem; height: 2px; border-radius: 2px; background: var(--op-gradient); }

/* Category navigation: a tab bar, not a row of buttons ----------------------------- */
.op-tools__nav { margin-bottom: var(--op-space-6); border-bottom: 1px solid var(--op-border-strong); }
.op-chips { display: flex; flex-wrap: wrap; gap: 0 var(--op-space-5); margin: 0; padding: 0; list-style: none; }
.op-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--op-text-muted);
	font-family: var(--op-font-display);
	font-size: 1rem;
	font-weight: var(--op-weight-semibold);
	text-decoration: none;
	transition: color var(--op-transition);
}
.op-chip::after {
	content: "";
	position: absolute;
	inset: auto 0 -1px 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--op-gradient);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--op-transition);
}
.op-chip:hover { color: var(--op-text); }
.op-chip:hover::after { transform: scaleX(0.4); }
.op-chip[aria-current="page"] { background: transparent; color: var(--op-text); }
.op-chip[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 639px) {
	.op-tools__nav { margin-inline: calc(var(--op-gutter) * -1); padding-inline: var(--op-gutter); overflow-x: auto; scrollbar-width: none; }
	.op-tools__nav::-webkit-scrollbar { display: none; }
	.op-chips { flex-wrap: nowrap; }
	.op-chips > li { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .op-chip::after { transition: none; } }

/* Grids: same structure, different feel per content type -------------------------- */
.op-tools__content { padding-bottom: 0; }
.op-tools__grid { gap: var(--op-space-5); }
.op-reviews__grid { gap: var(--op-space-5) var(--op-space-5); }
/* Comparisons are matchups: two wide columns so both tools have room. */
@media (min-width: 768px) {
	.op-comparisons__grid.op-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--op-space-5); }
}
/* Guides read like a magazine: more air between rows. */
.op-guides__grid { gap: var(--op-space-7) var(--op-space-5); }
/* Free tools sit closer together: a utility shelf. */
.op-free-tools__grid { gap: var(--op-space-4); }

/* Task 050: category tab bar on phones: edge fade hints that it scrolls; smooth, contained scrolling. */
@media (max-width: 639px) {
	.op-tools__nav {
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.75rem), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 1.75rem), transparent);
	}
	.op-tools__nav:focus-within { -webkit-mask-image: none; mask-image: none; }
	.op-chips { padding-right: 1.75rem; }
	.op-chip { white-space: nowrap; }
	.op-chip:focus-visible { outline-offset: -3px; }
}

/* Task 053: result count under the archive intro (Free Tools, Reviews, Comparisons, Best Tools, Guides). */
.op-archive-count { margin: var(--op-space-4) 0 0; color: var(--op-text-muted); font-size: var(--op-text-meta); font-weight: var(--op-weight-semibold); letter-spacing: 0.02em; }