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

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

.endo-clinical {
	background: #fff;
	padding: 64px 0;
	overflow-x: hidden; /* safety net: nothing inside (carousel track, video
	                       iframe overscan, etc.) should ever force a
	                       horizontal scrollbar on the page */
}

.endo-clinical-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
	gap: 32px;
	align-items: stretch;
}

/* ===========================================================
   LEFT — Our Clinical Services (doctor carousel)
   =========================================================== */

/* Same min-width: auto trap one level up: this column is a grid item of
   .endo-clinical-inner (display: grid), which by default won't let it
   shrink below the carousel's full content width either — now backed up
   by minmax(0, ...) on the grid track itself in .endo-clinical-inner. */
.endo-clinical-doctors {
	min-width: 0;
}

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

.endo-doctors-carousel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	/* Flex items default to min-width: auto, which blocks shrinking below
	   the track's full (unscrolled) content width — that's what was
	   pushing this whole row, and the section with it, wider than the
	   viewport on phones instead of letting overflow-x: auto clip it. */
	min-width: 0;
}

.endo-doctors-arrow {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	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-doctors-arrow:hover {
	background: var(--endo-navy);
	border-color: var(--endo-navy);
	color: #fff;
}
.endo-doctors-arrow .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}
.endo-doctors-arrow:disabled {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

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

.endo-doctors-track {
	display: flex;
	gap: 16px;
	will-change: transform;
	padding: 4px 2px 10px;
}
.endo-doctors-track.is-animating {
	transition: transform 0.6s ease;
}

.endo-doctor-card {
	flex: 0 0 calc(33.333% - 10.667px);
	background: #F7F9FC;
	border: 1px solid var(--endo-border);
	border-radius: 12px;
	padding: 18px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: box-shadow .15s ease, transform .15s ease;
}
.endo-doctor-card:hover {
	background: #fff;
	box-shadow: 0 12px 28px rgba(10, 37, 89, 0.1);
	transform: translateY(-3px);
}

/* CSS-only initials avatar — square, per the reference design. Replace with
   a real <img src="..." alt="..."> once headshots exist; keep the square
   aspect-ratio + object-fit: cover on the <img> to match this placeholder. */
.endo-doctor-photo {
	width: 100%;
	aspect-ratio: 1 / 1;
	max-width: 128px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--endo-navy), var(--endo-blue-accent));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: .5px;
	margin-bottom: 14px;
	flex-shrink: 0;
	overflow: hidden; /* clips real photos to the rounded square below */
}

/* Real headshot variant — swapped in automatically by clinical-services.php
   when a matching file exists in assets/images/facultyimages/ */
.endo-doctor-photo--img {
	background: #EEF1F6; /* subtle placeholder tone while the image loads */
}
.endo-doctor-photo--img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.endo-doctor-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--endo-navy);
	margin: 0 0 4px;
}

.endo-doctor-title {
	font-size: 12.5px;
	color: #667085;
	line-height: 1.4;
	margin: 0 0 14px;
	min-height: 34px;
}

.endo-doctor-social {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}
.endo-doctor-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(44, 111, 227, 0.1);
	color: var(--endo-blue-accent);
	transition: background .15s ease, color .15s ease;
}
.endo-doctor-social a:hover {
	background: var(--endo-blue-accent);
	color: #fff;
}
.endo-doctor-social .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}
.endo-doctor-social svg {
	width: 14px;
	height: 14px;
	display: block;
}
/* ORCID's brand color is recognizable enough that people expect to see its
   green even inside a themed circle — kept subtle, still swaps to the
   theme's hover color like the other two icons. */
.endo-doctor-social--orcid { color: #A6CE39; }
.endo-doctor-social--orcid:hover { color: #fff; }

.endo-doctor-cta {
	margin-top: auto;
	display: inline-block;
	width: 100%;
	text-align: center;
	padding: 9px 14px;
	border-radius: 6px;
	border: 1.5px solid var(--endo-navy);
	color: var(--endo-navy);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.endo-doctor-cta:hover {
	background: var(--endo-navy);
	color: #fff;
}

/* ===========================================================
   RIGHT — Your Patient Journey panel
   =========================================================== */
/* Same grid-item min-width: auto trap as .endo-clinical-doctors above —
   without this, this column's own content (the video wrapper, the CTA
   button) can force the grid track — and the whole section — wider
   than the container, which is what was pushing the video panel and
   (via the shared grid row) the doctor cards out past the page edge on
   mobile. Backed up by minmax(0, ...) on the grid track itself too. */
.endo-journey {
	background: var(--endo-navy-dark);
	border-radius: 14px;
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.endo-journey-eyebrow {
	display: block;
	color: var(--endo-gold);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 22px;
}

/* ---- Outpatient Department background video ----
   Fixed 16:9 box (with a min-height fallback for older browsers that
   don't support aspect-ratio) that autoplays a muted, looping, chromeless
   YouTube embed. The iframe is oversized to 115% and centered so YouTube's
   own UI/title bar sits outside the visible box; a transparent "shield"
   div sits above it to block clicks/right-click/drag so it reads as a
   background video rather than a playable/embeddable player. */
.endo-opd-video-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
	min-height: 200px;
	border-radius: 10px;
	margin-bottom: 22px;
}
.endo-opd-video-shield {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	background: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
}
.endo-opd-video-iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 115%;
	height: 115%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 1;
}

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

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

/* ---- Large/wide screens: bump up to 4 per row.
   Threshold set above standard FHD (1920px) laptop widths, so a normal
   15.6" 1920x1080 screen still shows 3 — this only kicks in on genuinely
   wide desktop monitors (2K, ultrawide, 4K). ---- */
@media (min-width: 2000px) {
	.endo-doctor-card { flex: 0 0 calc(25% - 12px); }
}

@media (max-width: 1199px) {
	.endo-clinical-inner {
		grid-template-columns: 1fr;
	}
	/* Card stays 3-per-row here — plenty of room once stacked full-width. */
}

@media (max-width: 900px) {
	/* Tablets (iPad ~768–1024px, most Android tablets ~800px): drop to
	   2 cards per row so each card has room to breathe instead of 3
	   cramped ones. */
	.endo-doctor-card { flex: 0 0 calc(50% - 8px); }
}

@media (max-width: 700px) {
	.endo-clinical { padding: 48px 0; }
	.endo-doctors-arrow { width: 34px; height: 34px; }
	.endo-journey { padding: 26px 22px; }
}

@media (max-width: 560px) {
	/* Phones: exactly one full-width card at a time. The prev/next arrows
	   (flanking the track, see .endo-doctors-carousel) are what signal
	   there's more to scroll to, so no peek of the next card is needed. */
	.endo-doctor-card { flex: 0 0 100%; }
	.endo-clinical-eyebrow { margin-bottom: 16px; }

	/* Tighten the stacked column gap — 32px between the doctors carousel
	   and the OPD-video panel reads like a layout gap on a short phone
	   screen rather than intentional spacing. */
	.endo-clinical-inner { gap: 22px; }
}

@media (max-width: 420px) {
	/* Smallest phones (iPhone SE/mini and similar ~375px and under): the
	   doctor card's fixed-size avatar + carousel arrows were sized for
	   tablet/desktop and start crowding the card at this width, and the
	   OPD video panel's desktop padding eats into the video itself. */
	.endo-clinical-inner { padding: 0 16px; }

	.endo-doctor-card { padding: 14px; }
	.endo-doctor-photo { max-width: 96px; }
	.endo-doctors-arrow { width: 30px; height: 30px; }
	.endo-doctors-arrow .dashicons { font-size: 14px; width: 14px; height: 14px; }
	.endo-doctors-carousel { gap: 8px; }

	.endo-journey { padding: 20px 16px; }
	.endo-opd-video-wrapper { margin-bottom: 16px; }
	.endo-journey-cta { width: 100%; }
}