/*
 * Dini 40 — Disciplines carousel.
 * Measures follow the source design (sharjah.ac.ae "14 Colleges…"):
 * ~428×405 image cards (radius 20) with an emblem + name at the bottom,
 * and a coloured name pill under each card on a thin timeline line.
 * See developer guide §5.4.
 */

.ddc { padding-block: clamp(32px, 4vw, 56px); overflow: hidden; }

.ddc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
}
.ddc-heading { margin: 0; font-size: clamp(26px, 2.5vw, 36px); font-weight: 500; line-height: 1.25; }
.dini-rtl .ddc-heading { font-weight: 700; }

.ddc-nav { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.ddc-nav button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--dini-black);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
	transition: opacity .2s, color .2s;
}
.ddc-nav .dini-icon {
	width: 30px;
	height: 30px;
	padding: 7px;
	border: 1px solid #c9c9c9;
	border-radius: 50%;
	transition: background .2s, border-color .2s;
}
.ddc-nav button:hover:not(:disabled) .dini-icon { background: var(--dini-green); border-color: var(--dini-green); }
.ddc-nav button:disabled { opacity: .35; cursor: default; }
.dini-ltr .ddc-back { transform: scaleX(-1); }

/* ---------------------------------------------------------------- */
/* Track                                                             */
/* ---------------------------------------------------------------- */

.ddc-track {
	--ddc-gap: 22px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(260px, 29.7vw, 428px);
	gap: var(--ddc-gap);
	margin: 0;
	padding: 0 0 4px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.ddc-track::-webkit-scrollbar { display: none; }
.ddc-item { position: relative; scroll-snap-align: start; }

.ddc-card {
	position: relative;
	display: block;
	aspect-ratio: 428 / 405;
	border-radius: 20px;
	overflow: hidden;
	background: #2a2a2a;
	color: var(--dini-white);
	text-decoration: none;
}
.ddc-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.ddc-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0) 45%);
}
.ddc-card:hover img { transform: scale(1.05); }

.ddc-label {
	position: absolute;
	inset-inline: 22px;
	bottom: 16px;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.45;
}
.ddc-emblem { width: 22px; height: 22px; flex-shrink: 0; fill: var(--ddc-c); }

/* Coloured name pill on a timeline line that runs through every item. */
.ddc-pill {
	position: relative;
	display: inline-block;
	max-width: calc(100% - 16px);
	margin-top: 22px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--ddc-c);
	color: var(--ddc-on);
	font-size: 12.5px;
	line-height: 1.6;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	z-index: 1;
}
.ddc-item::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: 14px;
	width: calc(100% + var(--ddc-gap));
	height: 1px;
	background: #c9c9c9;
}
.ddc-item:last-child::after { width: 100%; }
.ddc-track--no-pills .ddc-item::after { display: none; }

@media (max-width: 767px) {
	.ddc-track { --ddc-gap: 14px; grid-auto-columns: 80%; }
	.ddc-nav span { display: none; }
	.ddc-label { font-size: 14.5px; inset-inline: 16px; }
}