/* SoraStride Fit — social links + YouTube.
   Uses the theme's --ss-* tokens when present; the fallbacks are the
   v5 palette so it still looks right on any theme. */
.ssfit-follow{ --sfs-ink:var(--ss-ink,#241726); --sfs-body:var(--ss-body,#5E4F5C); --sfs-plum:var(--ss-brand,#5B1F4E);
  --sfs-plum-deep:var(--ss-brand-dark,#2E0F27); --sfs-gold:var(--ss-gold,#C08A2E); --sfs-deep:var(--ss-alt,#F2E9D8);
  --sfs-r:var(--ss-r,8px); --sfs-serif:var(--ss-serif,"Fraunces",Georgia,serif) }
.ssfit-follow__head{ max-width:40rem; margin-bottom:2.5rem }
.ssfit-follow__head h2{ margin:0 }
.ssfit-follow__lede{ margin-top:1.1rem; font-size:var(--ss-lede,1.1rem); color:var(--sfs-body); line-height:1.7 }
.ssfit-follow__grid{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:clamp(1.25rem,2.5vw,2rem); align-items:start }
.ssfit-follow.is-single .ssfit-follow__grid{ grid-template-columns:1fr }
@media (max-width:820px){ .ssfit-follow__grid{ grid-template-columns:1fr } }

/* ── YouTube ── */
.ssfit-yt{ display:flex; flex-direction:column; gap:.9rem }
.ssfit-yt__player{ position:relative; aspect-ratio:16/9; border-radius:var(--sfs-r,8px); overflow:hidden;
  background:#1a0f18 center/cover no-repeat; box-shadow:0 18px 40px -22px rgba(36,23,38,.45) }
.ssfit-yt__player::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(46,15,39,0) 45%,rgba(46,15,39,.78)) }
.ssfit-yt__player.is-playing::after{ display:none }
.ssfit-yt__player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.ssfit-yt__play{ position:absolute; inset:0; margin:auto; width:84px; height:60px; padding:0; border:0; background:none;
  cursor:pointer; z-index:2; transition:transform .18s ease }
.ssfit-yt__play svg{ width:100%; height:100%; display:block }
.ssfit-yt__play svg path:first-child{ fill:var(--sfs-plum,#5B1F4E); opacity:.92; transition:fill .18s, opacity .18s }
.ssfit-yt__play:hover{ transform:scale(1.06) }
.ssfit-yt__play:hover svg path:first-child{ fill:#e62117; opacity:1 }
.ssfit-yt__play:focus-visible{ outline:3px solid var(--sfs-gold); outline-offset:4px; border-radius:14px }
.ssfit-yt__title{ position:absolute; left:1.25rem; right:9rem; bottom:1rem; z-index:2; color:#fff;
  font-family:var(--sfs-serif); font-size:1.02rem; line-height:1.35; font-weight:500;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.ssfit-yt__watch{ position:absolute; right:1rem; bottom:1rem; z-index:2; font-size:.78rem; font-weight:600;
  color:#fff; text-decoration:none; padding:.35rem .7rem; border:1px solid rgba(255,255,255,.45); border-radius:6px }
.ssfit-yt__watch:hover{ background:#fff; color:var(--sfs-plum-deep) }
@media (max-width:560px){ .ssfit-yt__title{ display:none } }

.ssfit-yt__strip{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr)) }
.ssfit-yt__strip li{ margin:0 }
.ssfit-yt__thumb{ all:unset; box-sizing:border-box; cursor:pointer; display:block; width:100%; border-radius:6px;
  padding:0; background:transparent }
.ssfit-yt__thumb img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:6px;
  outline:2px solid transparent; outline-offset:2px; transition:outline-color .15s, opacity .15s; opacity:.85 }
.ssfit-yt__thumb span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin-top:.4rem; font-size:.78rem; line-height:1.35; color:var(--sfs-body) }
.ssfit-yt__thumb:hover img, .ssfit-yt__thumb.is-current img{ opacity:1; outline-color:var(--sfs-gold) }
.ssfit-yt__thumb.is-current span{ color:var(--sfs-ink); font-weight:600 }
.ssfit-yt__thumb:focus-visible img{ outline-color:var(--sfs-plum) }
.ssfit-yt__more{ align-self:flex-start; font-size:.88rem; font-weight:600; color:var(--sfs-plum); text-decoration:none }
.ssfit-yt__more:hover{ text-decoration:underline }

/* ── link cards (v5 right column) ── */
.ssfit-social{ list-style:none; margin:0; padding:0 }
.ssfit-social li{ margin:0 }
.ssfit-social--cards{ display:flex; flex-direction:column; gap:.75rem }
.ssfit-social--cards .ssfit-social__link{ display:flex; align-items:center; gap:.9rem; padding:1.05rem 1.25rem;
  border-radius:var(--sfs-r,8px); background:var(--sfs-deep,#F2E9D8); color:var(--sfs-ink,#241726);
  text-decoration:none; font-weight:600; font-size:.95rem; transition:background .18s, color .18s, transform .18s }
.ssfit-social--cards .ssfit-social__link:hover,
.ssfit-social--cards .ssfit-social__link:focus-visible{ background:var(--sfs-plum,#5B1F4E); color:#fff; transform:translateX(4px) }
.ssfit-social__glyph{ flex:0 0 1.75rem; height:1.75rem; display:inline-grid; place-items:center;
  font-family:var(--sfs-serif,Georgia,serif); font-style:italic; font-weight:600; font-size:1.05rem; line-height:1;
  color:var(--sfs-gold,#C08A2E) }
.ssfit-social__glyph svg, .ssfit-social__glyph img{ width:1.15rem; height:1.15rem; display:block }
.ssfit-social--cards .ssfit-social__link:hover .ssfit-social__glyph{ color:var(--ss-gold-bright,#E3A93F) }

/* ── compact icon row (footer) ── */
.ssfit-social--icons{ display:flex; flex-wrap:wrap; gap:.55rem }
.ssfit-social--icons .ssfit-social__link{ display:inline-grid; place-items:center; width:2.4rem; height:2.4rem;
  border-radius:999px; border:1px solid rgba(255,255,255,.22); text-decoration:none; transition:background .18s, border-color .18s }
.ssfit-social--icons .ssfit-social__glyph{ font-size:.95rem; color:var(--ss-gold-bright,#E3A93F) }
.ssfit-social--icons .ssfit-social__link:hover{ background:var(--ss-gold-bright,#E3A93F); border-color:var(--ss-gold-bright,#E3A93F) }
.ssfit-social--icons .ssfit-social__link:hover .ssfit-social__glyph{ color:var(--ss-brand-dark,#2E0F27) }

/* ── plain list ── */
.ssfit-social--list{ display:flex; flex-wrap:wrap; gap:.4rem 1.25rem }
.ssfit-social--list .ssfit-social__link{ display:inline-flex; gap:.45rem; align-items:center; color:inherit; text-decoration:none }
.ssfit-social--list .ssfit-social__link:hover{ text-decoration:underline }

.ssfit-social .screen-reader-text{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap }
