/* Department CSS Document */
/*For mobile first adaptive design place styles for mobile and up in the mobile and up area.
Place styles for tablet and up inside the media query in the tablet and up area.
Place styles for desktop only inside the media query in the desktop only area.\\

/* 1. Center the iframe by targeting its container */
.iframe-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px 0; /* Adds some breathing room top and bottom */
}

/* 2. Make the iframe bigger and responsive */
.iframe-container iframe {
    width: 90%;          /* Makes it wider (adjust percentage as needed) */
    max-width: 1200px;   /* Prevents it from getting too wide on massive screens */
    height: 80vh;        /* Makes it taller (80% of the viewport height) */
    border: none;        /* Removes the default ugly border */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Optional: adds a clean, professional shadow */
}

/* ============================================================
   PAGE HEADER — Dark Green Banner
   Reuses the same pattern as warm-curriculum.css
   ============================================================ */

.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.4rem;
	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 INTRO LABELS
   Lime badge above a section heading (e.g. "Leadership")
   ============================================================ */

.warm-section-label {
	display: inline-block;
	background-color: #c5e86c;   /* bg-lime */
	color: #275d38;               /* text-uvu-green */
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.3rem 0.75rem;
	border-radius: 2px;
	margin-bottom: 0.75rem;
}


/* ============================================================
   STAFF CARD — Table-based photo + info layout
   Each card uses a <table> for the photo row and info row.
   ============================================================ */

.warm-staff-card {
	width: 100%;
	border-collapse: collapse;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0,0,0,0.10);
	background-color: #fff;
}

/* Photo cell — full width, no padding, image flush */
.warm-staff-photo-cell {
	padding: 0;
	line-height: 0;
	width: 100%;
}

.warm-staff-photo-cell img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* Info cell — name, title, email, button */
.warm-staff-info-cell {
	padding: 1rem 1.1rem 1.1rem;
	vertical-align: top;
	width: 100%;
}

.warm-staff-name {
	font-size: 1rem;
	font-weight: 700;
	color: #222;
	margin: 0 0 0.25rem 0;
	line-height: 1.25;
}

.warm-staff-title {
	font-size: 0.82rem;
	color: #555;
	margin: 0 0 0.6rem 0;
	line-height: 1.4;
}

/* Email link row */
.warm-staff-email {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.82rem;
	color: #275d38;
	text-decoration: none;
	margin-bottom: 0.85rem;
}

.warm-staff-email:hover {
	text-decoration: underline;
}

.warm-staff-email-icon {
	font-size: 0.9rem;
	line-height: 1;
}

/* "Schedule an Appointment" — red filled button, full width */
.warm-btn-schedule {
	display: block;
	width: 100%;
	text-align: center;
	padding: 0.6rem 0.75rem;
	background-color: #c0392b;
	color: #fff;
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 2px;
	border: 2px solid #c0392b;
	box-sizing: border-box;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.warm-btn-schedule:hover {
	background-color: #a93226;
	border-color: #a93226;
	color: #fff;
}


/* ============================================================
   ADVISORY BOARD CARD — Grayscale photo variant
   Same table structure; photo rendered in black & white.
   ============================================================ */

.warm-staff-card--advisory .warm-staff-photo-cell img {
	filter: grayscale(100%);
}

/* Advisory board cards don't include an email or schedule button,
   so the info cell has slightly different spacing. */
.warm-staff-card--advisory .warm-staff-info-cell {
	padding-bottom: 1rem;
}

.warm-staff-card--advisory .warm-staff-title {
	margin-bottom: 0;
}


/* ============================================================
   SECTION DIVIDER — subtle horizontal rule between sections
   ============================================================ */

.warm-section-divider {
	border: none;
	border-top: 1px solid #e0e0e0;
	margin: 0;
}


/* ============================================================
   QUESTIONS SECTION — Centered CTA (shared pattern)
   ============================================================ */

.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: 0.75rem;
}

.warm-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.65rem 1.2rem;
	background-color: #275d38;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	border: 2px solid #275d38;
	border-radius: 2px;
	white-space: nowrap;
	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.65rem 1.2rem;
	background-color: transparent;
	color: #275d38;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	border: 2px solid #275d38;
	border-radius: 2px;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.warm-btn-outline:hover {
	background-color: #275d38;
	color: #fff;
}


/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 768px) {

	.warm-curr-header {
		padding: 1rem;
	}

	.warm-curr-header h1 {
		font-size: 1rem;
	}

	.warm-curr-cross-grid {
		display: none;
	}

	/* Staff photo slightly shorter on narrow screens */
	.warm-staff-photo-cell img {
		height: 180px;
	}

	.warm-btn-group {
		flex-direction: column;
		align-items: stretch;
	}

	.warm-btn-primary,
	.warm-btn-outline {
		width: 100%;
		justify-content: center;
	}
}