/* =========================================================
   GREENMODELIFE ARCHIVE
   MODERN MINIMAL / EDITORIAL
   FULLY CONNECTED TO SCF SITE SETTINGS
   ========================================================= */


/* =========================================================
   ARCHIVE DESIGN TOKENS
   ========================================================= */

:root {

	/* Colors */
	--archive-bg: var(--color-secondary, #f7f7f4);
	--archive-surface: var(--color-secondary, #ffffff);

	--archive-text: var(--color-heading, #1f2a24);
	--archive-muted: var(--color-body, #68736d);
	--archive-primary: var(--color-primary, #2e6b4f);
	--archive-accent: var(--color-accent, #ff5a00);

	/* Fonts */
	--archive-heading-font:
		var(--font-heading, "Inter", sans-serif);

	--archive-body-font:
		var(--font-body, "Inter", sans-serif);

	/* Layout */
	--archive-container: 1240px;
	--archive-transition: 0.3s ease;

	/* Derived */
	--archive-border: color-mix(
		in srgb,
		var(--archive-text) 12%,
		transparent
	);

	--archive-soft: color-mix(
		in srgb,
		var(--archive-primary) 8%,
		var(--archive-bg)
	);
}


/* =========================================================
   ARCHIVE PAGE
   ========================================================= */

.archive-page {
    width: 100%;
    background: var(--archive-bg);
    color: var(--archive-text);
    padding: 60px 0 60px;
    font-family: var(--archive-body-font);
    overflow: hidden;
}


.archive-page *,
.archive-page *::before,
.archive-page *::after {
	box-sizing: border-box;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.archive-container {
	width: min(
		calc(100% - 80px),
		var(--archive-container)
	);

	margin-inline: auto;
	padding: 0;
}


/* =========================================================
   ARCHIVE HEADER
   ========================================================= */

.archive-header {
	max-width: 850px;
	margin: 0 auto;

	text-align: center;
}


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

.archive-eyebrow {
	display: inline-block;

	margin-bottom: 17px;

	color: var(--archive-primary);

	font-family: var(--archive-body-font);

	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.14em;

	text-transform: uppercase;
}


/* =========================================================
   ARCHIVE H1
   SCF -> --h1-*
   ========================================================= */

.archive-header h1 {
	margin: 0 0 22px;

	font-family: var(
		--font-heading,
		"Inter",
		sans-serif
	);

	font-size: var(--h1-font-size, 64px);
	line-height: var(--h1-line-height, 1.1);
	font-weight: var(--h1-font-weight, 700);
	letter-spacing: var(--h1-letter-spacing, 0);

	color: var(
		--color-heading,
		#111111
	) !important;
}


/* =========================================================
   ARCHIVE DESCRIPTION
   SCF -> paragraph_typography
   ========================================================= */

.archive-description {
	max-width: 700px;
	margin: 0 auto;

	color: var(
		--color-body,
		#555555
	);

	font-family: var(
		--font-body,
		"Inter",
		sans-serif
	);

	font-size: var(--body-font-size, 18px);
	line-height: var(--body-line-height, 1.6);
	font-weight: var(--body-font-weight, 400);
	letter-spacing: var(--body-letter-spacing, 0);
}


.archive-description p {
	margin: 0;

	font: inherit;
	color: inherit;
}


/* =========================================================
   CATEGORY NAV
   ========================================================= */

.archive-category-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

	gap: 8px;

	margin: 48px 0 65px;
}


/* =========================================================
   CATEGORY LINK
   ========================================================= */

.archive-category-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 9px 15px;

	background: transparent;

	border: 1px solid var(--archive-border);
	border-radius: 999px;

	color: var(--archive-text) !important;

	font-family: var(--archive-body-font);

	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;

	text-decoration: none !important;

	transition:
		background-color var(--archive-transition),
		color var(--archive-transition),
		border-color var(--archive-transition),
		transform var(--archive-transition);
}


.archive-category-link:hover {
	background: var(--archive-soft);
	border-color: var(--archive-primary);

	color: var(--archive-primary) !important;

	transform: translateY(-1px);
}


.archive-category-link.active {
	background: var(--archive-primary);
	border-color: var(--archive-primary);

	color: #ffffff !important;
}


/* =========================================================
   POSTS GRID
   ========================================================= */

.archive-grid {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 0 34px;

	border-top: 1px solid var(--archive-border);
}


/* =========================================================
   ARCHIVE CARD
   ========================================================= */

.archive-card {
	position: relative;

	background: transparent;

	border: 0;
	border-radius: 0;

	overflow: visible;

	padding: 34px 0 42px;

	border-bottom: 1px solid var(--archive-border);

	transition:
		transform var(--archive-transition);
}


.archive-card:hover {
	transform: translateY(-4px);
}


/* =========================================================
   CARD IMAGE
   ========================================================= */

.archive-card-image-link {
	display: block;

	margin-bottom: 22px;

	overflow: hidden;

	background: var(--archive-soft);
}


.archive-card-image {
	display: block;

	width: 100%;
	height: 250px;

	object-fit: cover;

	transition:
		transform 0.6s cubic-bezier(0.2, 0.65, 0.25, 1);
}


.archive-card:hover .archive-card-image {
	transform: scale(1.035);
}


/* =========================================================
   IMAGE PLACEHOLDER
   SCF -> H5
   ========================================================= */

.archive-card-image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;

	height: 250px;

	background: var(--archive-soft);

	color: var(--archive-primary);

	font-family: var(
		--font-heading,
		"Inter",
		sans-serif
	);

	font-size: var(--h5-font-size, 24px);
	line-height: var(--h5-line-height, 1.2);
	font-weight: var(--h5-font-weight, 600);
	letter-spacing: var(--h5-letter-spacing, 0);

	text-align: center;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.archive-card-content {
	padding: 0;
}


/* =========================================================
   CARD CATEGORY
   ========================================================= */

.archive-card-category {
	display: inline-block;

	margin-bottom: 9px;

	color: var(--archive-primary) !important;

	font-family: var(--archive-body-font);

	font-size: 10px;
	font-weight: 700;

	line-height: 1.4;
	letter-spacing: 0.13em;

	text-transform: uppercase;
	text-decoration: none !important;

	transition: color var(--archive-transition);
}


.archive-card-category:hover {
	color: var(--archive-accent) !important;
}


/* =========================================================
   CARD TITLE
   SCF -> H3
   ========================================================= */

.archive-card-title {
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 12px;
    font-family: var(--home-heading-font);
    font-size: 23px;
    font-weight: 550;
    line-height: 1.4;
}


.archive-card-title a {
	color: var(--archive-text) !important;
	text-decoration: none !important;
	transition: color var(--archive-transition);
}


.archive-card-title a:hover {
	color: var(--archive-primary) !important;
}


/* =========================================================
   CARD EXCERPT
   SCF -> BODY
   ========================================================= */

.archive-card-excerpt {
	margin: 0 0 19px;
	max-width: 95%;
	color: var(--archive-muted);
	font-family: var(
		--font-body,
		"Inter",
		sans-serif
	);
	font-size: var(--body-font-size, 18px);
	line-height: var(--body-line-height, 1.6);
	font-weight: var(--body-font-weight, 400);
	letter-spacing: var(--body-letter-spacing, 0);
}


.archive-card-excerpt p {
	margin: 0;
	font: inherit;
	color: inherit;
}


/* =========================================================
   CARD META
   ========================================================= */

.archive-card-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	color: var(--archive-muted);
	font-family: var(--archive-body-font);
	font-size: 12px;
	line-height: 1.4;
	font-weight: var(--body-font-weight, 400);
	letter-spacing: var(--body-letter-spacing, 0);
}


.archive-card-meta-separator {
	color: color-mix(
		in srgb,
		var(--archive-muted) 55%,
		transparent
	);
}


/* =========================================================
   PAGINATION
   ========================================================= */

.archive-pagination {
	margin-top: 62px;

	text-align: center;
}


.archive-pagination ul {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

	gap: 8px;

	margin: 0;
	padding: 0;

	list-style: none;
}


.archive-pagination li {
	margin: 0;
	padding: 0;
}


.archive-pagination a,
.archive-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 42px;
	min-height: 42px;

	padding: 8px 13px;

	background: transparent;

	border: 1px solid var(--archive-border);
	border-radius: 999px;

	color: var(--archive-text);

	font-family: var(--archive-body-font);

	font-size: 13px;
	font-weight: 600;
	line-height: 1;

	text-decoration: none;

	transition:
		background-color var(--archive-transition),
		color var(--archive-transition),
		border-color var(--archive-transition),
		transform var(--archive-transition);
}


.archive-pagination a:hover {
	background: var(--archive-soft);

	border-color: var(--archive-primary);

	color: var(--archive-primary);

	transform: translateY(-1px);
}


.archive-pagination .current {
	background: var(--archive-primary);

	border-color: var(--archive-primary);

	color: #ffffff;
}


.archive-pagination .prev,
.archive-pagination .next {
	padding-left: 18px;
	padding-right: 18px;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.archive-empty {
	max-width: 650px;

	margin: 80px auto 20px;

	padding: 60px 30px;

	background: transparent;

	border-top: 1px solid var(--archive-border);
	border-bottom: 1px solid var(--archive-border);

	text-align: center;
}


/* =========================================================
   EMPTY TITLE
   SCF -> H3
   ========================================================= */

.archive-empty span {
	display: -webkit-box;

	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;

	overflow: hidden;

	margin: 0 0 12px;

	font-family: var(
		--font-heading,
		"Inter",
		sans-serif
	);

	font-size: var(--h3-font-size, 42px);
	line-height: var(--h3-line-height, 1.1);
	font-weight: var(--h3-font-weight, 700);
	letter-spacing: var(--h3-letter-spacing, 0);
}


/* =========================================================
   EMPTY DESCRIPTION
   SCF -> BODY
   ========================================================= */

.archive-empty p {
	margin: 0 0 26px;

	color: var(--archive-muted);

	font-family: var(
		--font-body,
		"Inter",
		sans-serif
	);

	font-size: var(--body-font-size, 18px);
	line-height: var(--body-line-height, 1.6);
	font-weight: var(--body-font-weight, 400);
	letter-spacing: var(--body-letter-spacing, 0);
}


/* =========================================================
   EMPTY BUTTON
   ========================================================= */

.archive-empty-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 13px 21px;

	background: var(--archive-primary);

	border: 1px solid var(--archive-primary);
	border-radius: 999px;

	color: #ffffff !important;

	font-family: var(--archive-body-font);

	font-size: 13px;
	font-weight: 700;
	line-height: 1;

	text-decoration: none !important;

	transition:
		background-color var(--archive-transition),
		border-color var(--archive-transition),
		transform var(--archive-transition);
}


.archive-empty-button:hover {
	background: var(--archive-text);
	border-color: var(--archive-text);

	transform: translateY(-2px);
}


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

@media (max-width: 1100px) {

	.archive-page {
		padding: 70px 0 90px;
	}

	.archive-container {
		width: min(
			calc(100% - 56px),
			var(--archive-container)
		);
	}

	.archive-grid {
		gap: 0 26px;
	}

	.archive-card-image,
	.archive-card-image-placeholder {
		height: 225px;
	}
}


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

@media (max-width: 900px) {

	.archive-page {
		padding: 60px 0 80px;
	}

	.archive-container {
		width: min(
			calc(100% - 48px),
			var(--archive-container)
		);
	}

	.archive-header {
		max-width: 720px;
	}

	.archive-category-nav {
		margin-bottom: 55px;
	}

	.archive-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 0 28px;
	}

	.archive-card-image,
	.archive-card-image-placeholder {
		height: 230px;
	}
}


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

@media (max-width: 650px) {

	.archive-page {
		padding: 42px 0 60px;
	}

	.archive-container {
		width: calc(100% - 36px);
		padding: 0;
	}


	/* Header */

	.archive-header {
		max-width: 100%;
	}


	.archive-eyebrow {
		margin-bottom: 13px;

		font-size: 10px;
		letter-spacing: 0.12em;
	}


	.archive-header h1 {
		margin-bottom: 17px;
	}


	/* Category Navigation */

	.archive-category-nav {
		justify-content: flex-start;

		gap: 7px;

		margin: 34px 0 45px;
	}


	.archive-category-link {
		padding: 8px 13px;

		font-size: 12px;
	}


	/* Grid */

	.archive-grid {
		grid-template-columns: 1fr;

		gap: 0;
	}


	/* Card */

	.archive-card {
		padding: 28px 0 35px;
	}


	.archive-card-image-link {
		margin-bottom: 19px;
	}

	.archive-card-image,
	.archive-card-image-placeholder {
		height: 230px;
	}


	.archive-card-category {
		margin-bottom: 8px;

		font-size: 10px;
	}


	.archive-card-title {
		margin-bottom: 10px;
	}


	.archive-card-excerpt {
		margin-bottom: 17px;

		max-width: 100%;
	}


	.archive-card-meta {
		font-size: 11px;
	}


	/* Pagination */

	.archive-pagination {
		margin-top: 45px;
	}


	.archive-pagination .prev,
	.archive-pagination .next {
		display: none;
	}


	/* Empty */

	.archive-empty {
		margin-top: 55px;

		padding: 45px 20px;
	}
}


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

@media (max-width: 420px) {

	.archive-page {
		padding-top: 34px;
	}

	.archive-container {
		width: calc(100% - 28px);
	}

	.archive-category-nav {
		margin-bottom: 38px;
	}

	.archive-card-image,
	.archive-card-image-placeholder {
		height: 210px;
	}

	.archive-card-excerpt {
		max-width: 100%;
	}
}


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

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

	.archive-page *,
	.archive-page *::before,
	.archive-page *::after {
		transition: none !important;
		animation: none !important;
	}

	.archive-card:hover,
	.archive-card:hover .archive-card-image,
	.archive-category-link:hover,
	.archive-pagination a:hover,
	.archive-empty-button:hover {
		transform: none !important;
	}
}