/* مكة بوست — the video section: hub, watch pages, home band, the article's player card and sidebar list.
   Loaded only on pages that print video UI (inc/video.php). Mobile first; the site's own tokens (style.css). */

/* ── player: a fixed box; the button becomes YouTube's player on click (js/video.js) ── */
.mkp-vid-screen{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#000}
.mkp-vid-screen--short{aspect-ratio:9/16}
.mkp-vid-screen .mkp-vid-play,.mkp-vid-screen .mkp-vid-play:hover,.mkp-vid-screen .mkp-vid-play:focus{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:#000;box-shadow:none;color:#fff;cursor:pointer}
.mkp-vid-screen img,.mkp-vid-pic img{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;border-radius:0;object-fit:cover}
.mkp-vid-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mkp-vid-screen .mkp-vid-play:focus-visible{outline:3px solid var(--mkp-gold);outline-offset:-3px}
.mkp-vid-mark{position:absolute;inset:0;z-index:1;display:grid;place-items:center;width:68px;height:68px;margin:auto;border:2px solid var(--mkp-gold);border-radius:50%;background:rgba(13,13,13,.62);color:#fff;transition:background-color var(--mkp-transition),color var(--mkp-transition)}
.mkp-vid-mark svg{width:42%;height:42%}
.mkp-vid-play:hover .mkp-vid-mark,.mkp-vid-play:focus-visible .mkp-vid-mark,.mkp-vid-card:hover .mkp-vid-mark,.mkp-vid-row:hover .mkp-vid-mark{background:var(--mkp-gold);color:#0D0D0D}
.mkp-vid-len{position:absolute;z-index:1;inset-block-end:8px;inset-inline-end:8px;padding:3px 7px;border-radius:4px;background:rgba(0,0,0,.8);color:#fff;font:600 .75rem/1.2 var(--mkp-font-body);direction:ltr;unicode-bidi:isolate}

/* ── shared text ── */
.mkp-vid-desk{color:var(--mkp-gold);font-family:var(--mkp-font-body);font-size:.75rem;font-weight:600}
.mkp-vid-meta{display:flex;align-items:center;min-width:0;margin:0;color:var(--mkp-text-muted);font-size:.8125rem;line-height:1.6;white-space:nowrap}
.mkp-vid-meta>*{flex:none}
.mkp-vid-meta>*+*::before{content:"\00B7";margin-inline:7px}
.mkp-vid-meta>.mkp-vid-ch{flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.mkp-vid-card__title,.mkp-vid-row__title,.mkp-vid-short__title,.mkp-vid-lead__title,.mkp-vid-band__title,.mkp-vid-story__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;color:var(--mkp-text);font-family:var(--mkp-font-heading);line-height:1.5}
.mkp-vid-card__title a,.mkp-vid-row__title a,.mkp-vid-lead__title a,.mkp-vid-band__title a,.mkp-single__body .mkp-vid-story a{color:inherit;text-decoration:none}
.mkp-vid-card__title a:hover,.mkp-vid-row__title a:hover,.mkp-vid-lead__title a:hover,.mkp-vid-band__title a:hover,.mkp-single__body .mkp-vid-story a:hover{color:var(--mkp-gold)}
[class*="mkp-vid"] a:focus-visible,.mkp-vid-step button:focus-visible{outline:2px solid var(--mkp-gold);outline-offset:2px}

/* ── card (grid, rails) ── */
.mkp-vid-card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--mkp-border);border-radius:8px;background:var(--mkp-surface);container-type:inline-size}
@container (max-width:250px){.mkp-vid-card .mkp-vid-meta{flex-direction:column;align-items:flex-start}.mkp-vid-card .mkp-vid-meta>*+*::before{content:none}}
.mkp-vid-pic{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#000}
.mkp-vid-pic .mkp-vid-mark{width:42px;height:42px;border-width:1.5px}
.mkp-vid-card__body{display:flex;flex:1;flex-direction:column;gap:6px;padding:12px 14px 14px}
.mkp-vid-card__title{font-size:.9375rem;font-weight:600}
.mkp-vid-card .mkp-vid-meta{margin-top:auto}

/* ── rows (home band list, sidebars) ── */
.mkp-vid-list{margin:0;padding:0;list-style:none}
.mkp-vid-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--mkp-border)}
.mkp-vid-row:first-child{padding-top:0}
.mkp-vid-row:last-child{padding-bottom:0;border-bottom:0}
.mkp-vid-row .mkp-vid-pic{flex:0 0 124px;border-radius:6px}
.mkp-vid-row .mkp-vid-mark{width:30px;height:30px}
.mkp-vid-row__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.mkp-vid-row__title{font-size:.9375rem;font-weight:600}
.mkp-sidebar .mkp-vid-row .mkp-vid-pic{flex-basis:104px}
.mkp-sidebar .mkp-vid-row__title{font-size:.875rem;line-height:1.55}
.mkp-vid-all,.mkp-vid-more{display:inline-flex;align-items:center;gap:4px;font-size:.8125rem;font-weight:600;text-decoration:none}
.mkp-vid-all{margin-top:14px;color:var(--mkp-gold)}
.mkp-vid-all:hover{color:var(--mkp-gold-light)}

/* ── sections, grid, rails ── */
.mkp-vid-sec{margin-top:36px}
.mkp-vid-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mkp-vid-more{flex:none;padding:4px 12px 4px 14px;border:1px solid var(--mkp-gold);border-radius:20px;color:var(--mkp-gold);transition:background-color var(--mkp-transition),color var(--mkp-transition)}
.mkp-vid-more:hover{background:var(--mkp-gold);color:#0D0D0D}
.mkp-vid-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mkp-vid-rail{position:relative;display:grid;grid-auto-columns:72%;grid-auto-flow:column;gap:12px;margin:-4px 0 -12px;padding:4px 0 12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.mkp-vid-rail::-webkit-scrollbar{display:none}
.mkp-vid-rail>*{scroll-snap-align:start}
.mkp-vid-rail--shorts{grid-auto-columns:44%}
.mkp-vid-step{display:none;gap:8px}
.mkp-vid-step button,.mkp-vid-step button:hover,.mkp-vid-step button:focus{display:grid;place-items:center;width:36px;height:36px;margin:0;padding:0;border:0;border-radius:50%;background:var(--mkp-gold);box-shadow:none;color:#0D0D0D;cursor:pointer;transition:background-color var(--mkp-transition)}
.mkp-vid-step button:hover:not(:disabled){background:var(--mkp-gold-dark)}
.mkp-vid-step button:disabled{opacity:.35;cursor:default}

/* ── hub ── */
.mkp-vid-top p{margin:6px 0 2px;color:var(--mkp-text-muted);font-size:.9375rem;line-height:1.7}
.mkp-vid-hub{padding:24px 0 48px}
.mkp-vid-lead{display:grid;overflow:hidden;border:1px solid var(--mkp-border);border-radius:8px;background:var(--mkp-surface)}
.mkp-vid-lead .mkp-vid-screen{border-radius:0}
.mkp-vid-lead__info{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px 16px 20px;border-top:3px solid var(--mkp-gold)}
.mkp-vid-lead__title{font-size:1.25rem;font-weight:700;-webkit-line-clamp:3}
.mkp-vid-lead__ex{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin:0;color:var(--mkp-text-muted);font-size:.9375rem;line-height:1.7}
.mkp-vid-empty{margin:0;padding:56px 16px;border:1px dashed var(--mkp-border);border-radius:8px;background:var(--mkp-surface);color:var(--mkp-text-muted);text-align:center}
.mkp-vid-short{display:flex;flex-direction:column;gap:8px;min-width:0}
.mkp-vid-short .mkp-vid-mark{width:50px;height:50px}
.mkp-vid-short__title{font-size:.875rem;font-weight:600}

/* ── home band ── */
.mkp-vid-band{padding:40px 0;background:var(--mkp-surface)}
.mkp-vid-band__grid{display:grid;gap:20px}
.mkp-vid-band__cap{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-top:12px}
.mkp-vid-band__title{font-size:1.125rem;font-weight:700}

/* ── watch page ── */
.mkp-vid-badge{display:inline-block;margin-bottom:14px;padding:3px 12px;border:1px solid var(--mkp-gold);border-radius:20px;color:var(--mkp-gold);font-size:.75rem;font-weight:600}
.mkp-vid-watch .mkp-single__meta{flex-wrap:wrap;gap:6px 16px}
.mkp-vid-watch .mkp-vid-screen{margin-bottom:20px}
.mkp-vid-desc{margin:0 0 8px;color:var(--mkp-text);font-size:1.0625rem;line-height:1.8}
.mkp-vid-ours{margin-top:36px}

/* ── the player card inside an article ── */
.mkp-vid-story{margin:1.75em 0;padding:14px;border:1px solid var(--mkp-border);border-inline-start:4px solid var(--mkp-gold);border-radius:8px;background:var(--mkp-surface)}
.mkp-single__body .mkp-vid-story p{margin:0}
.mkp-single__body .mkp-vid-story img{margin:0;border-radius:0}
.mkp-single__body .mkp-vid-story .mkp-vid-story__label{display:flex;align-items:center;gap:6px;margin:0 0 10px;color:var(--mkp-gold);font-family:var(--mkp-font-heading);font-size:.9375rem;font-weight:700}
.mkp-single__body .mkp-vid-story .mkp-vid-story__title{margin:12px 0 4px;font-size:1.0625rem;font-weight:600}

/* the mobile menu marks the section the reader is in */
.mkp-mobile-menu__item[aria-current] .mkp-mobile-menu__item-label{color:var(--mkp-gold);font-weight:600}

@media (min-width:768px){
.mkp-vid-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.mkp-vid-rail{grid-auto-columns:calc((100% - 48px)/4);gap:16px}
.mkp-vid-rail--shorts{grid-auto-columns:calc((100% - 80px)/6)}
.mkp-vid-step{display:flex}
.mkp-vid-step[hidden]{display:none}
.mkp-vid-card__title{font-size:1rem}
.mkp-vid-story{padding:16px 18px}
}
@media (min-width:992px){
.mkp-vid-grid{gap:24px}
.mkp-vid-rail{grid-auto-columns:calc((100% - 72px)/4);gap:24px}
.mkp-vid-rail--shorts{grid-auto-columns:calc((100% - 100px)/6);gap:20px}
.mkp-vid-sec{margin-top:48px}
.mkp-vid-lead{grid-template-columns:minmax(0,62fr) minmax(0,38fr)}
.mkp-vid-lead__info{justify-content:center;padding:32px;border-top:0;border-inline-start:3px solid var(--mkp-gold)}
.mkp-vid-lead__title{font-size:1.625rem;line-height:1.45}
.mkp-vid-band{padding:48px 0}
.mkp-vid-band__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start;gap:28px}
.mkp-vid-band__title{font-size:1.375rem}
.mkp-vid-band .mkp-vid-row .mkp-vid-pic{flex-basis:152px}
}
@media (prefers-reduced-motion:no-preference){
.mkp-vid-card{transition:transform var(--mkp-transition),box-shadow var(--mkp-transition)}
.mkp-vid-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.mkp-vid-pic img,.mkp-vid-play img{transition:transform .4s ease}
.mkp-vid-card:hover .mkp-vid-pic img,.mkp-vid-row:hover .mkp-vid-pic img,.mkp-vid-play:hover img{transform:scale(1.04)}
.mkp-vid-rail{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
.mkp-vid-band.mkp-reveal{opacity:1;transform:none;transition:none}
.mkp-vid-mark,.mkp-vid-more,.mkp-vid-step button{transition:none}
}