/**
 * NovaSpark Page-Template Sections
 *
 * Layout blocks used by the alternate homepage designs and the About /
 * Contact / Features templates. These were previously ~110 inline style
 * attributes spread across seven files.
 *
 * @package NovaSpark
 */

/* ==========================================================================
   1. Shared section rhythm
   ========================================================================== */
.ns-section-pad     { padding-block: var(--ns-space-12); }
.ns-section-pad-lg  { padding-block: var(--ns-space-16); }

.ns-section-intro {
	text-align: center;
	max-width: 600px;
	margin: 0 auto var(--ns-space-12);
}

.ns-section-intro__title {
	font-size: var(--ns-h2-size);
	font-weight: 800;
	margin-bottom: var(--ns-space-2);
}

.ns-section-intro__sub {
	color: var(--ns-text-3);
	margin-bottom: 0;
}

/* Full-bleed tinted band between sections. */
.ns-band {
	background-color: var(--ns-bg-2);
	border-block: 1px solid var(--ns-border);
	padding-block: var(--ns-space-16);
}

.ns-lede {
	font-size: var(--ns-text-lg);
	line-height: 1.6;
	color: var(--ns-text-3);
}

/* ==========================================================================
   2. Promo hero (agency + features landing)
   ========================================================================== */
.ns-promo-hero {
	background-image: linear-gradient(135deg, var(--ns-bg-2), var(--ns-bg-3));
	border-bottom: 1px solid var(--ns-border);
	padding-block: var(--ns-space-16);
	text-align: center;
}

.ns-promo-hero__inner {
	max-width: 860px;
}

.ns-promo-hero__badge {
	margin-bottom: var(--ns-space-4);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ns-promo-hero__title {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 900;
	line-height: 1.1;
	margin-bottom: var(--ns-space-4);
	text-wrap: balance;
}

.ns-promo-hero__lede {
	font-size: var(--ns-text-xl);
	line-height: 1.6;
	color: var(--ns-text-3);
	margin-bottom: var(--ns-space-8);
}

.ns-promo-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--ns-space-4);
}

/* ==========================================================================
   3. Feature cards
   ========================================================================== */
.ns-feature-card {
	background-color: var(--ns-bg-2);
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-radius-lg);
	padding: var(--ns-space-6);
	transition: border-color var(--ns-duration) var(--ns-ease),
	            transform var(--ns-duration) var(--ns-ease);
}

.ns-feature-card:hover {
	border-color: var(--ns-accent);
	transform: translateY(var(--ns-card-lift));
}

.ns-feature-card__title {
	font-size: var(--ns-text-xl);
	margin-bottom: var(--ns-space-2);
}

.ns-feature-card__text {
	color: var(--ns-text-3);
	font-size: var(--ns-text-sm);
	margin-bottom: 0;
}

/* ==========================================================================
   4. Tech portal hero banner + terminal
   ========================================================================== */

/*
 * This band keeps a fixed dark identity in both colour modes (it is a
 * developer portal banner), but it now declares that intent once here instead
 * of hardcoding #0d131f / #0a0f1a inline.
 */
.ns-tech-hero-banner {
	--banner-ink:    #f8fafc;
	--banner-ink-2:  #94a3b8;

	background-image: linear-gradient(135deg, #0d131f 0%, #0a0f1a 100%);
	border-bottom: 1px solid var(--ns-border);
	padding-block: var(--ns-space-12);
	color: var(--banner-ink);
}

.ns-tech-hero-banner__title {
	font-size: clamp(1.9rem, 4.5vw, 2.75rem);
	font-weight: 800;
	line-height: 1.15;
	margin-block: var(--ns-space-3) var(--ns-space-4);
	color: var(--banner-ink);
	text-wrap: balance;
}

.ns-tech-hero-banner__lede {
	font-size: var(--ns-text-lg);
	line-height: 1.6;
	color: var(--banner-ink-2);
	margin-bottom: var(--ns-space-6);
}

.ns-tech-hero-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ns-space-3);
}

/* Terminal mock ------------------------------------------------------------ */
.ns-terminal {
	--term-bg:      #020617;
	--term-border:  #1e293b;
	--term-comment: #64748b;
	--term-plain:   #f1f5f9;
	--term-kw:      #c084fc;
	--term-op:      #38bdf8;
	--term-fn:      #facc15;
	--term-prop:    #94a3b8;
	--term-str:     #4ade80;
	--term-false:   #f43f5e;
	--term-num:     #38bdf8;

	background-color: var(--term-bg);
	border: 1px solid var(--term-border);
	border-radius: var(--ns-radius-lg);
	padding: var(--ns-space-4);
	box-shadow: var(--ns-shadow-lg);
	overflow-x: auto;
}

.ns-terminal__chrome {
	display: flex;
	gap: 6px;
	margin-bottom: var(--ns-space-3);
}

.ns-terminal__dot {
	width: 10px;
	height: 10px;
	border-radius: var(--ns-radius-full);
}

.ns-terminal__dot--red   { background-color: #ef4444; }
.ns-terminal__dot--amber { background-color: #eab308; }
.ns-terminal__dot--green { background-color: #22c55e; }

.ns-terminal__code {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font-family: var(--ns-font-mono);
	font-size: 13px;
	line-height: 1.7;
	color: var(--term-plain);
	white-space: pre;
}

.ns-terminal .tok-comment    { color: var(--term-comment); }
.ns-terminal .tok-kw         { color: var(--term-kw); }
.ns-terminal .tok-op         { color: var(--term-op); }
.ns-terminal .tok-fn         { color: var(--term-fn); }
.ns-terminal .tok-prop       { color: var(--term-prop); }
.ns-terminal .tok-str        { color: var(--term-str); }
.ns-terminal .tok-bool-false { color: var(--term-false); }
.ns-terminal .tok-num        { color: var(--term-num); }

/* ==========================================================================
   5. Personal journal front page
   ========================================================================== */
.ns-personal-front-hero {
	background-color: var(--ns-bg-2);
	border-bottom: 1px solid var(--ns-border);
	padding-block: var(--ns-space-12);
	text-align: center;
}

.ns-personal-front-hero__inner {
	max-width: 680px;
}

.ns-personal-front-hero__actions {
	display: flex;
	justify-content: center;
	gap: var(--ns-space-3);
	margin-top: var(--ns-space-6);
}

.ns-personal-avatar--lg img {
	border-width: 4px;
}

.ns-journal-stream {
	max-width: 760px;
	margin-inline: auto;
	padding-block: var(--ns-space-12);
}

.ns-book-shelf {
	margin-top: var(--ns-space-12);
	padding-top: var(--ns-space-12);
	border-top: 2px solid var(--ns-border);
}

.ns-book-shelf__title {
	font-family: var(--ns-font-serif);
	font-size: var(--ns-h2-size);
	font-weight: 700;
	text-align: center;
	margin-bottom: var(--ns-space-6);
}

.ns-book-shelf__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--ns-space-4);
	text-align: center;
}

.ns-book-shelf__item {
	background-color: var(--ns-bg-2);
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-radius-lg);
	padding: var(--ns-space-4);
	transition: border-color var(--ns-duration) var(--ns-ease);
}

.ns-book-shelf__item:hover {
	border-color: var(--ns-accent);
}

.ns-book-shelf__book {
	display: block;
	font-family: var(--ns-font-serif);
	font-size: var(--ns-text-base);
	color: var(--ns-text);
}

.ns-book-shelf__author {
	font-size: var(--ns-text-xs);
	color: var(--ns-text-3);
}

/* ==========================================================================
   6. About page
   ========================================================================== */
.ns-about-page-wrap,
.ns-contact-page-wrap {
	padding-block: var(--ns-space-8);
}

.ns-about-hero {
	text-align: center;
	max-width: 800px;
	margin: 0 auto var(--ns-space-12);
}

.ns-badge--soft {
	background-color: var(--ns-accent-light);
	color: var(--ns-accent);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: var(--ns-space-3);
}

.ns-about-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--ns-space-6);
	background-color: var(--ns-bg-2);
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-radius-lg);
	padding: var(--ns-space-8);
	margin-bottom: var(--ns-space-12);
	text-align: center;
}

.ns-stat-number {
	display: block;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--ns-accent);
}

.ns-stat-label {
	font-size: var(--ns-text-xs);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--ns-text-3);
}

.ns-about-content {
	max-width: 800px;
	margin-inline: auto;
}

/* ==========================================================================
   7. Contact page
   ========================================================================== */
.ns-contact-header {
	text-align: center;
	max-width: 700px;
	margin: 0 auto var(--ns-space-12);
}

.ns-contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ns-space-8);
	margin-bottom: var(--ns-space-16);
}

@media (min-width: 900px) {
	.ns-contact-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--ns-space-12);
	}
}

.ns-contact-info {
	background-color: var(--ns-bg-2);
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-radius-lg);
	padding: var(--ns-space-8);
	align-self: start;
}

.ns-contact-info__title {
	font-size: var(--ns-text-xl);
	margin-bottom: var(--ns-space-4);
}

.ns-contact-info__row {
	margin-bottom: var(--ns-space-6);
}

.ns-contact-info__label {
	display: block;
	color: var(--ns-text);
	font-size: var(--ns-text-sm);
	margin-bottom: var(--ns-space-1);
}

.ns-contact-info__value {
	color: var(--ns-text-3);
}

.ns-contact-info__value--accent {
	color: var(--ns-accent);
}

.ns-contact-info__note {
	font-size: var(--ns-text-sm);
	color: var(--ns-text-3);
	margin-bottom: 0;
}

/* ==========================================================================
   8. Narrow viewports
   ========================================================================== */
@media (max-width: 768px) {
	.ns-promo-hero,
	.ns-band,
	.ns-section-pad-lg {
		padding-block: var(--ns-space-12);
	}

	.ns-promo-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ns-contact-info,
	.ns-about-stats-grid {
		padding: var(--ns-space-5);
	}

	.ns-terminal__code {
		font-size: 11px;
	}
}