/**
 * 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;
}

/* Per-section heading + body text size overrides (set in the ⚙ popover). */
.ngpb-h--sm h1 { font-size: clamp(2rem, 5vw, 2.6rem); }
.ngpb-h--sm h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.ngpb-h--sm h3 { font-size: 1rem; }
.ngpb-h--lg h1 { font-size: clamp(3rem, 7vw, 4.25rem); }
.ngpb-h--lg h2 { font-size: clamp(2.3rem, 5vw, 3.2rem); }
.ngpb-h--xl h1 { font-size: clamp(3.5rem, 8vw, 5rem); }
.ngpb-h--xl h2 { font-size: clamp(2.8rem, 6vw, 4rem); }
.ngpb-t--sm p, .ngpb-t--sm li { font-size: 0.92rem; }
.ngpb-t--lg p, .ngpb-t--lg li { font-size: 1.18rem; }

/* Font switcher — the builder's toolbar tags a text run with one of
   these classes so editors can move copy between the brand's three
   typefaces (per the brand guide's Typography section):
     display = Jost (headings)
     body    = DM Sans (body & UI)
     accent  = Playfair Display *italic* (emphasis only — brand mandates
                                          italic-only for this face). */
.ngpb-font-display { font-family: var(--font-display); }
.ngpb-font-body    { font-family: var(--font-body); }
.ngpb-font-accent  { font-family: var(--font-accent); font-style: italic; }

/* 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; }
}