/* =========================================================
   HOMEPAGE SECTION — App Card + Our Journey — [endo_awards_journey]
   Department of Endocrinology, CMC Vellore
   -------------------------------------------------------
   Colour variables (--endo-navy, --endo-gold, --endo-blue-accent,
   --endo-border) are declared once in header.css / hero.css /
   quickactions.css, loaded site-wide, and reused here.

   The column header row (.endo-en-head / .endo-en-eyebrow /
   .endo-en-viewall) reuses the classes introduced in
   events-news.css for the "Upcoming Events" / "News & Announcements"
   headers — same "View All" pattern, so it isn't redeclared here.

   Single row split 30/70 — see .endo-aj-row: the app card
   (.endo-app-card) on the left, the journey carousel
   (.endo-aj-journey) on the right. Stacks to a single column
   below the 900px tablet breakpoint.
   ========================================================= */

.endo-awards-journey * { box-sizing: border-box; }

.endo-awards-journey {
	background: #fff;
	padding: 64px 0;
}

.endo-aj-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 24px;
}

.endo-aj-row {
	display: grid;
	grid-template-columns: 30% 70%;
	gap: 32px;
	align-items: stretch;
}

/* ===========================================================
   LEFT 30% — CMC Endo Mobile App card
   =========================================================== */
.endo-app-card {
	background: #fff;
	border: 1px solid var(--endo-border);
	border-radius: 12px;
	padding: 16px 16px 14px;
	box-shadow: 0 6px 20px rgba(10, 37, 89, 0.06);
	display: flex;
	flex-direction: column;
	/* Min-height is set explicitly in px by awards-journey-match-height.js
	   on desktop (>900px) to match the Our Journey block beside it. Using
	   min-height (not height) means the card can still grow to fit its
	   own content (photo + feature list + Play Store badge) if that's
	   taller than the journey column — previously a fixed height +
	   overflow:hidden here would silently clip the badge off the bottom
	   whenever the journey side rendered shorter. Below 900px the row
	   stacks to one column and JS clears this back to auto. */
	overflow: visible;
}

.endo-app-card-title {
	margin: 0 0 12px;
	text-align: center;
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--endo-navy);
	letter-spacing: 0.01em;
}

.endo-app-card-body {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	margin-bottom: 14px;
}

.endo-app-card-photo {
	flex: 0 0 auto;
	width: 36%;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--endo-border);
	box-shadow: 0 6px 14px rgba(10, 37, 89, 0.1);
}

.endo-app-card-photo img {
	display: block;
	width: 100%;
	height: auto;
}

.endo-app-card-list {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	font-weight: 600;
	color: var(--endo-navy);
}
.endo-app-card-list li {
	position: relative;
	padding: 5px 0 5px 14px;
	border-bottom: 1px dashed var(--endo-border);
}
.endo-app-card-list li:last-child { border-bottom: none; }
.endo-app-card-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 12px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--endo-gold);
}

.endo-app-card-badges {
	display: flex;
	justify-content: center;
	flex-shrink: 0;
}

.endo-app-store-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #0d0d0d;
	color: #fff;
	border-radius: 8px;
	padding: 8px 16px;
	text-decoration: none;
	transition: background .15s ease, transform .15s ease;
}
.endo-app-store-badge:hover {
	background: #000;
	color: #fff;
	transform: translateY(-1px);
}
.endo-app-store-badge span {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	font-size: 13px;
	font-weight: 700;
}
.endo-app-store-badge small {
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.03em;
	opacity: 0.85;
}

/* ===========================================================
   RIGHT 70% — Our Journey infinite-loop carousel
   =========================================================== */
.endo-aj-journey {
	min-width: 0; /* let the grid track shrink the carousel properly */
}

.endo-journey-carousel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 8px;
}

.endo-journey-viewport {
	flex: 1 1 auto;
	overflow: hidden;
	min-width: 0;
}

.endo-journey-track {
	display: flex;
	align-items: stretch;
	gap: 24px;
	will-change: transform;
	/* JS toggles a transition on/off around each loop-reset jump */
}
.endo-journey-track.is-animating {
	transition: transform 0.6s ease;
}

.endo-journey-card {
	flex: 0 0 calc((100% - 24px) / 2); /* 2 cards visible — narrower 70% column than the old full-width strip */
	background: #F7F9FC;
	border: 1px solid var(--endo-border);
	border-left: 5px solid var(--endo-blue-accent);
	border-radius: 12px;
	padding: 24px 22px;
	transition: box-shadow .15s ease, transform .15s ease, background .15s ease;
}
.endo-journey-card:hover {
	background: #fff;
	box-shadow: 0 10px 24px rgba(10, 37, 89, 0.1);
	transform: translateY(-2px);
}

.endo-journey-card-year {
	display: inline-block;
	background: var(--endo-navy);
	color: #fff;
	padding: 5px 15px;
	border-radius: 5px;
	font-weight: 800;
	font-size: 1.05rem;
	margin-bottom: 14px;
}

.endo-journey-card-list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--endo-text);
}
.endo-journey-card-list li {
	margin-bottom: 8px;
	padding-left: 16px;
	position: relative;
}
.endo-journey-card-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--endo-gold);
}
.endo-journey-card-list li:last-child { margin-bottom: 0; }
.endo-journey-card-list strong { color: var(--endo-navy); }

/* ---- Prev / Next arrows ---- */
.endo-journey-arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	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-journey-arrow:hover {
	background: var(--endo-navy);
	border-color: var(--endo-navy);
	color: #fff;
}
.endo-journey-arrow:disabled {
	opacity: 0.35;
	cursor: default;
}
.endo-journey-arrow:disabled:hover {
	background: #fff;
	border-color: var(--endo-border);
	color: var(--endo-navy);
}
.endo-journey-arrow .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

/* ---- Dots (progress indicator, purely visual) ---- */
.endo-journey-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -34px;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.endo-journey-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--endo-border);
	transition: background .2s ease, width .2s ease;
}
.endo-journey-dot.is-active {
	background: var(--endo-gold);
	width: 20px;
	border-radius: 4px;
}

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

/* ---- Laptops: still 2 up, just tighter padding ---- */
@media (max-width: 1199px) {
	.endo-aj-row { gap: 24px; }
}

/* ---- Tablets: stack app card above the journey carousel,
        1 milestone card visible at a time ---- */
@media (max-width: 900px) {
	.endo-awards-journey { padding: 52px 0; }

	.endo-aj-row {
		grid-template-columns: 1fr;
	}

	.endo-app-card { max-width: 480px; margin: 0 auto; }

	.endo-journey-card { flex: 0 0 100%; }
	.endo-journey-arrow { width: 38px; height: 38px; }
}

/* ---- Phones ---- */
@media (max-width: 640px) {
	.endo-awards-journey { padding: 44px 0 56px; }

	/* The 480px cap above is meant for tablets (640–900px) so the card
	   doesn't look oddly wide once it stacks full-row — on phones it
	   should use the full width available like every other section. */
	.endo-app-card { max-width: none; margin: 0; }

	.endo-app-card-body { flex-direction: column; }
	.endo-app-card-photo { width: 46%; }

	.endo-journey-card { flex: 0 0 100%; padding: 20px 18px; }
	.endo-journey-carousel { gap: 8px; }
}