/* Text Banner Component */

:root :where(.is-layout-constrained) > .csrc-text-banner {
	margin-block-start: 0 !important;
}

.csrc-text-banner {
	width: 100%;
	padding: 3rem 1rem;
	margin: 0;
	position: relative;
	overflow: hidden;
}

/* Default style — transparent with a subtle bottom edge */
.csrc-text-banner.style-default {
	background: transparent;
	border-bottom: 1px solid var(--color-border, #e5e5e5);
}

/* Light style — subtle gray background */
.csrc-text-banner.style-light {
	background: var(--color-card-bg, #f8f8f8);
	border-top: 1px solid var(--color-border, #e5e5e5);
	border-bottom: 1px solid var(--color-border, #e5e5e5);
}

/* Accent style — orange left border */
.csrc-text-banner.style-accent {
	background: var(--color-white, #ffffff);
	border-left: 4px solid var(--color-orange, #d4651a);
	padding-left: 1.5rem;
}

.csrc-text-banner__content {
	width: var(--container-width);
	max-width: var(--container-max-width);
	margin-inline: auto;
	position: relative;
	z-index: 2;
}

.csrc-text-banner__content.align-center {
	text-align: center;
}

.csrc-text-banner__content.align-left {
	text-align: left;
}

/* Typography */
.csrc-text-banner p {
	font-family: var(--font-primary);
	font-size: var(--font-size-base, 1rem);
	line-height: var(--line-height-loose, 1.7);
	letter-spacing: var(--letter-spacing-body, 0.1px);
	color: var(--color-text-primary, #000);
	margin: 0 0 1em 0;
}

.csrc-text-banner.weight-light p {
	font-weight: var(--font-weight-normal, 400);
}

.csrc-text-banner.weight-regular p {
	font-weight: var(--font-weight-normal, 400);
}

.csrc-text-banner.weight-semibold p {
	font-weight: var(--font-weight-semibold, 600);
}

.csrc-text-banner p:last-child {
	margin-bottom: 0;
}

.csrc-text-banner strong {
	font-weight: var(--font-weight-semibold, 600);
	color: var(--color-ucla-blue, #2774AE);
}

/* Inline-prose links standardized via .csrc-rich-text (content-links.css) */

/* Responsive */
@media (min-width: 768px) {
	.csrc-text-banner {
		padding: 1.5rem 1rem 2.5rem;
	}
}

@media (min-width: 960px) {
	.csrc-text-banner {
		padding: 1.5rem 1.5rem 3rem;
	}

	.csrc-text-banner.style-accent {
		padding-left: 2rem;
	}
}

@media (min-width: 1024px) {
	.csrc-text-banner {
		padding: 3rem 1.5rem 3rem;
	}
}