/* ==========================================================================
   Advisories — archive, severity badges, destination-page banner.
   ========================================================================== */

.seraj-advisory-hero {
	padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.5rem, 4vw, 2.5rem);
	background: color-mix(in srgb, var(--seraj-surface-2, #f4f1ec) 88%, transparent);
}

.seraj-advisory-hero__title {
	margin: .35rem 0 .75rem;
	font-family: var(--seraj-font-display);
	font-size: clamp(1.9rem, 4.2vw, 2.75rem);
}

.seraj-advisory-group {
	margin-bottom: 2.25rem;
}

.seraj-advisory-group__title {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-size: 1.1rem;
	margin: 0 0 .85rem;
}

.seraj-advisory-list {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.seraj-advisory-card {
	display: flex;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--seraj-border);
	border-left-width: 4px;
	border-radius: var(--seraj-radius);
	background: var(--seraj-surface);
}

.seraj-advisory-card__body { flex: 1 1 auto; }

.seraj-advisory-card__title {
	margin: 0 0 .25rem;
	font-size: 1.05rem;
}

.seraj-advisory-card__title a { color: inherit; }
.seraj-advisory-card__title a:hover { text-decoration: underline; }

.seraj-advisory-card__meta {
	margin: 0 0 .4rem;
	font-size: .85rem;
	color: var(--seraj-muted);
}

.seraj-advisory-card__summary { margin: 0; color: var(--seraj-muted); }

.seraj-advisory-badge {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .15rem .6rem;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	white-space: nowrap;
}

/* --- Severity colour tokens (mixed from the brand palette) --------------- */
.seraj-advisory--info      { --sev-color: var(--seraj-secondary); }
.seraj-advisory--advisory  { --sev-color: var(--seraj-accent); }
.seraj-advisory--warning   { --sev-color: #b5691a; }
.seraj-advisory--emergency { --sev-color: #b3261e; }

.seraj-advisory-card { border-left-color: var(--sev-color, var(--seraj-accent)); }
.seraj-advisory-badge {
	color: var(--sev-color, var(--seraj-accent));
	background: color-mix(in srgb, var(--sev-color, var(--seraj-accent)) 14%, transparent);
}

.seraj-advisory-empty { color: var(--seraj-muted); padding: 1.5rem 0; }

/* --- Dismissible destination-page banner --------------------------------- */
.seraj-advisory-banner {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: .9rem 1.1rem;
	margin-bottom: 1rem;
	border-radius: var(--seraj-radius);
	border: 1px solid color-mix(in srgb, var(--sev-color, var(--seraj-accent)) 35%, var(--seraj-border));
	background: color-mix(in srgb, var(--sev-color, var(--seraj-accent)) 10%, var(--seraj-surface));
}

.seraj-advisory-banner__icon {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--sev-color, var(--seraj-accent));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: .85rem;
}

.seraj-advisory-banner__body { flex: 1 1 auto; }

.seraj-advisory-banner__title {
	margin: 0 0 .2rem;
	font-weight: 700;
}

.seraj-advisory-banner__text { margin: 0 0 .3rem; color: var(--seraj-text); }

.seraj-advisory-banner__cta {
	font-weight: 600;
	color: var(--sev-color, var(--seraj-primary));
	text-decoration: underline;
}

.seraj-advisory-banner__dismiss {
	flex: none;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	color: var(--seraj-muted);
	padding: .25rem .5rem;
}

.seraj-advisory-banner__dismiss:hover,
.seraj-advisory-banner__dismiss:focus-visible {
	color: var(--seraj-text);
}

.seraj-advisory-banner[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.seraj-advisory-banner { transition: none !important; }
}