/* Reels — Bashar's own clips between About and App.
   A quiet shelf of real 9:16 covers. The rail is native horizontal scroll with snap: it
   bleeds to the viewport edge but snaps cards to the 1240px wrap edge, so the first card
   lines up with the heading and the next one always peeks. Titles sit beneath the covers,
   clear of the burned-in captions. Prev/next controls only appear under [data-enhanced]. */

.reels{
  --reels-gutter:max(48px,calc((100% - 1240px) / 2));
  --reel-w:clamp(220px,23vw,288px);
  --reel-gap:24px;
  padding-block:120px 0;
  overflow-x:clip;
}

/* Head: title and supporting line, controls at the inline end */
.reels-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px 48px;margin-bottom:44px}
.reels-title{font-size:clamp(30px,3.3vw,48px);font-weight:700;line-height:1.4;letter-spacing:-.015em;max-width:22ch}
html[lang=en] .reels-title{font-weight:800;line-height:1.12;letter-spacing:-.03em}
.reels-lead{color:var(--slate);margin-top:16px;max-width:56ch}

/* Controls: hidden until the parent has wired them */
.reels-nav{display:none;align-items:center;gap:6px}
.reels[data-enhanced] .reels-nav{display:flex}
.reels-btn{display:inline-grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);transition:background-color .2s,border-color .2s,color .2s}
.reels-btn:hover:not(:disabled,[aria-disabled=true]){border-color:var(--cobalt);background:var(--cobalt-wash);color:var(--cobalt)}
.reels-btn:is(:disabled,[aria-disabled=true]){border-color:transparent;background:var(--mist);color:#9aa4b8;cursor:default}
.reels-btn:focus-visible{border-radius:999px}
/* #i-arrow points right: next follows reading direction, prev opposes it */
.reels-prev .ic{transform:scaleX(-1)}
html[dir=rtl] .reels-prev .ic{transform:none}
html[dir=rtl] .reels-next .ic{transform:scaleX(-1)}
.reels-pos{min-width:64px;text-align:center;font:600 14px/1 var(--en);color:var(--slate);font-variant-numeric:lining-nums tabular-nums}
.reels-pos [data-reels-current]{color:var(--ink)}
.reels-sep{margin-inline:6px;color:#b7c1d6}

/* Rail: full-bleed scroller, cards snap to the wrap edge */
.reels-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:var(--reel-w);gap:var(--reel-gap);
  padding-block:6px 22px;padding-inline:var(--reels-gutter);
  scroll-padding-inline:var(--reels-gutter);scroll-snap-type:x mandatory;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;
  scrollbar-width:thin;scrollbar-color:#c5cddd transparent;
}
/* Once buttons exist, the scrollbar is redundant; swipe and trackpad still work */
.reels[data-enhanced] .reels-rail{scrollbar-width:none}
.reels[data-enhanced] .reels-rail::-webkit-scrollbar{display:none}

/* Keep offscreen accessibility labels inside the rail's clipping context. */
.reel-card{position:relative;display:grid;grid-template-rows:auto 1fr auto;min-width:0;scroll-snap-align:start}

/* Cover: the image is the event. Never mirrored, never cropped beyond its own 9:16. */
.reel-media{position:relative;display:block;aspect-ratio:9/16;border-radius:18px;overflow:hidden;isolation:isolate;background:var(--mist-2);box-shadow:0 26px 44px -32px rgba(14,24,48,.45)}
.reel-media::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(14,24,48,.08);pointer-events:none}
.reel-media img{width:100%;height:100%;object-fit:cover}
.reel-media:focus-visible{border-radius:18px;outline-offset:3px}

/* Play: a small white pill in the lower inline-start corner, clear of faces and captions */
.reel-play{position:absolute;inset-block-end:12px;inset-inline-start:12px;z-index:1;display:inline-flex;align-items:center;gap:8px;padding-block:5px;padding-inline:5px 12px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 8px 20px -10px rgba(14,24,48,.55);transition:box-shadow .25s var(--ease)}
.reel-play-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--cobalt);color:#fff;transition:background-color .2s,transform .3s var(--ease)}
.reel-play-ic .ic{width:13px;height:13px}
.reel-time{font:600 13px/1 var(--en);font-variant-numeric:lining-nums tabular-nums}
.reel-media:is(:hover,:focus-visible) .reel-play{box-shadow:0 12px 26px -10px rgba(14,24,48,.6)}
.reel-media:is(:hover,:focus-visible) .reel-play-ic{background:var(--cobalt-deep)}

/* Topic and engagement */
.reel-title{align-self:start;margin-top:16px;font-size:17px;font-weight:600;line-height:1.6}
html[lang=en] .reel-title{font-weight:700;line-height:1.35;letter-spacing:-.01em}
.reel-stats{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:8px;color:var(--slate)}
.reel-stat{display:inline-flex;align-items:center;gap:6px}
.reel-stat .ic{width:17px;height:17px;stroke-width:1.6}
.reel-n{font:600 14px/1.4 var(--en);font-variant-numeric:lining-nums tabular-nums;color:var(--ink)}

/* Dated note and the profile, on one hairline row */
.reels-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 32px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.reels-note{font-size:13px;color:var(--slate)}
.reels-profile .reels-out{width:16px;height:16px;color:var(--slate)}
.reels-profile:hover .reels-out{color:currentColor}

@media (prefers-reduced-motion:no-preference){
  .reels-rail{scroll-behavior:smooth}
  .reel-media img{transition:transform .6s var(--ease)}
  .reel-media:is(:hover,:focus-visible) img{transform:scale(1.03)}
  .reel-media:is(:hover,:focus-visible) .reel-play-ic{transform:scale(1.08)}
}

@media (max-width:1100px){
  .reels{--reels-gutter:32px}
}

@media (max-width:900px){
  .reels{padding-block:88px 0}
  .reels-head{margin-bottom:32px;gap:20px 32px}
}

@media (max-width:600px){
  .reels{--reels-gutter:20px;--reel-w:min(68vw,264px);--reel-gap:14px}
  .reels-head{grid-template-columns:minmax(0,1fr)}
  .reels-title{font-size:clamp(27px,8vw,34px)}
  .reels-lead{margin-top:12px}
  .reels-nav{justify-self:end}
  .reels-btn{width:44px;height:44px}
  .reel-media,.reel-media:focus-visible{border-radius:16px}
  .reel-title{font-size:16px;margin-top:14px}
  .reels-foot{flex-direction:column;align-items:flex-start;margin-top:14px}
}

@media (max-width:380px){
  .reels{--reels-gutter:14px;--reel-w:72vw}
  .reel-play{inset-block-end:10px;inset-inline-start:10px}
}

@media (forced-colors:active){
  .reel-play{border:1px solid CanvasText}
  .reels-btn:is(:disabled,[aria-disabled=true]){color:GrayText}
}