/* ==========================================================================
   home.css — front page only: hero and technology stack.
   Every other home section is a shared component in common.css.
   ========================================================================== */

/* Hero ---------------------------------------------------------------------- */
.hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 640px;
	background: var(--cx-tint);
}
.hero__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: 80px;
	padding-right: clamp(32px, 5vw, 80px);
	/* align copy with the container's left edge */
	padding-left: max(clamp(20px, 3vw, 40px), calc((100vw - 1360px) / 2 + 40px));
}
.hero__copy .h1 { max-width: 640px; }
.hero__text { margin-top: 24px; max-width: 560px; }
.hero__actions { margin-top: 32px; }
.hero__media { position: relative; overflow: hidden; min-height: 340px; background: var(--cx-deep); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 991.98px) {
	.hero { grid-template-columns: 1fr; min-height: 0; }
	.hero__copy { padding-block: 56px; padding-right: clamp(20px, 3vw, 40px); }
	.hero__media { aspect-ratio: 16 / 10; min-height: 0; }
}

/* Stack --------------------------------------------------------------------- */
.stack {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}
.stack__tabs { flex-direction: column; gap: 6px; }
.stack__tab {
	display: flex; align-items: center; gap: 14px;
	width: 100%; text-align: left;
	padding: 16px 18px;
	border-radius: var(--cx-r-card);
	border: 1px solid transparent;
	background: transparent;
	font-family: var(--cx-ff-head); font-size: 20px; font-weight: 600; color: var(--cx-muted);
	transition: .15s; white-space: nowrap;
}
.stack__tab .ms { color: var(--cx-soft); }
.stack__tab:hover { color: var(--cx-ink); background: var(--cx-grey); }
.stack__tab.active { background: #fff; border-color: var(--cx-line); color: var(--cx-ink); box-shadow: 0 1px 2px rgba(7, 7, 7, .05); }
.stack__tab.active .ms { color: var(--cx-indigo); }
.stack__count { margin-left: auto; font-family: var(--cx-ff-mono); font-size: 12px; color: var(--cx-soft); font-weight: 400; }

.stack__panel { background: #fff; border: 1px solid var(--cx-line); border-radius: var(--cx-r-card); padding: clamp(24px, 3vw, 40px); }
.stack__text { font-size: 18px; max-width: 60ch; }
.stack__tiles {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
	list-style: none; padding: 0; margin: 28px 0 0;
}
.stack__tile {
	border: 1px solid var(--cx-line-soft); border-radius: var(--cx-r-card);
	padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; background: #fff; transition: .15s;
}
.stack__tile:hover { border-color: var(--cx-indigo-300); background: var(--cx-tint); }
.stack__mark {
	width: 38px; height: 38px; border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--cx-ff-mono); font-size: 13px; font-weight: 500; color: #fff;
}
.stack__tile strong { font-family: var(--cx-ff-head); font-size: 17px; font-weight: 600; color: var(--cx-ink); }
.stack__tile span:last-child { font-size: 13px; color: var(--cx-muted); }
.stack__note {
	display: flex; align-items: center; gap: 10px;
	margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--cx-line-soft);
	font-size: 15px; color: var(--cx-muted);
}
.stack__note .ms { color: var(--cx-indigo); }

@media (max-width: 991.98px) {
	.stack { grid-template-columns: 1fr; }
	.stack__tabs { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
	.stack__tab { width: auto; font-size: 17px; }
}