/*
 * Dini 110 — Stay in touch.
 * Source design (sharjah.ac.ae "Stay in touch #USharjah"): heading with a
 * hashtag; a row of tabs (icon + name, green underline on the active one);
 * a row of square post cards (radius 12, image, bottom shade, avatar +
 * account + "time ago" + network icon). See developer guide §5.11.
 */

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

.dso-heading { margin: 0 0 18px; font-size: clamp(26px, 2.5vw, 36px); font-weight: 500; line-height: 1.3; }
.dini-rtl .dso-heading { font-weight: 700; }
.dso-hashtag { white-space: nowrap; }

/* Tabs */
.dso-tabs {
	display: flex;
	gap: 6px clamp(16px, 2.2vw, 34px);
	margin-bottom: 26px;
	border-bottom: 1px solid var(--dini-line);
	overflow-x: auto;
	scrollbar-width: none;
}
.dso-tabs::-webkit-scrollbar { display: none; }
.dso-tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0 12px;
	border: 0;
	background: none;
	color: var(--dini-black);
	font: inherit;
	font-size: 13.5px;
	white-space: nowrap;
	cursor: pointer;
	opacity: .75;
	transition: opacity .2s;
}
.dso-tab:hover, .dso-tab.is-active { opacity: 1; }
.dso-tab.is-active::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	height: 3px;
	border-radius: 3px;
	background: var(--dini-green);
}
.dso-tab .dini-icon { width: 17px; height: 17px; stroke-width: 1.7; }

/* Panels */
.dso-panel[hidden] { display: none; }
.dso-embed { min-height: 120px; }
.dso-embed iframe { max-width: 100%; }

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

.dso-card {
	position: relative;
	display: block;
	aspect-ratio: 1 / .97;
	border-radius: 12px;
	overflow: hidden;
	background: #e9eaec;
	color: var(--dini-white);
	text-decoration: none;
}
.dso-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.dso-card:hover .dso-img { transform: scale(1.05); }
.dso-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0) 45%); }
.dso-meta {
	position: absolute;
	inset-inline: 14px;
	bottom: 14px;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 10px;
}
.dso-avatar { width: 34px; height: 34px; flex-shrink: 0; padding: 3px; border-radius: 50%; background: var(--dini-white); object-fit: contain; }
.dso-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.dso-who b { font-size: 13px; font-weight: 600; direction: ltr; unicode-bidi: isolate; text-align: start; }
.dso-who small { font-size: 11.5px; opacity: .85; }
.dso-net { width: 20px; height: 20px; margin-inline-start: auto; stroke-width: 1.7; }

.dso-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.dso-follow { display: inline-flex; align-items: center; gap: 8px; color: var(--dini-black); font-size: 14px; font-weight: 600; text-decoration: none; }
.dso-follow:hover { color: var(--dini-green-dark); }
.dso-follow .dini-icon { width: 18px; height: 18px; }
.dso-nav { display: flex; gap: 8px; }
.dso-nav button {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid #c9c9c9;
	border-radius: 50%;
	background: var(--dini-white);
	color: var(--dini-black);
	cursor: pointer;
}
.dso-nav button:hover:not(:disabled) { background: var(--dini-green); border-color: var(--dini-green); }
.dso-nav button:disabled { opacity: .35; cursor: default; }
.dso-nav .dini-icon { width: 16px; height: 16px; }
.dini-ltr .dso-back { transform: scaleX(-1); }

@media (max-width: 991px) { .dso-track { grid-auto-columns: calc((100% - var(--dso-gap)) / 2.2); } }
@media (max-width: 575px) { .dso-track { grid-auto-columns: 72%; } }