/*
 * Dini 100 — Experience the Center.
 * Source design (sharjah.ac.ae "Experience UoS", FullImageWithDescSlider):
 * full-width dark image band (~690–805 high), heading at the top, slide
 * title (36px) + text (15px, 4 lines) + green "Explore" button, and a bottom
 * row of slide titles (16.5px) with a thin top line — solid white when
 * active, 50% white otherwise. Fade 1.5 s, 3 s per slide. Developer guide §5.10.
 */

.dex {
	position: relative;
	height: clamp(560px, 56vw, 805px);
	overflow: hidden;
	background: #111;
	color: var(--dini-white);
	isolation: isolate;
}

.dex-slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dex-speed, 1.5s) ease; }
.dex-slide.is-active { opacity: 1; z-index: 1; }
.dex-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dex-shade {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(to right, rgba(0, 0, 0, var(--dex-shade, .55)) 0%, rgba(0, 0, 0, calc(var(--dex-shade, .55) * .35)) 45%, rgba(0, 0, 0, 0) 70%),
		linear-gradient(to top, rgba(0, 0, 0, calc(var(--dex-shade, .55) * .8)) 0%, rgba(0, 0, 0, 0) 35%);
}
/* In RTL the text sits on the right, so the side shade comes from the right. */
.dini-rtl .dex-shade {
	background:
		linear-gradient(to left, rgba(0, 0, 0, var(--dex-shade, .55)) 0%, rgba(0, 0, 0, calc(var(--dex-shade, .55) * .35)) 45%, rgba(0, 0, 0, 0) 70%),
		linear-gradient(to top, rgba(0, 0, 0, calc(var(--dex-shade, .55) * .8)) 0%, rgba(0, 0, 0, 0) 35%);
}

.dex-inner {
	position: relative;
	z-index: 3;
	height: 100%;
	display: grid;
	grid-template-rows: auto 1fr auto;
	padding-block: clamp(26px, 3vw, 44px) clamp(20px, 2.4vw, 34px);
}

.dex-heading { margin: 0; font-size: clamp(26px, 2.5vw, 36px); font-weight: 500; line-height: 1.25; }
.dini-rtl .dex-heading { font-weight: 700; }

.dex-texts { display: grid; align-items: center; }
.dex-text {
	grid-area: 1 / 1;
	max-width: 420px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .6s ease, transform .6s ease, visibility .6s;
}
.dex-text.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: .2s; }
.dex-text h3 { margin: 0 0 10px; font-size: clamp(28px, 2.5vw, 36px); font-weight: 500; line-height: 1.25; }
.dini-rtl .dex-text h3 { font-weight: 700; }
.dex-text p {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.75;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dex-nav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0 clamp(16px, 2vw, 32px); }
.dex-tab {
	padding: 14px 0 4px;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, .5);
	background: none;
	color: rgba(255, 255, 255, .78);
	font: inherit;
	font-size: 16.5px;
	font-weight: 500;
	text-align: end;
	cursor: pointer;
	transition: color .3s, border-color .3s;
}
.dex-tab:hover { color: var(--dini-white); }
.dex-tab.is-active { color: var(--dini-white); border-top-color: var(--dini-white); border-top-width: 2px; padding-top: 13px; }

@media (max-width: 767px) {
	.dex { height: auto; min-height: 560px; }
	.dex-inner { min-height: 560px; }
	.dex-nav { grid-auto-columns: minmax(46%, 1fr); overflow-x: auto; scrollbar-width: none; }
	.dex-nav::-webkit-scrollbar { display: none; }
	.dex-tab { font-size: 15px; white-space: nowrap; text-align: start; }
}