/* ============================================================
   #JFLoveAtFirstDrink — Social Wall
   Reuses the design tokens/components from style.css (:root vars,
   .btn, .eyebrow, .h2, .nav, .card, .pic). This file only adds
   what's new: the masonry wall, filters, cards, bottom sheet.
   ============================================================ */

.soc{background:var(--bg);min-height:100vh}
.soc-hero{padding:104px 0 30px;text-align:center}
.soc-hero .eyebrow{display:block}
.soc-hero h1{margin:0 0 10px;font-size:clamp(40px,7vw,84px)}
.soc-hero p{margin:0 auto;max-width:520px;color:rgba(255,240,204,.78);font-size:15.5px}
.soc-hero__tag{display:inline-block;margin-top:16px;font:700 13px var(--mono);letter-spacing:.1em;color:var(--gold);border:1px dashed rgba(254,226,153,.5);padding:6px 14px}

/* ---------- filters ---------- */
.soc-bar{position:sticky;top:0;z-index:40;background:rgba(84,44,47,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,240,204,.15);padding:14px 0}
.soc-filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.soc-filters button{font:700 12.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:9px 16px;min-height:40px;border:2px solid rgba(255,240,204,.35);background:transparent;color:var(--cream);border-radius:99px;transition:.15s}
.soc-filters button:hover{border-color:var(--gold)}
.soc-filters button.is-on{background:var(--gold);border-color:var(--gold);color:var(--ink)}

/* ---------- wall (grid masonry, mixed sizes, dense flow) ---------- */
.wall{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;gap:14px;grid-auto-flow:dense;padding-block:34px 60px}
.wcard{position:relative;grid-column:span 1;grid-row:span 1;overflow:hidden;border-radius:6px;background:var(--bg3);border:1px solid rgba(255,240,204,.14)}
.wcard--pin{grid-column:span 2;grid-row:span 2}
.wcard--wide{grid-column:span 2}
.wcard--tall{grid-row:span 2}

.wcard__media{position:absolute;inset:0}
.wcard__media img{width:100%;height:100%;object-fit:cover;display:block}
.wcard__media--link{background:linear-gradient(155deg,var(--org),var(--redd));display:flex;align-items:center;justify-content:center;padding:18px;text-align:center}
.wcard[data-platform="instagram"] .wcard__media--link{background:linear-gradient(155deg,#c23a7a,#5a3fae)}
.wcard[data-platform="tiktok"] .wcard__media--link{background:linear-gradient(155deg,#1c1c1c,#3a3a3a)}
.wcard[data-platform="facebook"] .wcard__media--link{background:linear-gradient(155deg,#2f5fac,#1f3d73)}
.wcard__linktxt{font:800 15px/1.3 var(--disp);color:var(--cream)}
.wcard__linktxt small{display:block;margin-top:6px;font:700 11px var(--mono);letter-spacing:.1em;opacity:.85}

.wcard__badge{position:absolute;left:10px;top:10px;z-index:2;display:flex;align-items:center;gap:6px;background:rgba(20,8,9,.55);backdrop-filter:blur(4px);color:var(--cream);font:700 11px var(--mono);padding:5px 9px;border-radius:99px}
.wcard__badge svg{width:13px;height:13px;fill:currentColor}
.wcard__pin{position:absolute;right:10px;top:10px;z-index:2;background:var(--gold);color:var(--ink);font:800 10px var(--mono);letter-spacing:.08em;padding:4px 8px;border-radius:99px}
.wcard__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:rgba(20,8,9,.55);display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none}
.wcard__play svg{width:16px;height:16px;fill:var(--cream);margin-left:2px}

.wcard__meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px 12px 10px;background:linear-gradient(0deg,rgba(20,8,9,.92),rgba(20,8,9,0));color:var(--cream);
  transform:translateY(calc(100% - 30px));transition:transform .25s ease}
.wcard:hover .wcard__meta,.wcard:focus-within .wcard__meta,.wcard.is-open .wcard__meta{transform:none}
.wcard__u{font:700 13px var(--mono);margin:0 0 3px}
.wcard__cap{font:500 12.5px/1.4 var(--mono);margin:0 0 8px;opacity:.9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wcard__go{display:inline-flex;align-items:center;gap:4px;font:700 12px var(--mono);color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* editorial text card */
.wcard--text{background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;padding:22px;text-align:center}
.wcard--text p{margin:0;font:800 clamp(18px,2.4vw,26px)/1.25 var(--disp);letter-spacing:-.01em}
.wcard--text.alt{background:var(--org);color:var(--cream)}
.wcard--text.alt2{background:var(--ink);color:var(--gold)}

/* ---------- empty state ---------- */
.soc-empty{text-align:center;padding:70px 20px 90px}
.soc-empty h2{margin:0 0 10px;font:800 clamp(28px,5vw,44px)/1.15 var(--disp)}
.soc-empty p{margin:0 auto 24px;max-width:400px;color:rgba(255,240,204,.75)}

/* ---------- load more ---------- */
.soc-more{display:flex;justify-content:center;padding:0 0 60px}

/* ---------- floating add button ---------- */
.soc-fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:70;display:inline-flex;align-items:center;gap:8px}

/* ---------- bottom sheet ---------- */
.sheet-scrim{position:fixed;inset:0;background:rgba(20,8,9,.6);z-index:80;opacity:0;pointer-events:none;transition:opacity .25s}
.sheet-scrim.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:81;max-width:560px;margin:0 auto;background:var(--paper);color:var(--ink);border-radius:20px 20px 0 0;padding:26px 24px calc(28px + env(safe-area-inset-bottom));
  transform:translateY(105%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s linear .3s;max-height:88vh;overflow-y:auto}
.sheet-scrim.show + .sheet,.sheet.show{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.sheet__grab{width:42px;height:5px;border-radius:99px;background:rgba(46,20,22,.25);margin:0 auto 18px}
.sheet h2{margin:0 0 6px;font:800 clamp(24px,5vw,30px)/1.2 var(--disp)}
.sheet p.lead2{margin:0 0 20px;color:var(--mut);font:500 14px/1.5 var(--mono)}
.sheet .f{margin-bottom:16px}
.sheet .f label{display:block;font:700 13.5px var(--mono);margin-bottom:7px}
.sheet .f input[type=text],.sheet .f input[type=url],.sheet .f textarea{width:100%;background:var(--paper2);border:0;border-bottom:2px solid var(--ink);padding:12px;font:500 15px var(--mono);color:var(--ink)}
.sheet .f textarea{min-height:64px;resize:vertical}
.sheet__close{position:absolute;right:16px;top:18px;width:36px;height:36px;border:0;background:transparent;font:400 26px/1 var(--disp);color:var(--mut)}
.sheet__submit{width:100%;margin-top:4px}
.sheet__status{margin:12px 0 0;font:700 13.5px var(--mono);text-align:center}
.sheet__status.ok{color:var(--olv)}
.sheet__status.err{color:var(--redd)}
.sheet__done{text-align:center;padding:10px 0}
.sheet__done b{display:block;font:800 22px var(--disp);margin-bottom:8px}

/* ---------- platform pick (in the sheet) ---------- */
.plat-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.plat-pick input{position:absolute;opacity:0;pointer-events:none}
.plat-pick label>span{display:flex;flex-direction:column;align-items:center;gap:5px;min-height:56px;padding:10px 4px;border:2px solid var(--ink);font:700 12px var(--mono);cursor:pointer}
.plat-pick input:checked+span{background:var(--ink);color:var(--gold)}

@media (max-width:900px){
  .wall{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .soc-hero{padding:84px 0 22px}
  .wall{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:10px}
  .wcard--pin{grid-column:span 2;grid-row:span 2}
  .plat-pick{grid-template-columns:repeat(2,1fr)}
}