/**
 * framework/section — the universal band.
 *
 * Every value that varies per instance arrives as a custom property set inline
 * by render.php. The fallbacks here are what an untouched, freshly-inserted
 * section looks like: transparent, medium padding, default content width.
 */

.fw-section {
	position: relative;
	box-sizing: border-box;
	background-color: var(--fw-section-bg, transparent);
	color: var(--fw-section-color, inherit);
	min-height: var(--fw-section-min-height, 0);
	/* Only the decoration is allowed to bleed; content never causes a
	   horizontal scrollbar on a full-bleed band. */
	overflow: hidden;
	isolation: isolate;
}

/* --- background image -------------------------------------------------- */

.fw-section--has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--fw-section-image);
	background-position: var(--fw-section-image-position, center center);
	background-size: var(--fw-section-image-size, cover);
	background-repeat: no-repeat;
	background-attachment: var(--fw-section-image-attachment, scroll);
	z-index: -2;
}

/* --- overlay tint ------------------------------------------------------ */

.fw-section--has-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--fw-section-overlay);
	opacity: var(--fw-section-overlay-opacity, 0.5);
	z-index: -1;
	pointer-events: none;
}

/* --- decoration / watermark -------------------------------------------- */

.fw-section__decor {
	position: absolute;
	width: var(--fw-section-decor-width, 300px);
	height: auto;
	max-width: 45%;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.fw-section__decor--top-left     { top: 0;    left: 0; }
.fw-section__decor--top-right    { top: 0;    right: 0; }
.fw-section__decor--bottom-left  { bottom: 0; left: 0; }
.fw-section__decor--bottom-right { bottom: 0; right: 0; }
.fw-section__decor--left         { top: 50%;  left: 0;  transform: translateY(-50%); }
.fw-section__decor--right        { top: 50%;  right: 0; transform: translateY(-50%); }

/* --- inner ------------------------------------------------------------- */

.fw-section__inner {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	margin-inline: auto;
	/* Border-box, and 15px gutters INSIDE the stated max-width — live's
	   Foundation container is 1360 wide including its gutters, giving 1330 of
	   content starting at x=295. Content-box with 20px gutters put every band's
	   content 15px out on both sides, on every page. */
	box-sizing: border-box;
	padding-inline: var(--fw-section-gutter, 0.9375rem);
	padding-block-start: var(--fw-section-pt, 0);
	padding-block-end: var(--fw-section-pb, 0);
	max-width: var(--fw-section-max-width, 85rem);
}

/* Content width. `full` removes the rail entirely so a slider or a map can
   run edge to edge inside an otherwise normal band. */
/* Default matches the live site's content rail: 1360px of content inside a
   1400px box. */
.fw-section--w-narrow  { --fw-section-max-width: 50rem; }
.fw-section--w-default { --fw-section-max-width: 85rem; }
.fw-section--w-wide    { --fw-section-max-width: 92.5rem; }
.fw-section--w-full    { --fw-section-max-width: none; --fw-section-gutter: 0; }

/* Padding scale. Fluid, so a large band is genuinely large on desktop and does
   not eat a phone screen. The desktop end of each clamp is the rhythm the live
   Amity site uses: 1.875rem for a tight band, 3.25rem for a normal one. */
.fw-section--pt-none    { --fw-section-pt: 0; }
.fw-section--pt-small   { --fw-section-pt: clamp(1rem, 2.2vw, 1.875rem); }
.fw-section--pt-medium  { --fw-section-pt: clamp(1.75rem, 4vw, 3.25rem); }
.fw-section--pt-large   { --fw-section-pt: clamp(2.5rem, 6vw, 4.5rem); }
.fw-section--pt-xlarge  { --fw-section-pt: clamp(3.5rem, 8vw, 6.5rem); }

.fw-section--pb-none    { --fw-section-pb: 0; }
.fw-section--pb-small   { --fw-section-pb: clamp(1rem, 2.2vw, 1.875rem); }
.fw-section--pb-medium  { --fw-section-pb: clamp(1.75rem, 4vw, 3.25rem); }
.fw-section--pb-large   { --fw-section-pb: clamp(2.5rem, 6vw, 4.5rem); }
.fw-section--pb-xlarge  { --fw-section-pb: clamp(3.5rem, 8vw, 6.5rem); }

/* --- content inside a coloured section --------------------------------- */

/* When the band sets its own text colour, headings and links follow it rather
   than the sitewide pink/green, otherwise white-on-olive bands lose their
   headings entirely. Anything that opts out sets its own colour. */
.fw-section--has-color :where(h1, h2, h3, h4, h5, h6, p, li, blockquote, address) {
	color: inherit;
}

.fw-section--has-color :where(a):not(.wp-block-button__link):not(.button) {
	color: inherit;
	text-decoration-color: currentColor;
}

/* A section's direct children own their own vertical rhythm; the first and
   last must not add margin that fights the band's padding. */
.fw-section__inner > :first-child { margin-block-start: 0; }
.fw-section__inner > :last-child  { margin-block-end: 0; }

@media (max-width: 640px) {
	.fw-section__decor { max-width: 55%; opacity: 0.7; }
}

/* --- torn edges ---------------------------------------------------------
   A strip of artwork pinned across the top or bottom of the band, sitting
   on top of whatever is behind it so two differently-coloured bands meet on
   a ragged line rather than a straight one. Decorative: no pointer events,
   hidden from assistive tech, and it never affects the band's height. */
.fw-section--has-edge-top,
.fw-section--has-edge-bottom {
	position: relative;
}

.fw-section__edge {
	position: absolute;
	left: 0;
	right: 0;
	height: var(--fw-section-edge-height, 120px);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
	z-index: 2;
}

.fw-section__edge--top    { top: 0; }
.fw-section__edge--bottom { bottom: 0; }

/* The strip is absolutely positioned, so the band has to reserve room for it
   or it lands on top of the last line of copy. It REPLACES the band's padding
   on that side rather than adding to it — live's edge sits in the flow where
   the padding would be, so adding both made every edged band 50px too tall. */
.fw-section--has-edge-top {
	padding-block-start: var(--fw-section-edge-height, 120px);
}

.fw-section--has-edge-bottom {
	padding-block-end: var(--fw-section-edge-height, 120px);
}