/* ==================================================================
   314 VBC — SOCIAL PAGE
   Only social.html loads this file. Nothing here touches site.css.
   ------------------------------------------------------------------
   Everything is namespaced `so-` so it cannot collide with the shared
   design system, which already owns .social-grid / .ig-grid / .ig-tile
   / .fb-embed for the homepage teaser. Those are deliberately NOT
   reused here — this page needs a different, larger treatment and
   site.css is off-limits.

   THE ONE RULE THAT MATTERS: .sec--navy and .phero set color:#fff on
   every descendant. Any component below that brings its own light
   background states color:var(--ink) explicitly. site.css has a safety
   net for its own components; ours are not in that list, so each one
   declares its colour itself. Grep this file for "SEC--NAVY" to find
   every place it's handled.
   ================================================================== */

/* components that JS toggles — [hidden] must beat display:grid/flex */
.so-embedbox[hidden],
.so-fallback[hidden],
.so-igwall[hidden],
.so-skel[hidden]{display:none!important}

/* ------------------------------------------------------------------
   1. FOLLOW — the two big platform cards
   Same physics as .pillar: white card, coloured top rule, lifts on
   hover. Navy rule for Facebook (the noticeboard), red for Instagram
   (the highlight reel) — brand colours, not platform colours, because
   a strip of Meta blue and a magenta gradient would wreck the page.
   ------------------------------------------------------------------ */
.so-chan-grid{display:grid;grid-template-columns:1fr;gap:clamp(1rem,2vw,1.5rem)}

.so-chan{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2rem;align-items:start;
  background:#fff;color:var(--ink);border:1px solid var(--line);border-top:4px solid var(--navy-900);
  padding:1.6rem 1.5rem 1.7rem;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-top-color .4s;
}
.so-chan:hover,.so-chan:focus-visible{transform:translateY(-6px);box-shadow:0 24px 46px -20px rgba(7,14,32,.34)}
.so-chan--ig{border-top-color:var(--red)}
.so-chan--fb:hover{border-top-color:var(--navy-600)}
.so-chan--ig:hover{border-top-color:var(--red-hot)}

.so-chan-ic{width:54px;height:54px;flex:0 0 auto;display:grid;place-items:center;background:var(--navy-900)}
.so-chan--ig .so-chan-ic{background:var(--red)}
.so-chan-ic svg{width:25px;height:25px;fill:#fff}

.so-chan-bd{display:block;min-width:0}
.so-chan-k{
  display:block;font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red-ink);margin-bottom:.5rem;
}
.so-chan--fb .so-chan-k{color:var(--navy-600)}
.so-chan-h{display:block;font-family:var(--font-display);font-size:1.55rem;line-height:1.05;text-transform:uppercase}
.so-chan-d{display:block;margin-top:.7rem;font-size:.93rem;color:var(--muted)}
.so-chan-go{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:1.1rem;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red-ink);border-bottom:2px solid var(--red);padding-bottom:.3rem;
}
.so-chan-go svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.so-chan:hover .so-chan-go svg{transform:translateX(5px)}

@media (min-width:820px){.so-chan-grid{grid-template-columns:1fr 1fr}}
@media (max-width:420px){
  .so-chan{grid-template-columns:1fr;gap:1rem}
}

/* ------------------------------------------------------------------
   2. FACEBOOK
   The plugin caps itself at 500px wide no matter what you ask for
   (Meta's own docs: min 180, max 500), so the embed column is pinned
   at 520px rather than letting it float in a half-empty half-width
   column. The fallback card occupies the same 520px footprint, so the
   swap from card to live feed doesn't move the page around.
   ------------------------------------------------------------------ */
.so-fb{display:grid;grid-template-columns:1fr;gap:clamp(1.2rem,2.5vw,2rem);align-items:start}
.so-fbmain{min-width:0}

.so-embedbox{
  position:relative;background:#fff;color:var(--ink);border:1px solid var(--line);
  max-width:520px;min-height:560px;overflow:hidden;
}
.so-embedbox iframe{
  position:relative;z-index:2;display:block;width:100%;height:560px;border:0;overflow:hidden;background:#fff;
}
.so-skel{
  position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;gap:1rem;
  background:linear-gradient(160deg,#fff,var(--bone-2));color:var(--muted);
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:1.5rem;
}
.so-spin{
  width:30px;height:30px;border:3px solid var(--bone-2);border-top-color:var(--red);border-radius:50%;
  animation:so-spin 1s linear infinite;
}
@keyframes so-spin{to{transform:rotate(360deg)}}

/* --- the branded fallback. This is the DEFAULT state in the markup;
       JS only hides it once a live embed has actually reported in. --- */
.so-fallback{
  position:relative;overflow:hidden;max-width:520px;color:#fff;
  background:linear-gradient(158deg,var(--navy-crest),var(--navy-900) 62%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
  padding:clamp(1.5rem,3vw,2.1rem);
}
.so-fallback::after{
  content:"314";position:absolute;right:-.5rem;bottom:-2.4rem;
  font-family:var(--font-display);font-size:8rem;line-height:1;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.1);pointer-events:none;user-select:none;
}
.so-fallback > *{position:relative;z-index:2}
.so-fb-badge{width:52px;height:52px;display:grid;place-items:center;background:var(--red);margin-bottom:1.1rem}
.so-fb-badge svg{width:24px;height:24px;fill:#fff}
.so-fb-badge--ig{background:linear-gradient(140deg,var(--red),var(--navy-crest))}
.so-fallback h3{font-size:clamp(1.5rem,3vw,1.9rem);color:#fff;margin-bottom:.7rem}
.so-fallback p{margin:0;color:rgba(255,255,255,.74);font-size:.92rem;max-width:48ch}

.so-teaser{list-style:none;margin:1.3rem 0 0;padding:0;font-size:.89rem;color:rgba(255,255,255,.85)}
.so-teaser li{display:flex;gap:.7rem;align-items:flex-start;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.15)}
.so-teaser li::before{content:"";flex:0 0 auto;width:8px;height:8px;margin-top:.44rem;background:var(--red-hot);transform:rotate(45deg)}
.so-teaser li b{font-weight:600;color:#fff}
.so-fbcta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}

/* --- the aside --- */
.so-side{display:flex;flex-direction:column;gap:1rem;min-width:0}
/* SEC--NAVY-SAFE: light card, states its own ink */
.so-sidecard{background:var(--bone);color:var(--ink);border:1px solid var(--line);padding:1.3rem 1.35rem}
.so-sidecard--dark{background:var(--navy-900);color:#fff;border-color:var(--navy-900)}
.so-sidek{font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red-ink)}
.so-sidek--hot{color:var(--red-hot)}
.so-sidecard p{margin:.7rem 0 0;font-size:.88rem;color:rgba(255,255,255,.72)}
.so-sidecard:not(.so-sidecard--dark) p{color:var(--muted)}
.so-sidelist{list-style:none;margin:.85rem 0 0;padding:0;font-size:.89rem}
.so-sidelist li{display:flex;gap:.65rem;align-items:flex-start;padding:.45rem 0;border-bottom:1px solid var(--line)}
.so-sidelist li:last-child{border-bottom:0;padding-bottom:0}
.so-sidelist li::before{content:"";flex:0 0 auto;width:8px;height:8px;margin-top:.42rem;background:var(--red);transform:rotate(45deg)}
.so-sidebtns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}

@media (min-width:1080px){
  .so-fb{grid-template-columns:minmax(0,520px) minmax(0,1fr)}
}
@media (max-width:520px){
  .so-embedbox{min-height:520px}
  .so-embedbox iframe{height:520px}
  .so-fbcta .btn,.so-sidebtns .btn{flex:1 1 100%}
}

/* ------------------------------------------------------------------
   3. INSTAGRAM WALL
   Each cell is one real post, rendered by Instagram's own /embed
   endpoint. The cells are white boxes on a navy section, so they get
   a light hairline instead of the usual --line.
   ------------------------------------------------------------------ */
.so-igwall{display:grid;grid-template-columns:1fr;gap:.7rem}
.so-igcell{
  background:#fff;color:var(--ink);           /* SEC--NAVY-SAFE */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);overflow:hidden;min-width:0;
}
.so-igcell iframe{display:block;width:100%;height:540px;border:0;background:#fff}
.so-fallback--ig{max-width:none}

.so-igfoot{margin:1.3rem 0 0;font-size:.85rem;color:rgba(255,255,255,.6)}
.so-igfoot a{color:#fff;border-bottom:2px solid var(--red);padding-bottom:1px}
.so-igfoot a:hover{border-bottom-color:var(--red-hot)}

@media (min-width:620px){
  .so-igwall{grid-template-columns:1fr 1fr}
  .so-igwall > :first-child{grid-column:span 2}
}
@media (min-width:1080px){
  .so-igwall{grid-template-columns:repeat(3,1fr)}
  .so-igwall > :first-child{grid-column:span 2}
  .so-igcell iframe{height:560px}
}

/* ------------------------------------------------------------------
   4. CHAMPIONSHIP WALL
   CSS multi-column masonry. The photos are 796–1440px wide and
   near-square, so a column layout keeps their real proportions instead
   of cropping ten team photos into identical squares — in a team photo
   the people at the edges are the ones a crop eats.
   ------------------------------------------------------------------ */
.so-wall{columns:1;column-gap:clamp(.8rem,1.6vw,1.1rem)}
.so-shotfig{break-inside:avoid;margin:0 0 clamp(.8rem,1.6vw,1.1rem);display:block}

.so-shot{
  display:block;width:100%;padding:0;border:0;margin:0;line-height:0;cursor:zoom-in;
  background:var(--navy-850);position:relative;overflow:hidden;
}
.so-shot img{display:block;width:100%;height:auto;transition:transform .6s var(--ease)}
.so-shot:hover img,.so-shot:focus-visible img{transform:scale(1.045)}
.so-shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(7,14,32,.5));
  opacity:0;transition:opacity .35s;
}
.so-shot:hover::after,.so-shot:focus-visible::after{opacity:1}
.so-shotzoom{
  position:absolute;right:.55rem;bottom:.55rem;z-index:2;width:34px;height:34px;
  display:grid;place-items:center;background:var(--red);opacity:0;transform:translateY(6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.so-shot:hover .so-shotzoom,.so-shot:focus-visible .so-shotzoom{opacity:1;transform:none}
.so-shotzoom svg{width:17px;height:17px;fill:#fff}


@media (min-width:620px){.so-wall{columns:2}}
@media (min-width:1040px){.so-wall{columns:3}}

/* ------------------------------------------------------------------
   5. TAG US
   ------------------------------------------------------------------ */
.so-tagwrap{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3.5vw,3rem);align-items:start}
.so-tagcol{min-width:0}
.so-h3{font-size:clamp(1.3rem,2.6vw,1.7rem);margin:0 0 .5rem}
.so-h3 + .so-p{margin-top:0}
.so-tagcol .so-h3 ~ .so-h3{margin-top:2.2rem}
.so-p{margin:0 0 1rem;font-size:.93rem;color:var(--muted)}

.so-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.so-tag{
  font-family:var(--font-body);font-size:.8rem;font-weight:700;letter-spacing:.03em;
  background:var(--bone);color:var(--navy-900);border:0;box-shadow:inset 0 0 0 1px var(--line);
  padding:.62rem .95rem;min-height:44px;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s;
}
.so-tag:hover{background:var(--navy-900);color:#fff;box-shadow:none}
.so-tag[data-copied]{background:var(--ok-bg);color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok)}
.so-copied{min-height:1.3rem;margin:.75rem 0 0;font-size:.79rem;font-weight:600;color:var(--ok)}

.so-who{list-style:none;margin:0;padding:0;font-size:.93rem}
.so-who li{padding:.7rem 0;border-bottom:1px solid var(--line);color:var(--muted)}
.so-who li b{color:var(--ink);font-weight:600}
.so-who a{color:var(--red-ink);font-weight:600;border-bottom:2px solid var(--red);padding-bottom:1px}

/* SEC--NAVY-SAFE by construction: this lives in .sec--white, but it
   states its ink anyway so it can be moved without breaking. */
.so-policy{
  background:var(--bone);color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--red);
  padding:clamp(1.4rem,2.8vw,2rem);
}
.so-policy-k{font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red-ink);margin-bottom:.9rem}
.so-policy > p{margin:0;font-size:.94rem;color:var(--ink)}
.so-policy ul{list-style:none;margin:1.1rem 0 0;padding:0;font-size:.91rem;color:var(--muted)}
.so-policy li{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem 0;border-bottom:1px dotted var(--line)}
.so-policy li:last-child{border-bottom:0}
.so-policy li::before{content:"";flex:0 0 auto;width:8px;height:8px;margin-top:.45rem;background:var(--red);transform:rotate(45deg)}
.so-policy li b{color:var(--ink);font-weight:600}
.so-policy-cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.so-policy-foot{
  margin:1.2rem 0 0;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:.81rem;color:var(--muted);
}

@media (min-width:980px){
  .so-tagwrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
}
@media (max-width:520px){
  .so-policy-cta .btn{flex:1 1 100%}
}

/* ------------------------------------------------------------------
   6. STICKY FOLLOW RAIL
   Desktop only. Below 1180px it would sit on top of content on a
   narrow column, and on a phone it would cover the thing you're
   reading — so it simply doesn't exist there. The footer already
   carries the same two links on every page.
   ------------------------------------------------------------------ */
.so-rail{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:90;
  display:none;flex-direction:column;align-items:stretch;
  background:var(--navy-900);box-shadow:0 16px 42px -20px rgba(7,14,32,.75);
}
.so-rail-k{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-size:.56rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.45);padding:.9rem .55rem .5rem;text-align:center;
}
.so-rail a{width:46px;height:46px;display:grid;place-items:center;transition:background .25s}
.so-rail a:hover{background:var(--red)}
.so-rail svg{width:17px;height:17px;fill:#fff}
@media (min-width:1180px){.so-rail{display:flex}}

/* ------------------------------------------------------------------
   7. LIGHTBOX — native <dialog>
   showModal() gives us Esc, the inert backdrop, the focus trap and
   focus restoration for free. Nothing here re-implements any of that,
   which is exactly why there is no keyboard trap to get wrong.
   ------------------------------------------------------------------ */
.so-lb{
  border:0;padding:0;background:transparent;max-width:min(1100px,94vw);max-height:94vh;overflow:visible;
}
.so-lb::backdrop{background:rgba(7,14,32,.92)}
.so-lb img{
  display:block;margin-inline:auto;max-width:100%;max-height:78vh;width:auto;height:auto;
  background:var(--navy-850);box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
}
.so-lb-cap{margin:1rem auto 0;max-width:60ch;text-align:center;color:rgba(255,255,255,.82);font-size:.88rem}
.so-lb-x{
  position:absolute;top:.5rem;right:.5rem;z-index:3;width:42px;height:42px;
  background:var(--red);border:0;cursor:pointer;display:grid;place-items:center;transition:background .2s;
}
.so-lb-x:hover{background:var(--red-hot)}
.so-lb-x svg{width:18px;height:18px;fill:#fff}

/* ------------------------------------------------------------------
   8. PRINT — the feeds, the rail and the viewer are all screen-only.
   The photo wall prints, at one column, because a parent printing this
   page is printing the photos.
   ------------------------------------------------------------------ */
@media print{
  .so-rail,.so-lb,.so-embedbox,.so-igwall,.so-igfoot,.so-shotzoom,
  .so-fbcta,.so-sidebtns,.so-policy-cta,.so-tags,.so-copied{display:none!important}
  .so-fallback{background:#fff!important;color:#000!important;box-shadow:none!important;border:1px solid #999}
  .so-fallback::after{display:none!important}
  .so-fallback h3{color:#000!important}
  .so-fallback p,.so-teaser{color:#333!important}
  .so-teaser li{border-color:#ccc!important}
  .so-chan,.so-sidecard,.so-policy{border:1px solid #999!important;box-shadow:none!important;break-inside:avoid}
  .so-sidecard--dark{background:#fff!important;color:#000!important}
  .so-sidecard--dark p{color:#333!important}
  .so-wall{columns:1}
  .so-shotfig{break-inside:avoid}
}

/* reduced motion: site.css already nukes every transition and
   animation globally, which stops the spinner mid-turn. Give it a
   static ring so it doesn't read as a broken quarter-circle. */
@media (prefers-reduced-motion:reduce){
  .so-spin{border-color:var(--bone-2);border-top-color:var(--red)}
}