/* ===== Social Wall block =====
   Loaded per-page via Context.Items["ComponentCSS"] from
   Views/Partials/blockgrid/Components/socialWall.cshtml, the same way the gallery block loads
   fancybox.css. Kept out of the Smidge site-css bundle so the block can be deployed by
   uploading files only, with no bundle rebuild. */

.section-social-wall { padding: 5.5rem 0; }

@media (max-width: 767px) {
    .section-social-wall { padding: 3.6rem 0; }
}

/* Optional tint, driven by the "Show background" toggle on the block. */
.section-social-wall--tinted { background-color: #f0f8fc; }

.section-social-wall .social-wall__intro { text-align: center; margin-bottom: 3rem; }
/* Match the site subtitle scale. Without an explicit size the h6 falls through to the base
   .level-6 rule (1.8rem), which reads noticeably larger than every other block - reported by
   Louise Gates 2026-09-03. Measured on the live site: leftImagesWithText, the closest analogue,
   is 1.4rem rising to 1.5rem below 768px; textAndIcons and section-partners are both 1.4rem.
   The media query has to come after this rule, not in the padding block above, because the two
   selectors have equal specificity and the later one would otherwise win. */
.section-social-wall .social-wall__intro .subtitle { font-size: 1.4rem; line-height: 1.2; color: #01595a; margin-bottom: 1rem; }
.section-social-wall .social-wall__intro .section__title { margin: 0; }

@media (max-width: 767px) {
    .section-social-wall .social-wall__intro .subtitle { font-size: 1.5rem; }
}

/* Space is reserved before the pasted embed is injected, so it does not push the rest of the
   page down as it arrives. IPEBBLE-9780 is an open CLS ticket, and an async third-party embed
   with no reserved height is exactly the pattern that ticket is about.

   Measured against the live Flockler displays on 2026-09-02:
     mobile carousel  ~416px at 375px wide  -> 480px reserved (headroom for wider phones)
     desktop wall    ~4361px at 800px wide  -> 800px reserved, which is NOT yet honest.
   The desktop reservation is a placeholder: Flockler's script embed grows to the full height of
   the wall, so until the post count is reduced in Flockler (or a carousel is used on desktop
   too) there is still a large shift when it renders. Re-measure and update once that is settled. */
.social-wall .social-wall__embed { min-height: 480px; }

@media (min-width: 768px) {
    .social-wall .social-wall__embed { min-height: 800px; }
}