/* Al-Sumait Audio Player — floating pill bar, one lazy SoundCloud frame.
   Scoped to .dsc-audio pages; values come from the Ollie token set.
   v1.1.0 — the dsc-au2-* layer (session 15): dark editorial hero with «بصوته»
   watermark + waveform + stats band, featured split card, compact tracklist,
   pill player bar with EQ. Old row/tile rules kept for safety. */

/* ---------------------------------------------------------------- rows */

.dsc-audio > .wp-block-heading,
.dsc-audio > p {
	max-width: var(--wp--style--global--wide-size);
}

.dsc-audio .dsc-row {
	padding-block: var(--wp--preset--spacing--medium);
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.dsc-audio .dsc-row:first-of-type {
	border-top: 1px solid var(--wp--preset--color--border-light);
}

.dsc-audio .dsc-row .wp-block-column {
	transition: opacity 0.2s ease;
}

.dsc-audio .dsc-row.is-playing .dsc-row-tile {
	outline: 2px solid var(--wp--preset--color--primary-alt);
	outline-offset: 2px;
}

/* ------------------------------------------------------- Arabic islands */

.dsc-ar {
	direction: rtl;
	text-align: right;
	font-family: "Amiri", "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, serif;
	line-height: 1.7;
}

.dsc-ar .dsc-ltr {
	direction: ltr;
	text-align: right;
	unicode-bidi: isolate;
	font-family: inherit;
}

.dsc-ar .dsc-gloss {
	direction: ltr;
	text-align: right;
	unicode-bidi: isolate;
}

/* ==========================================================================
   dsc-au2-* — Audio page v2 (session 15)
   ========================================================================== */

.dsc-au2-wrap { max-width: var(--wp--style--global--wide-size, 1260px); margin-inline: auto; }
.dsc-audio.dsc-au2-sec { padding-inline: clamp(20px, 4vw, 48px); }

.dsc-au2-eyebrow {
	font-size: 12px !important; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
	margin: 0;
}

/* ----- hero ----- */
.dsc-au2-hero { position: relative; overflow: hidden; padding-block: clamp(48px, 6.5vw, 88px) clamp(26px, 3vw, 44px); }
.dsc-au2-hero .dsc-au2-wrap { position: relative; }
.dsc-au2-mark {
	position: absolute; top: 44%; right: -.03em; transform: translateY(-50%);
	font-family: "Amiri", serif; font-weight: 700;
	font-size: clamp(150px, 24vw, 340px); line-height: 1; margin: 0 !important;
	color: rgba(111, 207, 151, .07) !important;
	pointer-events: none; user-select: none; z-index: 0;
}
.dsc-au2-hero .dsc-au2-wrap > *:not(.dsc-au2-mark) { position: relative; z-index: 1; }
.dsc-au2-herogrid { align-items: flex-end; }
.dsc-au2-title {
	font-size: clamp(56px, 8vw, 110px) !important; line-height: .95 !important; letter-spacing: -.012em;
	margin-top: 8px;
}
.dsc-au2-title em { font-style: italic; color: var(--wp--preset--color--primary-alt, #6FCF97); }
.dsc-au2-sub { max-width: 46ch; font-size: clamp(15px, 1.2vw, 17px) !important; line-height: 1.65; margin-bottom: 8px; }

/* waveform strip (bars injected by player.js) */
.dsc-au2-wave {
	margin-top: clamp(26px, 3vw, 40px); height: 44px;
	display: flex; align-items: center; gap: 4px; opacity: .9;
}
.dsc-au2-wave p { display: none; }
.dsc-au2-wave i { flex: 1; min-width: 2px; border-radius: 2px; background: var(--wp--preset--color--primary-alt, #6FCF97); }
.dsc-au2-wave:not(:has(i)) { display: none; }

/* stats band */
.dsc-au2-stats { margin-top: clamp(20px, 2.5vw, 32px); border-block: 1px solid rgba(201, 230, 220, .22); gap: 0 !important; }
.dsc-au2-stats .wp-block-column { padding-block: clamp(14px, 1.8vw, 22px); }
.dsc-au2-stats .wp-block-column + .wp-block-column {
	border-inline-start: 1px solid rgba(201, 230, 220, .22); padding-inline-start: clamp(18px, 3vw, 40px);
}
.dsc-au2-stat { margin: 0 !important; display: flex; align-items: baseline; gap: 12px; }
.dsc-au2-stat strong {
	font-family: var(--wp--preset--font-family--heading, "Instrument Serif", serif);
	font-weight: 400; font-size: clamp(30px, 3.4vw, 46px); line-height: 1;
	color: var(--wp--preset--color--primary-alt, #6FCF97); font-variant-numeric: tabular-nums;
}
.dsc-au2-stat span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 781px) {
	.dsc-au2-stats .wp-block-column + .wp-block-column {
		border-inline-start: 0; border-top: 1px solid rgba(201, 230, 220, .22); padding-inline-start: 0;
	}
	.dsc-au2-stats .wp-block-column { padding-block: 12px; }
}

/* ----- section heads ----- */
.dsc-au2-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 20px; margin-bottom: clamp(16px, 2vw, 26px); }
.dsc-au2-head > * { margin: 0 !important; }
.dsc-au2-head .dsc-au2-eyebrow { color: #4A6A61; }
.dsc-au2-note { font-size: 12.5px !important; color: #4A6A61; letter-spacing: .08em; text-transform: uppercase; margin: 0; }

/* ----- featured card ----- */
.dsc-au2-featsec { padding-block: clamp(34px, 4.5vw, 60px) 0; }
.dsc-audio .dsc-au2-feat.dsc-row { padding-block: 0; border: 0; }
.dsc-au2-feat {
	display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	border-radius: 14px; overflow: hidden;
}
.dsc-au2-feat > * { margin: 0 !important; }
.dsc-au2-dur { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(22px, 2.6vw, 34px); }
.dsc-au2-dur > * { margin: 0 !important; }
.dsc-au2-durnum strong {
	font-family: var(--wp--preset--font-family--heading, "Instrument Serif", serif);
	font-weight: 400; font-size: clamp(64px, 7vw, 112px); line-height: .95;
	color: #fff; font-variant-numeric: tabular-nums;
}
.dsc-au2-dursm { font-size: 11.5px !important; letter-spacing: .16em; text-transform: uppercase; opacity: .85; margin-top: 6px !important; }
.dsc-au2-fbody { padding: clamp(22px, 2.8vw, 38px); }
.dsc-au2-fbody > * { margin: 0 !important; }
.dsc-au2-ftitle { font-size: clamp(30px, 3.4vw, 46px) !important; line-height: 1.35 !important; font-weight: 700; }
.dsc-au2-tr { font-style: italic; color: #4A6A61; font-size: 15px !important; text-align: right; margin-top: 6px !important; }
.dsc-au2-fdesc { margin-top: 16px !important; font-size: 16.5px !important; line-height: 2; }
.dsc-au2-fmeta {
	display: flex; justify-content: space-between; align-items: center; gap: 18px;
	margin-top: 20px !important; padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--border-light, #DCE8E3);
}
.dsc-au2-fmeta > * { margin: 0 !important; }
.dsc-au2-meta { font-size: 11.5px !important; letter-spacing: .1em; text-transform: uppercase; color: #4A6A61; }
.dsc-au2-play a {
	display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
	background: var(--wp--preset--color--main, #10322B); color: #fff !important;
	border-radius: 100rem; padding: 13px 24px; text-decoration: none;
	font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	transition: background .3s ease;
}
.dsc-au2-play a:hover { background: var(--wp--preset--color--primary, #1F6F5F); }

/* ----- tracklist ----- */
.dsc-au2-listsec { padding-block: clamp(36px, 5vw, 64px) 0; }
.dsc-audio .dsc-au2-row.dsc-row {
	display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto;
	gap: clamp(14px, 2vw, 28px); align-items: center;
	padding-block: 20px; position: relative;
	transition: background .25s ease;
}
.dsc-au2-row > * { margin: 0 !important; }
.dsc-au2-row:hover { background: linear-gradient(to left, rgba(228, 241, 236, .55), transparent 70%); }
.dsc-au2-no {
	font-family: var(--wp--preset--font-family--heading, "Instrument Serif", serif);
	font-size: clamp(26px, 2.4vw, 34px) !important; text-align: center;
	color: transparent !important; -webkit-text-stroke: 1.1px #4A6A61;
	transition: color .3s ease; font-variant-numeric: tabular-nums;
}
.dsc-au2-row:hover .dsc-au2-no,
.dsc-au2-row.is-playing .dsc-au2-no {
	color: var(--wp--preset--color--primary, #1F6F5F) !important;
	-webkit-text-stroke-color: var(--wp--preset--color--primary, #1F6F5F);
}
.dsc-au2-main { min-width: 0; }
.dsc-au2-main > * { margin: 0 !important; }
.dsc-au2-rtitle { font-size: clamp(19px, 1.8vw, 24px) !important; line-height: 1.5 !important; font-weight: 700; }
.dsc-au2-main .dsc-au2-tr { font-size: 13px !important; margin-top: 2px !important; }
.dsc-au2-rdesc {
	margin-top: 8px !important; font-size: 14px !important; line-height: 1.95; color: #4A6A61;
	display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
	transition: color .3s ease;
}
.dsc-au2-row:hover .dsc-au2-rdesc,
.dsc-au2-row.is-playing .dsc-au2-rdesc { -webkit-line-clamp: unset; color: var(--wp--preset--color--main, #10322B); }
.dsc-au2-hmeta { display: none !important; }
.dsc-au2-rdur { font-variant-numeric: tabular-nums; font-size: 13px !important; color: #4A6A61; letter-spacing: .08em; }
.dsc-au2-rplay a {
	width: 46px; height: 46px; border-radius: 50%;
	border: 1px solid var(--wp--preset--color--border-light, #DCE8E3);
	display: flex; align-items: center; justify-content: center; text-decoration: none;
	color: var(--wp--preset--color--main, #10322B) !important; font-size: 11px;
	transition: all .3s ease;
}
.dsc-au2-row:hover .dsc-au2-rplay a,
.dsc-au2-row.is-playing .dsc-au2-rplay a {
	background: var(--wp--preset--color--main, #10322B);
	border-color: var(--wp--preset--color--main, #10322B);
	color: #fff !important; transform: scale(1.06);
}

@media (max-width: 781px) {
	.dsc-audio .dsc-au2-row.dsc-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
	.dsc-au2-rdur { display: none; }
	.dsc-au2-rdesc { -webkit-line-clamp: 2; }
	.dsc-au2-feat { grid-template-columns: 1fr; }
	.dsc-au2-dur { flex-direction: row; align-items: center; gap: 16px; }
	.dsc-au2-durnum strong { font-size: 44px; }
	.dsc-au2-fmeta { flex-wrap: wrap; }
	.dsc-au2-mark { font-size: 52vw; }
	.dsc-audio .dsc-row .dsc-row-tile { aspect-ratio: 5 / 1 !important; }
}

/* ---------------------------------------------------------------- bar */

.dsc-player-bar {
	/* alignfull gives 100vw + negative margins; the pill undoes both. */
	position: fixed; bottom: 14px; inset-inline: 0; z-index: 60;
	width: min(760px, calc(100% - 32px)) !important;
	max-width: none !important;
	margin-inline: auto !important;
	border-radius: 16px;
	padding: 12px 18px !important;
	box-shadow: 0 18px 50px rgba(15, 28, 28, .45);
	transform: translateY(calc(100% + 24px));
	transition: transform 0.35s ease;
}

.dsc-player-bar.is-open { transform: none; }

body.dsc-player-open { padding-bottom: 12rem; }

.dsc-player-head { display: flex; align-items: center; gap: 16px; }
.dsc-player-head > * { margin: 0 !important; }
.dsc-player-title { font-family: "Amiri", "Noto Naskh Arabic", serif; direction: rtl; font-size: 17px !important; }
.dsc-player-meta { font-size: 10.5px !important; letter-spacing: .12em; text-transform: uppercase; }
.dsc-player-close { margin-inline-start: auto !important; white-space: nowrap; }
.dsc-player-close a { text-decoration: none; }

/* EQ (injected by player.js) */
.dsc-eq { display: none; gap: 2.5px; align-items: flex-end; height: 22px; flex: none; }
.dsc-player-bar.is-open:not(.is-pending) .dsc-eq { display: flex; }
.dsc-eq i { width: 3px; background: var(--wp--preset--color--primary-alt, #6FCF97); border-radius: 2px; animation: dsc-eq 1s ease-in-out infinite; }
.dsc-eq i:nth-child(2) { animation-delay: .15s; }
.dsc-eq i:nth-child(3) { animation-delay: .3s; }
.dsc-eq i:nth-child(4) { animation-delay: .45s; }
.dsc-eq i:nth-child(5) { animation-delay: .6s; }
@keyframes dsc-eq { 0%, 100% { height: 6px; } 50% { height: 20px; } }

.dsc-player-frame { min-height: 0; }

.dsc-player-frame iframe {
	display: block;
	width: 100%;
	height: 120px;
	border: 0;
	border-radius: 10px;
	margin-top: 10px;
}

.dsc-player-frame:empty { display: none; }

.dsc-player-pending { display: none; }

.dsc-player-bar.is-pending .dsc-player-pending { display: block; margin: 8px 0 0 !important; }

.dsc-player-close { cursor: pointer; }

@media (max-width: 781px) {
	.dsc-player-frame iframe { height: 100px; }
	body.dsc-player-open { padding-bottom: 13rem; }
}

@media (prefers-reduced-motion: reduce) {
	.dsc-player-bar { transition: none; }
	.dsc-eq i { animation: none; height: 12px; }
	.dsc-au2-row, .dsc-au2-no, .dsc-au2-rdesc, .dsc-au2-rplay a, .dsc-au2-play a { transition: none !important; }
}

/* list head spacing when featured and list share one section */
.dsc-au2-listhead { margin-top: clamp(36px, 5vw, 64px) !important; }
.dsc-au2-listhead + .dsc-au2-row { border-top: 1px solid var(--wp--preset--color--border-light, #DCE8E3); }