/* ==========================================================================
   Winthrop University Visual Identity Section
   File: visual-identity.css
   Intended path: /ucm/visual-identity/_resources/css/visual-identity.css

   Notes:
   - Classes are prefixed with vi- to avoid conflicts with global CMS styles.
   - Uses flexbox/grid-style responsive layouts without requiring HTML tables.
   - Color values are based on the Visual Identity Manual.
   ========================================================================== */

/* Base section wrappers
   ========================================================================== */

.vi-section {
	margin: 0 0 2rem;
}

.vi-intro {
	font-size: 1.125rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

.vi-lede {
	font-size: 1.2rem;
	line-height: 1.65;
	margin-bottom: 1.5rem;
}

.vi-small {
	font-size: 0.925rem;
	line-height: 1.5;
}

.vi-muted {
	color: #555;
}

.vi-note {
	border-left: 5px solid #6b0d0e;
	background: #f7f7f7;
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
}

.vi-warning {
	border-left: 5px solid #e53100;
	background: #fff6f2;
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
}

.vi-callout {
	border: 1px solid #ddd;
	background: #fafafa;
	padding: 1.25rem;
	margin: 1.5rem 0;
}

.vi-divider {
	border: 0;
	border-top: 1px solid #ddd;
	margin: 2rem 0;
}

/* Responsive grids
   ========================================================================== */

.vi-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 1.5rem 0;
}

.vi-grid > * {
	flex: 1 1 260px;
	min-width: 0;
}

.vi-grid-2 > * {
	flex-basis: 320px;
}

.vi-grid-3 > * {
	flex-basis: 240px;
}

.vi-grid-4 > * {
	flex-basis: 190px;
}

.vi-card {
	border: 1px solid #ddd;
	background: #fff;
	padding: 1.25rem;
}

.vi-card h3,
.vi-card h4 {
	margin-top: 0;
}

.vi-card p:last-child,
.vi-card ul:last-child,
.vi-card ol:last-child {
	margin-bottom: 0;
}

/* Quick links / section navigation
   ========================================================================== */

.vi-link-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1.5rem 0;
	padding: 0;
	list-style: none;
}

.vi-link-grid li {
	flex: 1 1 220px;
	margin: 0;
}

.vi-link-grid a {
	display: block;
	border: 1px solid #ddd;
	background: #fff;
	padding: 1rem;
	text-decoration: none;
}

.vi-link-grid a:hover,
.vi-link-grid a:focus {
	text-decoration: underline;
}

.vi-link-grid-3 li {
	flex: 0 1 calc((100% - 2rem) / 3);
}

@media (max-width: 800px) {
	.vi-link-grid-3 li {
		flex-basis: calc((100% - 1rem) / 2);
	}
}

@media (max-width: 520px) {
	.vi-link-grid-3 li {
		flex-basis: 100%;
	}
}

/* Color palette
   ========================================================================== */

.vi-color-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 1.5rem 0;
}

.vi-color-card {
	flex: 1 1 220px;
	border: 1px solid #ddd;
	background: #fff;
	padding: 1rem;
	min-width: 0;
}

.vi-color-card h3 {
	margin-top: 0.85rem;
	margin-bottom: 0.5rem;
}

.vi-color-swatch {
	display: block;
	width: 100%;
	min-height: 110px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	margin: 0 0 0.85rem;
}

.vi-color-card dl {
	margin: 0;
}

.vi-color-card dt {
	font-weight: bold;
	float: left;
	clear: left;
	margin-right: 0.35rem;
}

.vi-color-card dd {
	margin: 0 0 0.35rem;
}

/* Brand color utility classes */

.vi-bg-garnet { background-color: #6b0d0e; }
.vi-bg-gold { background-color: #f8c23a; }
.vi-bg-sky-blue { background-color: #2cbade; }
.vi-bg-wisteria { background-color: #391e63; }
.vi-bg-coral-vine { background-color: #ffbaeb; }
.vi-bg-bell-tower-brown { background-color: #38280d; }
.vi-bg-green-college { background-color: #46bd62; }
.vi-bg-navy { background-color: #03203d; }
.vi-bg-rock-hill-red { background-color: #e53100; }
.vi-bg-garden-green { background-color: #405527; }
.vi-bg-black { background-color: #000; }
.vi-bg-white { background-color: #fff; }

/* Logo and image examples
   ========================================================================== */

.vi-example-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 1.5rem 0;
}

.vi-example-grid figure {
	flex: 1 1 260px;
	margin: 0;
	border: 1px solid #ddd;
	background: #fff;
	padding: 1rem;
}

.vi-example-grid img,
.vi-image-card img,
.vi-logo-example img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.vi-example-grid figcaption,
.vi-image-card figcaption,
.vi-logo-example figcaption {
	font-size: 0.925rem;
	line-height: 1.45;
	margin-top: 0.75rem;
	color: #333;
}

.vi-logo-example {
	border: 1px solid #ddd;
	background: #fff;
	padding: 1.25rem;
	margin: 1.5rem 0;
	text-align: center;
}

.vi-logo-example.vi-logo-dark {
	background: #000;
	color: #fff;
}

.vi-logo-example.vi-logo-garnet {
	background: #6b0d0e;
	color: #fff;
}

.vi-logo-example.vi-logo-gold {
	background: #f8c23a;
	color: #000;
}

.vi-placeholder {
	border: 2px dashed #bbb;
	background: #f7f7f7;
	padding: 1.5rem;
	text-align: center;
	color: #555;
	margin: 1rem 0;
}

/* Do / Don't patterns
   ========================================================================== */

.vi-do-dont {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 1.5rem 0;
}

.vi-do,
.vi-dont {
	flex: 1 1 300px;
	border: 1px solid #ddd;
	background: #fff;
	padding: 1.25rem;
}

.vi-do h3,
.vi-dont h3 {
	margin-top: 0;
}

.vi-do {
	border-top: 5px solid #405527;
}

.vi-dont {
	border-top: 5px solid #e53100;
}

.vi-check-list,
.vi-x-list {
	list-style: none;
	padding-left: 0;
}

.vi-check-list li,
.vi-x-list li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.5rem;
}

.vi-check-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	font-weight: bold;
}

.vi-x-list li::before {
	content: "×";
	position: absolute;
	left: 0;
	font-weight: bold;
}

/* Typography examples
   ========================================================================== */

.vi-type-sample {
	border: 1px solid #ddd;
	background: #fff;
	padding: 1.25rem;
	margin: 1.5rem 0;
}

.vi-type-display {
	font-size: clamp(2rem, 5vw, 4rem);
	line-height: 1.05;
	margin: 0 0 0.75rem;
}

.vi-type-heading {
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	line-height: 1.15;
	margin: 0 0 0.75rem;
}

.vi-type-body {
	font-size: 1rem;
	line-height: 1.6;
}

/* Simple responsive data lists
   ========================================================================== */

.vi-data-list {
	border-top: 1px solid #ddd;
	margin: 1.5rem 0;
}

.vi-data-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	border-bottom: 1px solid #ddd;
	padding: 0.75rem 0;
}

.vi-data-label {
	flex: 0 0 180px;
	font-weight: bold;
}

.vi-data-value {
	flex: 1 1 260px;
}

/* Downloads / buttons
   ========================================================================== */

.vi-button-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1rem 0;
	padding: 0;
	list-style: none;
}

.vi-button-list li {
	margin: 0;
}

.vi-button,
.vi-button-list a {
	display: inline-block;
	background: #6b0d0e;
	color: #fff;
	padding: 0.65rem 1rem;
	text-decoration: none;
	border: 1px solid #6b0d0e;
}

.vi-button:hover,
.vi-button:focus,
.vi-button-list a:hover,
.vi-button-list a:focus {
	/*background: #000;*/
	background-color: #7a1819;
	/* border-color: #000; */
	color: #fff !important;
	text-decoration: underline;
}

/* Responsive adjustments
   ========================================================================== */

@media (max-width: 700px) {
	.vi-card,
	.vi-color-card,
	.vi-example-grid figure,
	.vi-do,
	.vi-dont {
		flex-basis: 100%;
	}

	.vi-data-label,
	.vi-data-value {
		flex-basis: 100%;
	}

	.vi-color-swatch {
		min-height: 85px;
	}
}


/* Visual Identity color card layout patch
   Keeps color swatches in responsive side-by-side cards. */

.vi-color-grid {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 1.25rem !important;
	margin: 1.5rem 0 !important;
	align-items: stretch !important;
}

.vi-color-card {
	box-sizing: border-box !important;
	flex: 1 1 220px !important;
	min-width: 220px !important;
	border: 1px solid #ddd !important;
	background: #fff !important;
	padding: 1rem !important;
	margin: 0 !important;
}

.vi-color-grid-primary .vi-color-card {
	flex-basis: 320px !important;
}

.vi-color-grid-secondary .vi-color-card {
	flex-basis: 210px !important;
}

.vi-color-swatch {
	display: block !important;
	width: 100% !important;
	min-height: 110px !important;
	height: 110px !important;
	border: 1px solid rgba(0, 0, 0, 0.2) !important;
	margin: 0 0 0.85rem !important;
	box-sizing: border-box !important;
}

.vi-color-card h3 {
	margin: 0 0 0.5rem !important;
}

.vi-color-values p {
	margin: 0 0 0.35rem !important;
	line-height: 1.4 !important;
}

@media (max-width: 700px) {
	.vi-color-card {
		flex-basis: 100% !important;
		min-width: 0 !important;
	}
}