/* ==========================================================================
   COLUMN BAR

   This one stylesheet is loaded in two places on purpose:

   1. In the page head, because each column's text is server-rendered into a light DOM slot so the
      copy is in the page source for crawlers and stays readable if the custom element never
      upgrades.
   2. Inside the shadow root, because MMX_Element.renderStylesheetLinks() collects head
      <link data-resource-code> elements and the component lists "column-bar" in
      styleResourceCodes.

   The LIGHT DOM section styles the slotted column blocks and their text. The SHADOW DOM section
   styles the bar and the grid.

   Every state attribute lives on the HOST, so the shadow rules read it through :host() and the
   light DOM rules read it as a plain ancestor selector. That is what lets one setting reach both
   trees. Custom properties are set on the host by the JS and inherit into both.

   Nothing here uses ::slotted(). For a slotted element the outer document's rules beat the shadow
   tree's ::slotted rules at equal specificity, so geometry declared in both places silently loses.
   The slotted blocks carry light DOM classes and are declared once, below.
   ========================================================================== */


/* ==========================================================================
   LIGHT DOM - the slotted column blocks
   ========================================================================== */

.column-bar__column {
	box-sizing: border-box;
	min-width: 0;
	text-align: var(--column-bar__text-align, left);
}

/* mmx-text has no host display of its own, so each of these would run inline and the whole column
   would collapse onto one line. Margins rather than a gap on the column, so a field left empty
   costs nothing - a gap would reserve space between elements whose content never arrived. */

.column-bar__heading,
.column-bar__subheading,
.column-bar__body {
	display: block;
}

.column-bar__heading {
	margin: 0 0 0.25rem;
}

.column-bar__subheading {
	margin: 0 0 0.5rem;
}

.column-bar__body {
	margin: 0;
}

.column-bar__button {
	display: inline-block;
	margin-top: 1rem;
	vertical-align: top;
}


/* ==========================================================================
   SHADOW DOM - the bar and the grid
   ========================================================================== */

:host {
	display: block;
}

[part~="bar"] {
	background-color: var(--column-bar__background-color, transparent);
	border-radius: var(--column-bar__radius, 0);
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var(--column-bar__max-width, 1440px);
	padding: var(--column-bar__padding, 0);
	width: 100%;
}

/* One track per column, from the count the JS publishes. minmax(0, 1fr) rather than 1fr, because a
   bare 1fr floors at min-content: a long unbroken word in one column would then push the whole row
   wider than the bar instead of wrapping. */

[part~="columns"] {
	align-items: start;
	display: grid;
	gap: var(--column-bar__gap, 32px);
	grid-template-columns: repeat(var(--column-bar__columns, 1), minmax(0, 1fr));
}

/* Fit each column to its content instead of sharing the width equally. auto tracks size to their
   contents, and justify-content decides where the group of them sits once they no longer fill the
   bar. */

:host([data-distribute="content"]) [part~="columns"] {
	grid-template-columns: repeat(var(--column-bar__columns, 1), auto);
	justify-content: space-between;
}

:host([data-distribute="content"][data-align="center"]) [part~="columns"] {
	justify-content: center;
}

:host([data-distribute="content"][data-align="right"]) [part~="columns"] {
	justify-content: end;
}

:host([data-vertical-align="center"]) [part~="columns"] {
	align-items: center;
}

:host([data-vertical-align="end"]) [part~="columns"] {
	align-items: end;
}


/* Small screens
   ========================================================================== */

@media ( max-width: 47.9375em ) {

	/* Four columns on a 390px screen is four unreadable slivers, so they stack. Equal or
	   content-sized, it is one column either way - which is why both templates are overridden
	   rather than just the default one. */

	[part~="columns"],
	:host([data-distribute="content"]) [part~="columns"] {
		grid-template-columns: minmax(0, 1fr);
		justify-content: stretch;
	}
}