/**
 * DuSunnah Video - library and single video.
 * ===========================================================================
 * ISOLATED and prefixed. The wrapper carries .dus-home as well as .dus-videolib,
 * so css/home.css supplies every token and this file adds only the video layer.
 * Nothing here restyles the masthead, the footer, Articles or Audio, and it is
 * enqueued only on the four video surfaces.
 *
 * Video belongs to the same publication family as the other libraries - the
 * same measures, kicker, search, subject row, result bar and pager - but it is
 * recognisably video: every row leads with a 16:9 poster carrying a restrained
 * play mark, and the detail opens onto a 16:9 player. No dark cards, no floating
 * share rail, no reading-time.
 *
 * TWO MEASURES, as in the other libraries:
 *   --vid   1040px  the functional width (intro, search, rows, rules, pager).
 *   --read   760px  the text/single measure, so lines never run too long.
 */

/*
 * EB Garamond, self-hosted, for editorial headings inside the long-form written
 * body only (.dus-vid__content h1/h2/h3). The same woff2 the Article uses; the
 * declaration is inert until a serif heading renders, so it costs nothing on
 * videos without written content. Video UI/metadata/title stay SF/system sans.
 */
@font-face {
	font-family: "EB Garamond";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/eb-garamond-700.woff2") format("woff2");
}

/* The library draws its own measures; the theme wrapper must not add any. */
body.page-template-tpl-videos #main-content,
body.post-type-archive-video #main-content,
body.tax-video-category #main-content,
body.single-video #main-content {
	margin: 0;
	padding: 0;
	max-width: none;
}

.dus-videolib {
	--vid: 1040px;
	--read: 760px;
	padding: 0 0 80px;
}

.dus-vid__wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--gut);
}

.dus-vid__col {
	max-width: var(--vid);
}

/* ============================================================ INTRO */

.dus-vid__intro {
	padding: 44px 0 0;
}

.dus-vid__kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--acc);
}

.dus-vid__title {
	margin: 10px 0 0;
	font-size: 40px;
	line-height: 1.08;
	letter-spacing: -.025em;
	font-weight: 800;
	color: var(--ink);
}

.dus-vid__desc {
	margin: 12px 0 0;
	max-width: 58ch;
	font-size: 16px;
	line-height: 1.6;
	color: var(--body);
}

/* ============================================================ SEARCH */

.dus-vid__search {
	margin: 30px 0 0;
}

.dus-vid__field {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 60px;
	padding: 0 7px 0 20px;
	background: #fff;
	border: 1px solid #cfc7bf;
	border-radius: 4px;
	color: var(--muted);
	transition: border-color .15s, box-shadow .15s;
}

.dus-vid__field:focus-within {
	border-color: var(--acc);
	box-shadow: 0 0 0 3px rgba(168, 80, 26, .10);
}

.dus-vid__field input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	border: 0;
	outline: 0;
	background: transparent;
	font: inherit;
	font-size: 17px;
	color: var(--ink);
	-webkit-appearance: none;
	appearance: none;
}

.dus-vid__field input::placeholder {
	color: #8e8e8e;
	opacity: 1;
}

.dus-vid__go {
	flex: 0 0 auto;
	height: 46px;
	padding: 0 22px;
	border: 0;
	border-radius: 3px;
	background: var(--acc);
	color: #fff;
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
}

.dus-vid__go:hover {
	background: var(--acc-d);
}

.dus-vid__scope {
	margin: 9px 0 0;
	font-size: 12.5px;
	color: var(--muted);
}

/* ============================================================ CATEGORY SELECTOR
 * The scalable replacement for the category chip row: a styled server-side GET
 * selector that reads as part of the archive/filter system, not a browser
 * default. Works with no JavaScript (the View button submits); JS auto-submits.
 */

.dus-vid__catfilter {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin: 22px 0 0;
}

.dus-vid__catlabel {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--muted);
}

.dus-vid__catwrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 1 1 320px;
	min-width: 0;
	max-width: 460px;
}

.dus-vid__catselect {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	min-width: 0;
	height: 46px;
	padding: 0 42px 0 15px;
	border: 1px solid var(--line);
	border-radius: var(--r-ctl);
	background: #fff;
	font: inherit;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
	text-overflow: ellipsis;
}

.dus-vid__catselect:hover { border-color: var(--line-strong, #d8cfc0); }

.dus-vid__catselect:focus-visible {
	outline: 2px solid var(--acc);
	outline-offset: 1px;
	border-color: var(--acc);
}

.dus-vid__catchev {
	position: absolute;
	right: 13px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	color: var(--acc);
	pointer-events: none;
}

.dus-vid__catgo {
	flex: 0 0 auto;
	min-height: 46px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--r-ctl);
	background: var(--acc);
	font: inherit;
	font-size: 14.5px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
}

.dus-vid__catgo:hover { background: var(--acc-d); }
.dus-vid__catgo:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ============================================================ BAR */

.dus-vid__bar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin: 30px 0 0;
	padding-bottom: 9px;
	border-bottom: 1px solid var(--ink);
}

.dus-vid__count {
	font-size: 13px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.dus-vid__filters {
	position: relative;
}

.dus-vid__filters > summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 11px;
	border: 1px solid var(--line);
	border-radius: 3px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
	list-style: none;
	transition: border-color .15s;
}

.dus-vid__filters > summary::-webkit-details-marker {
	display: none;
}

.dus-vid__filters > summary:hover,
.dus-vid__filters[open] > summary {
	border-color: var(--ink);
}

.dus-vid__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--acc);
}

.dus-vid__filterform {
	position: absolute;
	right: 0;
	z-index: 5;
	width: 272px;
	margin-top: 5px;
	padding: 16px;
	background: #fff;
	border: 1px solid #cfc7bf;
	border-radius: 4px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .07);
}

.dus-vid__ff {
	margin: 0 0 14px;
}

.dus-vid__ff label {
	display: block;
	margin-bottom: 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted);
}

.dus-vid__ff select {
	width: 100%;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: 3px;
	background: #fff;
	font: inherit;
	font-size: 14px;
	color: var(--ink);
}

.dus-vid__ffact {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
}

.dus-vid__apply {
	height: 38px;
	padding: 0 16px;
	border: 0;
	border-radius: 3px;
	background: var(--ink);
	color: #fff;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}

.dus-vid__reset {
	font-size: 13.5px;
	color: var(--acc);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* ============================================================ ACTIVE FACETS */

.dus-vid__active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 14px 0 0;
}

.dus-vid__active-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted);
}

.dus-vid__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 11px;
	border: 1px solid var(--acc);
	border-radius: 3px;
	background: #faf1ea;
	color: var(--acc-d);
	font-size: 13px;
	line-height: 1;
	text-decoration: none;
}

.dus-vid__chip:hover {
	background: var(--acc);
	color: #fff;
}

.dus-vid__x {
	font-size: 15px;
	line-height: 1;
	opacity: .75;
}

/* ============================================================ ROWS */

.dus-vid__list {
	margin-top: 4px;
}

.dus-vid__item {
	display: flex;
	align-items: flex-start;
	gap: 26px;
	padding: 22px 0;
	border-bottom: 1px solid var(--line);
}

.dus-vid__list .dus-vid__item:last-child {
	border-bottom: 0;
}

/*
 * The poster is what makes a video row read as video. It leads the row, holds a
 * true 16:9 frame, and carries a restrained play mark. The link is aria-hidden
 * because the title link beside it is the accessible destination.
 */
.dus-vid__thumb {
	flex: 0 0 240px;
	width: 240px;
	max-width: 44%;
	text-decoration: none;
}

.dus-vid__frame {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 5px;
	background: var(--img);
}

.dus-vid__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}

/* The brand placeholder is a mark, not a photo: sit it in the frame rather than cropping it hard. */
.dus-vid__poster--placeholder {
	object-fit: contain;
	padding: 14%;
	background: var(--band);
}

.dus-vid__thumb:hover .dus-vid__poster {
	transform: scale(1.03);
}

.dus-vid__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(17, 17, 17, .55);
	color: #fff;
	backdrop-filter: blur(2px);
	transition: background .18s;
}

.dus-vid__thumb:hover .dus-vid__play {
	background: var(--acc);
}

.dus-vid__play svg {
	width: 20px;
	height: 20px;
	margin-left: 2px;
}

.dus-vid__body {
	flex: 1 1 auto;
	min-width: 0;
	max-width: var(--read);
}

.dus-vid__cat {
	margin: 0;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--acc);
}

.dus-vid__ttl {
	margin: 7px 0 0;
	font-size: 19px;
	line-height: 1.34;
	letter-spacing: -.012em;
	font-weight: 700;
}

.dus-vid__ttl a {
	color: inherit;
	text-decoration: none;
}

.dus-vid__ttl a:hover {
	color: var(--acc);
}

.dus-vid__stand {
	margin: 7px 0 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--body);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dus-vid__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 9px;
	margin: 9px 0 0;
	font-size: 12.5px;
	color: var(--muted);
}

.dus-vid__by {
	color: var(--ink);
	font-weight: 600;
}

/* Scholar attribution (single video only): the canonical speaker, sitting in
   the existing facts line. Same metadata weight as the byline; terracotta on
   hover, in keeping with the editorial colour hierarchy. No new component. */
.dus-vid__scholar {
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}

.dus-vid__scholar:hover {
	color: var(--acc);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.dus-vid__scholar:focus-visible {
	outline: 2px solid var(--acc);
	outline-offset: 2px;
	border-radius: 2px;
}

.dus-vid__speaker-comma {
	color: var(--muted);
}

.dus-vid__sep {
	color: #c4bcb4;
}

/* ============================================================ EMPTY */

.dus-vid__empty {
	padding: 44px 0 4px;
	max-width: 52ch;
}

.dus-vid__empty-lead {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.015em;
}

.dus-vid__empty-hint {
	margin: 10px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--body);
}

.dus-vid__empty-act {
	margin: 18px 0 0;
}

/* ============================================================ PAGER */

.dus-vid__pager {
	margin: 34px 0 0;
}

.dus-vid__pager ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dus-vid__pager a,
.dus-vid__pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 3px;
	font-size: 14px;
	color: var(--ink);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.dus-vid__pager a:hover {
	border-color: var(--acc);
	color: var(--acc);
}

.dus-vid__pager .current {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

.dus-vid__pager .dots {
	border-color: transparent;
}

/* ============================================================ SINGLE */

.dus-vid__single {
	max-width: var(--read);
	/* No sidebar sits beside the single video, so the reading column is centred
	   in the wider content region rather than left-aligned with all the negative
	   space piling up on the right. Title, player and body move together, so they
	   stay mutually aligned; only the column's position changes. */
	margin-inline: auto;
	padding: 28px 0 0;
}

.dus-vid__back {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--muted);
	text-decoration: none;
}

.dus-vid__back:hover {
	color: var(--acc);
}

.dus-vid__head {
	margin: 22px 0 0;
}

.dus-vid__head .dus-vid__kicker {
	margin: 0;
}

.dus-vid__h1 {
	margin: 11px 0 0;
	font-size: 34px;
	line-height: 1.12;
	letter-spacing: -.022em;
	font-weight: 800;
	color: var(--ink);
}

.dus-vid__sub {
	margin: 13px 0 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--body);
}

.dus-vid__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 9px;
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--muted);
}

/* The video, in a true 16:9 frame that never collapses. */
.dus-vid__player {
	position: relative;
	margin: 26px 0 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 6px;
	background: #000;
}

.dus-vid__player iframe,
.dus-vid__player .dus-vid__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ============================================================ SINGLE VIDEO — ARTICLE LAYOUT
 * The single video reuses the Article editorial shell (.dus-article__back /
 * __head / __hero / __main / __grid / __rail and .dus-related). These rules add
 * only what is video-specific: the 16:9 embed in the hero position, and
 * re-seating .dus-vid__content / Support inside the Article grid. Everything
 * else — widths, header, measure, rail, related — comes from css/article.css.
 */

/* A base `figure { margin: 0 }` reset overrides .dus-wrap's `margin: 0 auto`
   on the hero <figure> (latent, since demo Articles carry no hero image), so
   the media band left-aligns. Re-centre it on the video page only. */
.dus-video-detail .dus-article__hero {
	margin-inline: auto;
}

/* The nocookie embed sits where the Article hero image sits: the same 1040
   centred media band, but 16:9 rather than 2:1, and never wider than the grid. */
.dus-video-detail__media {
	max-width: 1040px;
	margin: 0 auto;
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 6px;
	background: #000;
}

.dus-video-detail__media iframe,
.dus-video-detail__media .dus-vid__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* The transcript IS the Article grid's reading column: let the grid set the
   measure (as it does for .dus-article__body), not the content's own max-width. */
.dus-video-detail .dus-vid__content {
	max-width: none;
	margin: 0;
}

/* Support: restrained, centred on the reading measure, under the transcript.
   Scoped under .dus-video-detail to outrank the base .dus-vid__support margin. */
.dus-video-detail .dus-vid__support {
	max-width: var(--measure);
	margin: 40px auto 0;
}

.dus-vid__noembed {
	margin: 26px 0 0;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: 5px;
	font-size: 15px;
	font-style: italic;
	color: var(--muted);
}

/*
 * WRITTEN BODY — the long-form reading layer.
 * -------------------------------------------------------------------------
 * Follows the approved Article reading system: SF/system sans continuous prose
 * at the same size, leading and paragraph rhythm, terracotta links, quiet lists
 * and blockquotes. Headings use EB Garamond (--ft-serif), the site's editorial
 * serif, but at a RESTRAINED subheading scale that stays clearly subordinate to
 * the SF video page title (.dus-vid__h1, 34px). The Video UI, metadata, player,
 * support, related and share around this block remain SF/system sans.
 */
.dus-vid__content {
	max-width: 728px;          /* the reading measure, matching the Article body */
	margin: 30px auto 0;       /* centred within the column; not widened to fill */
	font-size: 17.5px;
	line-height: 1.88;
	color: var(--body);
	overflow-wrap: anywhere;   /* long legacy URLs never break the measure */
}

/*
 * font-size: inherit is NOT redundant. style.css carries a bare `p { font-size:
 * 24px }` rule that, matching the element directly, beats the size inherited
 * from .dus-vid__content. Without this the transcript rendered at 24px, not the
 * intended reading size. Same fix the Article body uses on its own paragraphs.
 */
.dus-vid__content > p,
.dus-vid__content li {
	font-size: inherit;
}

.dus-vid__content p {
	margin: 0 0 0.8em;
}

.dus-vid__content p:last-child {
	margin-bottom: 0;
}

.dus-vid__content p:not([lang="ar"]) {
	direction: ltr;
	text-align: justify;
	text-align-last: left;
	hyphens: none;
	-webkit-hyphens: none;
}

/*
 * Editorial headings in EB Garamond. Legacy bodies tag speaker labels as <h1>,
 * so h1 is deliberately the QUIETEST of the three: a restrained label, never a
 * second page title. h2/h3 carry the genuine section hierarchy once migration
 * normalisation distinguishes real headings from speaker labels.
 */
.dus-vid__content h1,
.dus-vid__content h2,
.dus-vid__content h3 {
	font-family: var(--ft-serif);
	font-weight: 700;
	color: var(--ink);
	letter-spacing: -.004em;
}

.dus-vid__content h1 {
	/* Legacy speaker labels ("Questioner:", "Shaykh …:") are dialogue markers,
	   not headings: restrained, near body size, bound tightly to the speech that
	   follows. EB Garamond and weight distinguish them, not scale. */
	font-size: 17px;
	line-height: 1.4;
	margin: 26px 0 3px;
}

.dus-vid__content h2 {
	font-size: 24px;
	line-height: 1.26;
	margin: 44px 0 13px;
}

.dus-vid__content h3 {
	font-size: 20px;
	line-height: 1.32;
	margin: 34px 0 10px;
}

.dus-vid__content h1:first-child,
.dus-vid__content h2:first-child,
.dus-vid__content h3:first-child {
	margin-top: 0;
}

.dus-vid__content a {
	color: var(--acc);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* The shared About-the-scholar box sits inside the reading column, so the prose
   link rule above would recolour the scholar's name. Keep the shared component
   on the Article treatment: the name reads as ink (as the Article's plain-text
   author name does), and only "All work by this scholar" carries the terracotta
   underline (which it already inherits from the prose rule). */
.dus-vid__content .dus-author--scholar .dus-author__name a {
	color: var(--ink);
	text-decoration: none;
}

/* Transcript speaker labels — demoted from legacy body <h1> at render time
   (inc/speakers.php) to restrained, non-heading dialogue markers. Deliberately
   the system sans (not the EB Garamond of genuine headings) so they read as
   speaker identifiers rather than a second title: near body size, semibold,
   ink, bound tightly to the speech that follows. No scale, card or colour of
   their own. Works identically for "Questioner:", "Question:", "Answer:", a
   short scholar name or a long one. */
.dus-vid__content .dus-speaker {
	font-family: var(--ft-sans);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--ink);
	margin: 1.5em 0 0.15em;
}
.dus-vid__content .dus-speaker:first-child {
	margin-top: 0;
}

/* Legacy inline styles pasted into transcript prose from the old CMS. Neutralise
   ONLY the three properties that can override the approved editorial typography —
   font-size, line-height, colour — and ONLY on the elements that actually
   declare them (attribute-substring match), so a hardcoded 24px, a fixed leading
   or a grey cannot escape the reading system, WITHOUT touching an element that
   merely carries text-align/padding: a genuine <h2>/<h3> heading keeps its size
   unless it too hardcodes one. text-align, font-weight, padding-left and
   text-decoration are meaningful and never overridden here. The Qurʾān / Amiri /
   translation paragraphs are re-emitted by inc/arabic.php without their original
   style attribute, so they never match; .dus-speaker carries no inline style
   either. `!important` is required — only it can outrank an inline style. */
.dus-vid__content [style*="font-size"] {
	font-size: inherit !important;
}
.dus-vid__content [style*="line-height"] {
	line-height: inherit !important;
}
.dus-vid__content [style*="color"] {
	color: inherit !important;
}

.dus-vid__content ol,
.dus-vid__content ul {
	margin: 0 0 28px;
	padding-left: 24px;
	list-style-position: outside;
}

.dus-vid__content ul { list-style: disc; }
.dus-vid__content ol { list-style: decimal; }
.dus-vid__content li { margin-bottom: 10px; padding-left: 4px; }

.dus-vid__content strong,
.dus-vid__content b { color: var(--ink); font-weight: 600; }

.dus-vid__content blockquote {
	margin: 32px 0;
	padding-left: 24px;
	border-left: 2px solid var(--line);
	color: var(--muted);
}

.dus-vid__content blockquote p:last-child { margin-bottom: 0; }

/*
 * EDITORIAL ARABIC — the same three-role system as the Article: Amiri
 * throughout, sized by register (inline/source/Qurʾān), set LEFT (one
 * consistent left-hand spine with the English column, never justified or
 * right-aligned). Honorific marks stay KFGQPC (.dus-honorific, above).
 */
.dus-vid__content [lang="ar"]:not([class]) {
	font-family: "Amiri", serif;
	font-size: 22px;
	line-height: 2;
	text-align: left;
	direction: rtl;
	unicode-bidi: isolate;
}

.dus-vid__content .dus-quran__ar {
	font-family: "Amiri", serif;
	font-size: 32px;
	line-height: 2;
	text-align: left;
	direction: rtl;
	unicode-bidi: isolate;
	color: var(--ink);
	margin: 26px 0;
}

.dus-vid__content .dus-source__ar {
	font-family: "Amiri", serif;
	font-size: 26px;
	line-height: 1.95;
	text-align: left;
	direction: rtl;
	unicode-bidi: isolate;
	color: var(--ink);
	margin: 26px 0;
}

/*
 * Qurʾān/hadith translation — the Article's approved .dus-quran__tr values:
 * restrained, body-coloured, a step below the transcript so the Arabic keeps
 * the prominence. The migrated translation is wrapped in a legacy
 * all-paragraph <strong>; that boldness is neutralised HERE ONLY, so genuine
 * emphasis in ordinary transcript prose (via .dus-vid__content strong) keeps
 * working.
 */
.dus-vid__content .dus-quran__tr,
.dus-vid__content .dus-source__tr {
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--body);
	margin: 0 0 14px;
}

.dus-vid__content .dus-quran__tr strong,
.dus-vid__content .dus-quran__tr b {
	font-weight: 400;
}

/* About the author. */
.dus-vid__author {
	display: flex;
	gap: 18px;
	margin: 40px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid var(--line);
}

.dus-vid__author-avatar {
	flex: 0 0 auto;
}

.dus-vid__author-avatar img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: block;
}

.dus-vid__author-kicker {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--muted);
}

.dus-vid__author-name {
	margin: 4px 0 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--ink);
}

.dus-vid__author-bio {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--body);
}

.dus-vid__author-link {
	display: inline-block;
	margin: 12px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--acc);
	text-decoration: none;
}

.dus-vid__author-link:hover {
	color: var(--acc-d);
}

/*
 * Support - the appeal, translated into the approved editorial language rather
 * than the legacy dark box. A quiet framed line with one accent action; the
 * destination is unchanged.
 */
.dus-vid__support {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 34px 0 0;
	padding: 20px 22px;
	border: 1px solid var(--line);
	border-left: 3px solid var(--acc);
	border-radius: 4px;
	background: var(--band);
}

.dus-vid__support-lead {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink);
	max-width: 46ch;
}

.dus-vid__support-link {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--acc);
	text-decoration: none;
	white-space: nowrap;
}

.dus-vid__support-link:hover {
	color: var(--acc-d);
}

.dus-vid__support-arrow {
	transition: transform .18s;
}

.dus-vid__support-link:hover .dus-vid__support-arrow {
	transform: translateX(3px);
}

/* Related videos - the light row idiom, lighter still. */
.dus-vid__relwrap {
	margin: 44px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid var(--ink);
}

.dus-vid__relhead {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--ink);
}

.dus-vid__list--related .dus-vid__item {
	padding: 18px 0;
}

.dus-vid__list--related .dus-vid__thumb {
	flex-basis: 168px;
	width: 168px;
}

/* Restrained inline sharing - the row that replaces the floating rail. */
.dus-vid__share {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 36px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--line);
}

.dus-vid__share-label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--muted);
}

.dus-vid__share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--ink);
	transition: border-color .15s, color .15s, background .15s;
}

.dus-vid__share-btn svg {
	width: 17px;
	height: 17px;
}

.dus-vid__share-btn:hover {
	border-color: var(--acc);
	color: #fff;
	background: var(--acc);
}

/* ============================================================ 1100 */

@media (max-width: 1100px) {

	.dus-vid__wrap {
		padding: 0 32px;
	}

	.dus-vid__title {
		font-size: 36px;
	}

	.dus-vid__h1 {
		font-size: 30px;
	}
}

/* ============================================================ 767 */

@media (max-width: 767px) {

	.dus-videolib {
		--read: 100%;
		padding-bottom: 56px;
	}

	.dus-vid__wrap {
		padding: 0 20px;
	}

	.dus-vid__intro {
		padding-top: 30px;
	}

	.dus-vid__title {
		font-size: 30px;
		letter-spacing: -.02em;
	}

	.dus-vid__desc {
		font-size: 15px;
	}

	.dus-vid__search {
		margin-top: 22px;
	}

	.dus-vid__field {
		height: 54px;
		padding-left: 15px;
		gap: 11px;
	}

	.dus-vid__field input[type="search"] {
		font-size: 16px;
	}

	.dus-vid__go {
		height: 42px;
		padding: 0 15px;
		font-size: 13.5px;
	}

	.dus-vid__catfilter {
		margin-top: 20px;
		gap: 8px 12px;
	}

	.dus-vid__catwrap { flex-basis: 100%; max-width: none; }
	.dus-vid__catgo { flex: 1 1 auto; }

	.dus-vid__bar {
		margin-top: 22px;
	}

	.dus-vid__filterform {
		width: min(280px, calc(100vw - 40px));
	}

	.dus-vid__item {
		gap: 14px;
		padding: 16px 0;
	}

	.dus-vid__thumb {
		flex-basis: 132px;
		width: 132px;
	}

	.dus-vid__play {
		width: 36px;
		height: 36px;
	}

	.dus-vid__play svg {
		width: 15px;
		height: 15px;
	}

	.dus-vid__ttl {
		font-size: 16.5px;
	}

	.dus-vid__stand {
		font-size: 13.5px;
		-webkit-line-clamp: 2;
	}

	.dus-vid__meta {
		gap: 3px 8px;
		font-size: 12px;
	}

	.dus-vid__empty {
		padding: 32px 0 4px;
	}

	.dus-vid__empty-lead {
		font-size: 18px;
	}

	/* Single */
	.dus-vid__single {
		padding-top: 20px;
	}

	.dus-vid__h1 {
		font-size: 25px;
		line-height: 1.18;
	}

	.dus-vid__sub {
		font-size: 16px;
	}

	.dus-vid__player {
		border-radius: 5px;
	}

	.dus-vid__content {
		font-size: 17px;
		line-height: 1.85;
	}

	.dus-vid__content h1 { font-size: 16px; margin: 24px 0 3px; }
	.dus-vid__content h2 { font-size: 22px; margin: 38px 0 12px; }
	.dus-vid__content h3 { font-size: 19px; margin: 30px 0 9px; }

	/* Speaker labels track the 17px mobile body, staying a step below it. */
	.dus-vid__content .dus-speaker { font-size: 16px; }

	/* Qurʾān stays generously sized on mobile, as on the Article. */
	.dus-vid__content [lang="ar"]:not([class]) { font-size: 19px; }
	.dus-vid__content .dus-quran__ar { font-size: 26px; }
	.dus-vid__content .dus-source__ar { font-size: 22px; }
	.dus-vid__content .dus-quran__tr,
	.dus-vid__content .dus-source__tr { font-size: 16px; }

	.dus-vid__support {
		padding: 16px 18px;
	}

	.dus-vid__list--related .dus-vid__thumb {
		flex-basis: 120px;
		width: 120px;
	}
}

/* VIDEO CATEGORY ARROWS — CLEAN TEXT-ALIGNED STYLE */
@media (min-width: 769px) {
    .dus-vid__subjects-arrow {
        flex: 0 0 28px;
        width: 28px;
        height: 54px;
        padding: 0;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    .dus-vid__subjects-arrow span {
        display: block;
        width: auto;
        height: auto;
        line-height: 1;
        transform: translateY(-1px);
    }

    .dus-vid__subjects-arrow:hover:not(:disabled) {
        background: transparent !important;
        opacity: .72;
    }
}

/* VIDEO CATEGORY STRIP — FADE ENDS */
@media (min-width: 769px) {
    .dus-vid__subjects-wrap::before,
    .dus-vid__subjects-wrap::after {
        width: 48px !important;
    }

    .dus-vid__subjects-wrap::before {
        left: 28px !important;
        background: linear-gradient(to right,#fff 0%,rgba(255,255,255,.92) 22%,rgba(255,255,255,.55) 55%,rgba(255,255,255,0) 100%) !important;
    }

    .dus-vid__subjects-wrap::after {
        right: 28px !important;
        background: linear-gradient(to left,#fff 0%,rgba(255,255,255,.92) 22%,rgba(255,255,255,.55) 55%,rgba(255,255,255,0) 100%) !important;
    }
}

/* ============================================================
   VIDEO LIBRARY CATEGORY NAV — MATCH ARTICLES
   ============================================================ */

.dus-vid__subjects-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 28px 0 0;
}

.dus-vid__subjects-wrap .dus-vid__subjects {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
}

.dus-vid__subjects-wrap .dus-vid__subjects::-webkit-scrollbar {
    display: none;
}

.dus-vid__subjects-wrap .dus-vid__subject {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    height: 54px;
    min-height: 54px;
    padding: 0 20px;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    background: #fff;
    color: #555;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.dus-vid__subjects-wrap .dus-vid__subject:hover {
    border-color: #ccc;
    background: #fff;
    color: #111;
    text-decoration: none;
}

.dus-vid__subjects-wrap .dus-vid__subject.is-active {
    border-color: #111;
    background: #111;
    color: #fff;
}

.dus-vid__subjects-wrap .dus-vid__n {
    margin-left: 2px;
    font-size: .82em;
    opacity: .62;
}

.dus-vid__subjects-wrap .dus-vid__subject.is-active .dus-vid__n {
    opacity: .72;
}

.dus-vid__subjects-wrap .dus-cat-childmark {
    display: inline-block;
    margin-right: 2px;
    opacity: .58;
}

@media (max-width: 768px) {
    .dus-vid__subjects-wrap {
        display: block;
        margin-top: 20px;
    }

    .dus-vid__subjects-wrap .dus-vid__subjects {
        margin: 0;
        -webkit-overflow-scrolling: touch;
    }

    .dus-vid__subjects-wrap .dus-vid__subject {
        height: auto;
        min-height: 0;
        padding: 9px 13px;
        font-size: inherit;
        line-height: inherit;
    }
}


/* ============================================================
   VIDEO LIBRARY CATEGORIES — MATCH HOMEPAGE PILLS
   ============================================================ */

.dus-vid__subjects-wrap .dus-vid__subject {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center !important;
    gap: 10px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--chip) !important;
    color: var(--body) !important;
    box-shadow: none !important;
    box-sizing: border-box;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.dus-vid__subjects-wrap .dus-vid__subject:hover {
    background: var(--chip) !important;
    color: var(--ink) !important;
}

.dus-vid__subjects-wrap .dus-vid__subject.is-active {
    background: var(--acc) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.dus-vid__subjects-wrap .dus-vid__subject.is-active:hover {
    color: #fff !important;
}

.dus-vid__subjects-wrap .dus-vid__n {
    margin-left: 0 !important;
    font-size: .82em !important;
    opacity: .62;
}

.dus-vid__subjects-wrap .dus-vid__subject.is-active .dus-vid__n {
    opacity: .78;
}

.dus-vid__subjects-wrap .dus-cat-childmark {
    display: none !important;
}

@media (max-width: 768px) {
    .dus-vid__subjects-wrap .dus-vid__subject {
        height: 46px !important;
        min-height: 46px !important;
        padding: 0 16px !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }
}


/* ============================================================
   VIDEO CATEGORY ARROWS — EXACT ARTICLE MATCH
   ============================================================ */
@media (min-width: 769px) {
    .dus-vid__subjects-arrow {
        display: none;
        position: relative;
        z-index: 4;
        flex: 0 0 28px;
        width: 28px;
        height: 54px;
        padding: 0;
        margin: 0;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--acc);
        align-items: center;
        justify-content: center;
        font: inherit;
        font-size: 29px;
        line-height: 1;
        cursor: pointer;
        transition: opacity .15s ease;
    }

    .dus-vid__subjects-wrap.is-scrollable .dus-vid__subjects-arrow {
        display: inline-flex;
    }

    .dus-vid__subjects-wrap.is-scrollable .dus-vid__subjects-prev {
        order: -1;
    }

    .dus-vid__subjects-arrow span {
        display: block;
        width: auto;
        height: auto;
        line-height: 1;
        transform: translateY(-1px);
    }

    .dus-vid__subjects-arrow:hover:not(:disabled) {
        color: var(--acc);
        background: transparent !important;
        opacity: .72;
    }

    .dus-vid__subjects-arrow:disabled {
        opacity: .22;
        cursor: default;
    }

    .dus-vid__subjects-arrow:focus,
    .dus-vid__subjects-arrow:focus-visible {
        outline: none;
        box-shadow: none !important;
    }
}

/* ============================================================
   VIDEO CATEGORY STRIP — RESTORE HOMEPAGE-STYLE EDGE FADES
   ============================================================ */
@media (min-width: 769px) {

    .dus-vid__subjects-wrap {
        position: relative;
    }

    .dus-vid__subjects-wrap::before,
    .dus-vid__subjects-wrap::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 48px !important;
        z-index: 3;
        pointer-events: none;
        opacity: 0;
        transition: opacity .15s ease;
    }

    .dus-vid__subjects-wrap::before {
        left: 28px !important;
        background: linear-gradient(
            to right,
            #fff 0%,
            rgba(255,255,255,.92) 22%,
            rgba(255,255,255,.55) 55%,
            rgba(255,255,255,0) 100%
        ) !important;
    }

    .dus-vid__subjects-wrap::after {
        right: 28px !important;
        background: linear-gradient(
            to left,
            #fff 0%,
            rgba(255,255,255,.92) 22%,
            rgba(255,255,255,.55) 55%,
            rgba(255,255,255,0) 100%
        ) !important;
    }

    .dus-vid__subjects-wrap.has-more-left::before {
        opacity: 1;
    }

    .dus-vid__subjects-wrap.has-more-right::after {
        opacity: 1;
    }

    .dus-vid__subjects-arrow {
        position: relative;
        z-index: 4;
    }
}


/* ============================================================
   VIDEO CATEGORY STRIP — ARTICLE-STYLE OVERFLOW FADE
   Same mask treatment used by the Article category strip.
   ============================================================ */

.dus-vid__subjects-wrap .dus-vid__subjects {
    -webkit-mask-image: linear-gradient(
        to right,
        #000 0,
        #000 calc(100% - 30px),
        transparent 100%
    ) !important;

    mask-image: linear-gradient(
        to right,
        #000 0,
        #000 calc(100% - 30px),
        transparent 100%
    ) !important;
}


/* ============================================================
   VIDEO LIBRARY — THUMBNAIL-FIRST GRID
   2026-10-03
   ============================================================ */

/*
 * The video archive is a visual library rather than an article list.
 * Poster first, title second, restrained metadata last.
 */
.dus-videolib .dus-vid__list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 34px 20px !important;
    align-items: start;
}

/* Each result becomes a simple vertical video tile. */
.dus-videolib .dus-vid__item {
    display: block !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Thumbnail occupies the full card width. */
.dus-videolib .dus-vid__thumb {
    display: block !important;
    width: 100% !important;
    margin: 0 0 11px !important;
    overflow: hidden;
    text-decoration: none !important;
}

/* All posters have exactly the same 16:9 footprint. */
.dus-videolib .dus-vid__frame {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #eee;
}

/* YouTube posters fill the thumbnail consistently. */
.dus-videolib .dus-vid__poster {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
    transition: transform .25s ease;
}

/* Very restrained visual response. */
.dus-videolib .dus-vid__item:hover .dus-vid__poster {
    transform: scale(1.025);
}

/* Keep the play control centred over the poster. */
.dus-videolib .dus-vid__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Text belongs directly beneath the thumbnail. */
.dus-videolib .dus-vid__body {
    display: block !important;
    min-width: 0;
    padding: 0 !important;
}

/*
 * Maximum two lines.
 * The height is deliberately fixed so every row remains aligned even
 * when one video has a short title and the next has a long title.
 */
.dus-videolib .dus-vid__ttl {
    min-height: 2.8em;
    margin: 0 0 7px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

.dus-videolib .dus-vid__ttl a {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ink);
    text-decoration: none !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.dus-videolib .dus-vid__ttl a:hover {
    color: var(--acc);
}

/* Small supporting information only. */
.dus-videolib .dus-vid__meta {
    margin: 0 !important;
    color: var(--muted);
    font-size: 12px !important;
    line-height: 1.4;
}

/* ------------------------------------------------------------
   RESPONSIVE GRID
   ------------------------------------------------------------ */

/* Medium desktop / tablet landscape */
@media (max-width: 1100px) {
    .dus-videolib .dus-vid__list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 30px 18px !important;
    }
}

/* Tablet */
@media (max-width: 760px) {
    .dus-videolib .dus-vid__list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 27px 14px !important;
    }

    .dus-videolib .dus-vid__ttl {
        font-size: 14px !important;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .dus-videolib .dus-vid__list {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .dus-videolib .dus-vid__thumb {
        margin-bottom: 10px !important;
    }

    .dus-videolib .dus-vid__ttl {
        min-height: 0;
        font-size: 15px !important;
    }
}


/* ============================================================
   VIDEO LIBRARY — ARTICLE-STYLE VIDEO CARDS
   ============================================================ */

/* Three editorial cards per row */
.dus-videolib .dus-vid__list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 46px 28px !important;
    align-items: start !important;
}

/* Clean card — no box/border */
.dus-videolib .dus-vid__item {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* THUMBNAIL FIRST */
.dus-videolib .dus-vid__thumb {
    display: block !important;
    order: 1;
    width: 100% !important;
    margin: 0 0 17px !important;
    overflow: hidden;
    text-decoration: none !important;
}

.dus-videolib .dus-vid__frame {
    position: relative;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    background: #eee;
}

.dus-videolib .dus-vid__poster {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform .25s ease;
}

.dus-videolib .dus-vid__item:hover .dus-vid__poster {
    transform: scale(1.025);
}

.dus-videolib .dus-vid__play {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* CONTENT */
.dus-videolib .dus-vid__body {
    order: 2;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    padding: 0 !important;
}

/* Category */
.dus-videolib .dus-vid__cat {
    margin: 0 0 8px !important;
    color: var(--acc) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

/* TITLE — EXACTLY MAXIMUM TWO LINES */
.dus-videolib .dus-vid__ttl {
    min-height: 2.7em !important;
    margin: 0 0 9px !important;
    font-size: 17px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
}

.dus-videolib .dus-vid__ttl a {
    display: -webkit-box !important;
    overflow: hidden !important;
    color: var(--ink) !important;
    text-decoration: none !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
}

.dus-videolib .dus-vid__ttl a:hover {
    color: var(--acc) !important;
}

/* DESCRIPTION — MAXIMUM THREE LINES */
.dus-videolib .dus-vid__stand {
    display: -webkit-box !important;
    overflow: hidden !important;
    min-height: 4.5em !important;
    margin: 0 0 14px !important;
    color: var(--body) !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
}

/* AUTHOR + DATE */
.dus-videolib .dus-vid__meta {
    margin: auto 0 0 !important;
    padding-top: 0 !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

.dus-videolib .dus-vid__by {
    color: var(--ink) !important;
    font-weight: 600 !important;
}

.dus-videolib .dus-vid__sep {
    margin: 0 5px !important;
}

/* TABLET */
@media (max-width: 900px) {
    .dus-videolib .dus-vid__list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 38px 20px !important;
    }
}

/* MOBILE */
@media (max-width: 560px) {
    .dus-videolib .dus-vid__list {
        grid-template-columns: 1fr !important;
        gap: 38px !important;
    }

    .dus-videolib .dus-vid__ttl {
        min-height: 0 !important;
        font-size: 17px !important;
    }

    .dus-videolib .dus-vid__stand {
        min-height: 0 !important;
    }
}


/* ============================================================
   VIDEO LIBRARY — FINAL CARD SIZING FIX
   Fix legacy fixed thumbnail dimensions
   ============================================================ */

.dus-videolib .dus-vid__list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 48px 30px !important;
    align-items: start !important;
}

.dus-videolib .dus-vid__item {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 0 !important;
}

/* Force thumbnail to fill its grid column */
.dus-videolib .dus-vid__thumb {
    display: block !important;
    position: relative !important;
    order: 1 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
}

/* Remove legacy fixed frame dimensions */
.dus-videolib .dus-vid__frame {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    border-radius: 9px !important;
    background: #eee !important;
}

/* Poster completely fills 16:9 frame */
.dus-videolib .dus-vid__poster {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Play icon remains centred */
.dus-videolib .dus-vid__play {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 2 !important;
    transform: translate(-50%, -50%) !important;
}

/* Text immediately follows image */
.dus-videolib .dus-vid__body {
    position: static !important;
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Category */
.dus-videolib .dus-vid__cat {
    margin: 0 0 8px !important;
    color: var(--acc) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
}

/* Title — maximum TWO lines */
.dus-videolib .dus-vid__ttl {
    min-height: 2.7em !important;
    margin: 0 0 8px !important;
    font-size: 18px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
}

.dus-videolib .dus-vid__ttl a {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
}

/* Description — maximum THREE lines */
.dus-videolib .dus-vid__stand {
    display: -webkit-box !important;
    overflow: hidden !important;
    min-height: 4.65em !important;
    margin: 0 0 12px !important;
    color: var(--body) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
}

/* Existing author/date */
.dus-videolib .dus-vid__meta {
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
}

@media (max-width: 900px) {
    .dus-videolib .dus-vid__list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 40px 22px !important;
    }
}

@media (max-width: 560px) {
    .dus-videolib .dus-vid__list {
        grid-template-columns: 1fr !important;
        gap: 38px !important;
    }

    .dus-videolib .dus-vid__ttl,
    .dus-videolib .dus-vid__stand {
        min-height: 0 !important;
    }
}


/* ============================================================
   VIDEO LIBRARY — COMPACT CARD FLOW
   Thumbnail → title → 2-line description → date
   ============================================================ */

.dus-videolib .dus-vid__item {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

.dus-videolib .dus-vid__thumb {
    margin: 0 0 14px !important;
}

.dus-videolib .dus-vid__body {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dus-videolib .dus-vid__ttl {
    min-height: 0 !important;
    margin: 0 0 7px !important;
}

/* Two-line description */
.dus-videolib .dus-vid__stand {
    display: -webkit-box !important;
    min-height: 0 !important;
    margin: 0 0 9px !important;
    overflow: hidden !important;
    color: var(--body) !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
}

.dus-videolib .dus-vid__meta {
    margin: 0 !important;
    padding: 0 !important;
}


/* ============================================================
   VIDEO LIBRARY — FINAL INTRINSIC CARD FLOW
   No reserved vertical space between poster and content.
   ============================================================ */

.dus-videolib .dus-vid__item {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dus-videolib .dus-vid__thumb {
    display: block !important;
    float: none !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
}

.dus-videolib .dus-vid__frame {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dus-videolib .dus-vid__body {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

.dus-videolib .dus-vid__cat {
    margin-top: 0 !important;
}

.dus-videolib .dus-vid__ttl {
    min-height: 0 !important;
    margin-top: 0 !important;
}

/* ============================================================
   SINGLE VIDEO — FINAL CLOSING LAYOUT

   The reading area retains the Article editorial measure.

   Related Videos:
   - follows the reading/contributor area directly
   - 1184px desktop information width
   - aligns exactly with the CTA and footer information edges
   - removes the inherited .dus-wrap horizontal gutter on desktop

   Support and Previous/Next have been removed from the Video
   template, so no closing-layout rules are retained for them.
   ============================================================ */

.dus-video-detail > .dus-related {
    padding-top: 40px;
}

@media (min-width: 901px) {
    .dus-video-detail .dus-article__grid {
        max-width: 1040px;
        margin-left: auto;
        margin-right: auto;
    }

    .dus-video-detail > .dus-related {
        box-sizing: border-box;
        width: min(calc(100% - 96px), 1184px);
        max-width: 1184px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1100px) {
    .dus-video-detail > .dus-related {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 900px) {
    .dus-video-detail > .dus-related {
        padding-top: 36px;
    }
}

@media (max-width: 767px) {
    .dus-video-detail > .dus-related {
        padding-top: 32px;
    }
}

/* ============================================================
   VIDEO CATEGORY ARROWS — MOBILE DESKTOP-MATCH
   Keep the navigation arrows in the category row on mobile,
   using the same restrained text-arrow treatment as desktop.
   ============================================================ */
@media (max-width: 768px) {

    .dus-vid__subjects-wrap {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .dus-vid__subjects-wrap .dus-vid__subjects {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .dus-vid__subjects-arrow {
        display: none;
        position: relative;
        z-index: 4;
        flex: 0 0 24px;
        width: 24px;
        height: 46px;
        padding: 0;
        margin: 0;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--acc);
        align-items: center;
        justify-content: center;
        font: inherit;
        font-size: 27px;
        line-height: 1;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    .dus-vid__subjects-wrap.is-scrollable .dus-vid__subjects-arrow {
        display: inline-flex;
    }

    .dus-vid__subjects-wrap.is-scrollable .dus-vid__subjects-prev {
        order: -1;
    }

    .dus-vid__subjects-arrow span {
        display: block;
        width: auto;
        height: auto;
        line-height: 1;
        transform: translateY(-1px);
    }

    .dus-vid__subjects-arrow:disabled {
        opacity: .22;
        cursor: default;
    }

    .dus-vid__subjects-arrow:focus,
    .dus-vid__subjects-arrow:focus-visible {
        outline: none;
        box-shadow: none !important;
    }
}


/* ============================================================
   VIDEO PAGINATION — COMPACT MOBILE
   Pagination output is deliberately abbreviated in PHP. Keep
   controls readable rather than shrinking a full page sequence.
   ============================================================ */
@media (max-width: 768px) {
    .dus-vid__pager ul {
        display: flex;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 5px !important;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .dus-vid__pager li {
        flex: 0 0 auto !important;
        min-width: 0;
    }

    .dus-vid__pager a,
    .dus-vid__pager span {
        width: auto !important;
        min-width: 38px !important;
        height: 42px !important;
        padding: 0 10px !important;
        box-sizing: border-box;
        font-size: 14px !important;
        white-space: nowrap;
    }

    .dus-vid__pager .prev,
    .dus-vid__pager .next {
        min-width: 0 !important;
        padding: 0 11px !important;
        font-size: 13px !important;
    }

    .dus-vid__pager .dots {
        min-width: 22px !important;
        padding: 0 2px !important;
        border-color: transparent !important;
    }
}

/* ==========================================================================
   DUSUNNAH — EXACT FROZEN ARTICLE BODY
   Single Video written content follows the approved Article reading system.
   Embed / metadata / cards / related content / navigation remain independent.
   ========================================================================== */


/* --------------------------------------------------------------------------
   ENGLISH READING REGISTER
   -------------------------------------------------------------------------- */

body.single-video .dus-vid__content {
    font-family: var(--ft-sans) !important;
    font-size: 17.5px !important;
    line-height: 1.88 !important;
}

body.single-video .dus-vid__content > p:not([lang="ar"]):not([dir="rtl"]),
body.single-video .dus-vid__content li:not([lang="ar"]):not([dir="rtl"]),
body.single-video .dus-vid__content .dus-quran__tr,
body.single-video .dus-vid__content .dus-source__tr,
body.single-video .dus-vid__content blockquote p:not([lang="ar"]):not([dir="rtl"]) {
    direction: ltr !important;
    font-family: var(--ft-sans) !important;

    font-size: inherit !important;
    line-height: inherit !important;

    text-align: justify !important;
    text-align-last: left !important;

    hyphens: none !important;
    -webkit-hyphens: none !important;
}


/* --------------------------------------------------------------------------
   ENGLISH HEADINGS
   -------------------------------------------------------------------------- */

body.single-video .dus-vid__content h1,
body.single-video .dus-vid__content h2,
body.single-video .dus-vid__content h3,
body.single-video .dus-vid__content h4,
body.single-video .dus-vid__content h5,
body.single-video .dus-vid__content h6 {
    font-family: var(--ft-sans) !important;
}


/* --------------------------------------------------------------------------
   QUR'ANIC ARABIC
   -------------------------------------------------------------------------- */

body.single-video .dus-vid__content .dus-quran__ar {
    position: relative !important;

    margin-top: 26px !important;
    margin-bottom: 5px !important;

    padding-inline: 1.35em !important;

    direction: rtl !important;
    unicode-bidi: isolate !important;

    font-family: "Amiri", serif !important;
    font-size: 32px !important;
    line-height: 2 !important;
    font-weight: 400 !important;

    text-align: justify !important;
    text-align-last: right !important;

    color: var(--ink) !important;
}

body.single-video .dus-vid__content .dus-quran__ar::before,
body.single-video .dus-vid__content .dus-quran__ar::after {
    display: inline !important;
    position: static !important;

    font-family: "Amiri", serif !important;
    font-size: 1em !important;
    line-height: inherit !important;
    font-weight: 400 !important;

    color: var(--acc) !important;
}

body.single-video .dus-vid__content .dus-quran__ar::before {
    content: "﴿" !important;
    margin-left: .20em !important;
}

body.single-video .dus-vid__content .dus-quran__ar::after {
    content: "﴾" !important;
    margin-right: .20em !important;
}


/* --------------------------------------------------------------------------
   HADITH / ATHAR / SCHOLARLY ARABIC
   -------------------------------------------------------------------------- */

body.single-video .dus-vid__content .dus-source__ar,
body.single-video .dus-vid__content p[lang="ar"]:not(.dus-quran__ar),
body.single-video .dus-vid__content p[dir="rtl"]:not(.dus-quran__ar),
body.single-video .dus-vid__content .dus-ar,
body.single-video .dus-vid__content .dus-arabic-para {
    direction: rtl !important;
    unicode-bidi: isolate !important;

    font-family: "Amiri", serif !important;

    text-align: justify !important;
    text-align-last: right !important;
}


/* --------------------------------------------------------------------------
   SOURCE PAIRS / QUOTATIONS
   -------------------------------------------------------------------------- */

body.single-video .dus-vid__content blockquote {
    margin: 30px 0 34px !important;
    padding: 1px 0 1px 20px !important;

    border: 0 !important;
    border-left: 2px solid var(--acc) !important;

    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.single-video .dus-vid__content .dus-source__ar {
    margin-left: 0 !important;
    margin-bottom: 0 !important;

    padding-left: 20px !important;

    border-left: 2px solid var(--acc) !important;
}

body.single-video .dus-vid__content .dus-source__tr {
    margin-top: 0 !important;
    margin-bottom: 32px !important;

    padding: 7px 0 1px 20px !important;

    border-left: 2px solid var(--acc) !important;
}


/* --------------------------------------------------------------------------
   ARABIC HONORIFICS
   -------------------------------------------------------------------------- */

body.single-video .dus-vid__content [lang="ar"] .dus-honorific,
body.single-video .dus-vid__content [dir="rtl"] .dus-honorific,
body.single-video .dus-vid__content .dus-quran__ar .dus-honorific,
body.single-video .dus-vid__content .dus-source__ar .dus-honorific,
body.single-video .dus-vid__content .dus-ar .dus-honorific,
body.single-video .dus-vid__content .dus-arabic-para .dus-honorific {
    display: none !important;
}


/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {

    body.single-video .dus-vid__content {
        font-size: 17px !important;
        line-height: 1.85 !important;
    }

    body.single-video .dus-vid__content .dus-quran__ar {
        padding-inline: .85em !important;
        font-size: 26px !important;
    }

    body.single-video .dus-vid__content .dus-source__ar {
        font-size: 22px !important;
    }

    body.single-video .dus-vid__content blockquote,
    body.single-video .dus-vid__content .dus-source__ar,
    body.single-video .dus-vid__content .dus-source__tr {
        padding-left: 15px !important;
    }
}

/* ================= END EXACT FROZEN ARTICLE BODY ========================= */