/* =========================================================
   HOMEPAGE SECTION — Upcoming Events / Patient Education Hub /
   News & Announcements — [endo_events_news]
   Department of Endocrinology, CMC Vellore
   -------------------------------------------------------
   Colour variables (--endo-navy, --endo-navy-light, --endo-gold,
   --endo-blue-accent, --endo-border) are declared once in
   header.css / hero.css / quickactions.css, loaded site-wide,
   and reused here.

   Three columns sit in a single row on desktop, split 50% / 25% / 25%:
     1. .endo-events  — dark navy carousel, 3 cards visible at once
     2. .endo-eduhub  — NEW Patient Education Hub card
     3. .endo-news    — single-column News & Announcements list
   ========================================================= */

.endo-events-news * { box-sizing: border-box; }

.endo-events-news {
	background: #fff;
	padding: 64px 0;
}

.endo-events-news-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr; /* 50% / 25% / 25% */
	gap: 24px;
	align-items: stretch;
}

/* Grid items default to min-width: auto, which stops a column from ever
   shrinking below its content's intrinsic (max-content) width — that's
   what was pushing the events carousel past its 50% column and outside
   the section. min-width: 0 here lets each column actually respect the
   fr-track width instead of the content's natural size.

   All three are also flex columns at full row height (via the
   align-items: stretch above): Upcoming Events has the tallest fixed
   content (its 230px-min card), so with stretch enabled it's what sets
   the row height, and the other two columns are pulled up to match it
   rather than each growing to its own, taller, natural content height.
   Their trailing button/link uses margin-top: auto to settle at the
   bottom of whatever height that turns out to be. */
.endo-events,
.endo-eduhub,
.endo-news {
	min-width: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

/* ===========================================================
   SHARED — column header (eyebrow)
   =========================================================== */
.endo-en-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.endo-en-eyebrow {
	color: var(--endo-navy);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .3px;
	text-transform: uppercase;
}

/* Shared "pill" button — used for View All Events / View All News,
   and reused visually by the Explore Hub button below. */
.endo-events-viewall-btn,
.endo-eduhub-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: auto; /* pins every trailing button to the same bottom baseline across all 3 columns */
	width: 100%;
	padding: 11px 20px;
	border: 1.5px solid var(--endo-navy);
	border-radius: 30px;
	color: var(--endo-navy);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.endo-events-viewall-btn:hover,
.endo-eduhub-btn:hover {
	background: var(--endo-navy);
	color: #fff;
}
.endo-events-viewall-btn .dashicons,
.endo-eduhub-btn .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
}

/* All three trailing buttons now share margin-top: auto from the base
   rule above, so this is just an explicit reinforcement for the News
   column (kept for clarity / specificity, safe to leave in place). */
.endo-news > .endo-events-viewall-btn {
	margin-top: auto;
}

/* ===========================================================
   COLUMN 1 — Upcoming Events (dark single-card carousel)
   =========================================================== */
.endo-events-carousel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
}

.endo-events-viewport {
	flex: 1 1 auto;
	overflow: hidden;
	min-width: 0;
	border-radius: 14px;
}

.endo-events-track {
	display: flex;
	align-items: stretch;
	gap: 14px;
	will-change: transform;
}
.endo-events-track.is-animating {
	transition: transform 0.6s ease;
}

.endo-event-card {
	flex: 0 0 calc((100% - 14px * 2) / 3); /* 3 cards visible at once */
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, var(--endo-navy) 0%, #071B47 100%);
	border-radius: 12px;
	padding: 16px 16px 18px;
	display: flex;
	flex-direction: column;
	height: 250px; /* fixed (not min-) height so every card in the row is identical */
}

/* Decorative faint ring pattern, top-right of each card */
.endo-event-rings {
	position: absolute;
	top: -30px;
	right: -35px;
	width: 130px;
	height: 130px;
	border-radius: 50%;
	pointer-events: none;
	background:
		radial-gradient(circle at center, transparent 56%, rgba(255,255,255,0.07) 57%, rgba(255,255,255,0.07) 60%, transparent 61%),
		radial-gradient(circle at center, transparent 70%, rgba(255,255,255,0.05) 71%, rgba(255,255,255,0.05) 73%, transparent 74%);
}

.endo-event-badge {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	max-width: 100%;
	padding: 6px 8px;
	border-radius: 7px;
	background: #fff;
	line-height: 1.1;
	margin-bottom: 14px;
	text-align: center;
}
.endo-event-month {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: var(--endo-gold);
	white-space: nowrap;
}
.endo-event-day {
	font-size: 14px;
	font-weight: 800;
	color: var(--endo-navy);
	margin-top: 1px;
	white-space: nowrap;
}

.endo-event-title {
	position: relative;
	z-index: 1;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.35;
	color: #fff;
	margin-bottom: 10px;
	/* Fixed 2-line box (not just a clamp) so short 1-line titles and long
	   2-line titles reserve identical space — this is what keeps the
	   badge/meta/divider/button below starting at the same height on
	   every card regardless of title length. */
	height: calc(13.5px * 1.35 * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.endo-event-meta {
	position: relative;
	z-index: 1;
	font-size: 11px;
	line-height: 1.6;
	color: #B9C4DA;
	/* Fixed 2-line box, same reasoning as .endo-event-title above */
	height: calc(11px * 1.6 * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.endo-event-divider {
	position: relative;
	z-index: 1;
	display: block;
	height: 1px;
	background: rgba(255,255,255,0.15);
	margin: 14px 0 12px;
}

.endo-event-viewdetails {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: auto; /* always sits flush on the card's bottom edge, same row across all cards */
	padding: 8px 12px;
	border: 1.5px solid rgba(255,255,255,0.5);
	border-radius: 30px;
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}
.endo-event-viewdetails:hover {
	background: #fff;
	color: var(--endo-navy);
	border-color: #fff;
}

/* ---- Prev / Next arrows ---- */
.endo-events-arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid var(--endo-border);
	color: var(--endo-navy);
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.endo-events-arrow:hover {
	background: var(--endo-navy);
	border-color: var(--endo-navy);
	color: #fff;
}
.endo-events-arrow .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* ===========================================================
   COLUMN 2 — Patient Education Hub (NEW)
   =========================================================== */
.endo-eduhub {
	background: #F7F9FC;
	border: 1px solid var(--endo-border);
	border-radius: 14px;
	padding: 26px 22px 0; /* no bottom padding: lets the button sit flush with the box's bottom edge, on the same baseline as the View All Events / View All News buttons in the other two columns */
	display: flex;
	flex-direction: column;
	height: 100%;
}

.endo-eduhub-title {
	margin: 0 0 18px;
	text-align: center;
	color: var(--endo-navy);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .3px;
	text-transform: uppercase;
}

.endo-eduhub-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.endo-eduhub-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.endo-eduhub-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(44, 111, 227, 0.12);
	color: var(--endo-blue-accent);
}
.endo-eduhub-icon .dashicons {
	font-size: 17px;
	width: 17px;
	height: 17px;
}

.endo-eduhub-label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--endo-text);
	text-decoration: none;
}
.endo-eduhub-item a.endo-eduhub-label:hover,
.endo-eduhub-item a.endo-eduhub-label:focus {
	color: var(--endo-blue-accent);
	text-decoration: underline;
}

.endo-eduhub-btn {
	margin-top: auto;
	margin-bottom: 4px; /* tiny cushion off the box's bottom corner radius; keep small so the button still lines up with View All Events / View All News */
}

/* ===========================================================
   COLUMN 3 — News & Announcements (single column, ticker)
   =========================================================== */

/* ---- Viewport: clips the list to exactly 3 cards' worth of height.
   Sized as 3 card-heights (~58px, driven by the 56px thumb) plus the
   2 gaps between them. Everything past the 3rd card is still in the
   DOM and still cycles through — news-ticker.js scrolls .endo-news-list
   upward by one card+gap every couple of seconds and loops seamlessly
   — it's just clipped from view here until its turn comes around. */
.endo-news-viewport {
	overflow: hidden;
	height: calc(58px * 3 + 14px * 2);
}

.endo-news-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	will-change: transform;
}
.endo-news-list.is-animating {
	transition: transform 0.7s ease;
}

.endo-news-card {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	flex-shrink: 0;
}

/* ---- Thumbnail placeholder ----
   CSS-only gradient + icon watermark until real photography is
   supplied (see the PHP file's doc comment). Swap the <span> for an
   <img class="endo-news-thumb-img"> once photos are available; the
   sizing/border-radius below will still apply to the img. */
.endo-news-thumb {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #2C6FE3 0%, #0A2559 100%);
	overflow: hidden;
}
.endo-news-thumb .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: rgba(255, 255, 255, 0.8);
}
.endo-news-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.endo-news-body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}
.endo-news-title {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--endo-text);
	transition: color .15s ease;
	/* Clamp to 2 lines so uneven headline lengths keep the list tidy */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.endo-news-card:hover .endo-news-title { color: var(--endo-blue-accent); }

.endo-news-date {
	font-size: 11.5px;
	color: #8792A2;
}

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

/* ---- Laptops: tighten gaps, still 3 cards visible ---- */
@media (max-width: 1199px) {
	.endo-events-news-inner { gap: 20px; }
}

/* ---- Tablets: stack all three columns full-width; events track drops
        to 2 cards visible (matches the JS visibleCount breakpoint) ---- */
@media (max-width: 900px) {
	.endo-events-news { padding: 52px 0; }

	.endo-events-news-inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.endo-event-card {
		flex: 0 0 calc((100% - 14px) / 2);
		height: 250px;
	}
}

/* ---- Phones: events track drops to 1 card visible ---- */
@media (max-width: 560px) {
	.endo-events-news { padding: 44px 0; }

	.endo-event-card { flex: 0 0 100%; }
}