/* =========================================================
   MOFUTERRA TRAVEL JOURNAL
   ARCHIVE.CSS — FINAL
   archive.php 完全一致
========================================================= */


/* =========================================================
   01. PAGE BASE
========================================================= */

.mt-archive-page {
	width: 100%;
	margin: 0;
	padding: 0;

	background: var(--mt-ivory);
	color: var(--mt-text);
}

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

.mt-archive-page a {
	color: inherit;
	text-decoration: none;
}

.mt-archive-page h1,
.mt-archive-page h2,
.mt-archive-page h3,
.mt-archive-page p {
	margin: 0;
}


/* =========================================================
   02. CONTAINER
========================================================= */

.mt-archive-container {
	width: min(
		calc(100% - 96px),
		1240px
	);

	margin-inline: auto;
}


/* =========================================================
   03. ARCHIVE HERO
========================================================= */

.mt-archive-hero {
	width: 100%;

	background: var(--mt-mocha);
	color: var(--mt-white);
}

.mt-archive-hero .mt-archive-container {
	padding:
		92px
		0
		88px;
}


/* META */

.mt-archive-hero__meta {
	display: flex;
	align-items: center;

	gap: 22px;

	margin-bottom: 34px;
}

.mt-archive-hero__number {
	font-family: var(--mt-font-display);
	font-size: 40px;
	font-weight: 500;
	line-height: 1;

	color: var(--mt-apricot);
}

.mt-archive-hero__label {
	font-family: var(--mt-font-sans);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: 0.22em;

	color: var(--mt-gold);
}


/* CATEGORY */

.mt-archive-hero__category {
	margin-bottom: 14px !important;

	font-family: var(--mt-font-sans);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: 0.20em;

	color: var(--mt-apricot);
}


/* TITLE */

.mt-archive-hero__title {
	max-width: 900px;

	font-size: clamp(46px, 5.2vw, 72px);
	font-weight: 400;
	line-height: 1.28;

	color: var(--mt-white);
}


/* DESCRIPTION */

.mt-archive-hero__description {
	max-width: 760px;

	margin-top: 32px;

	font-size: 15px;
	line-height: 2;

	color: rgba(255, 250, 244, 0.74);
}

.mt-archive-hero__description p {
	margin: 0;
}


/* =========================================================
   04. CONTENT AREA
========================================================= */

.mt-archive-content {
	width: 100%;

	background: var(--mt-ivory);
}

.mt-archive-content .mt-archive-container {
	padding:
		84px
		0
		100px;
}


/* =========================================================
   05. CONTENT HEADING
========================================================= */

.mt-archive-content__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;

	gap: 40px;

	margin-bottom: 48px;

	padding-bottom: 24px;

	border-bottom:
		1px solid var(--mt-line);
}

.mt-archive-content__label {
	margin-bottom: 12px !important;

	font-family: var(--mt-font-sans);
	font-size: 9px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: 0.22em;

	color: var(--mt-gold);
}

.mt-archive-content__title {
	font-size: clamp(32px, 3.4vw, 44px);
	font-weight: 400;
	line-height: 1.35;

	color: var(--mt-text);
}

.mt-archive-content__count {
	flex-shrink: 0;

	font-family: var(--mt-font-sans);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;

	letter-spacing: 0.16em;

	color: var(--mt-taupe);
}

.mt-archive-content__count span {
	margin-right: 8px;

	font-family: var(--mt-font-display);
	font-size: 28px;
	font-weight: 500;

	color: var(--mt-terracotta);
}


/* =========================================================
   06. GRID
========================================================= */

.mt-archive-grid {
	display: grid;

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

	gap:
		58px
		34px;
}


/* =========================================================
   07. CARD
========================================================= */

.mt-archive-card {
	min-width: 0;
}

.mt-archive-card__link {
	display: block;

	height: 100%;

	color: var(--mt-text);
}


/* =========================================================
   08. CARD VISUAL
========================================================= */

.mt-archive-card__visual {
	position: relative;

	width: 100%;

	aspect-ratio: 4 / 3;

	overflow: hidden;

	background: var(--mt-beige);
}

.mt-archive-card__image {
	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform 0.55s ease,
		filter 0.55s ease;
}

.mt-archive-card__link:hover
.mt-archive-card__image {
	transform: scale(1.035);
}


/* PLACEHOLDER */

.mt-archive-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	background: var(--mt-mocha);
}

.mt-archive-card__placeholder span {
	font-family: var(--mt-font-display);
	font-size: 24px;
	font-weight: 500;

	letter-spacing: 0.12em;

	color: rgba(255, 250, 244, 0.72);
}


/* =========================================================
   09. CARD BODY
========================================================= */

.mt-archive-card__body {
	padding:
		26px
		2px
		0;
}


/* META */

.mt-archive-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 20px;

	margin-bottom: 18px;
}

.mt-archive-card__category {
	font-family: var(--mt-font-sans);
	font-size: 9px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: 0.16em;

	color: var(--mt-terracotta);
}

.mt-archive-card__date {
	flex-shrink: 0;

	font-family: var(--mt-font-sans);
	font-size: 9px;
	line-height: 1;

	letter-spacing: 0.10em;

	color: var(--mt-taupe);
}


/* TITLE */

.mt-archive-card__title {
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 400;
	line-height: 1.55;

	color: var(--mt-text);

	transition:
		color 0.3s ease;
}

.mt-archive-card__link:hover
.mt-archive-card__title {
	color: var(--mt-terracotta);
}


/* EXCERPT */

.mt-archive-card__excerpt {
	margin-top: 18px;

	font-size: 13px;
	line-height: 1.95;

	color: var(--mt-taupe);
}

.mt-archive-card__excerpt p {
	margin: 0;
}


/* FOOTER */

.mt-archive-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 24px;

	margin-top: 26px;

	padding-top: 16px;

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

.mt-archive-card__read {
	font-family: var(--mt-font-sans);
	font-size: 9px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: 0.18em;

	color: var(--mt-text);
}

.mt-archive-card__arrow {
	font-size: 17px;
	line-height: 1;

	color: var(--mt-terracotta);

	transition:
		transform 0.3s ease;
}

.mt-archive-card__link:hover
.mt-archive-card__arrow {
	transform: translateX(5px);
}


/* =========================================================
   10. PAGINATION
========================================================= */

.mt-archive-pagination {
	margin-top: 78px;
}

.mt-archive-pagination__list {
	display: flex;
	align-items: center;
	justify-content: center;

	flex-wrap: wrap;

	gap: 8px;
}

.mt-archive-pagination__list
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;

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

	padding:
		0
		14px;

	border:
		1px solid var(--mt-line);

	font-family: var(--mt-font-sans);
	font-size: 10px;
	font-weight: 600;

	letter-spacing: 0.08em;

	color: var(--mt-text);

	transition:
		background-color 0.3s ease,
		color 0.3s ease,
		border-color 0.3s ease;
}

.mt-archive-pagination__list
.page-numbers.current {
	background: var(--mt-mocha);
	border-color: var(--mt-mocha);

	color: var(--mt-white);
}

.mt-archive-pagination__list
.page-numbers:hover {
	background: var(--mt-apricot);
	border-color: var(--mt-apricot);

	color: var(--mt-white);
}


/* =========================================================
   11. EMPTY
========================================================= */

.mt-archive-empty {
	max-width: 760px;

	padding:
		72px
		0;
}

.mt-archive-empty__label {
	margin-bottom: 18px !important;

	font-family: var(--mt-font-sans);
	font-size: 9px;
	font-weight: 700;

	letter-spacing: 0.20em;

	color: var(--mt-gold);
}

.mt-archive-empty h2 {
	font-size: clamp(34px, 4vw, 48px);
	font-weight: 400;
	line-height: 1.4;

	color: var(--mt-text);
}

.mt-archive-empty > p {
	margin-top: 20px !important;

	font-size: 14px;
	line-height: 2;

	color: var(--mt-taupe);
}

.mt-archive-empty__link {
	display: inline-flex;
	align-items: center;

	gap: 40px;

	margin-top: 32px;

	padding-bottom: 8px;

	border-bottom:
		1px solid currentColor;

	font-family: var(--mt-font-sans);
	font-size: 10px;
	font-weight: 600;

	letter-spacing: 0.16em;

	color: var(--mt-text);
}

.mt-archive-empty__link:hover {
	color: var(--mt-terracotta);
}


/* =========================================================
   12. CATEGORY-SPECIFIC ACCENTS
========================================================= */

/* HOTEL */

body.category-hotel
.mt-archive-hero__number,
body.category-hotel
.mt-archive-card__category {
	color: var(--mt-gold);
}


/* ONSEN & RYOKAN */

body.category-onsen-ryokan
.mt-archive-hero__number,
body.category-onsen-ryokan
.mt-archive-card__category {
	color: var(--mt-apricot);
}


/* DINING */

body.category-dining
.mt-archive-hero__number,
body.category-dining
.mt-archive-card__category {
	color: var(--mt-terracotta);
}


/* GOLF */

body.category-golf
.mt-archive-hero__number,
body.category-golf
.mt-archive-card__category {
	color: var(--mt-taupe);
}


/* STORIES */

body.category-stories
.mt-archive-hero__number,
body.category-stories
.mt-archive-card__category {
	color: var(--mt-gold);
}


/* =========================================================
   13. TABLET
========================================================= */

@media (max-width: 1024px) {

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

	.mt-archive-hero .mt-archive-container {
		padding:
			76px
			0
			72px;
	}

	.mt-archive-content .mt-archive-container {
		padding:
			68px
			0
			84px;
	}

	.mt-archive-grid {
		gap:
			46px
			26px;
	}

}


/* =========================================================
   14. MOBILE
========================================================= */

@media (max-width: 767px) {

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


	/* HERO */

	.mt-archive-hero .mt-archive-container {
		padding:
			60px
			0
			56px;
	}

	.mt-archive-hero__meta {
		gap: 14px;

		margin-bottom: 26px;
	}

	.mt-archive-hero__number {
		font-size: 30px;
	}

	.mt-archive-hero__label {
		font-size: 9px;
	}

	.mt-archive-hero__category {
		font-size: 9px;
	}

	.mt-archive-hero__title {
		font-size: 39px;
		line-height: 1.35;
	}

	.mt-archive-hero__description {
		margin-top: 24px;

		font-size: 13px;
		line-height: 1.95;
	}


	/* CONTENT */

	.mt-archive-content .mt-archive-container {
		padding:
			52px
			0
			66px;
	}


	/* HEAD */

	.mt-archive-content__head {
		align-items: flex-start;

		gap: 20px;

		margin-bottom: 34px;

		padding-bottom: 18px;
	}

	.mt-archive-content__title {
		font-size: 29px;
	}

	.mt-archive-content__count {
		margin-top: 6px;

		font-size: 8px;
	}

	.mt-archive-content__count span {
		display: block;

		margin:
			0
			0
			4px;

		font-size: 24px;
	}


	/* GRID */

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

		gap: 48px;
	}


	/* CARD */

	.mt-archive-card__visual {
		aspect-ratio: 4 / 3;
	}

	.mt-archive-card__body {
		padding-top: 20px;
	}

	.mt-archive-card__meta {
		margin-bottom: 14px;
	}

	.mt-archive-card__title {
		font-size: 25px;
	}

	.mt-archive-card__excerpt {
		margin-top: 14px;

		font-size: 12px;
		line-height: 1.9;
	}

	.mt-archive-card__footer {
		margin-top: 20px;

		padding-top: 14px;
	}


	/* PAGINATION */

	.mt-archive-pagination {
		margin-top: 56px;
	}

	.mt-archive-pagination__list
	.page-numbers {
		min-width: 38px;
		height: 38px;

		padding:
			0
			11px;

		font-size: 9px;
	}


	/* EMPTY */

	.mt-archive-empty {
		padding:
			50px
			0;
	}

	.mt-archive-empty h2 {
		font-size: 32px;
	}

}


/* =========================================================
   15. SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

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

	.mt-archive-hero__title {
		font-size: 35px;
	}

	.mt-archive-card__title {
		font-size: 23px;
	}

}


/* =========================================================
   16. ACCESSIBILITY
========================================================= */

.mt-archive-page a:focus-visible {
	outline:
		1px solid var(--mt-gold);

	outline-offset: 4px;
}


/* =========================================================
   17. REDUCED MOTION
========================================================= */

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

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

}