/* /social — the four platform tabs.
 *
 * Loaded after site.css, so every colour, font and space here is one of its
 * tokens: the page must keep matching the rest of the site when a token moves.
 *
 * These rules lived in site.css until Wave 4 replaced the page with a merged
 * feed; the owner asked for the tabs back, so they live here now — a page
 * sheet, because nothing else on the site draws a Facebook page plugin. What
 * site.css still owns is shared and stays there: .soc-page, the .soc-hero*
 * block, .soc-body, .muted-note, and the .soc-tabs/.soc-tab underline tab bar
 * (Photos, Shop, the squad switchers and Coaches Corner all reuse it). The
 * .soc-panel show/hide pair is NOT in that shared block any more, so it is
 * below.
 *
 * Width queries are the canonical tiers only (1024 / 640) — the old 1020 was
 * one of the nine numbers Wave 5 retired.
 */

.soc-toolbar{margin:0 0 var(--space-4)}
.soc-panel{display:none}
.soc-panel.active{display:block}
.soc-stage{min-height:60vh}
.fb-frame{width:min(516px,100%);background:var(--surface-2);border:0;border-radius:var(--r-md);box-shadow:var(--elev-1);padding:8px;justify-self:center}
.fbp-cover{
  position:relative;border:0;border-radius:var(--r-md) var(--r-md) 0 0;overflow:hidden;
  background:
    linear-gradient(180deg, rgba(6,6,8,.55) 0%, rgba(11,11,13,.9) 100%),
    url('/assets/img/social-hero.webp') center 38%/cover no-repeat;
}
.fbp-bar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:40px 28px 24px}
.fbp-avatar{width:92px;height:92px;border-radius:50%;border:3px solid var(--white);background:#fff}
.fbp-id{flex:1;min-width:200px}
.fbp-id b{display:block;font-family:var(--display);font-size:var(--t-2xl);letter-spacing:var(--tr-tight);text-transform:uppercase;line-height:1.05}
.fbp-id span{color:var(--silver);font-size:var(--t-base)}
.fbp-grid{
  display:grid;grid-template-columns:minmax(230px,1fr) minmax(0,520px) minmax(230px,1fr);
  gap:22px;margin-top:22px;align-items:start;
}
/* The plugin iframe carries width/height attributes that assets/social.js
   recomputes on resize; the CSS only has to keep it from overflowing its
   516px frame and from drawing a UA border. */
.fb-embed{border:none;overflow:hidden;display:block;max-width:100%}
.fbp-more{margin-top:14px}
.fbp-photos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fbp-photos img{aspect-ratio:1;object-fit:cover;width:100%;border:0;border-radius:var(--r-sm)}
@media (max-width:1024px){
  .fbp-grid{grid-template-columns:1fr}
  .fb-frame{margin:0 auto}
}
.soc-coming{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  min-height:46vh;border:0;border-radius:var(--r-md);background:var(--surface-1);
  padding:50px 24px;text-align:center;
}
.soc-coming b{font-family:var(--display);text-transform:uppercase;font-size:var(--t-xl);letter-spacing:var(--tr-tight)}
.soc-coming span{color:var(--silver);max-width:52ch}
/* Dashed says "nothing here yet". Once the panel carries a real account and a
   real link, it is a card. */
.soc-coming-solid{border-style:solid}

/* ---------- phone ---------- */

/* The tab bar is the page's only control and it is four words long: at the
   shared 15.5px/.14em it needs ~510px, so on a 390px phone it wrapped 3+1 with
   a stray fourth button hanging under the row. Two even rows of two, each tap
   target 44px tall, reads as a deliberate 2x2 instead. The plugin frame and
   the coming-soon cards then fill the width they are given, and the stage's
   own 60vh floor is what the cards grow to, so there is no dead strip between
   a 46vh card and the footer. */
@media (max-width:640px){
  .soc-toolbar{margin:0 0 var(--space-3)}
  .soc-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px}
  .soc-tab{
    padding:12px 6px;min-height:44px;
    font-size:var(--t-base);letter-spacing:var(--tr-0);text-align:center;
  }
  .fb-frame{padding:6px}
  .fb-embed{width:100%}
  .fbp-bar{gap:14px;padding:26px 18px 20px}
  .fbp-avatar{width:64px;height:64px;border-width:2px}
  .fbp-id b{font-size:var(--t-xl)}
  .fbp-grid{gap:16px;margin-top:16px}
  .soc-coming{min-height:60vh;padding:34px 20px;gap:14px}
  .soc-coming img{width:min(180px,60%);height:auto}
  .soc-coming b{font-size:var(--t-lg)}
  .soc-coming span{font-size:var(--t-base)}
}