/* ============================================================
   MONSTERS OF TYPE — Pillar Styles
   Community / Studio / Foundry heroes, photo grids, gallery CTA
   ============================================================ */

/* ─── Pillar page hero (Foundry, Community, Studio) ───────── */
/* Nav + one accent bar (::after) stick together as a single unit. */
.mot-pillar-chrome {
	position: sticky;
	top: 0;
	z-index: 100;
}

.mot-pillar-chrome::after {
	content: '';
	display: block;
	height: 30px;
	width: 100%;
	background: var(--mot-border);
}

.mot-pillar-chrome--community::after { background: var(--mot-pillar-community); }
.mot-pillar-chrome--foundry::after   { background: var(--mot-vibrant-orange); }
.mot-pillar-chrome--studio::after    { background: var(--mot-pillar-studio); }

.mot-pillar-chrome > .mot-nav--solid {
	position: static;
	top: auto;
	border-bottom: none;
}

/* Legacy strip markup (old hero partial) — hide if still present */
main .mot-pillar-strip {
	display: none !important;
}

.mot-pillar-hero {
	padding-top: var(--mot-pillar-pad-top);
	padding-bottom: clamp(3.5rem, 4.5vw, 5rem);
	background: var(--mot-black);
	border-top: none;
}

.mot-pillar-hero__inner {
	width: 100%;
	max-width: var(--mot-max);
	margin-inline: auto;
	padding-inline: var(--mot-gutter);
}

.mot-pillar-hero--foundry {
	border-top: none;
}

.mot-pillar-hero--foundry .mot-section-label {
	color: var(--mot-vibrant-orange);
}

.mot-pillar-hero--community {
	border-top: none;
}

.mot-pillar-hero--community.mot-pillar-hero--has-bg,
.mot-pillar-hero--studio.mot-pillar-hero--has-bg,
.mot-pillar-hero--foundry.mot-pillar-hero--has-bg {
	position: relative;
	background: var(--mot-pillar-hero-bg) no-repeat center var(--mot-pillar-hero-bg-position, center) / cover;
}

.mot-pillar-hero--community.mot-pillar-hero--has-bg::before,
.mot-pillar-hero--studio.mot-pillar-hero--has-bg::before,
.mot-pillar-hero--foundry.mot-pillar-hero--has-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, var(--mot-pillar-hero-overlay, 0.85));
	pointer-events: none;
	z-index: 0;
}

.mot-pillar-hero--community.mot-pillar-hero--has-bg .mot-pillar-hero__inner,
.mot-pillar-hero--studio.mot-pillar-hero--has-bg .mot-pillar-hero__inner,
.mot-pillar-hero--foundry.mot-pillar-hero--has-bg .mot-pillar-hero__inner {
	position: relative;
	z-index: 1;
}

.mot-pillar-hero--community,
.mot-pillar-hero--foundry,
.mot-pillar-hero--studio {
	padding-bottom: var(--mot-pillar-pad-bottom);
}

.mot-pillar-hero--community .mot-section-label {
	color: var(--mot-pillar-community);
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0.75rem;
}

.mot-pillar-hero--studio {
	border-top: none;
}

.mot-pillar-hero--studio .mot-section-label {
	color: var(--mot-pillar-studio);
}

.mot-pillar-hero .mot-section-label {
	margin: 0 0 0.75rem;
	border-bottom-color: var(--mot-border);
}

/* Pillar hero headline = plain h1; copy column uses global h2/p (no hero typography overrides) */
.mot-pillar-hero__sub,
.mot-pillar-hero__band-copy {
	margin: 0;
}

/* Headline sits full-width above; copy + aside columns align at the text (all pillar pages) */
.mot-pillar-hero__columns {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(var(--mot-grid-columns), minmax(0, 1fr));
	column-gap: var(--mot-grid-gap);
	align-items: start;
}

.mot-pillar-hero__main {
	grid-column: 1 / span 7;
	min-width: 0;
}

.mot-pillar-hero__columns > .mot-pillar-hero__proof {
	grid-column: 9 / span 4;
	align-self: start;
}

.mot-pillar-hero__main .mot-pillar-hero__lead {
	display: block;
	margin-top: 0;
}

.mot-pillar-hero__main .mot-pillar-hero__sub-col {
	grid-column: unset;
	min-width: 0;
}

.mot-pillar-hero__lead {
	display: grid;
	grid-template-columns: repeat(var(--mot-grid-columns), minmax(0, 1fr));
	column-gap: var(--mot-grid-gap);
	align-items: start;
}

.mot-pillar-hero__lead .mot-pillar-hero__sub-col {
	grid-column: 1 / span 6;
	min-width: 0;
}

/* Foundry structured hero — spacing between sub / band / CTA (editor copy uses global p) */
.mot-pillar-hero__sub-col .mot-pillar-hero__sub,
.mot-pillar-hero__sub-col .mot-pillar-hero__band-copy {
	margin: 0;
}

.mot-pillar-hero__sub-col .mot-pillar-hero__sub + .mot-pillar-hero__band-copy,
.mot-pillar-hero__sub-col .mot-pillar-hero__band-copy + .mot-pillar-hero__cta,
.mot-pillar-hero__sub-col .mot-pillar-hero__sub + .mot-pillar-hero__cta {
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.mot-pillar-hero__sub-col strong {
	font-weight: 600;
	color: var(--mot-white);
}

.mot-pillar-hero__sub-col h2 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
}

.mot-pillar-hero__sub-col h2 .mot-btn,
.mot-pillar-gallery-cta .mot-pillar-hero__cta .mot-btn {
	position: relative;
	top: 0.125rem;
}

.mot-pillar-hero__sub-col .mot-pillar-hero__cta {
	margin-top: clamp(0.75rem, 2vw, 1.25rem);
}

.mot-pillar-hero__proof {
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--mot-border);
	padding-left: var(--mot-grid-gap);
}

.mot-pillar-hero__proof-stat {
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--mot-border);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.1rem;
}

.mot-pillar-hero__proof-stat:first-child {
	padding-top: 0;
}

.mot-pillar-hero__proof-stat:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.mot-pillar-hero__proof-stat .mot-pillar-hero__proof-number {
	margin: 0;
	font-size: clamp(1.75rem, 3vw, 3rem);
}

.mot-pillar-hero--community .mot-pillar-hero__proof-number {
	color: var(--mot-pillar-community);
}

.mot-pillar-hero--foundry .mot-pillar-hero__proof-number {
	color: var(--mot-vibrant-orange);
}

.mot-pillar-hero--studio .mot-pillar-hero__proof-number {
	color: var(--mot-pillar-studio);
}

.mot-pillar-hero__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
}

.mot-pillar-hero__cta h2 {
	margin: 0;
}

.mot-pillar-hero__cta .mot-btn {
	flex-shrink: 0;
}

.mot-pillar-hero--community .mot-pillar-hero__cta .mot-btn:visited,
.mot-pillar-hero--community .mot-pillar-hero__cta .mot-btn:focus,
.mot-pillar-hero--community .mot-pillar-hero__cta .mot-btn:active {
	color: var(--mot-black);
	background: var(--mot-neon-green);
}

/* Studio hero — CTA buttons pink (overrides mot-btn--green from migrated editor HTML) */
.mot-pillar-hero--studio .mot-pillar-hero__sub-col .mot-btn,
.mot-pillar-hero--studio .mot-pillar-hero__cta .mot-btn {
	--mot-btn-color: var(--mot-pillar-studio);
}

.mot-pillar-hero--studio .mot-pillar-hero__sub-col a.mot-btn--solid,
.mot-pillar-hero--studio .mot-pillar-hero__sub-col a.mot-btn--solid:visited,
.mot-pillar-hero--studio .mot-pillar-hero__sub-col a.mot-btn--solid:focus,
.mot-pillar-hero--studio .mot-pillar-hero__sub-col a.mot-btn--solid:focus-visible,
.mot-pillar-hero--studio .mot-pillar-hero__sub-col a.mot-btn--solid:active,
.mot-pillar-hero--studio .mot-pillar-hero__cta a.mot-btn--solid,
.mot-pillar-hero--studio .mot-pillar-hero__cta a.mot-btn--solid:visited,
.mot-pillar-hero--studio .mot-pillar-hero__cta a.mot-btn--solid:focus,
.mot-pillar-hero--studio .mot-pillar-hero__cta a.mot-btn--solid:focus-visible,
.mot-pillar-hero--studio .mot-pillar-hero__cta a.mot-btn--solid:active {
	color: var(--mot-black);
	background: var(--mot-pillar-studio);
	border-color: var(--mot-pillar-studio);
}

/* Foundry hero — CTA buttons orange */
.mot-pillar-hero--foundry .mot-pillar-hero__sub-col .mot-btn,
.mot-pillar-hero--foundry .mot-pillar-hero__cta .mot-btn {
	--mot-btn-color: var(--mot-pillar-foundry);
}

.mot-pillar-hero--foundry .mot-pillar-hero__sub-col a.mot-btn--solid,
.mot-pillar-hero--foundry .mot-pillar-hero__sub-col a.mot-btn--solid:visited,
.mot-pillar-hero--foundry .mot-pillar-hero__sub-col a.mot-btn--solid:focus,
.mot-pillar-hero--foundry .mot-pillar-hero__sub-col a.mot-btn--solid:focus-visible,
.mot-pillar-hero--foundry .mot-pillar-hero__sub-col a.mot-btn--solid:active,
.mot-pillar-hero--foundry .mot-pillar-hero__cta a.mot-btn--solid,
.mot-pillar-hero--foundry .mot-pillar-hero__cta a.mot-btn--solid:visited,
.mot-pillar-hero--foundry .mot-pillar-hero__cta a.mot-btn--solid:focus,
.mot-pillar-hero--foundry .mot-pillar-hero__cta a.mot-btn--solid:focus-visible,
.mot-pillar-hero--foundry .mot-pillar-hero__cta a.mot-btn--solid:active {
	color: var(--mot-black);
	background: var(--mot-pillar-foundry);
	border-color: var(--mot-pillar-foundry);
}

@media (max-width: 900px) {
	.mot-pillar-hero__lead {
		--mot-grid-columns: 6;
	}

	.mot-pillar-hero__columns {
		--mot-grid-columns: 6;
	}

	.mot-pillar-hero__main,
	.mot-pillar-hero__columns > .mot-pillar-hero__proof,
	.mot-pillar-hero__sub-col {
		grid-column: 1 / -1;
	}

	/* Full-width trust band — one stat per row, centered (not desktop sidebar) */
	.mot-pillar-hero__proof {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		width: calc(100% + 2 * var(--mot-gutter));
		margin-inline: calc(-1 * var(--mot-gutter));
		margin-top: clamp(2rem, 6vw, 3.5rem);
		padding-inline: var(--mot-gutter);
		padding-block: clamp(1.5rem, 4vw, 2rem);
		border-left: none;
		border-top: 1px solid var(--mot-border);
		border-bottom: 1px solid var(--mot-border);
	}

	.mot-pillar-hero__proof-stat {
		flex-direction: column;
		align-items: center;
		gap: 0.35rem;
		padding: clamp(1.25rem, 4vw, 1.75rem) 0;
		border-bottom: 1px solid var(--mot-border);
	}

	.mot-pillar-hero__proof-stat:first-child {
		padding-top: 0;
	}

	.mot-pillar-hero__proof-stat:last-child {
		padding-bottom: 0;
		border-bottom: none;
	}

	.mot-pillar-hero__proof-stat .mot-pillar-hero__proof-number {
		font-size: clamp(2rem, 8vw, 2.75rem);
		line-height: 1.05;
	}

	.mot-pillar-hero__proof-stat .mot-pillar-hero__proof-label {
		font-size: 0.75rem;
		letter-spacing: 0.12em;
		line-height: 1.35;
	}
}

@media (max-width: 600px) {
	.mot-pillar-hero__lead {
		--mot-grid-columns: 1;
	}

	/* CTA heading (e.g. "Come hang.") sits well below the h1 on mobile.
	   Covers whatever heading level the admin copy uses (h1/h2/h3). */
	.mot-pillar-hero__sub-col h1,
	.mot-pillar-hero__sub-col h2,
	.mot-pillar-hero__sub-col h3 {
		font-size: clamp(1.75rem, 7vw, 2.25rem);
	}
}

p {
	font-family: var(--mot-sans);
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.7;
	margin-top: 0;
	margin-bottom: 1.25em;
	color: var(--mot-light-gray);
}

p:last-child {
	margin-bottom: 0;
}

.mot-text-sm {
	font-size: 0.875rem;
	line-height: 1.5;
}

.mot-text-muted {
	color: var(--mot-muted);
}

.mot-stat-number {
	font-family: var(--mot-display);
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--mot-neon-green);
	margin: 0 0 0.25rem;
}

/* ─── Pillar photo grid (Community + Studio) ──────────────── */
.mot-community-grid,
.mot-studio-grid {
	background: var(--mot-dark);
	border-top: 2px solid var(--mot-border);
	border-bottom: 2px solid var(--mot-border);
	padding-block: var(--mot-grid-gap);
}

.mot-community-grid__item,
.mot-studio-grid__item {
	overflow: hidden;
	background: var(--mot-dark);
}

.mot-community-grid__item {
	aspect-ratio: 3 / 2;
}

.mot-studio-grid__item {
	aspect-ratio: 2 / 3;
}

.mot-community-grid__item img,
.mot-community-grid__item a,
.mot-studio-grid__item img,
.mot-studio-grid__item video,
.mot-studio-grid__item a {
	width: 100%;
	height: 100%;
	display: block;
}

.mot-community-grid__item a,
.mot-community-grid__item a:visited,
.mot-community-grid__item a:hover,
.mot-community-grid__item a:focus,
.mot-community-grid__item a:active,
.mot-studio-grid__item a,
.mot-studio-grid__item a:visited,
.mot-studio-grid__item a:hover,
.mot-studio-grid__item a:focus,
.mot-studio-grid__item a:active {
	color: inherit;
}

.mot-community-grid__item img,
.mot-studio-grid__item img,
.mot-studio-grid__item video {
	object-fit: cover;
}

.mot-studio-grid__item--video {
	background: var(--mot-dark);
}

.mot-community-grid__item--placeholder,
.mot-studio-grid__item--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mot-dark);
}

.mot-community-grid__item--placeholder span,
.mot-studio-grid__item--placeholder span {
	font-family: var(--mot-sans);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mot-border);
}

@media (max-width: 900px) {
	.mot-community-grid__item,
	.mot-studio-grid__item {
		grid-column: span 3 !important;
	}
}

@media (max-width: 600px) {
	.mot-community-grid__item,
	.mot-studio-grid__item {
		grid-column: 1 / -1 !important;
	}
}

/* Post-gallery CTA (Community + Studio) */
.mot-pillar-gallery-cta {
	padding-block: clamp(2.5rem, 6vw, 4rem);
	border-top: 1px solid var(--mot-border);
}

.mot-pillar-gallery-cta .mot-pillar-hero__cta h2 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
	margin: 0;
	font-size: clamp(1.75rem, 3vw, 3rem);
}

.mot-pillar-gallery-cta--community .mot-pillar-hero__cta a.mot-btn--solid,
.mot-pillar-gallery-cta--community .mot-pillar-hero__cta a.mot-btn--solid:visited,
.mot-pillar-gallery-cta--community .mot-pillar-hero__cta a.mot-btn--solid:focus,
.mot-pillar-gallery-cta--community .mot-pillar-hero__cta a.mot-btn--solid:focus-visible,
.mot-pillar-gallery-cta--community .mot-pillar-hero__cta a.mot-btn--solid:active {
	color: var(--mot-black);
	background: var(--mot-neon-green);
	border-color: var(--mot-neon-green);
}

.mot-pillar-gallery-cta--studio .mot-pillar-hero__cta a.mot-btn--solid,
.mot-pillar-gallery-cta--studio .mot-pillar-hero__cta a.mot-btn--solid:visited,
.mot-pillar-gallery-cta--studio .mot-pillar-hero__cta a.mot-btn--solid:focus,
.mot-pillar-gallery-cta--studio .mot-pillar-hero__cta a.mot-btn--solid:focus-visible,
.mot-pillar-gallery-cta--studio .mot-pillar-hero__cta a.mot-btn--solid:active {
	color: var(--mot-black);
	background: var(--mot-pillar-studio);
	border-color: var(--mot-pillar-studio);
}