/* ==========================================================================
   Toy Fair Social Strip
   Every selector is namespaced .tfss- and scoped inside .tfss, because the
   theme also loads Bootstrap 5.3 and short class names like .mark, .track,
   .badge and .pill are all taken.
   Brand values read the theme's own custom properties with the measured
   values as fallbacks, so if the theme's palette moves, the strip follows.
   ========================================================================== */
.tf-social-section{
  padding:66px 0 74px!important;
  background:var(--slide-bg, #f5fcfd);
}
@media (max-width:620px){
  .tf-social-section{padding:40px 0 46px!important}
}

.tfss{
  --tfss-pink: var(--primary, #ca1f79);
  --tfss-purple: var(--secondary, #40308d);
  --tfss-purple-dk:#2f2269;
  --tfss-ink:#212529;
  --tfss-ink-2:#5d5675;
  --tfss-ink-3:#8d87a3;
  --tfss-line:#e3dff0;
  --tfss-line-2:#efecf7;
  --tfss-slide:320px;
  --tfss-gap:20px;
  --tfss-corner:22px 0;
  --tfss-corner-flip:0 22px;
  --tfss-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-family:var(--tfss-sans);
}
.tfss *,.tfss *::before,.tfss *::after{box-sizing:border-box}
.tfss img{display:block;max-width:100%}
.tfss-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- header ---------- */
.tfss-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin:0 0 26px}
.tfss-eyebrow{
  font:700 13px/1 var(--tfss-sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--tfss-pink);display:flex;align-items:center;gap:11px;margin:0 0 12px;
}
.tfss-eyebrow::before{content:"";width:26px;height:3px;background:var(--tfss-pink);border-radius:2px 0;flex:none}
.tfss-title{
  font:700 clamp(26px,3.2vw,34px)/1.08 var(--tfss-sans)!important;
  letter-spacing:-.02em;color:var(--tfss-purple)!important;margin:0!important;padding:0;
}
.tfss-titleblock{margin:0 0 32px}
.tfss-titleblock .tfss-eyebrow{margin-bottom:12px}
@media (max-width:620px){
  .tfss-titleblock{margin-bottom:24px}
}
.tfss-right{display:flex;flex-direction:column;align-items:flex-end;gap:11px}
.tfss-follow-label{font:700 11px/1 var(--tfss-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tfss-ink-3)}
.tfss-follow-btns{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.tfss-follow{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none!important;
  padding:12px 18px;border-radius:var(--tfss-corner);
  font:700 13px/1 var(--tfss-sans);letter-spacing:.04em;
  border:2px solid transparent;transition:background .18s,color .18s,border-color .18s;
}
.tfss-follow svg{width:16px;height:16px;fill:currentColor;flex:none}
.tfss-follow--ig{background:var(--tfss-pink);color:#fff!important;border-color:var(--tfss-pink)}
.tfss-follow--ig:hover,.tfss-follow--ig:focus{background:var(--tfss-purple);border-color:var(--tfss-purple);color:#fff!important}
.tfss-follow--li{background:transparent;color:var(--tfss-purple)!important;border-color:var(--tfss-purple)}
.tfss-follow--li:hover,.tfss-follow--li:focus{background:var(--tfss-purple);color:#fff!important}

/* ---------- filter rail ---------- */
.tfss-rail{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 22px}
.tfss-rail .tfss-spacer{flex:1;min-width:10px}
.tfss-pill{
  appearance:none;cursor:pointer;background:transparent;border:2px solid var(--tfss-line);
  color:var(--tfss-ink-2);border-radius:var(--tfss-corner);padding:10px 17px;
  font:700 12px/1 var(--tfss-sans);letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:9px;
  transition:border-color .18s,color .18s,background .18s;
}
.tfss-pill:hover{border-color:var(--tfss-pink);color:var(--tfss-pink);background:transparent}
.tfss-pill svg{width:13px;height:13px;fill:currentColor}
.tfss-pill .tfss-n{
  font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0;
  background:var(--tfss-line-2);color:var(--tfss-ink-2);padding:3px 6px;border-radius:3px;
}
.tfss-pill[aria-pressed="true"]{background:var(--tfss-pink);border-color:var(--tfss-pink);color:#fff}
.tfss-pill[aria-pressed="true"] .tfss-n{background:rgba(255,255,255,.22);color:#fff}
.tfss-arrows{display:flex;gap:8px}
.tfss-arrows button{
  appearance:none;cursor:pointer;width:46px;height:46px;border:2px solid var(--tfss-purple);
  background:transparent;color:var(--tfss-purple);border-radius:var(--tfss-corner);
  display:grid;place-items:center;padding:0;
  transition:background .18s,color .18s,opacity .18s;
}
.tfss-arrows button:last-child{border-radius:var(--tfss-corner-flip)}
.tfss-arrows button:hover:not(:disabled){background:var(--tfss-purple);color:#fff}
.tfss-arrows button:disabled{opacity:.28;cursor:default}
.tfss-arrows svg{width:15px;height:15px;fill:currentColor}

/* ---------- the strip ---------- */
.tfss-strip{
  display:flex;gap:var(--tfss-gap);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:2px 0;scrollbar-width:none;-ms-overflow-style:none;
}
.tfss-strip::-webkit-scrollbar{display:none}
.tfss-slide[hidden]{display:none!important}
.tfss-slide{
  flex:0 0 var(--tfss-slide);scroll-snap-align:start;border-radius:20px;
  overflow:hidden;position:relative;aspect-ratio:1;
}
.tfss-track{height:3px;background:var(--tfss-line-2);border-radius:2px;overflow:hidden;margin:22px 0 0;transition:opacity .2s}
.tfss-bar{display:block;height:100%;width:33%;background:var(--tfss-pink);border-radius:2px;transform-origin:left;transition:transform .12s linear}

/* --- Instagram slide --- */
.tfss-ig{background:var(--tfss-purple-dk);display:block;text-decoration:none!important;color:#fff}
.tfss-ig img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.tfss-ig:hover img,.tfss-ig:focus img{transform:scale(1.05)}
.tfss-scrim{
  position:absolute;inset:0;pointer-events:none;transition:background .3s;
  background:linear-gradient(to top,rgba(28,18,56,.9) 0%,rgba(28,18,56,.62) 17%,rgba(28,18,56,.08) 38%,rgba(28,18,56,0) 52%);
}
.tfss-ig:hover .tfss-scrim,.tfss-ig:focus .tfss-scrim{
  background:linear-gradient(to top,rgba(28,18,56,.94) 0%,rgba(28,18,56,.74) 26%,rgba(28,18,56,.24) 56%,rgba(28,18,56,.06) 100%);
}
.tfss-mark{
  position:absolute;top:0;left:0;z-index:3;width:40px;height:40px;
  display:grid;place-items:center;border-radius:0 0 var(--tfss-corner);
}
.tfss-mark svg{width:17px;height:17px;fill:currentColor}
.tfss-mark--ig{background:var(--tfss-pink);color:#fff}
.tfss-mark--li{background:#fff;color:var(--tfss-purple)}
.tfss-kind{
  position:absolute;top:12px;right:12px;z-index:3;width:28px;height:28px;
  display:grid;place-items:center;background:rgba(20,12,40,.4);border-radius:50%;
}
.tfss-kind svg{width:13px;height:13px;fill:#fff}
.tfss-sample{
  position:absolute;top:12px;right:12px;z-index:4;
  font:700 9px/1 var(--tfss-sans);letter-spacing:.12em;text-transform:uppercase;
  background:#f5821e;color:#fff;padding:5px 8px;border-radius:3px;
}
.tfss-kind + .tfss-sample{right:48px}
.tfss-ig-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 20px 18px}
.tfss-cap{
  font:400 14.5px/1.45 var(--tfss-sans);color:#fff;margin:0 0 11px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tfss-cap .tfss-tag{color:#ffc4e2;font-weight:500}
.tfss-meta{display:flex;align-items:center;gap:14px;font:500 12.5px/1 var(--tfss-sans);color:rgba(255,255,255,.84)}
.tfss-meta span{display:inline-flex;align-items:center;gap:5px}
.tfss-meta svg{width:12px;height:12px;fill:currentColor}
.tfss-meta .tfss-date{margin-left:auto;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.62)}

/* --- LinkedIn slide --- */
.tfss-li{background:var(--tfss-purple)}
.tfss-li-inner{position:absolute;inset:0;padding:20px;display:flex;flex-direction:column;color:#fff}
.tfss-logo{width:132px;height:auto;aspect-ratio:272.03/69.87;fill:#fff;margin:26px 0 0;flex:none}
.tfss-rule{height:1px;background:rgba(255,255,255,.22);margin:14px 0;border:0;flex:none;padding:0}
.tfss-text{
  font:300 15px/1.5 var(--tfss-sans);color:rgba(255,255,255,.95);margin:0;
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:5;
}
.tfss-text--short{-webkit-line-clamp:3}
.tfss-text .tfss-tag{color:#ffb3dc;font-weight:500}
.tfss-linkcard{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:12px;margin:13px 0 0;text-decoration:none!important;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:10px;
  padding:9px 12px 9px 9px;color:#fff!important;transition:background .18s;
}
.tfss-linkcard:hover{background:rgba(255,255,255,.18)}
.tfss-linkcard .tfss-thumb{width:46px;height:36px;border-radius:6px;overflow:hidden;flex:none;background:var(--tfss-purple-dk)}
.tfss-linkcard .tfss-thumb img{width:100%;height:100%;object-fit:cover}
.tfss-linkcard .tfss-lt{min-width:0}
.tfss-lt-title{display:block;font:600 12.5px/1.3 var(--tfss-sans);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tfss-lt-dom{display:block;font:400 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(255,255,255,.62);margin:4px 0 0}
.tfss-li-foot{
  margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:14px;
  border-top:1px solid rgba(255,255,255,.18);
  font:500 12.5px/1 var(--tfss-sans);color:rgba(255,255,255,.8);
}
.tfss-li-foot span{display:inline-flex;align-items:center;gap:6px}
.tfss-li-foot svg{width:13px;height:13px;fill:currentColor}
.tfss-li-foot .tfss-date{margin-left:auto;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.58)}
.tfss-li-link{position:absolute;inset:0;z-index:1}
.tfss-sr{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- footer ---------- */
.tfss-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:22px 0 0}
.tfss-live{display:inline-flex;align-items:center;gap:9px;font:500 12.5px/1 var(--tfss-sans);color:var(--tfss-ink-3)}
.tfss-live b{color:var(--tfss-ink-2);font-weight:600}
.tfss-beacon{width:8px;height:8px;border-radius:50%;background:#f5821e;flex:none;position:relative}
.tfss-beacon::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid #f5821e;opacity:.5;animation:tfss-ping 2.4s ease-out infinite}
@keyframes tfss-ping{0%{transform:scale(.7);opacity:.6}100%{transform:scale(1.5);opacity:0}}
.tfss-note{font:400 12.5px/1.5 var(--tfss-sans);color:var(--tfss-ink-3);margin:0}

/* ---------- empty state (admins only) ---------- */
.tfss-empty{
  border:2px dashed var(--tfss-line);border-radius:20px;padding:34px 28px;text-align:center;
  font:400 15px/1.6 var(--tfss-sans);color:var(--tfss-ink-2);
}
.tfss-empty b{display:block;font:700 18px/1.3 var(--tfss-sans);color:var(--tfss-purple);margin:0 0 8px}

/* ---------- focus + motion ---------- */
.tfss a:focus-visible,.tfss button:focus-visible,.tfss-strip:focus-visible{
  outline:3px solid var(--tfss-pink);outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  .tfss *,.tfss *::after{transition:none!important;animation:none!important}
  .tfss-strip{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:620px){
  .tfss{--tfss-slide:270px}
  .tfss-right{align-items:flex-start}
  .tfss-follow-btns{justify-content:flex-start}
  .tfss-rail .tfss-spacer{display:none}
  .tfss-rail .tfss-arrows{margin-left:auto}
  .tfss-text{-webkit-line-clamp:4}
}