/* 2.31 — stories: one tidy control row, a clear footer, waiting state,
   «ومضة ابداع» + «ورا الكواليس» circles, member profile story. */

/* head: profile on one side, the icons on the other — all on one line */
.wib-sv .wib-sv__head { top: 20px; gap: 10px; align-items: center; }
.wib-sv .wib-sv__prof { flex: 1; min-width: 0; }
.wib-sv .wib-sv__who strong, .wib-sv .wib-sv__who small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wib-sv__ctl { display: flex; align-items: center; gap: 6px; flex: none; direction: rtl; }
.wib-sv .wib-sv__ic { position: static; flex: none; width: 34px; height: 34px; padding: 0; margin: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .38); color: #fff; cursor: pointer; text-decoration: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .2s, transform .15s; font-size: 0; }
.wib-sv .wib-sv__ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transform: none; }
.wib-sv .wib-sv__nextc svg { fill: currentColor; }
.wib-sv .wib-sv__ic:hover { background: var(--wib-accent, #c22327); }
.wib-sv .wib-sv__ic:active { transform: scale(.92); }
.wib-sv .wib-sv__ic[hidden] { display: none; }
.wib-sv .wib-sv__close { background: rgba(255, 255, 255, .16); }
.wib-sv .wib-sv__pause, .wib-sv .wib-sv__mute { display: none !important; }
.wib-sv .wib-sv__chev { display: none; }

/* waiting for the media: the bar stops, a thin shimmer shows it's loading */
.wib-sv__wait { position: absolute; z-index: 6; top: 10px; inset-inline: 12px; height: 3px; border-radius: 3px; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent) 0 0 / 40% 100% no-repeat; transition: opacity .2s; }
.wib-sv.is-waiting .wib-sv__wait { opacity: 1; animation: wibSvWait 1s linear infinite; }
@keyframes wibSvWait { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* footer: client name (link) · the story's service */
.wib-sv__by { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; direction: rtl; }
.wib-sv__by a, .wib-sv__by b { font: 800 calc(var(--t-sm) * 1.02)/1.4 var(--wib-heading); color: #fff; text-decoration: none; }
.wib-sv__by a { border-bottom: 1px solid rgba(255, 255, 255, .35); }
.wib-sv__by a:hover { border-color: #fff; }
.wib-sv__by span { font: 600 calc(var(--t-2xs) * .95)/1.4 var(--wib-heading); color: rgba(255, 255, 255, .75); padding: 2px 10px; border-radius: 99px; background: rgba(255, 255, 255, .12); }
.wib-sv__by + p { margin-top: 6px; }
.wib-sv__cap:empty { display: none; }

/* video: never stretched, always inline on phones */
.wib-sv__vid video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.wib-sv__vid.is-vertical video { object-fit: cover; }

/* rail circles: ours + the team */
.wib-story.is-self .wib-story__ring { background: conic-gradient(from 0deg, #111 0 25%, var(--wib-accent, #c22327) 25% 50%, #111 50% 75%, var(--wib-accent, #c22327) 75%); box-shadow: 0 0 0 2px rgba(194, 35, 39, .35); }
.wib-story.is-self .wib-story__label { font-weight: 800; }
.wib-story.is-team .wib-story__ring { background: conic-gradient(from 90deg, #16a34a, #f59e0b, #94a3b8, var(--wib-accent, #c22327), #16a34a); }
.wib-story.is-team .wib-story__img img { object-fit: cover; }
.wib-story.is-self.is-seen .wib-story__ring, .wib-story.is-team.is-seen .wib-story__ring { opacity: .55; }

/* «ورا الكواليس» — member story */
.wtm-st { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 80px 24px 40px; text-align: center; color: #fff; background: radial-gradient(120% 70% at 50% 18%, color-mix(in srgb, var(--mood) 40%, #111), #0b0b0c 70%); }
.wtm-st__ph { position: relative; width: 150px; height: 150px; border-radius: 50%; padding: 4px; background: conic-gradient(var(--mood), rgba(255, 255, 255, .2), var(--mood)); }
.wtm-st__ph img, .wtm-st__ph b { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: #1f1f22; font: 800 48px var(--wib-heading); color: #fff; border: 3px solid #0b0b0c; }
.wtm-st__ph i { position: absolute; bottom: 4px; left: 4px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 22px; background: #0b0b0c; border: 2px solid var(--mood); }
.wtm-st__tag { margin-top: 6px; padding: 3px 12px; border-radius: 99px; background: rgba(255, 255, 255, .1); font: 700 12px var(--wib-heading); letter-spacing: .02em; color: rgba(255, 255, 255, .8); }
.wtm-st h3 { margin: 0; font: 800 26px/1.3 var(--wib-heading); color: #fff; }
.wtm-st__role { margin: 0; color: rgba(255, 255, 255, .75); font-size: 15px; }
.wtm-st__mood { margin-top: 4px; padding: 6px 14px; border-radius: 12px; background: color-mix(in srgb, var(--mood) 28%, transparent); border: 1px solid color-mix(in srgb, var(--mood) 60%, transparent); font: 700 14px var(--wib-heading); }
.wtm-st__note { margin: 4px 0 0; max-width: 300px; color: rgba(255, 255, 255, .7); font-size: 14px; line-height: 1.7; }
.wtm-st__soc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.wtm-st__soc a { padding: 7px 14px; border-radius: 99px; background: #fff; color: #111; font: 700 13px var(--wib-heading); text-decoration: none; }
.wtm-st__soc a:hover { background: var(--wib-accent, #c22327); color: #fff; }
.wib-sv.is-member .wib-sv__cap { display: none; }

/* phones: bigger touch targets, no accidental text selection while swiping */
@media (max-width: 760px) {
	.wib-sv .wib-sv__ic { width: 38px; height: 38px; }
	.wib-sv__box { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
	.wib-sv .wib-sv__head { top: 18px; inset-inline: 10px; }
	.wtm-st__ph { width: 128px; height: 128px; }
}
@media (prefers-reduced-motion: reduce) { .wib-sv.is-waiting .wib-sv__wait { animation: none; } }

/* «ورا الكواليس» section (page block) */
.wb--team .wtm-grid-site { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 240px)); justify-content: center; gap: 16px; }
@media (max-width: 640px) {
	.wb--team .wtm-grid-site { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.wb--team .wtm-c { padding: 16px 10px 14px; border-radius: 18px; gap: 4px; }
	.wb--team .wtm-c__ph { width: 74px !important; height: 74px !important; }
	.wb--team .wtm-c h3 { font-size: 15px; }
	.wb--team .wtm-c__r { font-size: 12.5px; margin: 0; }
	.wb--team .wtm-c__m { font-size: 11.5px; }
	.wb--team .wtm-c__s a { font-size: 10.5px; padding: 3px 8px; }
	.wb--team .wtm-grid-site > :last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 50%; justify-self: center; }
}
.wtm-c { position: relative; padding: 22px 18px 18px; border-radius: 22px; background: var(--wb-card, #fff); border: 1px solid var(--wib-line, #e5e7eb); text-align: center; display: grid; justify-items: center; gap: 6px; }
.wb--dark .wtm-c, .wb--black .wtm-c { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
.wtm-c__ph { position: relative; width: 96px; height: 96px; border-radius: 50%; padding: 3px; background: conic-gradient(var(--mood), #e5e7eb, var(--mood)); }
.wtm-c__ph img, .wtm-c__ph b { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: #111; color: #fff; font: 800 30px var(--wib-heading); border: 3px solid #fff; }
.wtm-c__ph i { position: absolute; bottom: 0; left: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 15px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.wtm-c h3 { margin: 6px 0 0; font: 800 calc(var(--t-h3) * 1.0)/1.3 var(--wib-heading); }
.wtm-c__t { font: 700 12px var(--wib-heading); color: var(--wib-accent, #c22327); }
.wtm-c__r { color: var(--wib-muted, #6b7280); font-size: calc(var(--t-sm) * .95); margin: 0; }
.wtm-c__m { font: 700 12px var(--wib-heading); padding: 4px 10px; border-radius: 99px; background: color-mix(in srgb, var(--mood) 14%, transparent); color: color-mix(in srgb, var(--mood) 80%, #111); }
.wb--dark .wtm-c__m, .wb--black .wtm-c__m { color: #fff; }
.wtm-c__s { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.wtm-c__s a { font: 700 11.5px var(--wib-heading); padding: 4px 10px; border-radius: 99px; border: 1px solid var(--wib-line, #e5e7eb); text-decoration: none; color: inherit; }
.wtm-c__s a:hover { border-color: var(--wib-accent, #c22327); color: var(--wib-accent, #c22327); }