/* ==========================================================================
   Layout - Fresh Ground's wrapper and grid system, transcribed.

   Extracted verbatim from main.min.css:
     .layout__wrapper  max-width 87.5rem | padding-inline 2.5rem -> 1.25rem
                       --medium 68.75rem | --small 50rem | --blog 56.25rem
     .layout__grid     display grid | gap 1.875rem (30px)
                       --large-vertical-gap 3.75rem 1.875rem
                       --col-border  1px #000 rules, last child suppressed
     inner widths      w_large 1440 | w_base 1220 | w_base_medium 1060
                       w_medium 980

   Collapse ladder (also verbatim):
     @1024   10->5 | 8,9->4 | 6,7->3 | 3,4,5->2
     @768     9,10->3 | 6,7,8->2 | 2,3,4,5->1
   ========================================================================== */

.mx-wrapper {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--mx-wrapper);
	padding-left: var(--mx-gutter-mobile);
	padding-right: var(--mx-gutter-mobile);
	position: relative;
	width: 100%;
	z-index: 2;
}

@media (min-width: 48rem) {
	.mx-wrapper {
		padding-left: var(--mx-gutter);
		padding-right: var(--mx-gutter);
	}
}

.mx-wrapper--medium { max-width: var(--mx-wrapper-medium); }
.mx-wrapper--small  { max-width: var(--mx-wrapper-small); }
.mx-wrapper--prose  { max-width: var(--mx-wrapper-prose); }

/* Inner measure constraints, applied inside a full-width wrapper. */
.mx-w-large       { max-width: var(--mx-w-large); }
.mx-w-base        { max-width: var(--mx-w-base); }
.mx-w-base-medium { max-width: var(--mx-w-base-medium); }
.mx-w-medium      { max-width: var(--mx-w-medium); }

.mx-w-large,
.mx-w-base,
.mx-w-base-medium,
.mx-w-medium {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */

.mx-grid {
	display: grid;
	gap: var(--mx-grid-gap);
	width: 100%;
}

.mx-grid--1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.mx-grid--2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mx-grid--3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mx-grid--4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mx-grid--5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mx-grid--6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mx-grid--7  { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mx-grid--8  { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.mx-grid--9  { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.mx-grid--10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }

.mx-grid--large-vertical-gap {
	gap: var(--mx-grid-gap-row-lg) var(--mx-grid-gap);
}

.mx-grid--no-gap {
	gap: 0;
}

/* Vertical hairlines between columns - Fresh Ground uses these on comparison
   layouts such as the pricing tiers. Last column never gets one. */
.mx-grid--col-border > * {
	position: relative;
}

.mx-grid--col-border > *::after {
	background-color: var(--mx-hairline-strong);
	bottom: 0;
	content: '';
	position: absolute;
	right: calc(var(--mx-grid-gap) / -2);
	top: 0;
	width: 1px;
}

.mx-grid--col-border > *:last-child::after {
	display: none;
}

/* Collapse ladder, step one. */
@media (max-width: 64rem) {
	.mx-grid--10 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.mx-grid--9,
	.mx-grid--8  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mx-grid--7,
	.mx-grid--6  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mx-grid--5,
	.mx-grid--4,
	.mx-grid--3  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Collapse ladder, step two. */
@media (max-width: 48rem) {
	.mx-grid--10,
	.mx-grid--9  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mx-grid--8,
	.mx-grid--7,
	.mx-grid--6  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mx-grid--5,
	.mx-grid--4,
	.mx-grid--3,
	.mx-grid--2  { grid-template-columns: repeat(1, minmax(0, 1fr)); }

	/* Column rules become row rules once the grid is single-column. */
	.mx-grid--col-border > *::after {
		display: none;
	}
}

/* Fixed variants opt out of the ladder entirely. */
.mx-grid--2-fixed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mx-grid--3-fixed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mx-grid--4-fixed { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mx-grid--5-fixed { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* --------------------------------------------------------------------------
   Flex and positioning helpers (Fresh Ground layout--* utilities)
   -------------------------------------------------------------------------- */

.mx-flex            { display: flex; }
.mx-flex-column     { flex-direction: column; }
.mx-align-center    { align-items: center; }
.mx-justify-center  { justify-content: center; }
.mx-justify-between { justify-content: space-between; }
.mx-relative        { position: relative; }

.mx-absolute-cover {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.mx-zindex-below  { z-index: 0; }
.mx-zindex-above  { z-index: 2; }

.mx-margin-bot { margin-bottom: var(--mx-grid-gap); }
.mx-mb-0       { margin-bottom: 0; }

/* Astra content-area reset for our full-width coded templates. */
.mx-page .site-content .ast-container,
.mx-page .entry-content,
.mx-page .site-main {
	margin: 0;
	max-width: none;
	padding: 0;
	width: 100%;
}

.mx-page .entry-header,
.mx-page .ast-single-post-order,
.mx-page .post-navigation {
	display: none;
}

/* --------------------------------------------------------------------------
   Padding step utilities

   Extracted verbatim from main.min.css. Fresh Ground steps block padding in
   three sizes, each with three responsive values:

     --pad-25   .625rem  -> .9375rem  -> 1.5625rem
     --pad-50   1.25rem  -> 1.875rem  -> 3.125rem
     --pad-75   1.875rem -> 2.8125rem -> 4.6875rem

   These sit alongside the band padding scale in blocks.css: the band scale
   sets the rhythm between sections, these tune an individual wrapper.
   -------------------------------------------------------------------------- */

.mx-pad-top-25 { padding-top: .625rem; }
.mx-pad-bot-25 { padding-bottom: .625rem; }
.mx-pad-top-50 { padding-top: 1.25rem; }
.mx-pad-bot-50 { padding-bottom: 1.25rem; }
.mx-pad-top-75 { padding-top: 1.875rem; }
.mx-pad-bot-75 { padding-bottom: 1.875rem; }

@media (min-width: 48rem) {
	.mx-pad-top-25 { padding-top: .9375rem; }
	.mx-pad-bot-25 { padding-bottom: .9375rem; }
	.mx-pad-top-50 { padding-top: 1.875rem; }
	.mx-pad-bot-50 { padding-bottom: 1.875rem; }
	.mx-pad-top-75 { padding-top: 2.8125rem; }
	.mx-pad-bot-75 { padding-bottom: 2.8125rem; }
}

@media (min-width: 68.75rem) {
	.mx-pad-top-25 { padding-top: 1.5625rem; }
	.mx-pad-bot-25 { padding-bottom: 1.5625rem; }
	.mx-pad-top-50 { padding-top: 3.125rem; }
	.mx-pad-bot-50 { padding-bottom: 3.125rem; }
	.mx-pad-top-75 { padding-top: 4.6875rem; }
	.mx-pad-bot-75 { padding-bottom: 4.6875rem; }
}

/* --------------------------------------------------------------------------
   Square aspect

   Fresh Ground's splitter tiles are square and butt directly against each
   other. Combined with .mx-grid--no-gap this is what produces the unbroken
   band of photography that reads as their signature.
   -------------------------------------------------------------------------- */

.mx-aspect-square {
	aspect-ratio: 1 / 1;
	position: relative;
}

/* aspect-ratio fallback for engines that lack it. */
@supports not (aspect-ratio: 1 / 1) {
	.mx-aspect-square::before {
		content: "";
		display: block;
		padding-top: 100%;
	}
}