/* ────────────────────────────────────────────────────────────
   03-inline-alert.css — Inline Alert banner
   Class chain: core/group outer (alignfull, variant class)
                → gb element .inline-alert__inner
                  ::before — CSS-owned icon (never touches markup)
                  → gb text  .inline-alert__text

   Variants:
     .alert-warning     — blue-primary bg + triangle-! icon
     .alert-information — green-primary bg + circle-i icon

   Icon is CSS-only: editors cannot mis-assign the wrong glyph.
   ──────────────────────────────────────────────────────────── */

/* ── Outer wrapper — constrained, not full-bleed ──────────── */
.alert-warning,
.alert-information {
	max-width: var(--container-narrow);
	margin-inline: auto;
	margin-top: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

/* ── Shared inner layout ──────────────────────────────────── */
.inline-alert__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-md) var(--spacing-md);
}

/* ── Icon slot (shared; variant swaps background-image) ───── */
.inline-alert__inner::before {
	content: "";
	display: block;
	flex-shrink: 0;
	width: 35px;
	height: 35px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-top: 2px; /* optical alignment with first-line cap-height */
}

/* ── Alert text ───────────────────────────────────────────── */
.inline-alert__text {
	flex: 1;
	font-family: var(--font-primary);
	font-size: var(--text-body-lg);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-white);
	text-align: left;
	margin: 0;
}

/* ── Warning variant — blue-primary + triangle-! ─────────── */
.alert-warning {
	background-color: var(--color-blue-primary);
}

.alert-warning .inline-alert__inner::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
}

/* ── Information variant — green-primary + circle-i ─────── */
.alert-information {
	background-color: var(--color-green-primary);
}

.alert-information .inline-alert__inner::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
	.inline-alert__inner {
		padding: var(--spacing-md) var(--spacing-sm);
	}
}