/* Home page "Follow RISE" block — replaces the three dead social panes.
 *
 * WHY THIS IS CSS AND NOTHING ELSE: the block is three links. It needs no
 * script, no iframe and no third-party runtime, which is the entire reason it
 * can be trusted to keep working. The panes it replaced each depended on a
 * vendor script or embed that is either dead (X) or a tracker (Facebook page
 * plugin, Instagram embed.js), and sanitize() in routes/admin-pages.js strips
 * both categories on every save — so even a "working" embed pasted into the
 * body would be deleted the first time Jeff edited the page.
 *
 * Scoped under .rseFollowBlock so it cannot reach the rest of the UIkit clone.
 * Colours are literal: the clone pages do not load /css/rise.css, so there are
 * no custom properties here to inherit.
 */

/* Jeff, 2026-10-01: "TEXT IS STILL NOT VISIBLE".
   
   The heading and the intro were coloured for a light surface —
   .rseSignupsHeader is #064443 and .rseFollowIntro is #5d6b6a — but this block
   is the only one on the home page WITHOUT a panel behind it, so both were
   landing straight on the dark background photograph. Measured against it, the
   heading came out at 1.29:1 and the intro at 2.53:1; 4.5:1 is the readable
   floor, so the heading was effectively invisible rather than merely dim.
   
   Fixed by giving the block the light panel its colours already assume, which
   is also the treatment on Recent Commits and the commitment map — the two
   sections he singled out: "the white, the find a player, the recent commits...
   it looks so professional, that's exactly how I'd want everything else to look
   that way too." Recolouring the text white would have fixed the contrast and
   made this block the odd one out. */
.rseFollowBlock {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  border-radius: 10px;
  padding: 34px 24px 30px;
  box-shadow: 0 1px 3px rgba(6, 68, 67, .10);
}

.rseFollowIntro {
  margin: 0 auto 26px;
  max-width: 620px;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #5d6b6a;
}

.rseFollowGrid {
  display: grid;
  /* auto-fit rather than three fixed columns: on a phone these stack, and on a
     tablet two-up beats three cramped ones. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.rseFollowCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 30px 20px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #e2e7e7;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  text-decoration: none;
  color: #22302f;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.rseFollowCard:hover,
.rseFollowCard:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .13);
  border-color: #cfd7d6;
  text-decoration: none;
  color: #22302f;
}

/* The brand colour lives on a top rule rather than the whole tile: three
   saturated blocks side by side read as adverts, and the point of the section
   is the RISE page, not the platforms. */
.rseFollowCard { border-top: 4px solid #064443; }
.rseFollowCard--fb { border-top-color: #1877f2; }
.rseFollowCard--x { border-top-color: #14171a; }
.rseFollowCard--ig { border-top-color: #c13584; }

/* Inline <svg> with currentColor fills, so the tile's accent drives the glyph. */
.rseFollowIcon { display: block; margin-bottom: 8px; fill: #064443; }
.rseFollowCard--fb .rseFollowIcon { fill: #1877f2; }
.rseFollowCard--x .rseFollowIcon { fill: #14171a; }
.rseFollowCard--ig .rseFollowIcon { fill: #c13584; }

.rseFollowName {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.rseFollowHandle { font-size: .95rem; color: #5d6b6a; }