/*
 * Neubit NVR — /products/neubit-nvr/ (inc/pages/product-neubit-nvr.php).
 * Shared dark pieces are in product-neubit-dark.css.
 */

/* ======================================================= highlights == */

.gvd-nbx-highlights.gvd-nbx-band {
	padding-block: 5rem;
	border-color: var(--nbx-line-soft);
}

/* ===================================================== in-depth rows == */

.gvd-nvr-rows {
	display: grid;
	gap: 7rem;
	margin-top: 5rem;
}

.gvd-nvr-row {
	display: grid;
	gap: 3rem;
	align-items: center;
}

@media (min-width: 1024px) {
	.gvd-nvr-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gvd-nvr-row--flip .gvd-nvr-row__copy { order: 2; }
	.gvd-nvr-row--flip .gvd-nvr-row__visual { order: 1; }
}

.gvd-nvr-row__copy { font-size: 1rem; line-height: 1.5; }
.gvd-nvr-row__copy > * + * { margin-top: 1rem !important; }

/* Inline, as in the reference: 12/16 text sitting in a 24px line box. */
.gvd-nvr-row__kicker {
	display: inline;
	color: var(--gvd-accent);
	font-family: var(--gvd-font-mono);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* The reference's kicker is an inline span, so its space-y adds no gap. */
.gvd-nvr-row__copy > .gvd-nvr-row__kicker + .gvd-nvr-row__title { margin-top: 0 !important; }

.gvd-nvr-row__title {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 2rem;
}

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

.gvd-nvr-row__text {
	color: var(--nbx-text);
	font-size: 1rem;
	line-height: 1.625;
}

.gvd-nvr-row__visual { min-width: 0; }

/* ================================================================ roles == */

.gvd-nvr-role { padding: 2rem; }
.gvd-nvr-role .gvd-nbx-card__title { margin-top: 1.25rem !important; font-size: 1.25rem; }
.gvd-nvr-role .gvd-nbx-tag + .gvd-nbx-card__title { margin-top: 0.5rem !important; }
.gvd-nvr-role .gvd-nbx-tag { display: table; letter-spacing: normal; }
.gvd-nvr-role.gvd-nbx-card--featured { background: rgba(255, 255, 255, 0.03); }
.gvd-nvr-role.gvd-nbx-card--featured:hover .gvd-nbx-card__title { color: #fff; }

/* =========================================================== deployment == */

.gvd-nvr-deploy__grid {
	display: grid;
	gap: 2rem;
	margin-top: 3.5rem;
}

@media (min-width: 1024px) {
	.gvd-nvr-deploy__grid { grid-template-columns: 5fr 7fr; }
}

.gvd-nvr-deploy__options {
	display: grid;
	gap: 1rem;
	align-content: start;
}

.gvd-nvr-deploy__option {
	padding: 1.5rem;
	border: 1px solid var(--nbx-line);
	border-radius: 0.875rem;
	background: var(--gvd-abyss);
}

.gvd-nvr-deploy__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.gvd-nvr-deploy__head svg { flex: none; color: var(--gvd-accent); }

.gvd-nvr-deploy__option h3 {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5rem;
}


.gvd-nvr-deploy__option p {
	margin-top: 0.5rem !important;
	color: var(--nbx-muted);
	font-size: 0.75rem;
	line-height: 1.625;
}

.gvd-nvr-deploy__table {
	align-self: start;
	overflow-x: auto;
	border: 1px solid var(--nbx-line);
	border-radius: 0.875rem;
	background: var(--gvd-abyss);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.gvd-nvr-deploy__table table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.75rem;
	line-height: 1rem;
	text-align: left;
}

@media (min-width: 640px) {
	.gvd-nvr-deploy__table table { font-size: 0.875rem; line-height: 1.25rem; }
}

.gvd-nvr-deploy__table th,
.gvd-nvr-deploy__table td {
	padding: 0.875rem 1.25rem;
	border: 0;
	vertical-align: top;
}

.gvd-nvr-deploy__table thead tr {
	border-bottom: 1px solid var(--nbx-line);
	background: rgba(255, 255, 255, 0.05);
}

.gvd-nvr-deploy__table thead th {
	color: var(--nbx-text);
	font-family: var(--gvd-font-mono);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.gvd-nvr-deploy__table tbody tr + tr { border-top: 1px solid var(--nbx-line-soft); }
.gvd-nvr-deploy__table tbody th { color: #fff; font-weight: 600; }
.gvd-nvr-deploy__table tbody td { color: var(--nbx-text); }