/* =========================================================
   HOMEPAGE SECTION — Recognitions & Achievements — [endo_recognitions]
   Department of Endocrinology, CMC Vellore
   -------------------------------------------------------
   Colour variables (--endo-navy, --endo-gold, --endo-blue-accent,
   --endo-border) are declared once in header.css, loaded site-wide,
   and reused here.
   ========================================================= */

.endo-recognitions * { box-sizing: border-box; }

.endo-recognitions {
	background: #F7F9FC;
	padding: 64px 0;
}

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

.endo-recognitions-eyebrow {
	display: block;
	text-align: center;
	color: var(--endo-blue-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 28px;
}

/* ---- Carousel shell: arrows either side of a scrollable track ---- */
.endo-recognitions-carousel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
}

.endo-recognitions-arrow {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1.5px solid var(--endo-border);
	background: #fff;
	color: var(--endo-navy);
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.endo-recognitions-arrow:hover {
	background: var(--endo-navy);
	border-color: var(--endo-navy);
	color: #fff;
}
.endo-recognitions-arrow .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}
.endo-recognitions-arrow:disabled {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

.endo-recognitions-viewport {
	flex: 1;
	overflow: hidden;
	min-width: 0;
	border-radius: 12px;
}

.endo-recognitions-track {
	display: flex;
	gap: 20px;
	will-change: transform;
	padding: 4px 2px 10px;
	/* Flex items default to min-width: auto, which blocks shrinking below
	   the track's full (unscrolled) content width — without this, the
	   whole carousel row (and the section with it) gets forced wider than
	   the viewport on phones instead of letting the viewport's overflow:
	   hidden clip it. */
	min-width: 0;
}
.endo-recognitions-track.is-animating {
	transition: transform 0.6s ease;
}

/* ---- Cards: fixed-ish width so 4 fit desktop, scroll on smaller ---- */
.endo-recognitions-card {
	flex: 0 0 calc(25% - 15px);
	background: #fff;
	border: 1px solid var(--endo-border);
	border-radius: 12px;
	padding: 20px 20px 22px;
	display: flex;
	flex-direction: column;
	transition: box-shadow .15s ease, transform .15s ease;
}
.endo-recognitions-card:hover {
	box-shadow: 0 12px 28px rgba(10, 37, 89, 0.1);
	transform: translateY(-3px);
}

.endo-recognitions-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.endo-recognitions-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
	background: rgba(44, 111, 227, 0.1);
	color: var(--endo-blue-accent);
}
.endo-recognitions-badge .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.endo-recognitions-logo {
	height: 40px;
	width: auto;
	max-width: 110px;
	object-fit: contain;
	flex-shrink: 0;
}

.endo-recognitions-card h3 {
	font-size: 14.5px;
	line-height: 1.4;
	font-weight: 700;
	color: var(--endo-navy);
	margin: 0 0 6px;
}

.endo-recognitions-date {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	color: var(--endo-blue-accent);
	margin-bottom: 16px;
}
.endo-recognitions-date .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

/* ---- Certificate preview: CSS-only placeholder, no image dependency ---- */
.endo-recognitions-cert {
	position: relative;
	height: 96px;
	border-radius: 8px;
	background: repeating-linear-gradient(
		135deg,
		#F3F6FC,
		#F3F6FC 10px,
		#EDF1F9 10px,
		#EDF1F9 20px
	);
	border: 1px solid var(--endo-border);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}
.endo-recognitions-cert > .dashicons {
	font-size: 30px;
	width: 30px;
	height: 30px;
	color: #C3CCDE;
}

/* Real award/certificate photo, when available (falls back to the
   diagonal placeholder + dashicon above if no image is supplied) */
.endo-recognitions-cert.has-image {
	overflow: hidden;
	background: #fff;
	padding: 6px;
}
.endo-recognitions-cert-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 4px;
}
.endo-recognitions-cert-ribbon {
	position: absolute;
	left: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--endo-gold);
}
.endo-recognitions-cert-ribbon .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	color: #fff;
}

.endo-recognitions-cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--endo-gold);
	color: var(--endo-navy);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	padding: 10px 14px;
	border-radius: 6px;
	transition: background .15s ease;
}
.endo-recognitions-cta:hover {
	background: #B8811E;
	color: #fff;
}
.endo-recognitions-cta .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

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

@media (max-width: 1199px) {
	.endo-recognitions-card { flex: 0 0 calc(33.333% - 14px); }
}

@media (max-width: 767px) {
	.endo-recognitions { padding: 48px 0; }
	.endo-recognitions-card { flex: 0 0 calc(60% - 10px); }

	/* Arrows no longer sit either side of the viewport (that was what
	   was squeezing the cards narrower on phones). Instead the viewport
	   takes the full row, and the arrows wrap onto a centred row
	   underneath it. */
	.endo-recognitions-carousel {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 16px;
	}
	.endo-recognitions-viewport {
		order: 1;
		flex: 0 0 100%;
		width: 100%;
	}
	.endo-recognitions-arrow {
		width: 36px;
		height: 36px;
	}
	.endo-recognitions-prev { order: 2; }
	.endo-recognitions-next { order: 3; }
}

@media (max-width: 480px) {
	/* Full-width single card, no partial peek — the arrows (and now
	   autoplay) signal there's more, same as the doctor carousel. */
	.endo-recognitions-card { flex: 0 0 100%; }
	.endo-recognitions-card h3 { min-height: 0; }
}