/* ============================================================
   THE BIGG PULL, Facebook feed component
   Self-contained. Uses the site's existing design tokens from styles.css
   (--red is the legacy alias that now resolves to the gold CI) and the same
   3 / 2 / 1 column breakpoints as .cards (960px, 560px).
   ============================================================ */

.fb-feed__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
@media(max-width:960px){ .fb-feed__grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .fb-feed__grid{grid-template-columns:1fr} }

/* ---------- Card ---------- */
.fbc{
  display:flex;flex-direction:column;height:100%;
  background:var(--ink-3);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  color:var(--txt-on-dark);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.fbc:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:rgba(201,162,39,.42)}
/* Keyboard parity: lift the card when a link inside it is focused. */
.fbc:focus-within{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:var(--red)}

/* Facebook posts mix portrait and landscape freely. A cover-crop cut faces off
   the top and bottom of portrait shots, so the frame now shows the WHOLE image
   (contain) and fills the leftover space with a blurred, darkened copy of that
   same image. Nothing is ever cropped, in either orientation, and every card
   keeps the same height so the grid stays even. */
.fbc__media{
  position:relative;display:block;
  aspect-ratio:4/3;background:var(--ink-2);
  overflow:hidden;
  isolation:isolate}
.fbc__media::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--fbc-bg);
  background-size:cover;background-position:center;
  filter:blur(22px) brightness(.45) saturate(1.1);
  transform:scale(1.25);          /* hides the soft edge the blur leaves */
  pointer-events:none}
.fbc__media img{
  position:relative;z-index:1;
  width:100%;height:100%;
  object-fit:contain;             /* the whole picture, never a cropped face */
  transition:transform .35s ease}
.fbc:hover .fbc__media img{transform:scale(1.045)}

/* One frame ratio for every card, whatever the photo's orientation. Varying it
   per photo made portraits bigger but left the text starting at different
   heights across a row, which read as broken. Uniform frame + contain keeps the
   grid even AND still shows every photo in full. */

/* No blurred backdrop to hide behind on a light background, so keep it subtle. */
.fb-feed-app--light .fbc__media{background:var(--paper-2)}
.fb-feed-app--light .fbc__media::before{filter:blur(22px) brightness(1.05) saturate(1.1)}

/* Video badge */
.fbc__video{
  position:absolute;left:12px;bottom:12px;
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px;border-radius:999px;
  background:rgba(13,13,13,.82);
  border:1px solid rgba(201,162,39,.5);
  color:#fff;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em}
.fbc__video-dot{
  width:0;height:0;
  border-left:8px solid var(--red);
  border-top:5px solid transparent;
  border-bottom:5px solid transparent}

.fbc__body{display:flex;flex-direction:column;gap:12px;padding:18px 18px 20px;flex:1}

/* ---------- Byline ---------- */
.fbc__head{display:flex;align-items:center;gap:10px}
.fbc__avatar{
  width:40px;height:40px;border-radius:50%;
  object-fit:cover;flex:none;
  border:1px solid var(--line);background:var(--ink-2)}
.fbc__avatar--icon{display:grid;place-items:center;color:var(--red)}
.fbc__avatar--icon svg{width:20px;height:20px}
.fbc__who{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.fbc__page{
  font-weight:700;font-size:.86rem;color:var(--txt-on-dark);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbc__date{font-size:.76rem;color:var(--txt-on-dark-mute)}
.fbc__src{margin-left:auto;color:var(--red);flex:none;display:grid;place-items:center}
.fbc__src svg{width:17px;height:17px}

/* ---------- Text ---------- */
.fbc__text{
  font-size:.93rem;line-height:1.62;
  color:rgba(255,255,255,.84);
  white-space:pre-line;              /* keep the poster's line breaks */
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
  overflow:hidden;
  margin:0}

/* ---------- Engagement ---------- */
.fbc__stats{
  display:flex;flex-wrap:wrap;gap:14px;
  margin:0;padding:12px 0 0;
  border-top:1px solid var(--line);
  list-style:none}
.fbc__stats li{font-size:.76rem;color:var(--txt-on-dark-mute);letter-spacing:.02em}
.fbc__stats strong{color:var(--red-bright);font-weight:700}

/* ---------- Footer: read full post on the left, share on the right ---------- */
/* margin-top:auto moved off .fbc__more onto the row, so the pair sits together
   at the bottom of a card whatever its text length. */
/* No border here on purpose: .fbc__stats above already draws one, and a second
   hairline 12px below it reads as a mistake. .fbc__body's gap does the spacing. */
.fbc__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;
  margin-top:auto}
.fbc__foot .fbc__more{margin-top:0}

/* ---------- Read full post ---------- */
.fbc__more{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--red-bright);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color .2s ease,gap .2s ease}
.fbc__more:hover{border-bottom-color:var(--red-bright);gap:12px}
.fbc__arrow{transition:transform .2s ease}
.fbc__more:hover .fbc__arrow{transform:translateX(3px)}

/* Visible focus, WCAG AA */
.fbc a:focus-visible,
.fb-feed__more:focus-visible,
.fb-feed__cta:focus-visible{
  outline:3px solid var(--red-bright);
  outline-offset:3px;
  border-radius:4px}

/* ---------- Load More + CTA ---------- */
.fb-feed__actions{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:34px}
.fb-feed__more[hidden]{display:none}
/* "Follow The Bigg Pull on Facebook" is long: let it wrap and never exceed the
   viewport, or it pushes the whole page into horizontal scroll on small phones. */
.fb-feed__actions .btn{max-width:100%}
.fb-feed__cta{white-space:normal;text-align:center;line-height:1.35}
@media(max-width:430px){
  .fb-feed__cta{font-size:.78rem;padding-left:1.2em;padding-right:1.2em}
}
.fb-feed__status{
  font-size:.85rem;color:var(--txt-on-dark-mute);text-align:center;margin-top:14px}
.fb-feed__status--error{color:var(--red-bright)}

/* ---------- Fallback (Facebook unreachable / not connected yet) ---------- */
.fb-feed__fallback{
  grid-column:1/-1;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  padding:44px 24px;text-align:center;
  background:var(--ink-3);
  border:1px solid var(--line);
  border-radius:var(--r)}
.fb-feed__fallback p{color:var(--txt-on-dark-mute);font-size:1rem;margin:0}

/* ---------- Loading skeleton ---------- */
.fbc--skeleton{pointer-events:none}
.fbs{
  background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.11) 37%,rgba(255,255,255,.05) 63%);
  background-size:400% 100%;
  animation:fbs-shimmer 1.5s ease-in-out infinite;
  border-radius:6px}
/* Match the real card frame so the skeleton doesn't jump when posts arrive. */
.fbc--skeleton .fbc__media{aspect-ratio:4/3}
.fbs--line{height:12px;margin-bottom:10px}
.fbs--w60{width:60%}
.fbs--w40{width:40%}
@keyframes fbs-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---------- Screen-reader-only ---------- */
.fb-feed-app .sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Light-background variant ----------
   The site is mostly dark bands, but .band--paper2 / light sections exist.
   Dropping .fb-feed-app--light on the section recolours the component. */
.fb-feed-app--light .fbc{background:var(--paper);border-color:var(--line-dark);color:var(--txt-dark)}
.fb-feed-app--light .fbc__page{color:var(--txt-dark)}
.fb-feed-app--light .fbc__text{color:#3a3d45}
.fb-feed-app--light .fbc__date,
.fb-feed-app--light .fbc__stats li{color:var(--txt-mute)}
.fb-feed-app--light .fbc__stats{border-top-color:var(--line-dark)}
.fb-feed-app--light .fbc__more{color:var(--gold-deep)}
.fb-feed-app--light .fbc__more:hover{border-bottom-color:var(--gold-deep)}
.fb-feed-app--light .fb-feed__fallback{background:var(--paper);border-color:var(--line-dark)}
.fb-feed-app--light .fb-feed__fallback p,
.fb-feed-app--light .fb-feed__status{color:var(--txt-mute)}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .fbc,
  .fbc__media img,
  .fbc__more,
  .fbc__arrow{transition:none !important}
  .fbc:hover,
  .fbc:focus-within{transform:none}
  .fbc:hover .fbc__media img{transform:none}
  .fbc__more:hover .fbc__arrow{transform:none}
  .fbs{animation:none}
}