.post-type-archive-resource-hub,
.tax-rhub-categories,
.tax-rhub-tags,
.tax-rhub-filters {

	.grid-container {
		max-width: inherit !important;
	}

	nav[aria-label="Breadcrumbs"] {
		background-color: #e7e7e9;
		font-family: var(--wp--preset--font-family--brand);
		font-size: var(--wp--preset--font-size--small);
		padding: 1rem;
		margin-bottom: 2rem;

		a {
			color: var(--color--accent-500);

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

	.site-main {
		padding: 0 1rem;
		max-width: 80rem;
		margin: 0 auto 2rem !important;

		a {
			color: var(--color--accent-500);

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

	.main-content {
		display: flex;
		gap: 1rem;

		aside {
			width: calc( 25% - .5rem );
		}

		.content {
			width: calc( 75% - .5rem );
		}
	}

	.overtitle {
		display: block;
		font-size: var(--wp--preset--font-size--small);
		line-height: .75rem;
	}

	h1.page-title {
		font-size: var(--wp--preset--font-size--3-x-large);

		&, & + p.lead {
			text-wrap: pretty;
		}
	}

	h2.page-title {
		font-size: var(--wp--preset--font-size--2-x-large);
	}

	h1, h2, h3 {
		font-family: var(--wp--preset--font-family--brand);
		font-weight: 600;

		span {
			color: var(--color--accent-500);
		}
	}

	.rhub-hero {
		text-align: center;

		h1.page-title, h1.page-title + p.lead {
			text-wrap: balance;
		}
	}

	.lead {
		font-size: var(--wp--preset--font-size--medium);
		line-height: var(--wp--preset--font-size--large);
		margin-bottom: var(--wp--preset--font-size--5-x-large);
	}

	ul {
		margin: 0;
		padding: 0;

		li {
			list-style: none;
		}
	}

	.category-title, .filter-title, .tag-title {
		font-family: var(--wp--preset--font-family--brand);
		font-weight: 600;
		margin: 1rem 0 .5rem;
	}

	.filters-tags {
		display: flex;
		flex-wrap: wrap;
		gap: .25rem;

		div { height: 2rem;}
		input { display: none; visibility: hidden; }
		label {
			border: 1px solid var(--color--neutral-300);
			border-radius: 2rem;
			padding: .25rem .75rem;
		}

		input:checked + label {
			color: var(--color--accent-600);
			border-color: var(--color--accent-600);
		}
	}

	.cards-container {
		container-type: inline-size;
	}

	.cards {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-content: stretch;
		gap: 1rem;

		a {
			display: grid;
			text-decoration: none;
			transition: opacity 0.2s ease, transform 0.2s ease;

			.card {
				color: var(--color--primary-500);

				&.guide {
					padding-top: 8rem;
					background-repeat: no-repeat;
					background-size: 100% 7rem; /* Ratio 390:112 → ~7:2 */
					background-position: 50% 0%;
					background-color: transparent;
					background-image: linear-gradient(
						to bottom,
						var(--color--primary-500) 0,
						var(--color--primary-500) 7rem,
						transparent 7rem
					);
				}

				h2, h3 {
					color: var(--color--accent-500);
					text-wrap: pretty;
				}
			}

			&:hover, &:focus {
				text-decoration: none;

				.card {
					border-color: var(--color--accent-600);

					h2, h3 {
						color: var(--color--accent-600);
					}
				}
			}
		}

		.card {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			border: 1px solid var(--color--neutral-300);
			border-radius: .5rem;
			padding: 1rem;

			h2, h3 {
				font-size: var(--wp--preset--font-size--medium);
				color: var(--color--primary-500);
			}

			.card-tags {
				font-size: var(--wp--preset--font-size--small);
				display: flex;
				flex-wrap: wrap;
				gap: .25rem;

				span {
					color: var(--color--neutral-500);
					border: 1px solid var(--color--neutral-300);
					border-radius: 2rem;
					padding: .125rem .75rem;
				}
			}

		}
	}

	/* CONTAINER */
	@container (min-width: 28rem) {
		.cards {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@container (min-width: 60rem) {
		.cards {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

	/* RESPONSIVE */
	@media (max-width: 60rem) {
		.main-content {
			flex-direction: column;

			aside, .content {
				width: 100%;
			}

		}
	}

	/* TMP / TO DELETE */
	pre.debug {
		font-family: monospace;
		font-size: .75rem;
		line-height: 1.6;
		margin-block: 2rem;
	}
}