:root {
	--color-accent: #DBAF64;
	--color-dark: #3A3A3A;
	--color-neutral: #9FA6B1;

	/* --gradient-neutral: linear-gradient(180deg, #F1F3F4 -5.71%, #FFF 99.98%); */

	/* --font-accent: "Nunito", sans-serif; */

	--spacing-block: 30px;
	--spacing-inline: 30px;
	--spacing-gap: 20px;

	--max-width: 1440px;

	text-wrap: pretty;

	@media (min-width: 768px) {
		--spacing-block: 64px;
		--spacing-inline: 64px;
		--spacing-gap: 40px;
	}
}

body .oa-scope {
	font-size: 20px;
	line-height: 1.4;
	color: var(--color-dark) !important;

	h1, h2 {
		text-wrap: balance;
		font-weight: normal;
	}

	section:not(.footer-callout) {
		max-width: var(--max-width);
		margin: var(--spacing-block) auto;
		padding-inline: var(--spacing-inline);

		&::before {
			content: '';
			display: block;
			padding-top: var(--spacing-gap);
			border-top: 1px solid var(--color-accent);
		}
	}

	.hero {
		display: grid;

		img, .section-inner {
			@media (min-width: 1024px) {
				grid-area: 1 / 1;
			}
		}

		img {
			width: 100%;
			height: 50vh;
			object-fit: cover;

			@media (min-width: 1024px) {
				height: 650px;
			}
		}

		.section-inner {
			display: grid;
			justify-items: start;
			width: 100%;
			max-width: var(--max-width);
			margin-inline: auto;
			padding-inline: var(--spacing-inline);
		}

		.content {
			display: grid;
			gap: var(--spacing-gap);
			align-content: center;
			padding-block: var(--spacing-gap);
			background-color: white;

			@media (min-width: 1024px) {
				max-width: 452px;
				padding: var(--spacing-gap);
			}
		}

		h1 {
			font-size: 56px;
			color: var(--color-accent);
		}

		p {
			margin: 0;
		}
	}

	section.blog-list {
		h2 {
			margin-bottom: 1rem;
			font-size: 48px;
			color: var(--color-accent);
		}

		.grid {
			display: grid;
			grid-template-areas:
				'search search'
				'counter sort'
				'items items';
			gap: 1rem var(--spacing-gap);
			align-items: start;
			margin-top: var(--spacing-gap);

			@media (min-width: 768px) {
				grid-template-columns: 1fr auto auto;
				grid-template-areas:
					'search counter sort'
					'items items items';
			}
		}

		.filters {
			grid-area: filters;
			display: none;
		}

		.search {
			grid-area: search;

			label {
				position: absolute;
				font-size: 0;
			}

			input {
				appearance: none;
				width: 100%;
				height: auto;
				padding: 0 0 10px;
				color: var(--color-dark);
				background-color: inherit;
				border-bottom: 1px solid var(--color-neutral);
				border-radius: 0;

				&::placeholder {
					color: inherit;
				}
			}
		}

		.counter, .sort {
			text-transform: uppercase;
			font-size: 1rem;
			font-weight: bold;
			letter-spacing: 1.6px;
		}

		.counter {
			grid-area: counter;
		}

		.sort {
			grid-area: sort;
			height: 1.4em;
			margin: 0;
			padding: 0;
			color: inherit;
			background-color: inherit;
		}

		.items {
			grid-area: items;
			display: grid;
			gap: var(--spacing-gap);
		}

		.item {
			display: grid;
			gap: var(--spacing-gap);
			padding: 1rem;
			border: 1px solid var(--color-neutral);
			transition: 1s;

			@media (min-width: 768px) {
				grid-template-columns: 1fr 1fr;
			}

			@media (min-width: 1200px) {
				grid-template-columns: 368px 1fr;
			}

			@starting-style {
				background-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
			}

			.image {
				display: contents;

				img {
					max-height: 280px;
					object-fit: cover;

					@media (min-width: 1200px) {
						max-height: 200px;
					}
				}
			}

			.content {
				display: flex;
				flex-direction: column;
				gap: var(--spacing-gap);
				justify-content: space-between;
			}

			h3 {
				font-size: 24px;
				font-weight: normal;
				line-height: inherit;
				color: inherit;
			}

			.date {
				margin-block: 8px;
				font-size: 1rem;
			}

			p {
				margin: 0;
			}

			.more a {
				text-transform: uppercase;
				font-weight: bold;
				letter-spacing: 1.6px;
				color: var(--color-neutral);
				border-bottom: 1px solid var(--color-neutral);

				&:focus, &:hover {
					color: var(--color-accent);
					border-bottom-color: var(--color-accent);
				}
			}
		}

		.load {
			grid-column: 1 / -1;
			text-transform: uppercase;
			font-size: 16px;
			font-weight: bold;
			letter-spacing: 1.6px;
			color: white;
			background-color: var(--color-accent);
			border-radius: 0;

			&:focus, &:hover {
				color: var(--color-accent);
				background-color: white;
			}

			&:disabled {
				/* color: white;
				background-color: var(--color-neutral); */
				display: none;
			}
		}
	}

	section.blog-posts {
		.content {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			gap: .5rem var(--spacing-gap);
			margin-bottom: var(--spacing-gap);

			h2 {
				margin: 0;
			}

			.button {
				padding: 9px 24px;
				text-transform: uppercase;
				font-weight: bold;
				letter-spacing: 1.6px;
				color: white;
				background-color: var(--color-accent);
				border: 1px solid var(--color-accent);

				&:focus, &:hover {
					color: var(--color-accent);
					background-color: white;
				}
			}
		}

		.carousel {
			display: grid;
			gap: 1rem;
			position: relative;
			margin-inline: calc(-1 * var(--spacing-inline));

			@media (min-width: 1440px) {
				mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
			}
		}

		.items {
			display: flex;
			gap: var(--spacing-gap);
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			scroll-behavior: smooth;
			scrollbar-width: none;
			-webkit-overflow-scrolling: touch;
			padding-inline: var(--spacing-inline);
		}

		.items::-webkit-scrollbar {
			display: none;
		}

		.item {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 0 0 clamp(260px, 78vw, 298px);
			scroll-snap-align: center;
			color: var(--color-dark);
			border: 1px solid var(--color-neutral);

			.inner {
				padding: 1rem;

				.image img {
					display: block;
					width: 100%;
					height: 200px;
					object-fit: cover;
				}

				h3, .date, p {
					margin-block: 1rem;
				}

				h3 {
					font-size: 24px;
					font-weight: normal;
					line-height: inherit;
					color: inherit;
				}
			}

			.more {
				padding: 1rem;
				border-top: 1px solid var(--color-neutral);

				a {
					display: flex;
					gap: 1ch;
					align-items: center;
					text-transform: uppercase;
					font-weight: bold;
					letter-spacing: 1.6px;
					color: inherit;

					&:focus, &:hover {
						svg {
							transform: translateX(.5em);
						}
					}

					svg {
						transition: .3s;
					}
				}
			}
		}

		.arrows {
			display: flex;
			gap: 0.5rem;
			justify-content: flex-start;
			padding-inline: var(--spacing-inline);

			button {
				position: relative;
				width: 2.5rem;
				height: 2.5rem;
				padding: 0;
				border: 1px solid var(--color-neutral);
				border-radius: 50%;
				background: none;
				cursor: pointer;

				&::before {
					content: '';
					position: absolute;
					inset: 0;
					margin: auto;
					width: 0.5rem;
					height: 0.5rem;
					border-top: 2px solid var(--color-dark);
					border-right: 2px solid var(--color-dark);
				}

				&:disabled {
					opacity: 0.3;
					cursor: default;
				}
			}

			.prev::before {
				transform: translateX(2px) rotate(-135deg);
			}

			.next::before {
				transform: translateX(-2px) rotate(45deg);
			}
		}

		@media (prefers-reduced-motion: reduce) {
			.items {
				scroll-behavior: auto;
			}
		}
	}

	section.footer-callout {
		padding: 1rem var(--spacing-inline);
		text-align: center;
		background-color: var(--color-accent);

		.copy {
			font-size: 40px;
			color: white;
		}

		.note {
			font-size: 20px;
			font-weight: bold;
		}

		p {
			margin-block: 1rem;
		}

		a {
			text-decoration: underline;
			text-wrap: nowrap;
			color: inherit;
		}
	}

	.blog-hero {
		display: grid;
		margin-bottom: var(--spacing-block);
		background-color: var(--color-dark);

		img, .content {
			grid-area: 1 / 1;
		}

		img {
			width: 100%;
			height: 350px;
			object-fit: cover;
			mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%);
		}

		.content {
			display: grid;
			place-content: center;
			z-index: 1;
			padding: var(--spacing-gap) var(--spacing-inline);
		}

		h1 {
			text-align: center;
			font-size: 56px;
			color: white;
		}

		nav {
			color: white;

			ul {
				display: flex;
				flex-wrap: wrap;
				gap: 0 .5em;
				justify-content: center;
				text-align: center;
			}

			li {
				padding: 0;
			}

			a {
				color: inherit;
			}
		}
	}
}