/**
 * Journal archive page styles.
 *
 * Scope: WP page slug 'journal' (resolved via journal_archive page key).
 * BEM block: .as-journal-archive
 *
 * Mirrors theme/assets/css/experiences.css activities-section block in
 * shape (filter row + grid + empty state). Card-level styles live in
 * theme/assets/css/journal-card.css (shared with related on single).
 *
 * @package azumi-setoda
 * @since   1.0.0
 */

/* --------------------------------------------------
 * Page shell
 *
 * `.site-main.as-journal-archive` is GP's flex item. Without `width:100%`
 * the parent flex layout shrinks to intrinsic content width and percentage-
 * width children feed back into runaway layout (.claude/rules/page-shell-flex.md).
 * -------------------------------------------------- */

.as-journal-archive {
	width: 100%;
	background: var(--as-color-surface-blue-100);
}

/* --------------------------------------------------
 * Section
 * -------------------------------------------------- */

.as-journal-archive__section {
	padding-block: 60px;

	@media (min-width: 769px) {
		padding-block: 80px;
	}

	.as-journal-archive__inner {
		padding-inline: var(--as-gutter);
		max-width: 1180px;
		margin-inline: auto;
	}

	.as-journal-archive__heading {
		margin-block: 0 32px;
		text-align: center;
	}

	.as-journal-archive__filters {
		margin-block: 0 40px;
	}

	.as-journal-archive__filter-list {
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 0;
		margin: 0;
		justify-content: center;
	}

	.as-journal-archive__filter-item {
		margin: 0;
	}

	.as-journal-archive__filter-link {
		display: inline-block;
		padding: 7px 12px;
		font-size: var(--as-font-size-base);
		line-height: var(--as-line-height-none);
		letter-spacing: var(--as-letter-spacing-xs);
		color: var(--as-color-navy-deep);
		background-color: transparent;
		border: 1px solid var(--as-color-navy-deep);
		border-radius: 999px;
		text-decoration: none;
		transition: background-color 0.2s ease, color 0.2s ease;

		@media (hover: hover) {
			&:hover {
				opacity: var(--as-hover-opacity);
			}
		}
	}

	.as-journal-archive__filter-link.is-active {
		background-color: var(--as-color-navy-deep);
		color: var(--as-color-white);
	}

	.as-journal-archive__grid {
		list-style: none;
		display: grid;
		grid-template-columns: 1fr;
		gap: 32px 24px;
		padding: 0;
		margin: 0;

		@media (min-width: 769px) {
			grid-template-columns: repeat(2, 1fr);
		}

		@media (min-width: 1025px) {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	.as-journal-archive__empty {
		padding-block: 60px;
		text-align: center;
	}

	.as-journal-archive__empty-message {
		font-size: var(--as-font-size-base);
		color: var(--as-color-navy-deep);
		margin: 0 0 16px;
	}

	.as-journal-archive__empty-clear {
		display: inline-block;
		padding: 8px 20px;
		font-size: var(--as-font-size-xs);
		color: var(--as-color-navy-deep);
		border: 1px solid var(--as-color-navy-deep);
		text-decoration: none;

		@media (hover: hover) {
			&:hover {
				opacity: var(--as-hover-opacity);
			}
		}
	}
}