/*
 * Dini 90 — News.
 * Source design (sharjah.ac.ae "News"): heading with green "View All" at the
 * end; four cards across (image radius 12, date, two-line title, green
 * arrow); under them a thin grey line with a green square handle (↔) and a
 * small "DRAG" label that scrolls the row. See developer guide §5.9.
 */

.dnw { padding-block: clamp(32px, 3.5vw, 48px); }

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

.dnw-track {
	--dnw-gap: 31px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3 * var(--dnw-gap)) / 4);
	gap: var(--dnw-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.dnw-track::-webkit-scrollbar { display: none; }
.dnw-item { scroll-snap-align: start; }

.dnw-card { display: flex; flex-direction: column; gap: 8px; height: 100%; color: var(--dini-black); text-decoration: none; -webkit-user-drag: none; }
.dnw-thumb { display: block; aspect-ratio: 305 / 185; border-radius: 12px; overflow: hidden; background: #e4e4e4; margin-bottom: 8px; }
.dnw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.dnw-card:hover .dnw-thumb img { transform: scale(1.05); }
.dnw-card time { font-size: 12.5px; color: #333; }
.dnw-title {
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.dnw-card:hover .dnw-title { color: var(--dini-green-dark); }
.dnw-go {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
	margin-top: 4px;
	border-radius: 50%;
	background: var(--dini-green);
	color: var(--dini-black);
}
.dnw-go .dini-icon { width: 12px; height: 12px; stroke-width: 2.6; }

/* Drag bar */
.dnw-bar { position: relative; height: 46px; margin-top: 28px; touch-action: none; cursor: pointer; }
.dnw-bar[hidden] { display: none; }
.dnw-line { position: absolute; inset-inline: 0; top: 12px; height: 1px; background: #bdbdbd; }
.dnw-handle {
	--p: 0;
	position: absolute;
	top: 0;
	inset-inline-start: calc(var(--p) * (100% - 26px));
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 6px;
	background: var(--dini-green);
	color: var(--dini-black);
	cursor: grab;
	touch-action: none;
}
.dnw-handle:active { cursor: grabbing; }
.dnw-handle .dini-icon { width: 15px; height: 15px; stroke-width: 2; }
.dnw-drag {
	position: absolute;
	top: 32px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 10px;
	letter-spacing: .04em;
	color: #6a6a6a;
	white-space: nowrap;
	pointer-events: none;
}
.dini-rtl .dnw-drag { letter-spacing: 0; }

@media (max-width: 1199px) {
	.dnw-track { --dnw-gap: 20px; grid-auto-columns: calc((100% - var(--dnw-gap)) / 2); }
}
@media (max-width: 575px) {
	.dnw-track { grid-auto-columns: 82%; }
}