/* OpenPress Free Tools directory (/free-tools/ and Free Tool Category archives). Loaded on those archives only, after tools.css (page header, category chips, content spacing). Uses existing tokens/components, so dark mode follows the theme variables. */

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

/* Category navigation: the shared tab bar in tools.css (scrolls sideways inside its own box on small screens). */

/* Free Tool card --------------------------------------------------------- */
/* Builds on .op-card / .op-card--link / .op-card__link. Used on the homepage, the archive and search.
   Layout: icon tile + tool-type pill, category eyebrow, title, description, "best for" note, quiet action row. */
.op-free-tool-card__media { aspect-ratio: 16 / 9; margin: var(--op-space-3) var(--op-space-3) 0; border-radius: var(--op-radius-lg); border: 1px solid var(--op-border); }
.op-free-tool-card__body { gap: var(--op-space-3); padding: var(--op-space-5) var(--op-space-5) var(--op-space-4); }

/* Head: gradient icon tile on the left, tool type on the right. */
.op-free-tool-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--op-space-3); min-width: 0; margin-bottom: var(--op-space-1); }
.op-free-tool-card__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	background: var(--op-gradient);
	border-radius: var(--op-radius);
	box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--op-blue) 70%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.25);
	color: #fff;
	transition: transform var(--op-transition), box-shadow var(--op-transition);
}
.op-free-tool-card__type {
	max-width: 100%;
	padding: 0.25rem 0.75rem;
	background: color-mix(in srgb, var(--op-text) 5%, transparent);
	border-color: transparent;
	border-radius: var(--op-radius-pill);
	color: var(--op-text-muted);
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Category: a quiet eyebrow, not a boxed badge. Stays a real link above the stretched title link. */
.op-free-tool-card__category {
	align-self: flex-start;
	max-width: 100%;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	font-family: var(--op-font-display);
	font-size: 0.75rem;
	font-weight: var(--op-weight-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: normal;
	overflow-wrap: anywhere;
}
a.op-free-tool-card__category:hover { color: var(--op-text); text-decoration: underline; text-underline-offset: 0.25em; }

/* Two-line title and three-line description keep cards in a row the same height. */
.op-free-tool-card__title,
.op-free-tool-card__description {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.op-free-tool-card__title { margin: 0; font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.4375rem); font-weight: var(--op-weight-heavy); letter-spacing: -0.025em; line-height: 1.2; -webkit-line-clamp: 2; line-clamp: 2; }
.op-free-tool-card__description { -webkit-line-clamp: 3; line-clamp: 3; }

/* "Best for": a soft inset note pinned to the bottom of the body so rows align. */
.op-free-tool-card__facts {
	flex-direction: column;
	gap: 0.125rem;
	margin-top: auto;
	padding: var(--op-space-2) var(--op-space-3);
	background: color-mix(in srgb, var(--op-link) 6%, transparent);
	border-radius: var(--op-radius);
}
.op-free-tool-card__facts .op-meta__label { display: block; color: var(--op-text-muted); font-size: 0.75rem; font-weight: var(--op-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; }
.op-free-tool-card__facts .op-meta__item { display: block; color: var(--op-text); font-size: var(--op-text-small); font-weight: var(--op-weight-medium); line-height: 1.4; overflow-wrap: anywhere; }

/* Icon tile nudges on hover (card-specific; the frame, footer and action row are shared in components.css). */
.op-card--link:hover .op-free-tool-card__icon { transform: scale(1.06) rotate(-3deg); }
@media (prefers-reduced-motion: reduce) { .op-card--link:hover .op-free-tool-card__icon { transform: none; } }

/* Archive only (the homepage reuses the card, not this page): tighter header, calmer title, count line, natural grid. */
.op-free-tools .op-page-header { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(2rem, 1.6rem + 2vw, 3.25rem); }
.op-free-tools .op-page-header__title { font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); }
.op-free-tools .op-tools__content { padding-block-start: var(--op-space-6); }
.op-free-tools .op-free-tools__grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); /* as many columns as fit; one column on the narrowest phones */
	gap: var(--op-space-5);
}