/* ---------------------------------------------------------------
   Design refinements. Standalone (not part of styles.scss) so a
   Sass rebuild cannot overwrite it and deleting the file reverts.
   --------------------------------------------------------------- */

/* --- Section icon ----------------------------------------------
   .section__icon had no styling at all, so it sat inline and its
   position depended on whatever text flow it landed in. Make it a
   deliberate, centred block. */
#mstr-theme .section__icon {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 34px;
	line-height: 1;
	color: #232323;
	margin: 0 0 34px;
}

/* --- Case meta: room to breathe --------------------------------
   Was 18px 22px, which crowded the label against the value and the
   value against the cell divider.

   The max-width override that used to live here (1100px) is gone: it
   made the context header render ~1062px while .case-decision,
   .case-evidence and .logo-wall all cap at 1000px, so the header's
   column dividers lined up with nothing below them. The width now
   comes from styles.css with the rest of the case components; only
   the internal padding is refined here. */
#mstr-theme .case-meta__item {
	padding: 30px 34px;
}

#mstr-theme .case-meta__label {
	margin-bottom: 12px;
	opacity: 0.62;
}

#mstr-theme .case-meta__value {
	line-height: 1.6;
}

/* --- Heading rules follow the heading --------------------------
   The theme pins the decorative underline to "left: 50%" on every
   heading, so in a content--left section the title sits left while
   its rule floats out in the middle. Anchor the rule to whichever
   edge the text is aligned to. */
#mstr-theme .mstr-section-wrapper.content--left h1:before,
#mstr-theme .mstr-section-wrapper.content--left h1:after,
#mstr-theme .mstr-section-wrapper.content--left h2:before,
#mstr-theme .mstr-section-wrapper.content--left h2:after,
#mstr-theme .mstr-section-wrapper.content--left h3:before,
#mstr-theme .mstr-section-wrapper.content--left h3:after {
	left: 0;
	right: auto;
}

#mstr-theme .mstr-section-wrapper.content--right h1:before,
#mstr-theme .mstr-section-wrapper.content--right h1:after,
#mstr-theme .mstr-section-wrapper.content--right h2:before,
#mstr-theme .mstr-section-wrapper.content--right h2:after,
#mstr-theme .mstr-section-wrapper.content--right h3:before,
#mstr-theme .mstr-section-wrapper.content--right h3:after {
	left: auto;
	right: 0;
}

/* --- Dedicated case-meta section -------------------------------- */
/* section--light inners are "background: transparent" above 47em, so a
   section with no photo of its own lets whatever is behind it (a fixed
   parallax image from a neighbouring section) show through. Give this
   one an explicit opaque surface. The dot texture is a background-IMAGE
   on the same element, so it still paints on top of this colour. */
#mstr-theme .mstr-section-wrapper.section--case-meta > .mstr-section-wrapper-inner {
	background-color: #FFFFFF;
}

#mstr-theme .mstr-section-wrapper.section--case-meta > .mstr-section-wrapper-inner > .inner {
	padding-top: 64px;
	padding-bottom: 64px;
	/* .inner is shrink-to-fit, so with the grid as its only child it collapsed
	   to the content's max-content width instead of the 1000px cap - nbc came
	   out 919px and wcw 961px against 1000px siblings. Pin it full width and
	   the grid's own max-width does the constraining. */
	width: 100%;
}