/*
 * Blanky Studio – Archive Page Styles
 *
 * works-archive.html モックアップ準拠
 * 標準ブロック（wp:group, wp:query, wp:post-template）ベース
 *
 * @package blanky-studio
 * @since 1.0.0
 */

/* ============================================================
   Page Hero (wp:group with background image)
   ============================================================ */
.studio-page-hero {
	position: relative;
	min-height: 45vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	border-bottom: 1px solid var(--studio-color-slate-200);
}

.studio-page-hero-bg {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

.studio-page-hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.studio-page-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: flex-end;
	padding: 0;
}

/* コンテンツ幅・padding はヘッダーと同じ基準で揃える */
.studio-page-hero-content {
	width: 100%;
	max-width: var(--studio-max-w-full);
	margin-inline: auto;
	padding: 7rem 1.5rem 3rem;
}

@media (min-width: 768px) {
	.studio-page-hero-content {
		padding: 8rem 3rem 3.5rem;
	}
}

.is-dark .studio-page-hero {
	border-color: var(--studio-color-slate-800);
}

.studio-page-hero-eyebrow {
	font-family: var(--wp--preset--font-family--noto-sans);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 1.25rem;
}

.studio-page-hero-title {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: clamp(2.5rem, 6vw, 5rem);
	font-weight: 300;
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 0;
	color: #fff;
}

.studio-page-hero-title em {
	font-style: italic;
	color: rgba(255, 255, 255, 0.6);
}

/* 検索結果は見出しが検索キーワードそのもの。
   長い語を入れられても破綻しないよう、少しだけ級数を落とす
   （body.search は WordPress が付ける標準のクラス）。 */
body.search .studio-page-hero-title {
	font-size: clamp(2rem, 4.5vw, 3.5rem);
}

/* コアの query-title は is_archive() が偽のとき、要素ごと何も出力しない
   （wp-includes/blocks/query-title.php の早期リターン）。
   投稿ページ（is_home）は is_archive に含まれないため、そこでは
   パターンに置いた既定の見出しが出る。

   カテゴリ・タグ・投稿者・日付では query-title が出力されるので、
   その後続の兄弟である既定の見出しを隠す。
   query-title が出ない場合はこのセレクタ自体が成立しないため、
   :has() を使わずに済む。 */
.wp-block-query-title ~ .studio-page-hero-title-fallback {
	display: none;
}

/* ============================================================
   Filter Bar
   ============================================================ */
.studio-archive-filter {
	padding: 2.5rem 1.5rem;
	border-bottom: 1px solid var(--studio-color-slate-200);
	position: sticky;
	top: 0;
	z-index: 30;
	background-color: var(--wp--preset--color--background);
	transition: background-color 0.3s;
}

.is-dark .studio-archive-filter {
	border-color: var(--studio-color-slate-800);
}

.studio-archive-filter-inner {
	gap: 0.5rem;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	flex-wrap: nowrap;
}

.studio-archive-filter-inner::-webkit-scrollbar {
	display: none;
}

.studio-archive-filter-btn {
	flex-shrink: 0;
	margin: 0;
}

.studio-archive-filter-btn a {
	display: inline-block;
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--studio-color-slate-300);
	font-family: var(--wp--preset--font-family--noto-sans);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	text-decoration: none;
	color: var(--studio-color-slate-600);
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
	white-space: nowrap;
}

.studio-archive-filter-btn a:hover {
	background-color: var(--studio-color-slate-100);
	color: var(--studio-color-slate-900);
}

.studio-archive-filter-btn.is-active a {
	background-color: var(--studio-color-slate-900);
	border-color: var(--studio-color-slate-900);
	color: #fff;
}

.is-dark .studio-archive-filter-btn a {
	border-color: var(--studio-color-slate-700);
	color: var(--studio-color-slate-400);
}

.is-dark .studio-archive-filter-btn a:hover {
	background-color: var(--studio-color-slate-800);
	color: var(--studio-color-slate-100);
}

.is-dark .studio-archive-filter-btn.is-active a {
	background-color: var(--studio-color-slate-100);
	border-color: var(--studio-color-slate-100);
	color: #000;
}

@media (min-width: 640px) {
	.studio-archive-filter {
		padding: 2.5rem 3rem;
	}
}

/* ============================================================
   Archive Query & Grid
   ============================================================ */
.studio-archive-query {
	max-width: var(--studio-max-w-full);
	margin: 0 auto;
	padding: 3rem 1.5rem 5rem;
}

/* グリッド — wp:post-template は <ul> を出力する。
   WordPress のレイアウト機能がインラインスタイルを当てるため !important で上書きする。

   768px 以上は 12 カラムのベントーグリッド。6件を1周期として
   「8+4 → 4+8 → 6+6」を繰り返す。各行の span 合計が必ず 12 になるので、
   最終行に空セルが生じない（旧レイアウトはここで大きな余白が出ていた）。
   1ページ 8 件はちょうど 4 行で終わる。 */
body .studio-archive-query .studio-archive-grid.wp-block-post-template {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 3rem !important;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* li のデフォルトスタイルをリセット */
body .studio-archive-query .studio-archive-grid.wp-block-post-template > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.studio-archive-query {
		padding: 3rem 3rem 5rem;
	}
}

@media (min-width: 768px) {
	body .studio-archive-query .studio-archive-grid.wp-block-post-template {
		grid-template-columns: repeat(12, 1fr) !important;
		gap: 4rem 1.5rem !important;
	}

	/* 1件目: 大（8カラム / 16:9） */
	body .studio-archive-query .studio-archive-grid > li:nth-child(6n + 1) {
		grid-column: span 8;
	}

	/* 2件目: 小（4カラム / 3:4）。下にずらしてリズムをつくる */
	body .studio-archive-query .studio-archive-grid > li:nth-child(6n + 2) {
		grid-column: span 4;
		margin-top: 5rem;
	}

	/* 3件目: 小（4カラム / 3:4） */
	body .studio-archive-query .studio-archive-grid > li:nth-child(6n + 3) {
		grid-column: span 4;
	}

	/* 4件目: 大（8カラム / 16:9）。前行と左右を反転させる */
	body .studio-archive-query .studio-archive-grid > li:nth-child(6n + 4) {
		grid-column: span 8;
		margin-top: 5rem;
	}

	/* 5・6件目: 同寸ペア（6カラム / 4:3）。周期の区切りになる */
	body .studio-archive-query .studio-archive-grid > li:nth-child(6n + 5),
	body .studio-archive-query .studio-archive-grid > li:nth-child(6n + 6) {
		grid-column: span 6;
	}
}

/* ============================================================
   Archive Item (each post in the grid)
   ============================================================ */
.studio-archive-item {
	position: relative;
}

/* Featured image — wp:post-featured-image outputs <figure><a><img></a></figure>
   アイキャッチ未設定の投稿では render_block のフォールバックが
   <img> を持たない figure を返すため、非表示にはしない
   （非表示にすると画像枠が消えてカードの高さが揃わなくなる）。 */
.studio-archive-item .studio-archive-item-img {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background-color: var(--studio-color-slate-200);
}

.is-dark .studio-archive-item .studio-archive-item-img {
	background-color: #1A1A17;
}

.studio-archive-item .studio-archive-item-img a {
	display: block;
	width: 100%;
	height: 100%;
}

.studio-archive-item .studio-archive-item-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%);
	transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.5s;
	display: block;
}

.studio-archive-item:hover .studio-archive-item-img img {
	transform: scale(1.03);
	filter: grayscale(0%);
}

@media (min-width: 768px) {
	body .studio-archive-query .studio-archive-grid > li:nth-child(6n + 1) .studio-archive-item-img,
	body .studio-archive-query .studio-archive-grid > li:nth-child(6n + 4) .studio-archive-item-img {
		aspect-ratio: 16 / 9;
	}

	body .studio-archive-query .studio-archive-grid > li:nth-child(6n + 2) .studio-archive-item-img,
	body .studio-archive-query .studio-archive-grid > li:nth-child(6n + 3) .studio-archive-item-img {
		aspect-ratio: 3 / 4;
	}

	body .studio-archive-query .studio-archive-grid > li:nth-child(6n + 5) .studio-archive-item-img,
	body .studio-archive-query .studio-archive-grid > li:nth-child(6n + 6) .studio-archive-item-img {
		aspect-ratio: 4 / 3;
	}
}

/* ============================================================
   タイトル・カテゴリ（画像の下）
   以前は画像に重ねてホバー時だけ表示していたが、一覧は拾い読みする
   場所なので常に読めるようにする。
   ============================================================ */
.studio-archive-item-body {
	margin-top: 1.25rem;
}

.studio-archive-item-title {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1.3;
	margin: 0 0 0.35rem;
}

.studio-archive-item-title a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s;
}

.studio-archive-item-title a:hover {
	opacity: 0.55;
}

.studio-archive-item-cat {
	font-family: var(--wp--preset--font-family--noto-sans);
	font-size: 0.6875rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--studio-color-slate-500);
	margin: 0;
}

.studio-archive-item-cat a {
	color: inherit;
	text-decoration: none;
}

.is-dark .studio-archive-item-title {
	color: var(--studio-color-slate-100);
}

.is-dark .studio-archive-item-cat {
	color: var(--studio-color-slate-400);
}

/* ============================================================
   No Results
   ============================================================ */
.studio-archive-no-results {
	text-align: center;
	padding: 6rem 0;
	font-family: var(--wp--preset--font-family--noto-sans);
	font-size: 0.875rem;
	color: var(--studio-color-slate-400);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ============================================================
   Pagination
   ============================================================ */
.studio-archive-pagination {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--studio-color-slate-200);
}

.studio-archive-pagination .wp-block-query-pagination-previous,
.studio-archive-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.75rem;
	border-radius: 9999px;
	font-size: 0.875rem;
	white-space: nowrap;
	text-decoration: none;
	color: var(--studio-color-slate-500);
	transition: background-color 0.2s, color 0.2s;
}

.studio-archive-pagination .wp-block-query-pagination-previous:hover,
.studio-archive-pagination .wp-block-query-pagination-next:hover {
	background-color: var(--studio-color-slate-100);
	color: var(--studio-color-slate-900);
}

.studio-archive-pagination .wp-block-query-pagination-numbers a,
.studio-archive-pagination .wp-block-query-pagination-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--studio-color-slate-600);
	transition: background-color 0.2s, color 0.2s;
}

.studio-archive-pagination .wp-block-query-pagination-numbers a:hover {
	background-color: var(--studio-color-slate-100);
	color: var(--studio-color-slate-900);
}

.studio-archive-pagination .wp-block-query-pagination-numbers .current {
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
}

/* ============================================================
   Dark Mode
   ============================================================ */
.is-dark .studio-archive-pagination {
	border-top-color: var(--studio-color-slate-800);
}

.is-dark .studio-archive-pagination .wp-block-query-pagination-previous:hover,
.is-dark .studio-archive-pagination .wp-block-query-pagination-next:hover {
	background-color: var(--studio-color-slate-800);
	color: #fff;
}

.is-dark .studio-archive-pagination .wp-block-query-pagination-numbers a {
	color: var(--studio-color-slate-300);
}

.is-dark .studio-archive-pagination .wp-block-query-pagination-numbers a:hover {
	background-color: var(--studio-color-slate-800);
	color: #fff;
}

/* ============================================================
   render_block が中身を空で返したときの外枠の始末

   フィルターバーと投稿者プロフィールは、外枠を通常のブロックで組み、
   中身だけを render_block で差し替えている（WordPress のレイアウト
   クラスを再現せずに済ませるため）。出すものが無いページでは中身が
   空になるので、外枠ごと隠す。
   ============================================================ */

.studio-archive-filter:not(:has(.studio-archive-filter-btn)) {
	display: none;
}

.studio-author-profile:not(:has(.studio-author-bio-text)) {
	display: none;
}