/**
 * Uplift 360 — Universal Component System
 *
 * One design system: Page heroes, cards, buttons, section headings, notices, and empty states.
 *
 * @package Uplift360
 * @version 1.16.0
 */

/* ==========================================================================
   Page Hero Component (Interior Pages)
   ========================================================================== */
.u360-page-hero {
	padding: 56px 0 48px;
	background: linear-gradient(180deg, var(--u360-color-bg-soft, #f8f6fb) 0%, #ffffff 100%);
	border-bottom: 1px solid var(--u360-color-border, #e8e3ef);
	position: relative;
}

.u360-page-hero-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.u360-page-hero--centered .u360-page-hero-inner {
	align-items: center;
	text-align: center;
}

.u360-page-eyebrow,
.u360-portal-eyebrow,
.u360-badge {
	display: inline-flex;
	align-items: center;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--u360-color-purple, #6f24c7);
	background: var(--u360-color-purple-light, #f4effb);
	padding: 6px 14px;
	border-radius: var(--u360-radius-pill, 999px);
	margin-bottom: 16px;
	line-height: 1;
}

.u360-badge-green {
	background: var(--u360-color-green-light, #eaf8e6);
	color: var(--u360-color-green, #27a84b);
}

.u360-page-title,
.u360-portal-title,
.u360-archive-title {
	font-size: clamp(34px, 4.4vw, 54px);
	font-weight: 800;
	color: var(--u360-color-navy, #11183f);
	margin: 0 0 16px;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.u360-page-desc,
.u360-portal-lead,
.u360-archive-desc {
	font-size: clamp(16px, 1.2vw, 19px);
	line-height: 1.6;
	color: var(--u360-color-muted, #667085);
	margin: 0 0 24px;
	max-width: 720px;
}

.u360-page-hero--centered .u360-page-desc {
	margin-inline: auto;
}

.u360-page-hero-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 8px;
}

/* Breadcrumbs */
.u360-breadcrumbs,
.u360-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--u360-color-muted, #667085);
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.u360-breadcrumbs a,
.u360-breadcrumb a {
	color: var(--u360-color-muted, #667085);
	text-decoration: none;
}

.u360-breadcrumbs a:hover,
.u360-breadcrumb a:hover {
	color: var(--u360-color-purple, #6f24c7);
}

/* ==========================================================================
   Universal Card Component
   ========================================================================== */
.u360-card {
	background: #ffffff;
	border: 1px solid var(--u360-color-border, #e8e3ef);
	border-radius: var(--u360-radius-lg, 24px);
	box-shadow: var(--u360-shadow-sm);
	padding: 28px;
	display: flex;
	flex-direction: column;
	transition: var(--u360-transition);
	position: relative;
	box-sizing: border-box;
}

.u360-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--u360-shadow-md);
}

.u360-card--soft {
	background-color: var(--u360-color-bg-soft, #f8f6fb);
}

.u360-card--purple {
	background: linear-gradient(135deg, var(--u360-color-purple, #6f24c7) 0%, var(--u360-color-purple-dark, #54179e) 100%);
	color: #ffffff;
	border-color: transparent;
}

.u360-card--purple h2,
.u360-card--purple h3,
.u360-card--purple p {
	color: #ffffff;
}

.u360-card--green {
	background-color: var(--u360-color-green-light, #eaf8e6);
	border-color: rgba(39, 168, 75, 0.2);
}

.u360-card--outlined {
	background: transparent;
	border: 2px solid var(--u360-color-border, #e8e3ef);
	box-shadow: none;
}

.u360-card__header {
	margin-bottom: 16px;
}

.u360-card__title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--u360-color-navy, #11183f);
	margin: 0 0 10px;
	line-height: 1.3;
}

.u360-card__title a {
	color: inherit;
	text-decoration: none;
}

.u360-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.u360-card__footer,
.card__footer,
.u360-card-footer {
	margin-top: auto;
	padding-top: 16px;
}

/* ==========================================================================
   Universal Button System
   ========================================================================== */
.u360-btn,
.u360-button,
.button,
input[type="submit"].u360-btn,
button.u360-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 12px 24px;
	border-radius: var(--u360-radius-pill, 999px);
	font-family: var(--u360-font-primary);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	transition: var(--u360-transition);
	box-sizing: border-box;
}

.u360-btn:hover,
.u360-button:hover,
.button:hover {
	transform: translateY(-2px);
	text-decoration: none;
}

/* Purple Primary */
.u360-btn-purple,
.u360-btn-primary,
.button:not(.u360-btn-outline-purple):not(.u360-btn-lime):not(.u360-btn-white) {
	background-color: var(--u360-color-purple, #6f24c7);
	color: #ffffff;
}

.u360-btn-purple:hover,
.u360-btn-primary:hover {
	background-color: var(--u360-color-purple-dark, #54179e);
	color: #ffffff;
	box-shadow: 0 6px 18px rgba(111, 36, 199, 0.35);
}

/* Outlined Purple */
.u360-btn-outline-purple,
.button--outline {
	background-color: transparent;
	border-color: var(--u360-color-purple, #6f24c7);
	color: var(--u360-color-purple, #6f24c7);
}

.u360-btn-outline-purple:hover,
.button--outline:hover {
	background-color: var(--u360-color-purple-light, #f4effb);
	color: var(--u360-color-purple, #6f24c7);
}

/* Lime Green CTA */
.u360-btn-lime {
	background-color: var(--u360-color-lime, #64e329);
	color: var(--u360-color-navy, #11183f);
	font-weight: 800;
}

.u360-btn-lime:hover {
	background-color: #55cf21;
	box-shadow: 0 6px 18px rgba(100, 227, 41, 0.4);
}

/* White Pill */
.u360-btn-white {
	background-color: #ffffff;
	color: var(--u360-color-purple, #6f24c7);
	font-weight: 700;
	box-shadow: var(--u360-shadow-sm);
}

.u360-btn-white:hover {
	background-color: #f8f8fb;
	box-shadow: var(--u360-shadow-md);
}

/* Button Sizing Modifiers */
.u360-btn-sm,
.button--small {
	min-height: 38px;
	padding: 8px 18px;
	font-size: 13.5px;
}

.u360-btn-lg {
	min-height: 52px;
	padding: 15px 32px;
	font-size: 16px;
}

.u360-btn-full {
	width: 100%;
}

/* Text Link with Arrow */
.u360-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: 15px;
	color: var(--u360-color-purple, #6f24c7);
	text-decoration: none;
	transition: var(--u360-transition);
}

.u360-link-arrow:hover {
	color: var(--u360-color-purple-dark, #54179e);
	transform: translateX(4px);
}

/* ==========================================================================
   Section Heading Component
   ========================================================================== */
.u360-section-heading {
	margin-bottom: 36px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 20px;
}

.u360-section-heading__content,
.u360-section-heading__main {
	max-width: 680px;
}

.u360-section-heading__eyebrow {
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--u360-color-purple, #6f24c7);
	margin-bottom: 8px;
	display: block;
}

.u360-section-heading__title {
	font-size: clamp(28px, 3.4vw, 42px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.5px;
	color: var(--u360-color-navy, #11183f);
	margin: 0 0 10px;
}

.u360-section-heading__desc {
	font-size: clamp(15.5px, 1.2vw, 18px);
	line-height: 1.55;
	color: var(--u360-color-muted, #667085);
	margin: 0;
}

.u360-section-heading__action {
	display: flex;
	align-items: center;
}

/* ==========================================================================
   Notices & Alerts
   ========================================================================== */
.u360-notice {
	padding: 16px 22px;
	border-radius: var(--u360-radius-md, 16px);
	margin-bottom: 24px;
	font-size: 15px;
	line-height: 1.5;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border: 1px solid transparent;
}

.u360-notice--success {
	background-color: var(--u360-color-success-bg, #eaf8e6);
	color: var(--u360-color-success-text, #1b6329);
	border-color: rgba(39, 168, 75, 0.25);
}

.u360-notice--error {
	background-color: var(--u360-color-error-bg, #fdf2f2);
	color: var(--u360-color-error-text, #9b1c1c);
	border-color: rgba(224, 36, 36, 0.25);
}

.u360-notice--info {
	background-color: var(--u360-color-info-bg, #f4effb);
	color: var(--u360-color-info-text, #54179e);
	border-color: rgba(111, 36, 199, 0.2);
}

/* ==========================================================================
   Empty States
   ========================================================================== */
.u360-empty-state {
	text-align: center;
	padding: 64px 24px;
	background: #ffffff;
	border-radius: var(--u360-radius-lg, 24px);
	border: 1px dashed var(--u360-color-border, #e8e3ef);
	max-width: 580px;
	margin: 0 auto;
}

.u360-empty-state__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--u360-color-purple-light, #f4effb);
	color: var(--u360-color-purple, #6f24c7);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.u360-empty-state__title {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--u360-color-navy, #11183f);
	margin: 0 0 10px;
}

.u360-empty-state__desc {
	font-size: 15px;
	color: var(--u360-color-muted, #667085);
	margin: 0 0 24px;
	line-height: 1.6;
}

/* ==========================================================================
   Impact Banner Card & High-Contrast Typography
   ========================================================================== */
.u360-hp-banner-section {
	padding: 40px 0;
}

.u360-hp-banner-card {
	position: relative;
	border-radius: var(--u360-radius-card, 24px);
	padding: clamp(32px, 5vw, 56px);
	background-size: cover;
	background-position: center;
	color: #ffffff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	overflow: hidden;
	box-shadow: 0 16px 40px rgba(17, 24, 63, 0.16);
}

.u360-hp-banner-card .u360-hp-banner-content {
	flex: 1;
	max-width: 680px;
	z-index: 2;
}

.u360-hp-banner-card .u360-hp-banner-title {
	color: #ffffff !important;
	font-size: clamp(1.85rem, 3.5vw, 2.75rem);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 16px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.u360-hp-banner-card .u360-hp-banner-desc {
	color: rgba(255, 255, 255, 0.95) !important;
	font-size: clamp(1rem, 2vw, 1.15rem);
	line-height: 1.6;
	margin: 0 0 28px;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

.u360-hp-banner-card .u360-hp-banner-actions {
	display: flex;
	gap: 16px;
	align-items: center;
}

.u360-hp-banner-card .u360-btn-white {
	background: #ffffff !important;
	color: #6f24c7 !important;
	border-color: #ffffff !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	font-weight: 700;
}

.u360-hp-banner-card .u360-btn-white:hover {
	background: #f4effb !important;
	color: #54179e !important;
	transform: translateY(-2px);
}

.u360-hp-banner-card .u360-hp-banner-annotation {
	flex-shrink: 0;
	z-index: 2;
	padding: 10px;
}

.u360-hp-banner-card .u360-script-text--gold,
.u360-script-text--gold {
	color: #ffd166 !important;
	font-family: var(--u360-font-script, cursive);
	font-size: clamp(1.5rem, 3vw, 2.3rem);
	line-height: 1.2;
	display: inline-block;
	transform: rotate(-3deg);
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

@media (max-width: 820px) {
	.u360-hp-banner-card {
		flex-direction: column;
		align-items: flex-start;
		padding: 36px 24px;
		gap: 20px;
	}

	.u360-hp-banner-card .u360-hp-banner-annotation {
		align-self: flex-start;
		margin-top: 10px;
	}
}