/* =========================================================
   Content UI System — Frontend Card Styles
   ========================================================= */

.cui-wrapper {
	--cui-radius: 12px;
	--cui-gap: 1.5rem;
	--cui-transition: 0.2s ease;
}

/* ----- Grid layouts ----- */

.cui-card-grid {
	display: grid;
	gap: var(--cui-gap);
}

.cui-layout-grid     { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cui-layout-list     { grid-template-columns: 1fr; }
.cui-layout-timeline { grid-template-columns: 1fr; position: relative; }

.cui-layout-timeline::before {
	content: '';
	position: absolute;
	left: 1.5rem;
	top: 0;
	bottom: 0;
	width: 2px;
	background: #e5e7eb;
}

/* ----- Card base ----- */

.cui-card {
	border-radius: var(--cui-radius);
	padding: 1.5rem;
	border: 1px solid transparent;
	transition:
		transform var(--cui-transition),
		box-shadow var(--cui-transition);
}

.cui-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
}

/* ----- Color variants ----- */

.cui-card--blue   { background: #eff6ff; border-color: #bfdbfe; }
.cui-card--green  { background: #f0fdf4; border-color: #bbf7d0; }
.cui-card--purple { background: #faf5ff; border-color: #e9d5ff; }
.cui-card--orange { background: #fff7ed; border-color: #fed7aa; }
.cui-card--red    { background: #fef2f2; border-color: #fecaca; }
.cui-card--teal   { background: #f0fdfa; border-color: #99f6e4; }

/* ----- Card regions ----- */

.cui-card__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.cui-card__icon  { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.cui-card__title { margin: 0; font-size: 1.125rem; font-weight: 600; }

/* Ensure the SEO-only div is never made visible by theme CSS overrides */
.cui-original-content { display: none !important; }

.cui-card__body            { font-size: 0.95rem; line-height: 1.7; }
.cui-card__body p:last-child { margin-bottom: 0; }

.cui-card__footer,
.cui-card__excerpt {
	display: none !important;
}

/* ----- Responsive ----- */

@media (max-width: 640px) {
	.cui-layout-grid { grid-template-columns: 1fr; }
}