/* Follow us — social video feed (TikTok now, Instagram later). One shared
   file for all six pages that carry a .social section. Reuses the site's
   own tokens throughout; see the design spec at
   albert/brain/businesses/yall-digital/clients/pop-hospo/bravado/plans/
   2026-09-25 - Bravado - Social Feed Design Spec.md.

   Phone tile height is 340px (191px wide, 9:16), overruling the spec's
   420px — Albert's call, 2026-09-25, to balance Desiree's spec against
   Ursula's scroll-depth concern. Desktop/tablet sizes are as specced. */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.feed-wrap{position:relative;margin-top:0}
.feed-wrap[hidden]{display:none}

/* .social-gallery already sets display:grid, which otherwise beats the
   browser's default [hidden]{display:none} UA rule at equal specificity by
   source order — without this, JS setting .hidden=true on the fallback
   would silently do nothing and both the fallback photos and the feed row
   would show at once. */
.social-gallery[hidden]{display:none}

.feed-row{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  gap:18px;
  scrollbar-width:none;
  scroll-padding-inline:12px;
  /* Room for the keyboard focus ring, which the row's overflow would clip. */
  padding:6px;
  margin-block:-6px;
}
.feed-row::-webkit-scrollbar{display:none}

.feed-tile{
  position:relative;
  flex:0 0 auto;
  width:259px;
  height:460px;
  border-radius:14px;
  overflow:hidden;
  border:0;
  padding:0;
  background:rgba(35,31,32,.35);
  scroll-snap-align:start;
  cursor:pointer;
}
.feed-tile:focus-visible{outline:3px solid var(--light);outline-offset:2px}
.feed-tile img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.feed-badge{
  position:absolute;
  top:12px;
  left:12px;
  background:rgba(35,31,32,.6);
  color:var(--light);
  font-size:10px;
  letter-spacing:.5px;
  text-transform:uppercase;
  border-radius:20px;
  padding:4px 9px;
  z-index:2;
}

.feed-play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(240,235,229,.92);
  display:grid;
  place-items:center;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  z-index:2;
}
.feed-play svg{width:20px;height:20px;fill:var(--ink);margin-left:3px}

.feed-caption{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:40px 12px 10px;
  background:linear-gradient(180deg,transparent,rgba(20,15,10,.8) 55%);
  color:var(--light);
  font-size:12px;
  line-height:1.35;
  text-align:left;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  z-index:1;
}
/* The clamp sits on an inner element so the wrapper's padding never shows a
   sliver of a third line. */
.feed-caption-text{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.feed-tile--skeleton{cursor:default}
.feed-tile--skeleton::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  background-size:200% 100%;
  animation:feed-shimmer 1.4s linear infinite;
}

@keyframes feed-shimmer{
  from{background-position:200% 0}
  to{background-position:-200% 0}
}

.feed-edge-fade{
  position:absolute;
  top:0;bottom:0;
  width:24px;
  pointer-events:none;
  z-index:3;
  opacity:1;
  transition:opacity .15s;
}
.feed-edge-fade--left{left:0;background:linear-gradient(90deg,var(--red),transparent)}
.feed-edge-fade--right{right:0;background:linear-gradient(270deg,var(--red),transparent)}

/* At scroll position 0 there's nothing to the left, so neither the left
   fade nor the left arrow should show over the first tile — same logic in
   reverse at the end of the row. JS toggles these two classes on the wrap
   as the row scrolls (see wireArrows/updateArrowState in social-feed.js). */
.feed-wrap.is-at-start .feed-edge-fade--left{opacity:0}
.feed-wrap.is-at-end .feed-edge-fade--right{opacity:0}
/* While the placeholder tiles show, there is nothing to scroll. */
.feed-wrap.is-loading .feed-arrow,.feed-wrap.is-loading .feed-edge-fade{visibility:hidden}

.feed-arrow{
  display:none;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:50%;
  border:0;
  background:rgba(35,31,32,.45);
  backdrop-filter:blur(2px);
  color:var(--light);
  z-index:4;
  align-items:center;
  justify-content:center;
  opacity:1;
  transition:opacity .15s;
}
.feed-arrow svg{width:18px;height:18px;fill:currentColor}
.feed-arrow--prev{left:16px}
.feed-arrow--next{right:16px}
.feed-arrow[disabled]{opacity:0;pointer-events:none}

@media(min-width:1000px){
  .feed-arrow{display:flex}
}

/* Lightbox — reuses the site's own <dialog> tokens exactly. */
#feed-dialog{
  width:min(400px,calc(100% - 32px));
}
.feed-dialog-heading{display:flex;justify-content:flex-end;margin-bottom:14px}
.feed-dialog-close{
  width:40px;height:40px;
  display:grid;place-items:center;
  border:0;background:none;color:var(--ink);
  font-size:30px;line-height:1;
  border-radius:50%;
}
.feed-dialog-body iframe{
  aspect-ratio:9/16;
  height:min(calc((min(400px,100vw - 32px) - 68px) * 16 / 9),calc(100vh - 260px));
  height:min(calc((min(400px,100vw - 32px) - 68px) * 16 / 9),calc(100dvh - 260px));
  max-width:100%;
  border:0;
  border-radius:10px;
  display:block;
  margin:0 auto;
}
.feed-dialog-fallback{padding:30px 10px;text-align:center}
.feed-dialog-fallback p{margin-bottom:18px;font-size:15px}
.feed-view-on{
  display:inline-block;
  margin-top:16px;
  font-size:14px;
  padding:10px 15px;
  background:#b932281a;
  border-radius:6px;
  text-decoration:none;
  color:var(--ink);
}
.feed-view-on:hover{background:#b9322833}

/* Desktop-first cascade, matching the site's own max-width breakpoint
   pattern. Each rule below only needs to override tile size; gap and row
   padding already fall in line with the site's existing 1000px/700px
   breakpoints (see the shared .feed-row gap rule above and the phone rule
   below). */
@media(max-width:1199px){
  .feed-tile{width:248px;height:440px}
}

@media(max-width:1000px){
  .feed-row{gap:10px}
}

@media(max-width:999px){
  .feed-tile{width:236px;height:420px}
}

@media(max-width:699px){
  .feed-row{padding:6px 12px}
  .feed-tile{width:191px;height:340px}
  .feed-play{width:44px;height:44px}
}

@media(prefers-reduced-motion:reduce){
  .feed-tile--skeleton::after{animation:none}
  .feed-row{scroll-behavior:auto}
}