/* G5-D r3 (founder 2026-10-28, visual judge round 3): Instagram = 8 cards at 4:5 (2 desktop rows; one scroll-snap row on
   phones); YouTube = its own titled block (one featured + three, shorts in a scroll row on phones) with a link out.
   The WHOLE card is the tap target; there is no footer band. Along the bottom INSIDE the image: one strip over a dark
   scrim = round play mark (bottom inline-start, 12px in) + a 15px label (the mapped title or a plain type word).
   Posters carry their baked headline at the top, so nothing sits there; reels are anchored to the TOP.
   Logical properties throughout, so rows and marks mirror in /ur/. No underline anywhere (Nastaliq dots). */
/* the feed follows the reels list on /videos/: its top padding keeps the section gap within the page rhythm (qa gap rule) */
#social{padding-block-start:var(--s5)}
.social-block+.social-block{margin-top:var(--s5,2rem)}
.social-sub{margin:0 0 var(--s3);font-size:var(--fs-h3);line-height:1.3}
.social-grid{display:grid;gap:var(--s3);padding-block:0;min-width:0}
.social-grid.is-ig{grid-template-columns:repeat(4,minmax(0,1fr))}
.social-grid.is-yt{grid-template-columns:2fr 1fr 1fr 1fr}
.social-rest{display:contents}
.social-card{position:relative;display:block;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--card);color:#f4efe6;text-decoration:none;cursor:pointer;transition:transform .25s,border-color .35s}
.social-card:hover,.social-card:focus-visible{transform:translateY(-3px);border-color:var(--acc-b)}
.social-card:focus-visible{outline:2px solid var(--acc-a);outline-offset:2px}
.social-thumb{position:relative;display:block;aspect-ratio:4/5;background:var(--ground);overflow:hidden}
.social-card img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
/* bottom scrim (~18% of a 4:5 card, never under 56px): the strip's text and mark read on any picture */
.social-thumb.has-cap::after{content:"";position:absolute;inset:auto 0 0 0;height:18%;min-height:96px;background:linear-gradient(to top,rgba(20,16,12,.88) 0,rgba(20,16,12,.88) 55%,rgba(20,16,12,0));pointer-events:none}
/* a vertical short's poster often carries its own baked caption near the bottom: its scrim is fully opaque over the lower ~35% (nothing baked into the poster shows through), fading to the top of the lower half, so the
   title band is clean */
.social-yt.is-short .social-thumb.has-cap::after{height:56%;background:linear-gradient(to top,#14100c 0,#14100c 62%,rgba(20,16,12,0))}
/* YouTube: a vertical short ships a 4:3 thumbnail with side bars; the zoom crops the bars away. A real 16:9 video
   drops only its top/bottom letterbox. */
/* YouTube thumbnails (hqdefault, 4:3) carry bars: a vertical short has blurred side bars, a 16:9 video black bars top and
   bottom. object-view-box crops them away WITHOUT a transform (a scaled image sticks out of its card and trips the
   outside-the-viewport audit); a browser without it simply shows the bars. */
@supports (object-view-box:inset(0)){
  .social-yt.is-short img{object-view-box:inset(0 28.5% 0 28.5%);object-position:50% 35%}
  .social-yt.is-wide img{object-view-box:inset(12.5% 0 12.5% 0);object-position:50% 50%}
}
.social-feature{height:100%}
.social-feature .social-thumb{aspect-ratio:16/9;height:100%}
@media(min-width:1024px){.social-feature .social-thumb{aspect-ratio:auto}}
.social-cap{position:absolute;z-index:1;inset-inline:12px;bottom:12px;display:flex;align-items:center;gap:8px;min-height:28px;pointer-events:none}
/* fixed colours in both themes (icon 15:1 on the disc; the light edge keeps the disc visible on a dark picture) */
.social-play{flex:none;align-self:flex-end;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#1b1712;border:1.5px solid #f4efe6;color:#f4efe6}
.social-play .i{width:14px;height:14px;fill:currentColor;stroke:currentColor;stroke-width:1.5}
.social-feature .social-play{width:36px;height:36px}
.social-label{min-width:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow-wrap:normal;word-break:normal;hyphens:none;font-size:15px;line-height:1.4;font-weight:500;color:#f4efe6;unicode-bidi:plaintext}
/* Nastaliq ink runs past its line box on BOTH axes (the line-start kaf of "کیل" is cut by a tight inline clip): padding on all four sides moves the
   clip edge outside the glyphs, the matching negative margin keeps the layout (urdu-copy §5) */
[dir="rtl"] .social-label{font-size:17px;line-height:2;font-weight:400;padding:6px;margin:-6px}
[dir="rtl"] .social-thumb.has-cap::after{min-height:124px}
.social-block .social-more{margin-top:var(--s2);font-weight:600}
.social-more::after{content:"\2192";margin-inline-start:.45em;text-decoration:none;display:inline-block}
[dir="rtl"] .social-more{text-decoration:none}
[dir="rtl"] .social-more::after{content:"\2190"}
.social-state{margin:0;color:var(--muted);padding:0}
.social-state.is-error{color:var(--acc-a)}
@media(hover:none){.social-card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.social-card{transition:none}.social-card:hover,.social-card:focus-visible{transform:none}}
/* 600-1023px: Instagram in 2 columns (4 cards of 170px let titles split); YouTube = featured full row + 3 in a row */
@media(min-width:600px) and (max-width:1023px){
  .social-grid.is-ig{grid-template-columns:repeat(2,minmax(0,1fr))}
  .social-grid.is-yt{grid-template-columns:repeat(3,minmax(0,1fr))}
  .social-feature{grid-column:1/-1}
  .social-feature .social-thumb{aspect-ratio:16/9;height:auto}
}
/* below 600px: Instagram is ONE horizontal scroll-snap row (one card + a 12px peek of the next: it ends before the strip's 12px inset, so a half title or play mark never shows); YouTube is the featured
   card full width, then the other videos in their own scroll-snap row of 240px cards (one card + a peek, so the full
   mapped title shows) */
@media(max-width:599px){
  .social-grid.is-ig{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-block-end:var(--s2)}
  .social-grid.is-ig .social-card{flex:0 0 calc(100% - 12px);scroll-snap-align:start}
  .social-grid.is-yt{grid-template-columns:minmax(0,1fr)}
  .social-feature .social-thumb{aspect-ratio:3/2;height:auto} /* G5 merge4: one card format across the YouTube row (the 16:9 feature was ~190px beside 265px cards) */
  .social-rest{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;gap:var(--s3);padding-block-end:var(--s2)}
  .social-rest .social-card{flex:0 0 calc(100% - 12px);scroll-snap-align:start}
  .social-rest .social-thumb{aspect-ratio:3/2}
  .social-rest .social-yt.is-short img{object-position:50% 0} /* the wide phone card keeps the poster's baked headline whole */
  /* the feed column is the full 16px-gutter column on both sides (theme.css gives main .wrap a 56px launcher gutter at the
     inline end; the section's bottom padding below clears the launcher instead); the scroll rows bleed to the screen edge */
  #social .wrap{padding-inline:var(--s3)}
  .social-grid.is-ig,.social-rest{margin-inline-end:calc(-1 * var(--s3));padding-inline-end:var(--s3);scroll-padding-inline-end:var(--s3)}
  /* the chat launcher (48px + 18px inset) must never sit on a card at the end of the section */
  #social{padding-block-end:calc(48px + 18px + 16px + env(safe-area-inset-bottom,0px))}
}