/* ============================================================================
 * D2 SOFTWARE SUBHUBS — Lag 2 (plugin-specifikt)
 *
 * Fil:        d2-software-subhubs/css/software-subhubs.css
 * Enqueues:   class-assets-claude.php (kun på 5 hostede sider)
 * Version:    1.0.0
 * Maintainer: Digital2 ApS
 *
 * ARKITEKTUR:
 *   Lag 2 plugin-CSS. Bruger Lag 1-tokens og base-klasser fra
 *   d2-tokens.css v1.2.5+ (--d2-orange, --d2-line, --d2-radius-md,
 *   --d2-font-display, --d2-ink, --d2-ink-muted, --d2-surface,
 *   --d2-ease, etc.). Definerer ikke egne farver, fonts eller radius.
 *
 * PRÆFIKS:
 *   .d2sw-  →  d2-software-subhubs (skal registreres i DS v3.2 prefix-tabel)
 *
 * KOMPONENTER:
 *   .d2sw-intro        — sektion-intro (eyebrow + heading), centreret
 *   .d2sw-brand-card   — link-kort til brand/producent (bruges i .d2-grid--4col)
 *   .d2sw-scenario     — nummereret scenarie-kort med orange venstre-kant
 *
 * BRUGES PÅ:
 *   • /software/erhverv/              (reference-implementation)
 *   • /software/offentlig-sektor/
 *   • /software/uddannelse/
 *   • /software/privat/
 *   • /software/andre/
 *
 * VERSIONSHISTORIK:
 *   1.0.0 (2026-05-20) — Initial release. Promovering fra inline-styled
 *                        HTML på /software/erhverv/ til centraliseret
 *                        plugin-CSS.
 * ============================================================================ */


/* ── Section intro (eyebrow + heading) ──────────────────────────────────── */

.d2sw-intro {
	text-align: center;
	margin:     0 auto 32px;
	max-width:  680px;
}

.d2sw-intro__eyebrow {
	font-family:    var(--d2-font-display, 'Montserrat', Arial, sans-serif);
	font-weight:    700;
	font-size:      12.5px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color:          var(--d2-orange, #fc8902);
	margin:         0 0 12px;
}

.d2sw-intro__heading {
	font-family:    var(--d2-font-display, 'Montserrat', Arial, sans-serif);
	font-weight:    800;
	font-size:      28px;
	line-height:    1.2;
	letter-spacing: -0.015em;
	color:          var(--d2-ink, #222);
	margin:         0;
}

.d2sw-intro__heading em {
	font-style:  italic;
	font-weight: 800;
	color:       var(--d2-orange, #fc8902);
}


/* ── Brand-kort (link til producent) ────────────────────────────────────── */

.d2sw-brand-card {
	display:         block;
	text-decoration: none;
	padding:         24px 18px;
	background:      var(--d2-surface, #fff);
	border:          1px solid var(--d2-line, #e8e8e8);
	border-radius:   var(--d2-radius-md, 6px);
	min-height:      120px;
	transition:      border-color 0.2s var(--d2-ease, ease),
	                 transform    0.2s var(--d2-ease, ease),
	                 box-shadow   0.2s var(--d2-ease, ease);
}

.d2sw-brand-card:hover,
.d2sw-brand-card:focus {
	border-color: var(--d2-orange, #fc8902);
	transform:    translateY(-2px);
	box-shadow:   0 4px 16px rgba(0, 0, 0, 0.06);
}

.d2sw-brand-card__name {
	font-family:   var(--d2-font-display, 'Montserrat', Arial, sans-serif);
	font-weight:   700;
	font-size:     17px;
	line-height:   1.2;
	color:         var(--d2-orange, #fc8902);
	margin-bottom: 6px;
}

.d2sw-brand-card__tag {
	font-size:   13px;
	line-height: 1.5;
	color:       var(--d2-ink-muted, #444);
}


/* ── Scenarie-kort (nummereret med orange venstre-kant) ─────────────────── */

.d2sw-scenario {
	padding:       24px 20px;
	background:    var(--d2-surface, #fff);
	border-radius: var(--d2-radius-md, 6px);
	border-left:   3px solid var(--d2-orange, #fc8902);
	box-shadow:    0 1px 3px rgba(0, 0, 0, 0.03);
}

.d2sw-scenario__number {
	font-family:   var(--d2-font-display, 'Montserrat', Arial, sans-serif);
	font-weight:   800;
	font-size:     24px;
	line-height:   1;
	color:         var(--d2-orange, #fc8902);
	margin-bottom: 8px;
}

.d2sw-scenario__title {
	font-family: var(--d2-font-display, 'Montserrat', Arial, sans-serif);
	font-weight: 700;
	font-size:   18px;
	line-height: 1.3;
	color:       var(--d2-ink, #222);
	margin:      0 0 8px;
}

.d2sw-scenario__desc {
	font-family: var(--d2-font-body, Arial, sans-serif);
	font-size:   14.5px;
	line-height: 1.6;
	color:       var(--d2-ink-muted, #444);
	margin:      0;
}


/* ── Mobile breakpoint ──────────────────────────────────────────────────── */

@media (max-width: 720px) {

	.d2sw-intro {
		margin-bottom: 24px;
	}
	.d2sw-intro__heading {
		font-size: 24px;
	}

	.d2sw-brand-card {
		padding:    20px 16px;
		min-height: 100px;
	}
	.d2sw-brand-card__name {
		font-size: 16px;
	}

	.d2sw-scenario {
		padding: 20px 16px;
	}
}