/* OpenPress homepage (Task 049). Loaded on the front page only, after components.css.
   Uses the global tokens from main.css and the shared components (buttons, section heading,
   Free Tool Card, Guide Card, empty state). Light/dark follow the theme variables; no second
   toggle, no new breakpoints (tablet 768, desktop 1024). */

.home .op-footer { margin-top: 0; }

/* Section rhythm: hero / tools / tinted explore / guides / tinted trust / dark CTA panel. */
.op-home-section { padding-block: clamp(3rem, 2.4rem + 3vw, 5rem); }
.op-home-section--cta { padding-top: 0; }

.op-home .op-section-heading { margin-bottom: var(--op-space-6); }
.op-home .op-section-heading__title {
	font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	letter-spacing: var(--op-tracking-heading);
}

.op-band {
	background: var(--op-bg-tint);
	border-block: 1px solid var(--op-border);
}
.op-band .op-card { background: var(--op-bg-elevated); }

/* Always-dark surface in both themes (explore lead tile, final CTA). Same values the footer uses. */
.op-inverse {
	--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;
	background:
		radial-gradient(34rem 16rem at 10% 0%, rgb(91 141 255 / 0.22), transparent 70%),
		radial-gradient(28rem 16rem at 100% 100%, rgb(167 139 250 / 0.16), transparent 70%),
		var(--op-black);
	color: var(--op-text);
}

/* Larger buttons used by the hero and the final CTA */
.op-btn--lg { min-height: 3.25rem; padding-inline: 1.75rem; font-size: 1.0625rem; }
.op-btn--lg:hover .op-btn__arrow { transform: translateX(3px); }
.op-btn__arrow { display: inline-block; transition: transform var(--op-transition); }

/* Hero ------------------------------------------------------------------------ */
.op-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2.5rem, 1.9rem + 3vw, 4.5rem);
	border-bottom: 1px solid var(--op-border);
}
/* One quiet grid texture fading from the visual side; the page background already carries the glow. */
.op-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--op-grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--op-grid-line) 1px, transparent 1px);
	background-size: 3rem 3rem;
	-webkit-mask-image: radial-gradient(ellipse 70% 90% at 80% 30%, #000, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 90% at 80% 30%, #000, transparent 75%);
	pointer-events: none;
}
.op-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--op-space-6);
	align-items: center;
}
.op-hero__content { min-width: 0; max-width: 40rem; }

.op-hero__eyebrow {
	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.08em;
	text-transform: uppercase;
}

.op-hero__title {
	margin: 0 0 var(--op-space-4);
	font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
	line-height: var(--op-leading-tight);
	letter-spacing: var(--op-tracking-heading);
	text-wrap: balance;
}
.op-hero__title-accent {
	display: block;
	color: var(--op-link); /* fallback where background-clip text is unsupported */
	background: var(--op-gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.op-hero__lead {
	margin: 0 0 var(--op-space-5);
	max-width: 34rem;
	color: var(--op-text-muted);
	font-size: var(--op-text-lead);
	line-height: 1.5;
}

.op-hero__actions { display: flex; flex-direction: column; gap: var(--op-space-3); margin-bottom: var(--op-space-5); }
.op-hero__actions .op-btn { width: 100%; }

.op-hero__search {
	display: flex;
	align-items: center;
	gap: var(--op-space-3);
	width: 100%;
	max-width: 30rem;
	min-height: 3rem;
	padding: 0 var(--op-space-4);
	background: var(--op-bg-elevated);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius);
	box-shadow: var(--op-shadow-sm);
	color: var(--op-text-muted);
	font: inherit;
	font-size: var(--op-text-small);
	text-align: left;
	cursor: pointer;
	transition: border-color var(--op-transition), color var(--op-transition), box-shadow var(--op-transition);
}
.op-hero__search:hover { border-color: var(--op-link); color: var(--op-text); box-shadow: var(--op-shadow); }
.op-hero__search svg { flex: none; color: var(--op-link); }
.op-hero__search span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Decorative visual: a 2x2 bench of tool glyphs. Desktop only, so phones and tablets reach content sooner. */
.op-hero__visual { display: none; }
.op-bench {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--op-space-4);
	padding: var(--op-space-5);
	background:
		linear-gradient(var(--op-grid-line) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem,
		linear-gradient(90deg, var(--op-grid-line) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem,
		var(--op-bg-elevated);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius-xl);
	box-shadow: var(--op-shadow-lg);
}
.op-bench__tile {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	background: var(--op-bg);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius-lg);
	color: var(--op-link);
}
.op-bench__tile svg { width: 2.5rem; height: 2.5rem; stroke-width: 1.5; }
.op-bench__tile.is-accent { background: var(--op-gradient); border-color: transparent; color: #fff; }
.op-bench__tile:nth-child(2) { transform: translateY(0.75rem); }
.op-bench__tile:nth-child(4) { transform: translateY(0.75rem); }

/* Explore areas ----------------------------------------------------------------- */
.op-areas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-space-3); margin: 0; padding: 0; list-style: none; }
.op-areas__item { display: flex; min-width: 0; }

.op-area {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--op-space-4);
	min-width: 0;
	min-height: 5.5rem;
	padding: var(--op-space-4) var(--op-space-5);
	background: var(--op-bg-elevated);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius-lg);
	box-shadow: var(--op-shadow-sm);
	color: var(--op-text);
	text-decoration: none;
	transition: border-color var(--op-transition), box-shadow var(--op-transition), transform var(--op-transition);
}
.op-area:hover { border-color: color-mix(in srgb, var(--op-link) 45%, var(--op-border)); box-shadow: var(--op-shadow); }
.op-area__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	background: color-mix(in srgb, var(--op-link) 10%, transparent);
	border-radius: var(--op-radius);
	color: var(--op-link);
	transition: background-color var(--op-transition), color var(--op-transition);
}
.op-area:hover .op-area__icon { background: var(--op-btn-bg); color: var(--op-on-accent); }
.op-area__text { flex: 1; min-width: 0; }
.op-area__title { margin: 0 0 0.125rem; font-size: 1.1875rem; letter-spacing: -0.02em; }
.op-area__desc { display: block; color: var(--op-text-muted); font-size: var(--op-text-small); line-height: 1.45; }
.op-area__arrow { flex: none; color: var(--op-link); font-size: 1.25rem; transition: transform var(--op-transition); }
.op-area:hover .op-area__arrow { transform: translateX(4px); }

/* Lead tile: dark, taller, anchors the grid. */
.op-area--lead {
	background:
		radial-gradient(24rem 14rem at 0% 0%, rgb(91 141 255 / 0.25), transparent 70%),
		radial-gradient(20rem 14rem at 100% 100%, rgb(167 139 250 / 0.18), transparent 70%),
		var(--op-black);
}
.op-area--lead { align-items: flex-start; flex-direction: column; justify-content: flex-end; gap: var(--op-space-5); padding: var(--op-space-6); border-color: var(--op-border-dark); }
.op-area--lead .op-area__text { flex: 0 1 auto; }
.op-area--lead .op-area__title { font-size: var(--op-text-h3); }
.op-area--lead .op-area__icon { background: rgb(255 255 255 / 0.1); color: #fff; }
.op-area--lead:hover { border-color: rgb(157 187 255 / 0.6); }
.op-area--lead:hover .op-area__icon { background: #fff; color: var(--op-black); }
.op-area--lead .op-area__arrow { position: absolute; top: var(--op-space-5); right: var(--op-space-5); }

/* Trust ------------------------------------------------------------------------- */
.op-trust { display: grid; gap: var(--op-space-6); margin: 0; padding: 0; list-style: none; }
.op-trust__item { min-width: 0; }
.op-trust__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: var(--op-space-4);
	border: 1px solid var(--op-border-strong);
	border-radius: var(--op-radius);
	color: var(--op-link);
}
.op-trust__title { margin: 0 0 var(--op-space-2); font-size: var(--op-text-h4); letter-spacing: -0.02em; }
.op-trust__text { margin: 0; max-width: 24rem; color: var(--op-text-muted); font-size: var(--op-text-small); line-height: 1.6; }

/* Final CTA panel ---------------------------------------------------------------- */
.op-cta {
	display: grid;
	gap: var(--op-space-5);
	align-items: center;
	padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
	border: 1px solid var(--op-border-dark);
	border-radius: var(--op-radius-xl);
	box-shadow: var(--op-shadow-lg);
}
.op-cta__title { margin: 0 0 var(--op-space-2); font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); letter-spacing: var(--op-tracking-heading); }
.op-cta__lead { margin: 0; max-width: 32rem; color: var(--op-text-muted); font-size: var(--op-text-body); }
.op-cta__actions { display: flex; flex-direction: column; gap: var(--op-space-3); }
.op-cta__actions .op-btn { width: 100%; }
/* The secondary button sits on the always-dark panel, so it needs its own light-on-dark colours in both themes. */
.op-cta .op-btn--secondary { background: transparent; border-color: rgb(160 178 255 / 0.4); color: var(--op-snow); }
.op-cta .op-btn--secondary:hover { background: rgb(255 255 255 / 0.08); border-color: rgb(160 178 255 / 0.7); color: #fff; }

/* Tablet ---------------------------------------------------------------------------- */
@media (min-width: 640px) {
	.op-hero__actions { flex-direction: row; flex-wrap: wrap; }
	.op-hero__actions .op-btn { width: auto; }
	.op-cta__actions { flex-direction: row; flex-wrap: wrap; }
	.op-cta__actions .op-btn { width: auto; }
	.op-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.op-areas--lead .op-areas__item--lead { grid-column: 1 / -1; }
	.op-area--lead { min-height: 11rem; }
	.op-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--op-space-6) var(--op-space-5); }
}

/* Desktop --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.op-hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: var(--op-space-7); }
	.op-hero__visual { display: block; justify-self: end; width: 100%; max-width: 21rem; padding-bottom: 0.75rem; }

	.op-areas--lead { grid-template-columns: 1.1fr 1fr 1fr; grid-template-rows: repeat(2, auto); }
	.op-areas--lead .op-areas__item--lead { grid-column: 1; grid-row: 1 / span 2; }
	.op-area--lead { min-height: 100%; }

	.op-cta { grid-template-columns: minmax(0, 1fr) auto; gap: var(--op-space-7); }
	.op-cta__actions { flex-wrap: nowrap; }
}

/* Motion: hover lift only when the visitor has not asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	.op-area:hover { transform: translateY(var(--op-lift)); }
}