/* ===== Team Members – frontend styles (v4 — center-zoom slider + fixes) ===== */
.tmep-outer { position: relative; }

/* ---- Section heading (Subtitle + Title) ---- */
.tmep-section-header { text-align: center; margin: 0 0 30px; }
.tmep-subtitle{
    
  
  margin: 0 !important;
  	padding-bottom: 15px;
    color: #FF5113 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    text-align: center !important;
    line-height: 50px !important;
    font-size: 50px !important;
}
.tmep-title {
    margin: 0px !important;
    padding: 20px 0px;
    color: #1b365d !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* Only clip horizontally so a vertical box-shadow/scale never gets cut off by the viewport */
.tmep-wrap { position: relative; overflow-x: hidden; overflow-y: visible; margin: 10px 0; }

/* ---- Card (sized down + more compact per feedback #3) ----
   display:flex column + min-height so every card in a row ends up the
   same height and the "About Me" button always sits pinned to the same
   bottom line, regardless of how long a name/role happens to be — this
   is what was causing chips/buttons to look off-center vs. neighbours. */
.tmep-card {
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 6px 16px rgba(20,30,45,.10);
	border-top: 4px solid #e7eaee; /* neutral by default — the active/zoomed card gets a distinct accent color, see below */
	transition: transform .35s ease, box-shadow .35s ease, opacity .35s ease, border-color .35s ease;
	display: flex;
	flex-direction: column;
	min-height: 320px;
}
.tmep-card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(20,30,45,.18); }

.tmep-card-img { overflow: hidden; flex: 0 0 auto; }
.tmep-card-img img {
	width: 100%; height: 210px; object-fit: cover; display: block; background: #e9edf2;
	transition: transform .4s ease;
	-webkit-user-drag: none;
	user-select: none;
}
.tmep-card:hover .tmep-card-img img { transform: scale(1.06); }

.tmep-card-body {
	padding: 14px 14px 18px;
	text-align: center;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tmep-name {
	margin: 0 0 6px !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	color: #16232f !important;
	line-height: 1.3 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tmep-role {
	display: inline-block;
	margin: 0 0 14px !important;
	color: #d5501f !important;
	background: rgba(213,80,31,.09);
	font-weight: 600 !important;
	font-size: 10.5px !important;
	letter-spacing: .05em !important;
	text-transform: uppercase !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
	padding: 5px 13px;
	border-radius: 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/*.tmep-about-btn {
	background: #d5501f !important; color: #fff !important; border: none !important; padding: 8px 22px !important;
	border-radius: 22px !important; cursor: pointer; font-weight: 600 !important; font-size: 12.5px !important;
	letter-spacing: .02em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
	transition: background .25s ease, transform .15s ease, box-shadow .25s ease;
	box-shadow: none;
	margin-top: auto;
	flex-shrink: 0;
}
.tmep-about-btn:hover { background: #b8401a !important; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(213,80,31,.35); }*/
.tmep-about-btn {
	background-color: transparent !important;
    font-size: 12.5 !important;
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
    background-image: linear-gradient(90deg, #FF5113 0%, #FFA060 100%) !important;
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.5) !important;
    border-style: none !important;
    padding: 7px 15px !important;
  	cursor: pointer;
}
.tmep-about-btn:hover { 
	background-color: transparent !important;
    color: #FFFFFF !important;
    background-image: linear-gradient(90deg, #FF5113 0%, #FFA060 100%) !important;
    box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.5) !important;
}


/* ---- Featured / President card (fix #4 — visually anchored + emphasised) ----
   Distinguished only via the top accent border + a slightly deeper shadow.
   The role chip intentionally keeps the SAME color as every other chip
   (previously it turned orange/white here, which read as a random
   inconsistent chip color next to the rest of the row). */

.tmep-marquee .tmep-card.is-featured,
.tmep-carousel-card.is-featured .tmep-card { transform: translateY(-4px); }

/* ================================================================
   MARQUEE (Committee Members) — auto-scrolling strip
   ================================================================ */
.tmep-marquee-track {
	display: flex;
	width: max-content;
	padding: 14px 0 24px;
	animation-name: tmep-scroll;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	will-change: transform;      /* GPU layer — smooth animation & drag */
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;         /* browser handles vertical scroll; JS handles horizontal drag */
}
.tmep-marquee-track:active { cursor: grabbing; }
.tmep-marquee-track:hover  { animation-play-state: paused; }
.tmep-marquee-group { display: flex; gap: 22px; padding-right: 22px; }
.tmep-marquee .tmep-card { width: 220px; flex: 0 0 auto; }

/* Center-zoom for the marquee — JS toggles this on whichever card is
   currently nearest the strip's visual center as it auto-scrolls.
   Distinct top-border accent so the "active" card is visually obvious
   at a glance, separate from the neutral default border on the rest. */
.tmep-marquee .tmep-card.tmep-marquee-zoomed {
	transform: translateY(-6px) scale(1.05);
	box-shadow: 0 14px 30px rgba(20,30,45,.20);
	border-top-color: #d5501f;
	z-index: 2;
}

@keyframes tmep-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Fade edges using a mask so it works over ANY background colour (fix #6) —
   no more flat gradient block that clashes with the section background. */
.tmep-marquee {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
	        mask-image: linear-gradient(to right, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
}
@media (max-width: 600px) {
	.tmep-marquee {
		-webkit-mask-image: none !important;
		        mask-image: none !important;
	}
}

/* ================================================================
   SLIDER — center-zoom carousel (Presidents)
   Rebuilt per feedback #1, #2, #3: a single continuous track that
   moves card-by-card, keeps the active card centred + scaled up,
   and fades/shrinks the peeking neighbours either side.
   ================================================================ */
.tmep-slider-viewport {
	position: relative;
	overflow-x: hidden;
	overflow-y: visible;
	padding: 30px 2px 20px;
	cursor: grab;
	/*
	 * touch-action: pan-y  → browser handles vertical scroll natively;
	 * our touchmove listener (passive:false) intercepts horizontal swipes
	 * with e.preventDefault() once direction is confirmed. This is the
	 * correct setting: it lets the user scroll the page when they swipe
	 * vertically over the slider, while still giving JS full control of
	 * horizontal swipes.
	 */
	touch-action: pan-y;
}
.tmep-slider-viewport.is-dragging {
	cursor: grabbing;
	/* Disable pointer events on children so hover states don't flicker during drag */
	touch-action: none; /* once dragging is confirmed, block ALL native touch */
}
.tmep-slider-viewport.is-dragging .tmep-carousel-card,
.tmep-slider-viewport.is-dragging .tmep-page,
.tmep-slider-viewport.is-dragging .tmep-card {
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;        /* prevent accidental hover/click during drag */
}
.tmep-slider-track {
	display: flex;
	align-items: center;
	will-change: transform;
	transition: transform var(--tmep-slide-duration, .55s) cubic-bezier(.25,.8,.3,1);
}
.tmep-carousel-card {
	flex: 0 0 auto;
	width: 250px;
	padding: 0 12px;
	box-sizing: border-box;
	transform: scale(.86);
	opacity: .55;
	transition: transform var(--tmep-slide-duration, .55s) cubic-bezier(.25,.8,.3,1), opacity var(--tmep-slide-duration, .55s) ease;
}
.tmep-carousel-card .tmep-card { height: 100%; }
.tmep-carousel-card.is-active {
	transform: scale(1);
	opacity: 1;
	z-index: 3;
}
.tmep-carousel-card.is-active .tmep-card { border-top-color: #d5501f; }
.tmep-carousel-card.is-adjacent { opacity: .8; transform: scale(.92); }

/* Clones used purely to make the loop visually seamless — not real
   content, so keep them out of tab order / click handling. */
.tmep-carousel-card.is-clone { pointer-events: none; }

/* "Center zoom" setting turned OFF: every card stays the same size,
   no scale/opacity emphasis on the active slide — just a plain
   infinite auto-sliding row. */
.tmep-slider-viewport.tmep-no-zoom .tmep-carousel-card,
.tmep-slider-viewport.tmep-no-zoom .tmep-carousel-card.is-active,
.tmep-slider-viewport.tmep-no-zoom .tmep-carousel-card.is-adjacent {
	transform: none !important;
	opacity: 1 !important;
}

/* Grid mode (used only when 2 rows are requested — a paged grid instead
   of a single-card carousel, since "center-zoom" of a whole grid page
   isn't meaningful). Fix #1: driven by JS-computed column count so it
   never breaks on resize/desktop widths. */
.tmep-slider-track.is-grid-mode { align-items: stretch; }
.tmep-page {
	flex: 0 0 100%;
	display: grid;
	gap: 22px;
	padding: 16px 6px 20px;
	align-items: start;
}

.tmep-nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	display: flex; align-items: center; justify-content: center;
	background: #fff; border: none; width: 44px; height: 44px; border-radius: 50%;
	box-shadow: 0 4px 14px rgba(20,30,45,.22); cursor: pointer; z-index: 6; color: #16232f;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.tmep-nav:hover { background: #d5501f; color: #fff; transform: translateY(-50%) scale(1.08); }
.tmep-nav:active { transform: translateY(-50%) scale(.95); }
.tmep-nav svg { pointer-events: none; }
.tmep-prev { left: 4px; }
.tmep-next { right: 4px; }
.tmep-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.tmep-dots button {
	width: 9px; height: 9px; border-radius: 50%; border: none; background: #d7dde3;
	cursor: pointer; padding: 0; transition: all .25s ease;
}
.tmep-dots button.active { background: #d5501f; width: 24px; border-radius: 6px; }

/* ---- Modal ("About Me") ---- */
.tmep-modal {
	position: fixed; inset: 0; z-index: 999999; display: none;
	align-items: center; justify-content: center; padding: 20px;
}
.tmep-modal.active { display: flex; }
.tmep-modal-overlay { position: absolute; inset: 0; background: rgba(15,23,32,.65); }
.tmep-modal-box {
	position: relative; background: #fff; max-width: 480px; width: 100%;
	border-radius: 16px; padding: 40px 28px 28px; max-height: 85vh; overflow-y: auto;
	animation: tmep-pop .25s ease;
    border-bottom:4px solid #ca3510;
}
@keyframes tmep-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }

/* Fix #5: proper circular close button with a crisp SVG icon instead of
   a bare "×" glyph that theme button-resets were stretching into a pill. */
.tmep-modal-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: 
#f4f0ec !important;
    border: none !important;
    border-radius: 50%;
    display: flex !important;
    align-items: center!important;
    justify-content: center !important;
    line-height: 0 !important;
    cursor: pointer !important;
    color: #445 !important;
    box-shadow: none !important;
    transition: background .2s ease, color .2s ease !important;
}
.tmep-modal-close svg { width: 16px; height: 16px; display: block; pointer-events: none; }
.tmep-modal-close:hover { background: #d5501f; color: #fff; }
.tmep-modal-close:focus-visible { outline: 2px solid #d5501f; outline-offset: 2px; }

/* ---- Modal body: photo left, name+role beside it, description spans full width below ---- */
.tmep-modal-header {
	display: flex;
	align-items: center;
	gap: 16px;
	text-align: left;
	
}
.tmep-modal-avatar { flex: 0 0 auto; }
.tmep-modal-avatar img {
	width: 84px; height: 84px; object-fit: cover; border-radius: 50%;
	display: block; border: 3px solid #f4f7fb;
}
.tmep-modal-heading { text-align: left; min-width: 0; }
.tmep-modal-heading h3 {
	margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #16232f;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.tmep-modal-role {
	display: inline-block;
	text-align: left; color: #d5501f; background: rgba(213,80,31,.09); font-weight: 600;
	margin: 0; text-transform: uppercase; font-size: 11px; letter-spacing: .05em;
	padding: 4px 12px; border-radius: 20px;
}
.tmep-modal-detail { text-align: left; color: #445; line-height: 1.65; font-size: 14.5px; }
body.tmep-modal-open { overflow: hidden; }

/* ---- Responsive ---- */
@media (max-width: 992px) {
	.tmep-carousel-card { width: 210px; padding: 0 8px; }
}
@media (max-width: 600px) {
	.tmep-marquee .tmep-card { width: 190px; }
	.tmep-nav { display: none; }
	.tmep-carousel-card { width: 170px; transform: scale(.94); }
	.tmep-carousel-card.is-active { transform: scale(1); }

	/* Soft edge-fade instead of a hard clip, so the peeking adjacent card
	   doesn't show an abrupt cut-off shadow line at the screen edge. */
	.tmep-slider-viewport {
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
		        mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
	}
}
.tmep-modal-detail ol{
  padding-left:20px !important;
}
.tmep-modal-detail ol li{
  padding-bottom:10px !important;
}