/* ==============================================
   New lessons every day: homepage social section.
   Rendered by social-feed.js from /api/social-feed.
   Uses the tokens in schoolhouse.css (ink outlines, offset shadows, deck palette).
   ============================================== */

.feed-layout{display:grid;gap:36px;align-items:start}
@media (min-width:1024px){
  .feed-layout.has-spotlight{grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:48px}
}
.feed-main{min-width:0;position:relative}

/* ─── Spotlight: the month's most-watched video ─── */
.feed-spotlight{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:18px;align-items:center;padding:16px;
  background:var(--paper);border:4px solid var(--ink);border-radius:20px;box-shadow:10px 10px 0 var(--ink);rotate:-1deg}
@media (min-width:1024px){.feed-spotlight{grid-template-columns:1fr;align-items:stretch;padding:18px}}
.feed-spotlight-media{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;background:none;color:inherit;text-align:left;border-radius:14px}

/* the starburst-red seal: the one loud element in the section */
.feed-seal{position:absolute;right:-.7rem;bottom:-.7rem;width:4rem;height:4rem;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:50%;background:var(--red);color:var(--cream);border:4px solid var(--ink);box-shadow:4px 4px 0 var(--ink);rotate:-8deg;line-height:1}
.feed-seal-num{font-family:var(--disp);font-weight:900;font-size:1.05rem}
.feed-seal-unit{font:900 .62rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;margin-top:.15rem}
@media (min-width:600px){.feed-seal{width:4.8rem;height:4.8rem}.feed-seal-num{font-size:1.3rem}}
@media (min-width:1024px){.feed-seal{width:5.4rem;height:5.4rem;right:-1rem;bottom:-1rem}.feed-seal-num{font-size:1.5rem}}

.feed-spotlight-body{min-width:0}
@media (min-width:1024px){.feed-spotlight-body{padding:8px 4px 2px}}
.feed-spotlight-kicker{font-family:var(--disp);font-weight:900;font-size:1.3rem;line-height:1.1}
.feed-spotlight-where{font-size:.85rem;font-weight:800;color:var(--muted);margin-top:4px}
.feed-spotlight-where i{margin-right:.3rem}
.feed-spotlight-text{font:700 .98rem/1.5 var(--type);margin-top:10px;
  display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.feed-spotlight .btn{margin-top:14px;font-size:1rem;padding:10px 18px 11px;border-width:3px;box-shadow:4px 4px 0 var(--ink)}
@media (max-width:479px){
  .feed-spotlight-text{-webkit-line-clamp:3;line-clamp:3;font-size:.92rem}
  .feed-spotlight .btn{width:100%}
}

/* ─── Tabs ─── */
.feed-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px 10px 16px;margin:0 -10px}
.feed-tabs::-webkit-scrollbar{display:none}
.feed-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:9px 14px 8px;font:900 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:var(--paper);border:3px solid var(--ink);border-radius:999px;cursor:pointer;transition:background .15s}
.feed-tab:hover{background:var(--yellow)}
.feed-tab[aria-selected="true"]{background:var(--ink);color:var(--cream)}
/* Inline SVG marks (X, Threads) sized like the Font Awesome glyphs beside them. */
.feed-mark{width:1em;height:1em;fill:currentColor;flex:0 0 auto;vertical-align:-.125em}
.feed-follow .btn .feed-mark{margin-right:.45rem}
.feed-tab:focus-visible,.feed-arrow:focus-visible,.feed-tile-link:focus-visible,
.feed-note-link:focus-visible,.feed-spotlight-media:focus-visible,.feed-player-close:focus-visible{outline:4px dashed var(--red);outline-offset:4px}

/* ─── Rail ─── */
.feed-panel:focus{outline:none}
.feed-rail{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(150px,40vw,200px);gap:22px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-padding-left:10px;padding:10px 18px 24px 10px;margin:0 -10px;scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
@media (prefers-reduced-motion:no-preference){.feed-rail{scroll-behavior:smooth}}
.feed-rail--notes{grid-auto-columns:clamp(250px,78vw,310px)}
.feed-rail > li{scroll-snap-align:start;min-width:0}
.feed-skeleton{aspect-ratio:3/4;border:4px solid var(--ink);border-radius:16px;
  background:linear-gradient(100deg,#F3E4C3 40%,var(--paper) 50%,#F3E4C3 60%) 0 0/250% 100%}
@media (prefers-reduced-motion:no-preference){.feed-skeleton{animation:feed-shimmer 1.6s linear infinite}}
@keyframes feed-shimmer{to{background-position:-150% 0}}

/* Thumbnail (shared by tiles + spotlight): a little TV */
.feed-thumb{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;border:4px solid var(--ink);border-radius:16px;background:var(--ink)}
.feed-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.feed-thumb-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.2rem;color:rgba(255,241,214,.4)}
.feed-thumb.is-broken img{display:none}
.feed-thumb.is-letterboxed img{transform:scale(1.34)}
.feed-play{position:absolute;left:.55rem;bottom:.55rem;width:2.3rem;height:2.3rem;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--yellow);color:var(--ink);border:3px solid var(--ink);font-size:.8rem;padding-left:2px}
.feed-play--out{padding-left:0;font-size:.74rem}
.feed-duration{position:absolute;right:.5rem;bottom:.6rem;padding:.2rem .45rem;border-radius:8px;background:var(--ink);color:var(--cream);
  font:800 .72rem/1.2 var(--body);font-variant-numeric:tabular-nums}
.feed-spotlight-media .feed-duration{right:auto;left:3.3rem;bottom:.9rem}

/* Video tile */
.feed-tile-link{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;color:var(--ink);text-decoration:none;font:inherit;border-radius:16px}
.feed-tile-link .feed-thumb{box-shadow:6px 6px 0 var(--ink);transition:transform .18s,box-shadow .18s}
.feed-tile-link:hover .feed-thumb{transform:translate(-2px,-2px) rotate(-1deg);box-shadow:9px 9px 0 var(--ink)}
.feed-when{display:flex;align-items:center;gap:.35rem;margin-top:.7rem;font-size:.78rem;font-weight:800;color:var(--muted)}
.feed-tile-caption{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:.2rem;font:700 .92rem/1.4 var(--type)}

/* Text note (LinkedIn / X / Threads): an index card */
.feed-note-link{position:relative;display:flex;flex-direction:column;height:100%;min-height:15rem;padding:18px 20px 16px;
  background:#FFFDF6 repeating-linear-gradient(transparent 0 30px,var(--rule) 30px 32px);background-position:0 44px;
  border:4px solid var(--ink);border-radius:12px;box-shadow:8px 8px 0 var(--ink);color:var(--ink);text-decoration:none;transition:transform .18s,box-shadow .18s}
.feed-note-link:hover{transform:translate(-2px,-2px) rotate(-.5deg);box-shadow:11px 11px 0 var(--ink)}
.feed-note-link .feed-when{margin-top:0}
.feed-note-text{flex:1;margin-top:.8rem;font:700 .96rem/2 var(--type);white-space:pre-line;
  display:-webkit-box;-webkit-line-clamp:7;line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.feed-note-more{margin-top:.8rem;font:900 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--red-ink)}
.feed-note-more i{margin-left:.3rem;font-size:.7rem}

/* Arrows (mouse users only; touch swipes) */
.feed-rail-controls{display:none}
@media (hover:hover) and (pointer:fine){.feed-rail-controls:not([hidden]){display:flex;flex:0 0 auto;gap:10px;margin-left:auto}}
.feed-arrow{width:2.8rem;height:2.8rem;border-radius:50%;border:3px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);transition:background .15s,opacity .15s}
.feed-arrow:hover:not(:disabled){background:var(--yellow)}
.feed-arrow:disabled{opacity:.35;cursor:default}

/* ─── Follow / fallback ─── */
.feed-foot{margin-top:10px;display:flex;align-items:center;gap:1rem}
.feed-follow{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem}
.feed-follow .btn{font-size:1rem;padding:10px 18px 11px;border-width:3px;box-shadow:4px 4px 0 var(--ink)}
.feed-follow .btn i{margin-right:.45rem}
.feed-handle{font-size:.88rem;font-weight:800;color:var(--muted)}
.feed-fallback{font-size:1.05rem}
.feed-fallback a{font-weight:900;text-decoration:underline wavy var(--red) 2px;text-underline-offset:5px}
.feed-layout[data-state="error"] .feed-panel,.feed-layout[data-state="error"] .feed-tabs{display:none}

/* ─── Player dialog ─── */
.feed-player{padding:0;border:0;background:transparent;max-width:none;max-height:none;margin:auto;overflow:visible}
.feed-player::backdrop{background:rgba(27,26,23,.88)}
.feed-player-frame{width:min(92vw,calc(84vh * 9 / 16),420px);aspect-ratio:9/16;background:#000;border:5px solid var(--ink);border-radius:22px;overflow:hidden;box-shadow:10px 10px 0 var(--yellow)}
.feed-player-frame iframe{display:block;width:100%;height:100%;border:0}
.feed-player-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.9rem}
.feed-player-out{color:var(--cream);font-size:.92rem;font-weight:800;text-decoration:underline wavy var(--yellow) 2px;text-underline-offset:5px}
.feed-player-out:hover{color:#fff}
.feed-player-close{width:2.8rem;height:2.8rem;border-radius:50%;border:3px solid var(--ink);background:var(--yellow);color:var(--ink);font-size:1.1rem;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.feed-player-close:hover{background:var(--paper)}

@media (prefers-reduced-motion:reduce){
  .feed-tile-link .feed-thumb,.feed-note-link,.feed-tab{transition:none}
  .feed-tile-link:hover .feed-thumb,.feed-note-link:hover{transform:none}
}