/**
 * HTG Section — wrapper for stacked content.
 *
 * Owns the section's background, optional decorative image, outer padding,
 * and the gap between inner blocks. Inner blocks (section-intro, card-grid,
 * etc.) are pure content and don't manage their own bleed or background.
 */

.htg-section {
	position: relative;
}

/* Full-bleed when bg color or bg image is set */
.htg-section--bg-dark-grey,
.htg-section--bg-navy,
.htg-section--bg-black,
.htg-section--bg-light-grey,
.htg-section--bg-white,
.htg-section--has-image {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-inline: var(--container-pad-x);
}

.htg-section--bg-dark-grey  { background: var(--c-footer-bg); color: var(--c-white); }
.htg-section--bg-navy       { background: var(--c-navy);       color: var(--c-white); }
.htg-section--bg-black      { background: var(--c-ink);        color: var(--c-white); }
.htg-section--bg-light-grey { background: var(--c-cream-lo);   color: var(--c-ink);   }
.htg-section--bg-white      { background: var(--c-white);      color: var(--c-ink);   }

/* --- Padding ----------------------------------------------------- */

.htg-section--pt-none { padding-top: 0; }
.htg-section--pt-sm   { padding-top: var(--sp-sm); }
.htg-section--pt-md   { padding-top: var(--sp-md); }
.htg-section--pt-lg   { padding-top: var(--sp-lg); }
.htg-section--pt-xl   { padding-top: var(--sp-xl); }
.htg-section--pt-2xl  { padding-top: var(--sp-2xl); }
.htg-section--pt-3xl  { padding-top: var(--sp-3xl); }

.htg-section--pb-none { padding-bottom: 0; }
.htg-section--pb-sm   { padding-bottom: var(--sp-sm); }
.htg-section--pb-md   { padding-bottom: var(--sp-md); }
.htg-section--pb-lg   { padding-bottom: var(--sp-lg); }
.htg-section--pb-xl   { padding-bottom: var(--sp-xl); }
.htg-section--pb-2xl  { padding-bottom: var(--sp-2xl); }
.htg-section--pb-3xl  { padding-bottom: var(--sp-3xl); }

/* --- Background image layer -------------------------------------- */

.htg-section__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.htg-section__image svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Inner constrained container --------------------------------- */

.htg-section__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
}

.htg-section--inner-wide .htg-section__inner {
	max-width: 1260px;
}

.htg-section--inner-wide {
	padding-inline: var(--container-pad-x);
}

/* Gap between inner blocks */
.htg-section--gap-none .htg-section__inner { gap: 0; }
.htg-section--gap-sm   .htg-section__inner { gap: var(--sp-sm); }
.htg-section--gap-md   .htg-section__inner { gap: var(--sp-md); }
.htg-section--gap-lg   .htg-section__inner { gap: var(--sp-lg); }
.htg-section--gap-xl   .htg-section__inner { gap: var(--sp-xl); }

/* --- Responsive ------------------------------------------------- */

/* Scale the largest outer padding tokens down on phones — sp-2xl (96px)
   and sp-3xl (128px) are too much vertical breathing room at narrow
   widths. Smaller tokens (sm/md/lg) stay as-is. */
@media (max-width: 768px) {
	.htg-section--pt-xl   { padding-top: var(--sp-lg); }
	.htg-section--pt-2xl  { padding-top: var(--sp-xl); }
	.htg-section--pt-3xl  { padding-top: var(--sp-xl); }

	.htg-section--pb-xl   { padding-bottom: var(--sp-lg); }
	.htg-section--pb-2xl  { padding-bottom: var(--sp-xl); }
	.htg-section--pb-3xl  { padding-bottom: var(--sp-xl); }

	/* Tighten the largest inner gap too — sp-xl between stacked blocks is
	   excessive on a phone. */
	.htg-section--gap-xl .htg-section__inner { gap: var(--sp-lg); }
}

/* --- Editor: don't visually bleed outside the editor frame ------- */

.editor-styles-wrapper .htg-section--bg-dark-grey,
.editor-styles-wrapper .htg-section--bg-navy,
.editor-styles-wrapper .htg-section--bg-black,
.editor-styles-wrapper .htg-section--bg-light-grey,
.editor-styles-wrapper .htg-section--bg-white,
.editor-styles-wrapper .htg-section--has-image {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}