/*
 * Octocam hub — /products/octocam/ (inc/pages/product-octocam-hub.php).
 * Everything is scoped to .gvd-octohub.
 */

.gvd-octohub {
	--gvd-octohub-mono: var(--gvd-font-mono, "Inter", sans-serif);
	background: #f8fafc;
	color: #0f172b;
}

/* ------------------------------------------------------------------ hero -- */

/* bg-[#070E20] py-20 lg:py-28 border-b border-white/10 */
.gvd-octohub__hero {
	position: relative;
	overflow: hidden;
	background: var(--gvd-abyss);
	padding-block: 5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 1024px) {
	.gvd-octohub__hero { padding-block: 7rem; }
}

/* bg-gradient-to-br from-[#070E20] via-[#0B1B3D] to-[#0A1633] */
.gvd-octohub__herobg {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom right, var(--gvd-abyss), var(--gvd-primary), #0a1633);
}

/* 36px white/8 grid at 20% opacity */
.gvd-octohub__herogrid {
	position: absolute;
	inset: 0;
	opacity: 0.2;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
	background-size: 36px 36px;
}

.gvd-octohub__herobody {
	position: relative;
	z-index: 1;
	text-align: center;
}

/* rounded-full border-accent/20 bg-accent/10 px-4 py-1.5 text-xs mono bold tracking-wider uppercase */
.gvd-octohub__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 1rem;
	border: 1px solid rgba(var(--gvd-accent-rgb), 0.2);
	border-radius: 9999px;
	background: rgba(var(--gvd-accent-rgb), 0.1);
	color: var(--gvd-accent);
	font-family: var(--gvd-octohub-mono);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1rem;
	text-transform: uppercase;
}

/* mt-6 text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight */
.gvd-octohub__title {
	margin: 1.5rem 0 0;
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.25rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 2.5rem;
}

@media (min-width: 640px) {
	.gvd-octohub__title { font-size: 3rem; line-height: 1; }
}

@media (min-width: 1024px) {
	.gvd-octohub__title { font-size: 3.75rem; line-height: 1; }
}

.gvd-octohub__accent { color: var(--gvd-accent); }

/* mx-auto mt-6 max-w-2xl text-base sm:text-lg leading-relaxed text-slate-300 */
.gvd-octohub__lede {
	max-width: 42rem;
	margin: 1.5rem auto 0;
	color: #cad5e2;
	font-size: 1rem;
	line-height: 1.625;
}

@media (min-width: 640px) {
	.gvd-octohub__lede { font-size: 1.125rem; }
}

/* ---------------------------------------------------------------- series -- */

/* py-20 lg:py-28 */
.gvd-octohub__series { padding-block: 5rem; }

@media (min-width: 1024px) {
	.gvd-octohub__series { padding-block: 7rem; }
}

/* max-w-6xl */
.gvd-octohub__narrow { max-width: 72rem; }

/* grid-cols-1 md:grid-cols-2 gap-8 lg:gap-10 */
.gvd-octohub__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}

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

@media (min-width: 1024px) {
	.gvd-octohub__grid { gap: 2.5rem; }
}

/* rounded-3xl border-slate-200 bg-white p-8 sm:p-10 shadow-lg, lifts on hover */
.gvd-octohub__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	padding: 2rem;
	border: 1px solid #e2e8f0;
	border-radius: 1.5rem;
	background: #fff;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

@media (min-width: 640px) {
	.gvd-octohub__card { padding: 2.5rem; }
}

.gvd-octohub__card:hover {
	transform: translateY(-0.375rem);
	border-color: var(--gvd-accent);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

@media (prefers-reduced-motion: reduce) {
	.gvd-octohub__card { transition: none; }
	.gvd-octohub__card:hover { transform: none; }
}

.gvd-octohub__cardtop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* rounded-full bg-accent/10 px-3.5 py-1 text-xs mono bold text-accent */
.gvd-octohub__tag {
	padding: 0.25rem 0.875rem;
	border-radius: 9999px;
	background: rgba(var(--gvd-accent-rgb), 0.1);
	color: var(--gvd-accent);
	font-family: var(--gvd-octohub-mono);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1rem;
	text-transform: uppercase;
}

/* The second card's tag: bg-blue-100 text-blue-700 */
.gvd-octohub__card--navy .gvd-octohub__tag {
	background: #dbeafe;
	color: var(--gvd-accent-hover);
}

/* text-xs mono bold text-slate-400 uppercase */
.gvd-octohub__label {
	color: #90a1b9;
	font-family: var(--gvd-octohub-mono);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1rem;
	text-align: right;
	text-transform: uppercase;
}

/* mt-6 text-2xl sm:text-3xl font-extrabold text-slate-900, accent on hover */
.gvd-octohub__cardtitle {
	margin: 1.5rem 0 0;
	color: #0f172b;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.3333;
	transition: color 0.2s ease;
}

@media (min-width: 640px) {
	.gvd-octohub__cardtitle { font-size: 1.875rem; line-height: 1.2; }
}

.gvd-octohub__card:hover .gvd-octohub__cardtitle { color: var(--gvd-accent); }

/* mt-2 text-xs mono bold uppercase tracking-wider text-accent */
.gvd-octohub__subtitle {
	margin: 0.5rem 0 0;
	color: var(--gvd-accent);
	font-family: var(--gvd-octohub-mono);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1rem;
	text-transform: uppercase;
}

/* mt-4 text-sm leading-relaxed text-slate-600 */
.gvd-octohub__text {
	margin: 1rem 0 0;
	color: #45556c;
	font-size: 0.875rem;
	line-height: 1.625;
}

/* mt-6 space-y-2.5 text-xs font-semibold text-slate-700 */
.gvd-octohub__points {
	display: grid;
	gap: 0.625rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	color: #314158;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1rem;
}

.gvd-octohub__points li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.gvd-octohub__points .gvd-svg { color: var(--gvd-accent); }

/* mt-10 pt-6 border-t border-slate-100 */
.gvd-octohub__cardfoot {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #f1f5f9;
}

/* w-full rounded-xl px-6 py-3.5 text-xs font-extrabold text-white shadow-md.
   Scoped under .gvd-octohub so Elementor's `.elementor a { box-shadow: none }` does not win. */
.gvd-octohub .gvd-octohub__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.875rem 1.5rem;
	border-radius: 0.875rem;
	background: var(--gvd-accent);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1rem;
	text-decoration: none;
	box-shadow: 0 4px 6px -1px rgba(var(--gvd-accent-rgb), 0.25), 0 2px 4px -2px rgba(var(--gvd-accent-rgb), 0.25);
	transition: background-color 0.2s ease;
}

.gvd-octohub__btn:hover,
.gvd-octohub__btn:focus-visible {
	background: var(--gvd-accent-hover);
	color: #fff;
	text-decoration: none;
}

/* Nova: bg-[#0B1B3D] hover:bg-slate-800 */
.gvd-octohub__card--navy .gvd-octohub__btn {
	background: var(--gvd-primary);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.gvd-octohub__card--navy .gvd-octohub__btn:hover,
.gvd-octohub__card--navy .gvd-octohub__btn:focus-visible { background: #1d293d; }