/*
 * Bijoux PCデザイン
 * パソコンの幅（1024px以上）のときだけ効く。スマホの表示は変えない。
 * 色は Bijoux Boost のデザイン（アイボリー×ゴールド）に合わせる。
 */

/* トップに追加した横スクロールと「女優一覧をすべて見る」は、スマホでは出さない */
.bjp-rows,
.bjp-picks,
.bjp-more-actress {
	display: none;
}

@media (min-width: 1024px) {

	/* ---------- ページの幅 ---------- */

	/* 一覧系のページとフッターは、PCの横幅いっぱいに使う（記事ページの本文は読みやすい幅のまま少し広げる） */
	body:not(.single) main.wp-block-group,
	.wp-site-blocks > footer {
		--wp--style--global--content-size: 1180px;
	}
	body.single main.wp-block-group {
		--wp--style--global--content-size: 840px;
	}

	/* 文章だけのブロックは、横に長くなりすぎないようにする */
	body.home .bb-hero > p,
	body.home .bjx-shindan,
	body:not(.single) main .bb-section > p.wp-block-paragraph {
		max-width: 760px;
	}
	/* 見出しと左端をそろえる */
	body.home .bjx-shindan,
	body:not(.single) main .bb-section > p.wp-block-paragraph {
		margin-inline: 0 auto !important;
	}

	/* トップのヒーローを低くして、作品がすぐ見えるようにする */
	body.home .bb-hero {
		padding-block: 48px 40px;
	}
	body.home .bb-hero .bb-hero-logo {
		max-width: 560px;
	}

	/* ---------- 横スクロールの列（トップの新着レビュー・セール中） ---------- */

	.bjp-rows,
	.bjp-picks {
		display: block;
	}
	/* PICK UP：横スクロールを出したら、元の2件の一覧は隠す */
	body.home .bb-section:has(.bjp-picks) .bb-collection {
		display: none;
	}
	.bjp-picks .bjp-item {
		flex-basis: 200px;
	}
	.bjp-picks .bjp-nav {
		top: 128px;
	}

	/* 右端の「もっと見る」 */
	.bjp-cover.bjp-more-tile {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
		border: 1px solid var(--bb-gold, #b8924a);
		background: linear-gradient(180deg, #fffdf8, #f3ead6);
		color: var(--bb-gold-dark, #8a6a2e);
		font-weight: 700;
		letter-spacing: .08em;
	}
	.bjp-more-arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 1px solid var(--bb-gold, #b8924a);
		border-radius: 50%;
		font-size: 20px;
		transition: background .2s, color .2s;
	}
	.bjp-item-more a:hover .bjp-more-arrow,
	.bjp-item-more a:focus-visible .bjp-more-arrow {
		background: var(--bb-gold, #b8924a);
		color: #fff;
	}
	.bjp-row {
		padding-block: 40px 8px;
	}
	.bjp-empty {
		margin: 0;
		padding: 28px 0;
		border: 1px dashed #e9d5a1;
		border-radius: 4px;
		color: #665d52;
		font-size: 14px;
		text-align: center;
	}

	.bjp-head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 16px;
	}
	.bjp-head h2 {
		margin: 0 0 16px;
	}
	.bjp-more,
	.bjp-more-actress a {
		color: var(--bb-wine, #673243);
		font-size: 14px;
		letter-spacing: .06em;
		white-space: nowrap;
	}
	.bjp-more::after,
	.bjp-more-actress a::after {
		content: " →";
	}
	.bjp-scroller {
		position: relative;
	}
	.bjp-track {
		display: flex;
		gap: 18px;
		margin: 0;
		padding: 4px 2px 14px;
		list-style: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: thin;
		scrollbar-color: var(--bb-gold-light, #e9d5a1) transparent;
	}
	.bjp-item {
		flex: 0 0 172px;
		margin: 0;
		scroll-snap-align: start;
	}
	.bjp-item a {
		display: block;
		color: inherit;
		text-decoration: none;
	}
	.bjp-cover {
		position: relative;
		display: block;
		aspect-ratio: 400 / 538;
		overflow: hidden;
		border: 1px solid var(--bb-gold-light, #e9d5a1);
		border-radius: 4px;
		background: #f3eee6;
		box-shadow: 0 10px 22px -16px rgba(138, 106, 46, .6);
	}
	.bjp-cover img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 100% 50%; /* パッケージ画像の右半分（表紙）を見せる */
		transition: transform .3s;
	}
	.bjp-item a:hover .bjp-cover img,
	.bjp-item a:focus-visible .bjp-cover img {
		transform: scale(1.04);
	}
	.bjp-badge {
		position: absolute;
		top: 8px;
		left: 8px;
		z-index: 1;
		padding: 2px 8px;
		border-radius: 2px;
		background: var(--bb-wine, #673243);
		color: #fff;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .06em;
	}
	.bjp-title {
		display: -webkit-box;
		margin-top: 10px;
		overflow: hidden;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.5;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.bjp-excerpt {
		display: -webkit-box;
		margin-top: 4px;
		overflow: hidden;
		color: #665d52;
		font-size: 12px;
		line-height: 1.6;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.bjp-item a:hover .bjp-title {
		color: var(--bb-wine, #673243);
	}

	/* 左右の矢印（スクロールできないほうは薄くする） */
	.bjp-nav {
		position: absolute;
		top: 110px;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid var(--bb-gold, #b8924a);
		border-radius: 50%;
		background: rgba(255, 253, 248, .95);
		color: var(--bb-gold-dark, #8a6a2e);
		font-size: 26px;
		line-height: 1;
		cursor: pointer;
		box-shadow: 0 6px 16px -8px rgba(138, 106, 46, .7);
		transform: translateY(-50%);
	}
	.bjp-prev {
		left: -22px;
	}
	.bjp-next {
		right: -22px;
	}
	.bjp-nav:hover {
		background: var(--bb-gold, #b8924a);
		color: #fff;
	}
	.bjp-nav[disabled] {
		opacity: 0;
		pointer-events: none;
	}

	/* ---------- PICK UP（トップ）・PICKS ページのカード ---------- */

	/* トップの PICK UP は横に並べ、多いときは横スクロール */
	body.home .bb-collection .bb-cards {
		display: flex;
		gap: 20px;
		padding-bottom: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
	}
	body.home .bb-collection .bb-card {
		flex: 0 0 calc((100% - 40px) / 3);
		scroll-snap-align: start;
	}

	/* PICKS ページは3列（広い画面は4列） */
	body:not(.home) .bb-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}

	/* カードの画像は表紙（縦長）に、文章は小さめに */
	.bb-card {
		padding: 14px !important;
	}
	.bb-card img {
		aspect-ratio: 400 / 538;
		object-position: 100% 50%;
	}
	.bb-card h3 {
		margin-block: 12px 4px;
		font-size: 15px;
		line-height: 1.5;
	}
	.bb-card p {
		margin-block: 4px;
		font-size: 13px;
		line-height: 1.7;
	}

	/* ---------- 記事一覧（ARTICLES・カテゴリー・タグ） ---------- */

	/* 縦に1列 → 表紙つきのカードを4列に */
	body:not(.single) .wp-block-post-template:has(.bjb-thumb) {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px 22px;
	}
	body:not(.single) .wp-block-post-template > li:has(.bjb-thumb) {
		display: block;
		margin: 0;
		padding: 0;
		border-bottom: 0;
	}
	body:not(.single) .wp-block-post-template .wp-block-group:has(> .bjb-thumb) {
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	body:not(.single) .wp-block-post-template .wp-block-group:has(> .bjb-thumb) > * {
		margin-block: 0 4px;
	}
	body:not(.single) .wp-block-post-template .bjb-thumb {
		order: -1;
		margin: 0 0 10px !important;
	}
	body:not(.single) .wp-block-post-template .bjb-thumb img {
		border: 1px solid var(--bb-gold-light, #e9d5a1);
		box-shadow: 0 10px 22px -16px rgba(138, 106, 46, .6);
	}
	body:not(.single) .wp-block-post-template .wp-block-post-title {
		font-size: 15px;
		line-height: 1.5;
	}
	body:not(.single) .wp-block-post-template .wp-block-post-excerpt {
		font-size: 13px;
		line-height: 1.7;
	}
	body:not(.single) .wp-block-post-template .wp-block-post-excerpt__more-text {
		display: none; /* カード全体がリンクの代わりなので「続きを読む」は省く */
	}

	/* ---------- カテゴリー（広い画面では4つの分類を横に並べる） ---------- */

	/* トップのカテゴリーは、セクション内のCSSより優先されるよう body から指定する */
	body .bb-home-category .bb-categories > li > a {
		font-size: 17px;
	}
	body .bb-home-category .bb-categories .children a {
		font-size: 15px;
	}

	/* ---------- 女優一覧（写真を上にした縦長のカード） ---------- */

	body ul.bb-actress-directory {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
	}
	body ul.bb-actress-directory > li.bb-actress-card > a.bb-actress-link {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 12px;
		text-align: center;
	}
	body .bb-actress-directory .bb-actress-portrait {
		flex: none;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 5;
	}
	body .bb-actress-directory .bb-actress-placeholder {
		width: 40%;
		height: auto;
	}
	body .bb-actress-directory .bb-actress-arrow {
		display: none;
	}
	body .bb-actress-directory .bb-actress-name {
		font-size: 15px;
	}
	/* トップでは2段まで表示して「女優一覧をすべて見る」へ */
	body.home ul.bb-actress-directory > li.bb-actress-card:nth-child(n+9) {
		display: none;
	}
	ul.bb-actress-directory > li.bjp-more-actress {
		display: block;
		grid-column: 1 / -1;
		margin: 0;
		padding: 0;
		border: 0;
		text-align: right;
		list-style: none;
	}
}

/* 広い画面（1280px以上）：列を増やす */
@media (min-width: 1280px) {
	body:not(.single) .wp-block-post-template:has(.bjb-thumb),
	body:not(.home) .bb-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	body.home .bb-collection .bb-card {
		flex-basis: calc((100% - 60px) / 4);
	}
	body .bb-home-category .bb-categories {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	body ul.bb-actress-directory {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	body.home ul.bb-actress-directory > li.bb-actress-card:nth-child(n+9) {
		display: list-item;
	}
	body.home ul.bb-actress-directory > li.bb-actress-card:nth-child(n+13) {
		display: none;
	}
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
	.bjp-track {
		scroll-behavior: auto;
	}
	.bjp-cover img {
		transition: none;
	}
}