/*
 * patterns/social-elfsight.css — "Connect With FCS"
 * Markup: wp-content/themes/fcs/patterns/social-elfsight.php
 * Root:   .fcs-social-elfsight
 *
 * The homepage social band (Figma 10450:8634): an eyebrow and H2 over the
 * Elfsight feed, mounted by the fcs/social-feed block (fcs-core).
 *
 * NOTHING INSIDE THE WIDGET IS STYLED HERE. The chips and cards are Elfsight's
 * markup, styled in the Elfsight dashboard. This file only spaces the section
 * and holds room for the feed while it lazy-loads.
 */

/* Section ------------------------------------------------------------- */

/*
 * Section padding is NOT declared here for Medium and Large — the editor owns
 * those from the sidebar's Dimensions panel (64px, Figma). Small is pinned in
 * layout/spacing.css. See CLAUDE.md § "Section padding".
 */

/* Header -------------------------------------------------------------- */

/*
 * Eyebrow → 8px → heading → 40px → feed. The header is 768px wide (core's
 * contentSize cap on an unaligned child) and centred.
 *
 * DERIVED — no mobile design. The heading scales down on its own: theme.json's
 * h2 is a fluid size, so nothing is restated here at any breakpoint.
 *
 * The doubled class raises specificity to (0,2,0), past core's (0,1,0) layout
 * rules, which print after the theme's stylesheets — see latest-news.css.
 */
.fcs-social-elfsight__header.fcs-social-elfsight__header {
	margin-block-end: 40px;
	text-align: center;
}

.fcs-social-elfsight__header.fcs-social-elfsight__header > * {
	margin-block: 0;
}

.fcs-social-elfsight__header.fcs-social-elfsight__header > * + * {
	margin-block-start: 8px;
}

/* Feed ---------------------------------------------------------------- */

/*
 * The mount is an empty <div> until platform.js fills it, lazily, as it nears
 * the viewport. Without a floor the band would be ~200px tall and then jump to
 * the feed's height, shoving everything below it down the page.
 *
 *   Small/Medium  DERIVED — 480px, about one Elfsight card stacked or in a
 *                 carousel. Revisit once the real widget is configured.
 *   Large         502px — the Figma mock's height.
 *
 * Only the real mount carries data-elfsight-app-lazy, so the editor's
 * placeholder box (below) is not given this height.
 */
.fcs-social-elfsight [data-elfsight-app-lazy] {
	min-height: 480px;
}

@media ( min-width: 1024px ) {
	.fcs-social-elfsight [data-elfsight-app-lazy] {
		min-height: 502px;
	}
}

/*
 * Placeholder — shown only to people who can edit posts, and in the editor,
 * while FCS_ELFSIGHT_SOCIAL_ID is empty. Never seen by visitors.
 */
.fcs-social-elfsight .fcs-social-feed__placeholder {
	padding: var( --wp--preset--spacing--40 );
	border: 2px dashed var( --wp--preset--color--stroke );
	border-radius: var( --wp--preset--border-radius--medium );
	color: var( --wp--preset--color--muted );
	text-align: center;
}

.fcs-social-elfsight .fcs-social-feed__placeholder p {
	margin: 0;
}