/* OpenPress single Tool page. Loaded on Tool pages only. Uses existing tokens/components. */

.op-tool-page__crumbs { padding-top: var(--op-space-5); }

/* Hero ------------------------------------------------------------------- */
.op-tool-hero {
	padding-block: var(--op-space-6) var(--op-space-7);
	border-bottom: 1px solid var(--op-border);
}
.op-tool-hero__inner {
	display: grid;
	gap: var(--op-space-5);
	align-items: start;
}
.op-tool-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--op-space-4);
	min-width: 0;
	max-width: 44rem;
}

/* Fixed box: no layout shift. White in both themes since logos assume a light background. */
.op-tool-hero__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 5rem;
	height: 5rem;
	padding: 0.625rem;
	overflow: hidden;
	background: var(--op-white);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius-lg);
}
.op-tool-hero__logo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.op-tool-hero__monogram {
	font-family: var(--op-font-display);
	color: var(--op-blue);
	font-size: 2rem;
	font-weight: var(--op-weight-semibold);
	line-height: 1;
}

.op-tool-hero__category { min-height: 1.75rem; }

.op-tool-hero__title {
	margin: 0;
	font-size: var(--op-text-h1);
	line-height: 1.08;
	overflow-wrap: anywhere;
}
.op-tool-hero__lead {
	margin: 0;
	color: var(--op-text-muted);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
}
.op-tool-hero__facts { color: var(--op-text); }
.op-tool-hero__facts .op-meta__label { color: var(--op-text-muted); }
.op-tool-hero__facts .op-meta__label::after { content: ":"; }
.op-tool-hero__actions { width: 100%; padding-top: var(--op-space-2); }
.op-tool-hero__cta { width: 100%; }

@media (min-width: 640px) {
	.op-tool-hero__inner { grid-template-columns: auto minmax(0, 1fr); gap: var(--op-space-6); }
	.op-tool-hero__inner > .op-tool-hero__content:only-child { grid-column: 1 / -1; }
	.op-tool-hero__logo { width: 6rem; height: 6rem; }
	.op-tool-hero__actions,
	.op-tool-hero__cta { width: auto; }
}

/* Sections --------------------------------------------------------------- */
.op-tool-section { padding-block: var(--op-space-7) 0; }
.op-tool-section__title {
	margin: 0 0 var(--op-space-5);
	font-size: var(--op-text-h2);
}
.op-tool-section__title::after {
	content: "";
	display: block;
	width: 3rem;
	height: 3px;
	margin-top: var(--op-space-4);
	border-radius: 3px;
	background: var(--op-gradient);
}
.op-tool-section--cta { padding-bottom: 0; }

/* Quick information ------------------------------------------------------ */
.op-tool-info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 0;
	margin: 0;
	background: var(--op-bg-elevated);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius-lg);
	box-shadow: var(--op-shadow);
	overflow: hidden;
}
.op-tool-info__item {
	min-width: 0;
	padding: var(--op-space-4) var(--op-space-5);
	/* inner dividers that work at any column count */
	box-shadow: 1px 1px 0 0 var(--op-border);
}
.op-tool-info dt {
	margin: 0 0 var(--op-space-1);
	color: var(--op-text-muted);
	font-size: var(--op-text-small);
}
.op-tool-info dd {
	margin: 0;
	font-weight: var(--op-weight-medium);
	overflow-wrap: anywhere;
}

/* Verdict ---------------------------------------------------------------- */
.op-verdict {
	max-width: 52rem;
	padding: var(--op-space-6);
	background: var(--op-bg-elevated);
	border: 1px solid var(--op-border);
	border-left: 4px solid var(--op-link);
	border-radius: var(--op-radius-lg);
	box-shadow: var(--op-shadow);
	background:
		radial-gradient(26rem 14rem at 100% 0%, var(--op-glow), transparent 70%),
		var(--op-bg-elevated);
}
.op-verdict__title {
	margin: 0 0 var(--op-space-3);
	font-size: var(--op-text-h3);
}
.op-verdict__body { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }
.op-verdict__body > :first-child { margin-top: 0; }
.op-verdict__body > :last-child { margin-bottom: 0; }

/* Pros & cons ------------------------------------------------------------ */
.op-proscons {
	display: grid;
	gap: var(--op-space-5);
	grid-template-columns: minmax(0, 1fr);
}
.op-proscons--single { max-width: 36rem; }
.op-proscons__col {
	padding: var(--op-space-5);
	background: var(--op-bg-elevated);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius);
}
.op-proscons__title {
	margin: 0 0 var(--op-space-4);
	font-size: var(--op-text-h4);
}
.op-proscons__list {
	display: grid;
	gap: var(--op-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Symbols (not only colour) tell pros from cons. */
.op-proscons__list li {
	position: relative;
	padding-left: 1.75rem;
	overflow-wrap: anywhere;
}
.op-proscons__list li::before {
	position: absolute;
	left: 0;
	top: 0.2em;
	display: grid;
	place-items: center;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: var(--op-radius-pill);
	font-size: 0.8125rem;
	font-weight: var(--op-weight-bold);
	line-height: 1;
}
/* Decorative marker: the second value of content: "x" / "" hides it from screen readers (first line is the fallback). */
.op-proscons__col--pros .op-proscons__list li::before {
	content: "+";
	content: "+" / "";
	background: color-mix(in srgb, var(--op-link) 16%, transparent);
	color: color-mix(in srgb, var(--op-link) 78%, var(--op-text));
}
.op-proscons__col--cons .op-proscons__list li::before {
	content: "\2212";
	content: "\2212" / "";
	background: color-mix(in srgb, var(--op-text-muted) 18%, transparent);
	color: var(--op-text-muted);
}

@media (min-width: 768px) {
	.op-proscons:not(.op-proscons--single) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Key features ----------------------------------------------------------- */
.op-features {
	display: grid;
	gap: var(--op-space-5);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}
.op-features__item {
	min-width: 0;
	padding: var(--op-space-5);
	background: var(--op-bg-elevated);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius);
}
.op-features__title {
	margin: 0 0 var(--op-space-2);
	font-size: var(--op-text-h4);
	overflow-wrap: anywhere;
}
.op-features__text {
	margin: 0;
	color: var(--op-text-muted);
	font-size: var(--op-text-small);
}

/* Screenshots ------------------------------------------------------------ */
.op-shots {
	display: grid;
	gap: var(--op-space-5);
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}
.op-shots__item {
	min-width: 0;
	overflow: hidden;
	background: var(--op-bg-elevated);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius);
}
.op-shots__img {
	display: block;
	width: 100%;
	height: auto;
}
@media (min-width: 640px) {
	.op-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
	.op-shots--single { grid-template-columns: minmax(0, 1fr); max-width: 48rem; }
}

/* Final CTA -------------------------------------------------------------- */
.op-tool-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--op-space-4);
	padding: var(--op-space-6);
	background: var(--op-bg-elevated);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius-lg);
}
.op-tool-cta__title {
	margin: 0;
	font-size: var(--op-text-h2);
	overflow-wrap: anywhere;
}
.op-tool-cta .op-btn { width: 100%; }
@media (min-width: 640px) {
	.op-tool-cta {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: var(--op-space-6) var(--op-space-7);
	}
	.op-tool-cta .op-btn { width: auto; flex: none; }
}


/* Shared hero atmosphere for every single page type ------------------------ */
.op-tool-hero,
.op-review-hero,
.op-cmp-hero,
.op-best-hero,
.op-guide-hero,
.op-free-tool-hero {
	position: relative;
	background:
		radial-gradient(40rem 20rem at 90% -20%, var(--op-glow), transparent 70%),
		radial-gradient(30rem 16rem at 0% 120%, var(--op-glow-2), transparent 70%);
}
.op-tool-hero__title,
.op-review-hero__title,
.op-cmp-hero__title { letter-spacing: -0.035em; line-height: 1.04; }


/* Inner-page refinements (shared by Tool, Review, Comparison, Best and Free Tool pages) ---- */

/* Primary actions are unmistakable */
.op-tool-hero__cta,
.op-review-hero__cta { min-height: 3.25rem; padding-inline: 1.75rem; font-size: 1.0625rem; }
.op-tool-hero__actions .op-btn--primary,
.op-review-hero__actions .op-btn--primary { box-shadow: 0 1px 2px rgb(16 24 40 / 0.12), 0 14px 28px -10px color-mix(in srgb, var(--op-btn-bg) 85%, transparent); }

/* Hero: product destination. Bigger logo tile, facts as a quiet strip. */
.op-tool-hero__logo { box-shadow: var(--op-shadow); }
.op-tool-hero__title { font-size: clamp(2.25rem, 1.5rem + 3.6vw, 4rem); letter-spacing: -0.04em; }
.op-tool-hero__facts { width: 100%; padding-top: var(--op-space-4); border-top: 1px solid var(--op-border); }
.op-tool-hero__facts .op-meta__label,
.op-review-hero__facts .op-meta__label { font-weight: var(--op-weight-semibold); }
.op-tool-hero .op-rating { --op-star-size: 1.375rem; }
.op-tool-hero .op-rating__value { font-family: var(--op-font-display); font-size: 1.25rem; }

/* Pros and cons: a clear green-free pair. Pros lean on the accent, cons stay neutral. */
.op-proscons__col { border-radius: var(--op-radius-lg); box-shadow: var(--op-shadow-sm); border-top: 3px solid var(--op-link); }
.op-proscons__col--cons { border-top-color: var(--op-border-strong); }
.op-proscons__title { font-family: var(--op-font-display); letter-spacing: -0.02em; }

/* Features: small accent mark instead of plain boxes */
.op-features__item { position: relative; border-radius: var(--op-radius-lg); box-shadow: var(--op-shadow-sm); transition: transform var(--op-transition), box-shadow var(--op-transition), border-color var(--op-transition); }
.op-features__item::before { content: ""; display: block; width: 2rem; height: 3px; margin-bottom: var(--op-space-3); border-radius: 3px; background: var(--op-gradient); }
.op-features__item:hover { transform: translateY(-2px); box-shadow: var(--op-shadow); border-color: color-mix(in srgb, var(--op-link) 30%, var(--op-border)); }
.op-features__title { font-family: var(--op-font-display); letter-spacing: -0.015em; }
.op-features__text { font-size: var(--op-text-body); line-height: 1.55; }

/* Screenshots: framed like product shots */
.op-shots__item { border-radius: var(--op-radius-lg); box-shadow: var(--op-shadow); }

/* Closing CTA: an ink band, so the page ends on a clear next step */
.op-tool-cta {
	--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;
	--op-on-accent: var(--op-black);
	--op-btn-bg: #6E9BFF;
	--op-btn-bg-hover: #8DB1FF;
	color-scheme: dark;
	position: relative;
	overflow: hidden;
	padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem);
	background:
		radial-gradient(28rem 16rem at 100% 0%, rgb(91 141 255 / 0.32), transparent 70%),
		radial-gradient(24rem 14rem at 0% 100%, rgb(167 139 250 / 0.24), transparent 70%),
		var(--op-black);
	border-color: var(--op-border-dark);
	border-radius: var(--op-radius-xl);
	color: var(--op-text);
}
.op-tool-cta :is(h2, h3) { color: #fff; font-size: var(--op-text-h2); letter-spacing: -0.035em; }
.op-tool-cta p { color: var(--op-text-muted); }

@media (prefers-reduced-motion: reduce) { .op-features__item:hover { transform: none; } }