/* ============================================================
   PAGE HEADER — Dark Green Curriculum Banner
   ============================================================ */
 
.warm-curr-header {
	position: relative;
	padding: 1.25rem 2rem;
	overflow: hidden;
	/* bg-uvu-green-d1 applied via UVU class on <section> */
}
 
.warm-curr-header h1 {
	font-size: 1.6rem;
	margin: 0;
	position: relative;
	z-index: 1;
	/* text-white applied via UVU class */
}
 
/* Lime "+" cross grid — top-right decorative element */
.warm-curr-cross-grid {
	position: absolute;
	top: 0;
	right: 2rem;
	bottom: 0;
	width: 220px;
	background-image:
		radial-gradient(circle at center, #c5e86c 1.5px, transparent 1.5px),
		radial-gradient(circle at center, #c5e86c 1.5px, transparent 1.5px);
	background-size: 18px 18px;
	background-position: 0 0, 9px 9px;
	opacity: 0.5;
	pointer-events: none;
}
 
/* Lime accent stripe at very bottom of header bar */
.warm-curr-header::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4px;
	background-color: #c5e86c;
}
 
 
/* ============================================================
   SECTION 1 — INTRO
   two-big-right: small image left, text + buttons right
   ============================================================ */
 
/* Shared button styles — mirrors warm.css */
.warm-btn-stack {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}
 
.warm-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.7rem 1.4rem;
	background-color: #275d38;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	border: 2px solid #275d38;
	border-radius: 2px;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
 
.warm-btn-primary:hover {
	background-color: #1e482c;
	border-color: #1e482c;
	color: #fff;
}
 
.warm-btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.7rem 1.4rem;
	background-color: transparent;
	color: #275d38;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	border: 2px solid #275d38;
	border-radius: 2px;
	transition: background-color 0.2s ease, color 0.2s ease;
}
 
.warm-btn-outline:hover {
	background-color: #275d38;
	color: #fff;
}
 
 
/* ============================================================
   IMAGE FRAME — Diagonal stripe accent border
   Wraps images in semester sections with a decorative stripe.
   Default (.warm-img-frame): stripe on bottom-right of image.
   Alternate (.warm-img-frame--alt): stripe on top-left.
   ============================================================ */
 
.warm-img-frame {
	position: relative;
	display: block;
	padding-bottom: 18px;
	padding-right: 18px;
}
 
.warm-img-frame img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
}
 
/* Bottom-right stripe (default) */
.warm-img-frame::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 75%;
	height: 75%;
	background: repeating-linear-gradient(
		-45deg,
		#c5e86c,
		#c5e86c 4px,
		transparent 4px,
		transparent 10px
	);
	z-index: 0;
	border-radius: 2px;
}
 
/* Top-left stripe (alternate — image on right side of layout) */
.warm-img-frame--alt {
	padding-bottom: 0;
	padding-right: 0;
	padding-top: 18px;
	padding-left: 18px;
}
 
.warm-img-frame--alt::after {
	bottom: auto;
	right: auto;
	top: 0;
	left: 0;
}
 
 
/* ============================================================
   SEMESTER SECTIONS — Alternating background
   .warm-semester-section gets the subtle diagonal hatch bg.
   ============================================================ */
 
.warm-semester-section {
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(0,0,0,0.025),
		rgba(0,0,0,0.025) 1px,
		transparent 1px,
		transparent 10px
	);
	background-color: #f9f9f9; /* bg-grey-xlight equivalent */
}
 
 
/* ============================================================
   SEMESTER HEADINGS
   Uses UVU .underline-uvu-green helper class applied in PCF.
   Additional spacing below the heading underline.
   ============================================================ */
 
.warm-curr-header ~ * h2,
section h2.underline-uvu-green {
	margin-bottom: 1rem;
}
 
 
/* ============================================================
   COURSE GRID — 2-column grid of course cards
   ============================================================ */
 
.warm-course-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem;
	margin-top: 1.25rem;
}
 
.warm-course-card {
	background-color: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 3px;
	padding: 0.65rem 0.85rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 70px;
}
 
.warm-course-title {
	font-size: 0.82rem;
	font-weight: 400;
	color: #222;
	margin: 0 0 0.4rem 0;
	line-height: 1.3;
}
 
.warm-catalog-link {
	font-size: 0.8rem;
	text-decoration: none;
	font-weight: 400;
	/* text-uvu-green applied via UVU class */
}
 
.warm-catalog-link:hover {
	text-decoration: underline;
}
 
 
/* ============================================================
   QUESTIONS SECTION — Centered (shared with warm.css)
   ============================================================ */
 
.warm-questions {
	text-align: center;
	max-width: 680px;
	margin: 0 auto;
}
 
.warm-questions h2 {
	margin-bottom: 0.5rem;
}
 
.warm-questions p {
	margin-bottom: 1.5rem;
	color: #555;
}
 
.warm-btn-group {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1rem;
}
 
 
/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */
 
@media (max-width: 900px) {
 
	/* Course grid drops to one column on smaller screens */
	.warm-course-grid {
		grid-template-columns: 1fr;
	}
}
 
@media (max-width: 768px) {
 
	.warm-curr-header {
		padding: 1rem;
	}
 
	.warm-curr-header h1 {
		font-size: 1.25rem;
	}
 
	.warm-curr-cross-grid {
		display: none;
	}
 
	/* Image frames lose the stripe decoration on mobile */
	.warm-img-frame,
	.warm-img-frame--alt {
		padding: 0;
	}
 
	.warm-img-frame::after,
	.warm-img-frame--alt::after {
		display: none;
	}
 
	/* Button stack goes full width on mobile */
	.warm-btn-stack {
		flex-direction: column;
	}
 
	.warm-btn-primary,
	.warm-btn-outline {
		width: 100%;
		justify-content: center;
	}
 
	.warm-btn-group {
		flex-direction: column;
		align-items: stretch;
	}
 
	.warm-btn-group .warm-btn-outline {
		width: 100%;
		justify-content: center;
	}
}