/**
 * NG Page Builder — frontend helper styles.
 *
 * Loaded only on pages rendered by the builder. Provides the section
 * wrapper utilities the editor sets in the ⚙ popover: extra spacing
 * and per-device visibility. Everything else is the theme's own CSS.
 */

/* Section spacing — overrides the section's own vertical padding. */
.ngpb-space--compact > * {
	padding-top: 1.75rem !important;
	padding-bottom: 1.75rem !important;
}
.ngpb-space--spacious > * {
	padding-top: 6rem !important;
	padding-bottom: 6rem !important;
}

/* Font switcher — the builder's toolbar tags a text run with one of
   these classes so editors can move copy between the site's two
   typefaces. Resolves against the theme's own CSS custom properties. */
.ngpb-font-body   { font-family: var(--font-body); }
.ngpb-font-accent { font-family: var(--font-accent); }

/* Per-device visibility. Breakpoints mirror the device-preview widths
   the builder offers (mobile 375, tablet 768, desktop ≥1025). */
@media (max-width: 600px) {
	.ngpb-hide-mobile { display: none !important; }
}
@media (min-width: 601px) and (max-width: 1024px) {
	.ngpb-hide-tablet { display: none !important; }
}
@media (min-width: 1025px) {
	.ngpb-hide-desktop { display: none !important; }
}