/* ═══════════════════════════════════════════════════════════════
   Al-Sumait — front page on a phone (home.css) v1.3.2
   Loads with record.css, i.e. only where the content carries dsm-record
   (page 101). Everything here sits under 900px; the desktop is untouched.

   Principle: what stacks vertically on a desktop is swiped horizontally
   on a phone, and secondary text is folded, not deleted.
   Sections: .dsm-record · .dsm-work · .dsm-posts · .dsc-quotes · .dsm-video
   ═══════════════════════════════════════════════════════════════ */

/* injected by home.js — hidden on the desktop, shown on a phone */
.dsm-nav { display: none; }

@media (max-width: 900px) {

	/* ── shared: shorter section paddings on a phone ── */
	.dsm-record,
	.dsm-work,
	.dsm-posts,
	section.dsc-quotes,
	.dsm-video {
		padding-top: 44px !important;
		padding-bottom: 44px !important;
	}

	/* ════════ 1 · the record: a 2×2 grid, number + label only ════════ */
	.dsm-record .dsm-rec-kicker { margin-block-end: 18px; }

	.dsm-record .dsm-rec-grid {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0 !important;
		row-gap: 0 !important;
	}

	.dsm-record .dsm-rec-cell {
		border: 0 !important;
		margin: 0 !important;
		padding: 16px 0 18px !important;
		min-width: 0;
	}
	.dsm-record .dsm-rec-cell:nth-child(2n) {
		padding-inline-start: 18px !important;
		border-inline-start: 1px solid var(--dsrec-rule) !important;
	}
	.dsm-record .dsm-rec-cell:nth-child(n+3) {
		border-block-start: 1px solid var(--dsrec-rule) !important;
	}

	/* 1.2.0: only the icon folds — the description and the source line stay on a
	   phone too (work order 1.2: every figure shows its source on every breakpoint) */
	.dsm-record .dsm-rec-cell .wp-block-outermost-icon-block { display: none !important; }
	.dsm-record .dsm-rec-desc { font-size: 15px !important; line-height: 1.6; margin-block-end: 10px; max-width: none; }
	.dsm-record .dsm-rec-src { font-size: 14px !important; line-height: 1.5; }

	.dsm-record .dsm-rec-num {
		font-size: 46px !important;
		margin-block-end: 6px;
	}
	.dsm-record .dsm-rec-lab {
		margin-block-end: 0;
		font-size: 14px !important;
		letter-spacing: .1em;
		line-height: 1.35;
	}

	
	/* ════════ 2 · "Charity and da'wah": three cards on a rail ════════ */
	.dsm-work > .wp-block-columns {
		flex-wrap: wrap !important;
		gap: 0 !important;
	}
	.dsm-work > .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
		min-width: 0;
	}
	/* the square photo column: folded once its photo has moved onto card 1 */
	.dsm-work.dsm-ready > .wp-block-columns > .wp-block-column:last-child { display: none; }
	/* no JS: keep the photo, but short */
	.dsm-work > .wp-block-columns > .wp-block-column:last-child .wp-block-cover {
		aspect-ratio: 16 / 9 !important;
		min-height: 0 !important;
		margin-top: 18px;
	}
	.dsm-work .wp-block-cover .wp-block-spacer { display: none; }

	.dsm-work h2 { font-size: 28px !important; margin-bottom: 18px; letter-spacing: -.01em; }

	/* the "Features" group (the sibling after the h2) is the rail */
	.dsm-work h2 + .wp-block-group {
		display: flex;
		flex-wrap: nowrap;
		gap: 12px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* bleed to the screen edge so the next card peeks */
		margin-inline: calc(-1 * var(--wp--preset--spacing--medium, 24px));
		padding-inline: var(--wp--preset--spacing--medium, 24px);
		padding-block: 2px 6px;
		max-width: none !important;
	}
	.dsm-work h2 + .wp-block-group::-webkit-scrollbar { display: none; }
	.dsm-work h2 + .wp-block-group > * { margin-block: 0 !important; }
	.dsm-work h2 + .wp-block-group > hr { display: none !important; }

	/* each "Feature Row" becomes a card */
	.dsm-work h2 + .wp-block-group > .wp-block-group {
		flex: 0 0 82vw;
		max-width: 330px;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 14px !important;
		scroll-snap-align: start;
		box-sizing: border-box;
		min-height: 100%;
		padding: 22px 20px 24px;
		border-radius: var(--wp--preset--border-radius--lg, 16px);
		background: var(--wp--preset--color--base, #fff);
		border: 1px solid var(--wp--preset--color--border-light, #DCE8E3);
	}
	.dsm-work h2 + .wp-block-group > .wp-block-group .wp-block-outermost-icon-block .icon-container {
		width: 34px !important;
		color: var(--wp--preset--color--primary, #1F6F5F);
	}
	.dsm-work h2 + .wp-block-group > .wp-block-group .wp-block-outermost-icon-block svg { width: 34px; height: 34px; }
	.dsm-work h2 + .wp-block-group > .wp-block-group p { font-size: 15px; line-height: 1.5; }
	.dsm-work h2 + .wp-block-group > .wp-block-group p strong { font-size: 17px; }

	/* card 1 carries the photo (set by home.js as --dsw-photo) */
	.dsm-work .dsm-work-photo {
		background:
			linear-gradient(180deg, rgba(15, 28, 28, .18) 0%, rgba(15, 28, 28, .82) 100%),
			var(--dsw-photo) center / cover no-repeat !important;
		border-color: transparent !important;
	}
	.dsm-work .dsm-work-photo p,
	.dsm-work .dsm-work-photo p.has-secondary-color { color: #fff !important; }
	.dsm-work .dsm-work-photo p.has-secondary-color { color: #dcebe6 !important; }
	.dsm-work .dsm-work-photo .icon-container { color: #fff !important; }

	/* ════════ 3 · recent articles: one card on screen, arrows + counter ════════ */
	.dsm-posts h2 { font-size: 28px !important; letter-spacing: -.01em !important; }
	.dsm-posts .ollie-row-stack { gap: 6px; }
	.dsm-posts .ollie-row-stack .wp-block-button__link {
		background: transparent !important;
		color: var(--wp--preset--color--primary, #1F6F5F) !important;
		padding: 0 !important;
		font-size: 15px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		text-decoration: underline;
		text-underline-offset: 4px;
	}

	.dsm-posts .wp-block-post-template {
		display: flex !important;
		grid-template-columns: none !important;
		flex-wrap: nowrap;
		gap: 0 !important;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin: 0;
		padding: 0;
		list-style: none;
		min-width: 0;
		max-width: 100%;
		outline: none;
	}
	.dsm-posts .wp-block-post-template::-webkit-scrollbar { display: none; }
	.dsm-posts .wp-block-post-template > li {
		flex: 0 0 100%;
		width: 100%;
		min-width: 0;
		scroll-snap-align: start;
		margin: 0;
		padding: 0;
	}
	.dsm-posts .wp-block-post-featured-image { aspect-ratio: 16 / 10 !important; }
	.dsm-posts .wp-block-post-excerpt { display: none; }
	.dsm-posts .wp-block-post-title { font-size: 20px !important; }

	/* ════════ shared rail nav (injected by home.js) ════════ */
	.dsm-nav {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0 0 16px;
	}
	.dsm-btn {
	width: 44px;
	height: 44px;
		border-radius: 50%;
		border: 2px solid var(--wp--preset--color--primary, #1F6F5F);
		background: transparent;
		color: var(--wp--preset--color--primary, #1F6F5F);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		padding: 0;
		transition: background .2s ease, color .2s ease, opacity .2s ease;
	}
	.dsm-btn:disabled { opacity: .3; cursor: default; }
	.dsm-count {
	margin-inline-start: 8px;
	font-size: 14px;
		letter-spacing: .14em;
		text-transform: uppercase;
		font-weight: 600;
		color: var(--wp--preset--color--secondary, #2FA084);
		font-variant-numeric: tabular-nums;
	}

	/* ════════ 4 · testimonies: same structure, tighter ════════ */
	section.dsc-quotes .dsq-head { gap: 8px; }
	section.dsc-quotes .dsq-head h2 { font-size: 28px !important; letter-spacing: -.01em; }
	section.dsc-quotes .dsq-head .wp-block-buttons { margin-top: 2px; }
	section.dsc-quotes .dsq-head .wp-block-button__link {
		background: transparent !important;
		color: #fff !important;
		padding: 0 !important;
		font-size: 15px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		text-decoration: underline;
		text-underline-offset: 4px;
	}
	section.dsc-quotes .dsq-nav { margin: 0 0 14px; }
	section.dsc-quotes .dsq-btn { width: 44px; height: 44px; }
	section.dsc-quotes .dsq-cols { gap: 14px !important; }
	section.dsc-quotes .wp-block-post-featured-image { aspect-ratio: 2 / 1 !important; max-height: 160px; }
	section.dsc-quotes .dsq-q p { font-size: 20px !important; line-height: 1.3; }
	section.dsc-quotes .dsq-who { margin-top: 16px; padding-top: 12px; font-size: 15px; }
	section.dsc-quotes .dsq-role { font-size: 14px; }

	/* ════════ 5 · the video card ════════ */
	.dsm-video > .wp-block-group > .wp-block-columns {
		flex-wrap: wrap !important;
		gap: 16px !important;
	}
	.dsm-video > .wp-block-group > .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
		min-width: 0;
	}
	/* picture first, then the words */
	.dsm-video > .wp-block-group > .wp-block-columns > .wp-block-column:first-child { order: 2; }
	.dsm-video > .wp-block-group > .wp-block-columns > .wp-block-column:last-child { order: 1; }
	.dsm-video .wp-block-cover { aspect-ratio: 16 / 9 !important; min-height: 0 !important; }
	.dsm-video h2 { font-size: 26px !important; letter-spacing: -.01em; }
	.dsm-video p { font-size: 15px; }
}

/* ── the desktop is untouched, but the video card's cover must not be a giant square there either ── */
.dsm-video .wp-block-cover { min-height: 0 !important; }


/* ═══════════════════════════════════════════════════════════════
   1.3.0 · front page, Phase 3 sections (WORK-ORDER-home-mobile §3.2–3.4)
   1.4.0 (session 61) · the language gate is removed — Arabic, English and French
   Scoped to ≤781px on every locale (was html[dir="rtl"] only). Everything is additive; without home.js the record
   cells simply show their description and source as before.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 781px) {

	/* ── §3.2 · the record: 2×2 cards, the whole cell reveals its source on tap ── */
	.dsm-record .dsm-rec-kicker { margin-block-end: 16px; }
	.dsm-record .dsm-rec-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
		row-gap: 10px !important;
		align-items: start;                /* a sibling card never stretches empty when one opens */
	}
	.dsm-record .dsm-rec-cell {
		position: relative;
		box-sizing: border-box;
		margin: 0 !important;
		padding: 14px 14px 14px 12px !important;
		border: 1px solid #DCE9E7 !important;
		border-radius: 16px;
		background: #fff;
		min-width: 0;
	}
	.dsm-record .dsm-rec-cell:nth-child(2n) {
		padding-inline-start: 12px !important;
		border-inline-start: 1px solid #DCE9E7 !important;
	}
	.dsm-record .dsm-rec-cell:nth-child(n+3) { border-block-start: 1px solid #DCE9E7 !important; }
	.dsm-record .dsm-rec-num {
		font-family: var(--ds-ar-display, "Aref Ruqaa"), "Amiri", serif !important;
		font-size: 33px !important;         /* the ceiling at which 8,600+ fits a 138px column — do not enlarge without re-measuring */
		line-height: 1.25;
		margin: 0 0 4px !important;
		padding-inline-end: 24px;           /* room for the chevron at the far end of the figure line */
	}
	.dsm-record .dsm-rec-lab {
		font-size: 15px !important;
		line-height: 1.4;
		letter-spacing: 0 !important;
		text-transform: none;
		color: #00786F;
		margin: 0 !important;
	}
	/* the source folds under the label and opens on tap (JS adds .dsm-rec-tap to the section) */
	.dsm-record.dsm-rec-tap .dsm-rec-desc,
	.dsm-record.dsm-rec-tap .dsm-rec-src { display: none; }
	.dsm-record.dsm-rec-tap .dsm-rec-cell.open .dsm-rec-desc {
		display: block;
		margin: 12px 0 6px !important;
		padding-top: 10px;
		border-top: 1px solid #DCE9E7;
		font-size: 15px !important;
		line-height: 1.6;
	}
	.dsm-record.dsm-rec-tap .dsm-rec-cell.open .dsm-rec-src {
		display: block;
		font-size: 14px !important;
		line-height: 1.5;
		margin: 0 !important;
	}
	.dsm-record.dsm-rec-tap .dsm-rec-cell { cursor: pointer; -webkit-tap-highlight-color: transparent; }
	.dsm-record.dsm-rec-tap .dsm-rec-cell:focus-visible { outline: 2px solid #00786F; outline-offset: 2px; }
	.dsm-rec-chev {
		position: absolute;
		inset-inline-end: 12px;             /* the far end of the figure line */
		top: 22px;
		width: 18px; height: 18px;
		border-radius: 50%;
		border: 1.5px solid #00786F;
		color: #00786F;
		background: transparent;
		display: grid;
		place-items: center;
		transition: transform .25s ease, background .25s ease, color .25s ease;
	}
	.dsm-rec-chev svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
	.dsm-rec-cell.open .dsm-rec-chev { transform: rotate(180deg); background: #00786F; color: #fff; }
	/* record.css arms every cell child at opacity 0 for its reveal; the chevron is added after arming and is never tweened */
	.dsm-record.dsm-rec-armed .dsm-rec-cell > .dsm-rec-chev { opacity: 1; }

	/* ── §3.3 · "من هنا البداية": his voice alone — the three commentary cards fold away ── */
	.dsm-work h2 + .wp-block-group { display: none !important; }
	.dsm-work.dsm-ready > .wp-block-columns > .wp-block-column:last-child { display: block !important; }
	.dsm-work h2 { margin-bottom: 14px; }
	.dsm-work > .wp-block-columns > .wp-block-column:last-child .wp-block-cover {
		aspect-ratio: 4 / 3 !important;    /* a plain rounded photo, no card frame */
		min-height: 0 !important;
		margin-top: 0;
		border-radius: 16px;
		overflow: hidden;
		box-shadow: none !important;
		border: 0 !important;
	}
	.dsm-work .dsw-story { margin-top: 18px; }
	.dsm-work .dsw-q {
		background: #F3F8F8;                /* the quote separates from the white section */
		border-radius: 16px;
		padding: 18px 18px 16px;
		margin-inline: 0;
	}

	/* ── §3.4 · recent articles: a snap rail, 86% cards, the next edge visible, dots ── */
	.dsm-posts .wp-block-post-template {
		gap: 12px !important;
		margin-inline: calc(-1 * var(--wp--preset--spacing--medium, 24px)) !important;
		padding-inline: var(--wp--preset--spacing--medium, 24px) !important;
		padding-bottom: 6px;
		scroll-padding-inline: var(--wp--preset--spacing--medium, 24px);
		max-width: none !important;
	}
	.dsm-posts .wp-block-post-template > li {
		flex: 0 0 86%;
		width: 86%;
		scroll-snap-align: center;
	}
	.dsm-posts .wp-block-post-featured-image { aspect-ratio: auto !important; height: 172px; }
	.dsm-posts .wp-block-post-featured-image img { height: 100%; width: 100%; object-fit: cover; }
	.dsm-posts .wp-block-post-excerpt { display: block; font-size: 15px; line-height: 1.6; }
	.dsm-posts .wp-block-post-excerpt p { font-size: 15px !important; margin: 0; }
	.dsm-posts .wp-block-post-title { font-size: 19px !important; line-height: 1.35; }
	.dsm-posts .wp-block-post-date { font-size: 14px !important; }
	/* the nav folds into a dot indicator below the rail (the buttons stay in the DOM for keyboard users) */
	.dsm-posts .dsm-nav { order: 2; margin: 4px 0 0; justify-content: center; gap: 0; }
	.dsm-posts .wp-block-query { display: flex; flex-direction: column; }
	.dsm-posts .dsm-nav .dsm-btn {
		position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	}
	.dsm-posts .dsm-nav .dsm-btn:focus-visible { position: static; width: 44px; height: 44px; clip: auto; }
	.dsm-posts .dsm-count { display: none; }
	.dsm-dots { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; }
	.dsm-dots i {
		display: block;
		width: 7px; height: 7px;
		border-radius: 999px;
		background: #B9D3CF;
		transition: width .25s ease, background .25s ease;
	}
	.dsm-dots i[aria-current="true"] { width: 22px; background: #00786F; }
}