/* assets/css/social.css */
/* ============================================================
   SECTION 07 — Social
   Four independent columns, each drifting at its own rate.
   No third-party embeds, no iframes: eight lazy images.
   ============================================================ */

.social{
  position:relative;
  background:var(--terracotta);
  color:var(--cream);
  overflow:hidden;
  padding:clamp(76px,11vh,140px) 0 clamp(72px,10vh,132px);
}
.social::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 60% at 12% 0%, rgba(16,26,23,.30), transparent 60%),
    radial-gradient(60% 60% at 96% 100%, rgba(16,26,23,.26), transparent 62%);
}
.social__inner{
  position:relative;z-index:1;
  max-width:1280px;margin:0 auto;padding:0 var(--pad);
}

/* ------------------------------------------------------------
   Marquee
   ------------------------------------------------------------ */
.social__marquee{
  position:relative;z-index:1;
  margin-bottom:clamp(34px,5.5vh,66px);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.social__track{display:flex;width:max-content;will-change:transform}
.social__track span{
  display:inline-flex;align-items:center;gap:clamp(20px,3vw,44px);
  padding-right:clamp(20px,3vw,44px);
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(34px,5.4vw,84px);line-height:1;letter-spacing:-.015em;
  color:rgba(243,240,236,.22);white-space:nowrap;
}
.social__track span i{
  width:clamp(7px,.9vw,12px);height:clamp(7px,.9vw,12px);
  border-radius:50%;background:rgba(243,240,236,.30);display:block;flex:none;
}

/* ------------------------------------------------------------
   Head
   ------------------------------------------------------------ */
.social__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(24px,4vh,44px);
}
.social__title{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(28px,3.6vw,54px);line-height:1;letter-spacing:-.014em;
}
.social__title a{
  color:var(--cream);
  box-shadow:inset 0 -1px 0 rgba(243,240,236,.42);
  transition:box-shadow .4s var(--ease),opacity .4s var(--ease);
}
.social__title a:hover{box-shadow:inset 0 -2px 0 var(--cream)}
.social__follow{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 20px;border-radius:100px;
  border:1px solid rgba(243,240,236,.42);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
  white-space:nowrap;
}
.social__follow:hover{background:var(--cream);color:var(--terracotta);border-color:var(--cream)}
.social__follow svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7}

/* ------------------------------------------------------------
   Grid — every tile the same square, like the profile itself.
   Container is capped so tiles land near the source resolution
   rather than being upscaled.
   ------------------------------------------------------------ */
.social__cols{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.2vw,20px);
}

.post{
  position:relative;display:block;overflow:hidden;
  border-radius:2px;
  background:rgba(16,26,23,.22);
  aspect-ratio:1/1;
}
.post img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease),filter .6s var(--ease);
}
/* hotlinked tile refused — keep the square, lose the broken-image icon */
.post.is-dead img{display:none}
.post.is-dead{background:radial-gradient(120% 90% at 30% 20%,rgba(70,106,96,.9),rgba(16,26,23,1))}
.post.is-dead::after{
  content:'BOBO & WILD';position:absolute;inset:0;display:grid;place-items:center;
  font-size:9px;letter-spacing:.3em;color:var(--cream-28);
}
.post:hover img,.post:focus-visible img{transform:scale(1.06)}

.post__veil{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(16,26,23,.86) 0%,rgba(16,26,23,.22) 46%,rgba(16,26,23,0) 74%);
  opacity:0;transition:opacity .5s var(--ease);
}
.post:hover .post__veil,.post:focus-visible .post__veil{opacity:1}

.post__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(12px,1.1vw,18px);
  font-size:11.5px;line-height:1.45;font-weight:300;
  color:var(--cream);
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.post:hover .post__cap,.post:focus-visible .post__cap{opacity:1;transform:none}
.post__cap b{
  display:block;margin-top:8px;font-weight:400;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-70);
}

/* post type badge — reel / carousel / photo */
.post__type{
  position:absolute;z-index:2;top:9px;right:9px;
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(16,26,23,.42);backdrop-filter:blur(6px);
  transition:background-color .4s var(--ease);
}
.post:hover .post__type{background:rgba(16,26,23,.7)}
.post__type svg{width:12px;height:12px;stroke:var(--cream);fill:none;stroke-width:1.7}

/* ------------------------------------------------------------
   Review note — visible only while placeholder content is in
   ------------------------------------------------------------ */
.social__note{
  margin-top:clamp(18px,2.6vh,28px);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(243,240,236,.62);
}

/* ------------------------------------------------------------
   Tablet / mobile
   ------------------------------------------------------------ */
@media (max-width:900px){
  .social__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .social__head{align-items:flex-start;flex-direction:column;gap:16px}
  /* no hover on touch — captions would never be reachable, so the
     veil sits permanently at a lighter weight instead */
  .post__veil{opacity:1;background:linear-gradient(to top,rgba(16,26,23,.88) 0%,rgba(16,26,23,.52) 26%,rgba(16,26,23,0) 62%)}
  .post__cap{opacity:1;transform:none;font-size:10.5px}
  .post__cap b{display:none}
}

@media (prefers-reduced-motion:reduce){
  .post img,.post__veil,.post__cap{transition:none}
  .social__track{transform:none!important}
}


.social__follow,.social__handle{display:inline-flex;align-items:center;min-height:44px}