/**
 * ==========================================================
 * GM DESIGN SYSTEM
 * File: editorial-page.css
 * Description: Editorial and Standard Content Page Presentation
 *
 * Depends:
 * tokens.css
 * spacing.css
 * typography.css
 * motion.css
 * buttons.css
 *
 * Version:
 * 1.0.0
 *
 * Last Update:
 * 17.08.2026
 * ==========================================================
 */


/* ==========================================================
   EDITORIAL PAGE
========================================================== */

.gm-page--editorial {

	--gm-page-ink:
		var(--gm-color-text);

	--gm-page-muted:
		var(--gm-color-text-light);

	--gm-page-line:
		var(--gm-color-border);

	--gm-page-surface:
		var(--gm-color-background-soft);

	width: 100%;

	padding-block:
		0
		clamp(
			80px,
			9vw,
			140px
		);

	background: var(--gm-color-white);

}


/* ==========================================================
   EDITORIAL HEADER
========================================================== */

.gm-page--editorial
.gm-page__header--editorial {

	box-sizing: border-box;

	width: 100%;

	max-width: none;

	margin: 0;

	padding:
		clamp(
			72px,
			9vw,
			132px
		)
		max(
			var(--gm-space-lg),
			calc(
				(100vw - 1200px) / 2
			)
		);

	background: var(--gm-page-surface);

	text-align: center;

}


/* ==========================================================
   EYEBROW
========================================================== */

.gm-page--editorial
.gm-page__eyebrow {

	color: var(--gm-color-primary);

	font-family: var(--gm-font-family);

	font-size: 11px;

	font-weight: var(--gm-font-weight-medium);

	letter-spacing: .18em;

}


/* ==========================================================
   TITLE
========================================================== */

.gm-page--editorial
.gm-page__title {

	max-width: 980px;

	margin-inline: auto;

	color: var(--gm-page-ink);

	font-family: var(--gm-font-family);

	font-size:
		clamp(
			42px,
			6vw,
			82px
		);

	font-weight: var(--gm-font-weight-regular);

	letter-spacing: -.05em;

	line-height: 1.03;

	text-wrap: balance;

}


/* ==========================================================
   INTRO
========================================================== */

.gm-page--editorial
.gm-page__intro {

	max-width: 720px;

	margin:
		var(--gm-space-lg)
		auto
		0;

	color: var(--gm-page-muted);

	font-family: var(--gm-font-family);

	font-size:
		clamp(
			16px,
			1.5vw,
			19px
		);

	line-height: 1.75;

}

.gm-page--editorial
.gm-page__intro p {

	margin: 0;

}


/* ==========================================================
   COVER
========================================================== */

.gm-page__cover {

	width:
		min(
			calc(
				100% -
				var(--gm-space-2xl)
			),
			1400px
		);

	margin:
		clamp(
			var(--gm-space-2xl),
			6vw,
			88px
		)
		auto
		0;

}

.gm-page__cover-image {

	display: block;

	width: 100%;

	max-height: 760px;

	object-fit: cover;

	border-radius: var(--gm-radius-xs);

}


/* ==========================================================
   EDITORIAL CONTENT
========================================================== */

.gm-page--editorial
.gm-page__content--editorial {

	width:
		min(
			calc(
				100% -
				var(--gm-space-2xl)
			),
			1200px
		);

	margin:
		clamp(
			64px,
			8vw,
			120px
		)
		auto
		0;

	color: var(--gm-page-ink);

	font-family: var(--gm-font-family);

	font-size: 17px;

	line-height: 1.85;

}

.gm-page--editorial
.gm-page__content--editorial >
:where(
	p,
	ul,
	ol,
	h2,
	h3,
	h4,
	blockquote
) {

	max-width: 820px;

	margin-inline: auto;

}

.gm-page--editorial
.gm-page__content--editorial >
:where(
	.alignwide,
	.wp-block-group.alignwide,
	.wp-block-columns,
	.wp-block-gallery
) {

	max-width: 1200px;

}

.gm-page--editorial
.gm-page__content--editorial >
.alignfull {

	width: 100vw;

	max-width: none;

	margin-left:
		calc(
			50% -
			50vw
		);

}


/* ==========================================================
   CONTENT HEADINGS
========================================================== */

.gm-page--editorial
.gm-page__content--editorial h2 {

	margin-top:
		clamp(
			64px,
			8vw,
			104px
		);

	margin-bottom: var(--gm-space-lg);

	font-size:
		clamp(
			30px,
			4vw,
			48px
		);

	font-weight: var(--gm-font-weight-regular);

	letter-spacing: -.035em;

	line-height: 1.14;

}

.gm-page--editorial
.gm-page__content--editorial h3 {

	margin-top: var(--gm-space-2xl);

	margin-bottom: var(--gm-space-md);

	font-size:
		clamp(
			23px,
			2.5vw,
			32px
		);

	font-weight: var(--gm-font-weight-medium);

	line-height: 1.25;

}


/* ==========================================================
   BODY CONTENT
========================================================== */

.gm-page--editorial
.gm-page__content--editorial p {

	margin-top: 0;

	margin-bottom: 26px;

}

.gm-page--editorial
.gm-page__content--editorial img {

	height: auto;

	border-radius: var(--gm-radius-xs);

}


/* ==========================================================
   BLOCKQUOTE
========================================================== */

.gm-page--editorial
.gm-page__content--editorial blockquote {

	margin-top: 52px;

	margin-bottom: 52px;

	padding:
		var(--gm-space-xs)
		0
		var(--gm-space-xs)
		30px;

	border-left:
		2px solid var(--gm-color-primary);

	color: var(--gm-page-muted);

	font-size:
		clamp(
			20px,
			2.2vw,
			28px
		);

	font-weight: var(--gm-font-weight-light);

	line-height: 1.55;

}


/* ==========================================================
   EDITORIAL BUTTONS
========================================================== */

.gm-page--editorial
.gm-page__content--editorial
:where(
	.wp-block-button__link,
	a.button,
	button.button
) {

	min-height: 46px;

	padding:
		13px
		var(--gm-space-lg);

	border:
		1px solid var(--gm-page-ink);

	border-radius: var(--gm-radius-md);

	background: var(--gm-page-ink);

	color: var(--gm-color-white);

	font-family: var(--gm-font-family);

	font-size: 13px;

	font-weight: var(--gm-font-weight-medium);

	letter-spacing: .04em;

	text-decoration: none;

	transition:
		background-color
		var(--gm-motion-fast)
		var(--gm-motion-smooth),
		color
		var(--gm-motion-fast)
		var(--gm-motion-smooth);

}

.gm-page--editorial
.gm-page__content--editorial
:where(
	.wp-block-button__link,
	a.button,
	button.button
):hover {

	background: transparent;

	color: var(--gm-page-ink);

}

.gm-page--editorial
.gm-page__content--editorial
:where(
	.wp-block-button__link,
	a.button,
	button.button
):focus-visible {

	outline: var(--gm-focus-ring);

	outline-offset: var(--gm-focus-ring-offset);

}


/* ==========================================================
   STORE PAGE CONTENT
========================================================== */

.gm-page--stores
.gm-page__content--editorial >
:where(
	.wp-block-columns,
	.wp-block-group
) {

	max-width: 1200px;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1024px) {

	.gm-page--editorial
	.gm-page__header--editorial {

		padding-block: 88px;

	}

	.gm-page--editorial
	.gm-page__content--editorial {

		margin-top: 80px;

	}

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {

	.gm-page--editorial {

		padding-bottom: 80px;

	}

	.gm-page--editorial
	.gm-page__header--editorial {

		padding:
			64px
			var(--gm-space-lg);

	}

	.gm-page--editorial
	.gm-page__title {

		font-size:
			clamp(
				38px,
				12vw,
				54px
			);

	}

	.gm-page__cover,
	.gm-page--editorial
	.gm-page__content--editorial {

		width:
			min(
				calc(
					100% -
					var(--gm-space-xl)
				),
				1200px
			);

	}

	.gm-page__cover {

		margin-top: 40px;

	}

	.gm-page__cover-image {

		min-height: 280px;

		object-fit: cover;

	}

	.gm-page--editorial
	.gm-page__content--editorial {

		margin-top: 56px;

		font-size: var(--gm-font-size-md);

		line-height: 1.75;

	}

	.gm-page--editorial
	.gm-page__content--editorial h2 {

		margin-top: 56px;

	}

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

	.gm-page--editorial
	.gm-page__content--editorial
	:where(
		.wp-block-button__link,
		a.button,
		button.button
	) {

		transition: none;

	}

}