/* Free Facebook Group panel — used at the foot of the home page.
   Lives in its own file rather than a page <style> block: it carries
   Facebook's blue and macOS window-chrome greys, which are third-party
   brand and UI colours rather than anything in tokens.css, and the house
   rule is that no hex appears in a page's own styles. Keeping it external
   also means the panel can be dropped onto another page with two links. */

/* -------- Free Facebook Group panel --------------------------------------
   Ported from the lab's FB1b. Written fresh rather than copied so it carries
   none of the variant history: one namespace, one scroll value, no
   dependency on lab.css or lab.js.

   Motion: --p (0 to 1 as the section crosses the viewport) is written by the
   small script at the end of this page. --fb-lift eases out of it, and both
   the card's rotation and its shadow are derived from that single value, so
   they cannot drift apart. At rest everything resolves flat and the shadow
   reaches exactly zero — a card lying flush on the surface cannot cast one.
   ------------------------------------------------------------------------ */

.fbjoin {
  background: var(--uep-green);
  padding: var(--space-8) var(--space-5);
  overflow: hidden;
  --fb-lift: clamp(0, calc((var(--p, 0) - 0.30) / 0.42), 1);
}
.fbjoin__inner {
  max-width: var(--max-w-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: var(--space-7);
}

.fbjoin__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-headline);
  font-size: var(--fs-overline);
  font-weight: var(--fw-bld);
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--uep-on-dark);
  margin: 0 0 var(--space-3);
}
.fbjoin__eyebrow img { width: 15px; height: 15px; }
/* One size down from the lab, where this sat in a wider column — at h1
   size "Facebook Group" wrapped to a third line here. */
.fbjoin h2 { color: var(--uep-on-dark); font-size: var(--fs-h2); margin: 0 0 var(--space-4); }
.fbjoin__lead { color: var(--uep-on-dark); margin: 0 0 var(--space-5); max-width: 46ch; }

.fbjoin__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-headline);
  font-size: var(--fs-small);
  font-weight: var(--fw-bld);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  color: #fff;
  background: #1877F2;
  border-radius: var(--radius-pill);
  padding: 14px 26px;
  box-shadow: 0 10px 24px rgba(24, 119, 242, .32);
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.fbjoin__cta img { width: 18px; height: 18px; }
/* Brand green on white. Green type directly on the Facebook blue is about
   1.6:1 contrast, so the background flips with it. */
.fbjoin__cta:hover,
.fbjoin__cta:focus-visible { background: #fff; color: var(--uep-green); transform: translateY(-2px); }
.fbjoin__cta:hover img,
.fbjoin__cta:focus-visible img { content: url("/assets/img/fb/facebook.svg"); }

/* -- The browser window -- */

.fbjoin__stage {
  perspective: 1050px;
  /* The shadow is cast by a filter on this UNROTATED parent, not by a
     box-shadow on the window. box-shadow is cast from the border box in the
     element's own flat space and only then projected, so under perspective
     it smears into a wedge; drop-shadow here shadows the already-projected
     silhouette, rounded corners and tilt included. Offset left as well as
     down because the near edge is on the right. */
  --s: calc(1 - var(--fb-lift));
  filter:
    drop-shadow(calc(-2px * var(--s)) calc(2px * var(--s)) calc(3px * var(--s)) rgba(1, 34, 18, calc(.30 * var(--s))))
    drop-shadow(calc(-9px * var(--s)) calc(9px * var(--s)) calc(12px * var(--s)) rgba(1, 34, 18, calc(.26 * var(--s))))
    drop-shadow(calc(-26px * var(--s)) calc(26px * var(--s)) calc(34px * var(--s)) rgba(1, 34, 18, calc(.20 * var(--s))));
}
.fbjoin__card {
  max-width: 680px;
  margin-inline: auto;
  transform: rotateY(calc((1 - var(--fb-lift)) * -28deg))
             rotateX(calc((1 - var(--fb-lift)) * 13deg))
             translateY(calc((1 - var(--fb-lift)) * 38px))
             scale(calc(.94 + .06 * var(--fb-lift)));
}

.fbwin {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #1c1e21;
  outline: 1px solid rgba(255, 255, 255, .10);
  outline-offset: -1px;
}
.fbwin__bar {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
  background: #2b2d31;
}
.fbwin__dots { display: flex; gap: 7px; }
.fbwin__dots i { width: 11px; height: 11px; border-radius: 50%; background: #4a4d52; display: block; }
.fbwin__dots i:first-child { background: #ff5f57; }
.fbwin__dots i:nth-child(2) { background: #febc2e; }
.fbwin__dots i:nth-child(3) { background: #28c840; }
.fbwin__url {
  flex: 1;
  min-width: 0;
  background: #1c1e21;
  border-radius: var(--radius-pill);
  padding: 6px 13px;
  font-size: 11.5px;
  color: #b0b3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fbwin__shot { display: block; width: 100%; height: auto; aspect-ratio: 1050 / 575; object-fit: cover; }

@media (max-width: 1023px) {
  .fbjoin__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .fbjoin h2 { font-size: var(--fs-h2); }
}

/* The turn is decoration; without it the panel is simply a screenshot and a
   button, which is the whole message anyway. */
@media (prefers-reduced-motion: reduce) {
  .fbjoin__card { transform: none; }
  .fbjoin__stage { filter: none; }
}