/*
 * MUSIC（/music/）。基準: reference/wix/screenshots-viewport/music-{pc,sp}-NN.png
 * 作品の部品（template-parts/release-item.php）は MERCH のページでも使うので、.jl-release のクラスで書く。
 *
 * PC: 1 作品が 1 つのセクション（上に 100px。高さはシングル 900px、EP 1250px）
 *   ジャケット 400×400（x=240）、右に 370 幅の欄（x=670）: 種別（下に線）、タイトル、Release、品番、曲目、価格
 *   その下 50px に Apple Music の埋め込み（800 幅の黒い箱。D-033）
 */

.jl-release.is-single {
	min-height: 900px;
}

.jl-release.is-album {
	min-height: 1250px;
}

.jl-release__main {
	display: grid;
	grid-template-columns: 400px 370px;
	column-gap: 30px;
	align-items: start;
}

.jl-release__jacket {
	margin: 0;
}

.jl-release__jacket img {
	width: 100%;
	height: auto;
}

.jl-release__info p {
	margin: 0;
}

.jl-release__type {
	padding-top: 5px;
	padding-bottom: 1px;
	border-bottom: 1px solid var(--jl-gray);
	color: var(--jl-gray);
	font-family: var(--jl-font-ui);
	font-size: 13px;
	font-weight: 300;
	line-height: 16px;
}

.jl-release__title {
	margin: 9px 0 0;
	color: var(--jl-gray-light);
	font-size: 15px;
	font-weight: 400;
	line-height: 21px;
	letter-spacing: 4.5px;
}

.jl-release__date {
	color: var(--jl-gray);
	font-family: var(--jl-font-ui);
	font-size: 11px;
	font-weight: 300;
	line-height: 15.4px;
}

.jl-release__info .jl-release__catalog {
	margin-top: 8px;
	color: var(--jl-white);
	font-family: var(--jl-font-ui);
	font-size: 13px;
	font-weight: 300;
	line-height: 16px;
}

.jl-release__tracks {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: jl-track;
	color: var(--jl-white);
	font-family: var(--jl-font-ui);
	font-size: 14px;
	font-weight: 300;
	line-height: 21px;
	letter-spacing: 2.1px;
}

.jl-release__tracks li {
	counter-increment: jl-track;
}

/* 番号は字間をつけない（現行と同じ） */
.jl-release__tracks li::before {
	content: counter(jl-track) ". ";
	letter-spacing: normal;
}

.jl-release__info .jl-release__price {
	margin-top: 16px;
	color: var(--jl-gray);
	font-family: var(--jl-font-ui);
	font-size: 14px;
	font-weight: 300;
	line-height: 17px;
}

.jl-release .jl-player {
	margin-top: 50px;
}

/* Wix Music のプレーヤーの枠の高さ（シングル 259px、EP 600px）の箱に、Apple の埋め込み（175 / 450）を上下中央で入れる */
.jl-release.is-single .jl-player,
.jl-release.is-album .jl-player {
	display: flex;
	align-items: center;
}

.jl-release.is-single .jl-player {
	min-height: 259px;
}

.jl-release.is-album .jl-player {
	min-height: 600px;
}

/* ---------- タブレット幅（Q-008）: ジャケットと欄（800px）が入らない幅では、ジャケットを縮める ---------- */

@media (min-width: 769px) and (max-width: 860px) {
	.jl-release__main {
		grid-template-columns: minmax(0, 1fr) 370px;
	}
}

/* ---------- SP ---------- */

@media (max-width: 768px) {
	.jl-release.is-single,
	.jl-release.is-album {
		min-height: 0;
	}

	.jl-release__main {
		display: block;
	}

	.jl-release__info .jl-release__type {
		margin-top: calc(25 * var(--u));
		padding-top: 0;
		padding-bottom: calc(1 * var(--u));
		font-size: calc(11 * var(--u));
		line-height: calc(13 * var(--u));
	}

	.jl-release__title {
		margin-top: calc(10 * var(--u));
		font-size: calc(13 * var(--u));
		line-height: calc(18.2 * var(--u));
		letter-spacing: calc(3.9 * var(--u));
	}

	.jl-release__date {
		font-size: calc(10 * var(--u));
		line-height: calc(14 * var(--u));
	}

	.jl-release__info .jl-release__catalog {
		margin-top: calc(12 * var(--u));
		font-size: calc(11 * var(--u));
		line-height: calc(14 * var(--u));
	}

	.jl-release__tracks {
		margin-top: calc(15 * var(--u));
		font-size: calc(13 * var(--u));
		line-height: calc(19.5 * var(--u));
		letter-spacing: calc(1.95 * var(--u));
	}

	.jl-release__info .jl-release__price {
		margin-top: calc(12 * var(--u));
		font-size: calc(13 * var(--u));
		line-height: calc(16 * var(--u));
	}

	.jl-release .jl-player {
		margin-top: calc(22 * var(--u));
	}

	.jl-release.is-single .jl-player,
	.jl-release.is-album .jl-player {
		min-height: 0;
	}
}