/* ==========================================================================
   Single 'music' album template — ColorMag Child
   Tweak the variables below to restyle everything at once.
   Sizes use px/em (not rem) because ColorMag shrinks the root font size,
   which made rem-based text render too small.
   ========================================================================== */

.music-album {
	--album-accent: #0b1a72;        /* title + labels (navy, like the original) */
	--album-text: #2b2f36;
	--album-muted: #6b7280;
	--album-border: #e5e7eb;
	--album-surface: #f8f9fb;
	--album-radius: 12px;
	--album-gap: clamp(16px, 3vw, 32px);

	--store-amazon-bg: #ff9900;
	--store-amazon-fg: #111111;
	--store-cdjapan-bg: #1479b8;
	--store-cdjapan-fg: #ffffff;
	--store-playasia-bg: #1d3c8f;
	--store-playasia-fg: #ffffff;

	font-size: 16px;                /* base for all em sizes below */
}

.music-album,
.music-album *,
.music-album *::before,
.music-album *::after {
	box-sizing: border-box;
}

/* ---------- Title ---------- */
.music-album .album-title {
	margin: 0 0 var(--album-gap);
	color: var(--album-accent);
	font-size: clamp(26px, 18px + 2.2vw, 40px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

/* ---------- Hero layout ---------- */
.album-hero {
	display: grid;
	grid-template-columns: 1fr;            /* mobile: single column */
	grid-template-areas:
		"media"
		"info"
		"buy";
	gap: var(--album-gap);
	margin-bottom: calc(var(--album-gap) * 1.5);
}

.album-hero__media { grid-area: media; display: flex; flex-direction: column; gap: 16px; }
.album-hero__info  { grid-area: info; min-width: 0; display: flex; flex-direction: column; }
.album-buy         { grid-area: buy; }

@media (min-width: 768px) {
	.album-hero {
		grid-template-columns: minmax(220px, 40%) 1fr;
		grid-template-areas:
			"media info"
			"buy   buy";
		align-items: stretch;              /* info column grows to match the cover's height */
	}
}

/* ---------- Cover ---------- */
.album-cover {
	margin: 0;
	border-radius: var(--album-radius);
	overflow: hidden;
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.35);
	aspect-ratio: 1 / 1;
	background: var(--album-surface);
}

.album-cover__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Metadata ---------- */
.album-meta {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--album-border);
}

.album-meta__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px;
	padding: 12px 0;
	border-bottom: 1px solid var(--album-border);
}

@media (min-width: 480px) {
	.album-meta__row {
		grid-template-columns: 125px 1fr;
		gap: 12px;
		align-items: center;
	}
}

/* Desktop: rows stretch evenly so the table fills the cover's height */
@media (min-width: 768px) {
	.album-meta {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.album-meta__row {
		flex: 1;
		padding: 14px 0;
	}
}

.music-album .album-meta dt {
	margin: 0;
	color: var(--album-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.music-album .album-meta dd {
	margin: 0;
	color: var(--album-text);
	font-size: 15px;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
	.music-album .album-meta dt { font-size: 12px; }
	.music-album .album-meta dd { font-size: 15px; }
}

/* ---------- Rating (WP-PostRatings) ---------- */
.album-rating {
	margin-top: 16px;
	color: var(--album-muted);
	font-size: 16px;
}

.album-rating img { vertical-align: middle; }

/* ---------- Buttons (shared) ---------- */
.music-album .album-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;                     /* comfortable tap target */
	padding: 11px 20px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.music-album .album-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.4);
	filter: brightness(1.05);
	text-decoration: none;
}

.music-album .album-btn:focus-visible {
	outline: 3px solid var(--album-accent);
	outline-offset: 3px;
}

.album-btn__icon {
	width: 1.15em;
	height: 1.15em;
	flex: none;
}

/* Review button: outlined, sits under the cover */
.music-album .album-btn--review {
	width: 100%;
	color: var(--album-accent);
	background: #fff;
	border: 2px solid var(--album-accent);
}

.music-album .album-btn--review:hover {
	color: #fff;
	background: var(--album-accent);
}

/* ---------- Purchase row ---------- */
.album-buy {
	padding: 20px;
	border: 1px solid var(--album-border);
	border-radius: var(--album-radius);
	background: var(--album-surface);
}

.music-album .album-buy__title {
	margin: 0 0 14px;
	color: var(--album-accent);
	font-size: 19px;
	font-weight: 700;
}

.album-buy__list {
	display: grid;
	grid-template-columns: 1fr;            /* mobile: stacked full-width buttons */
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.album-buy__list li { margin: 0; padding: 0; }
.album-buy__list li::before { content: none; }

@media (min-width: 600px) {
	.album-buy__list {
		grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	}
}

.music-album .album-btn--store { width: 100%; }

.music-album .album-btn--amazon   { background: var(--store-amazon-bg);   color: var(--store-amazon-fg); }
.music-album .album-btn--cdjapan  { background: var(--store-cdjapan-bg);  color: var(--store-cdjapan-fg); }
.music-album .album-btn--playasia { background: var(--store-playasia-bg); color: var(--store-playasia-fg); }

.music-album .album-btn--amazon:hover,
.music-album .album-btn--amazon:focus   { color: var(--store-amazon-fg); }
.music-album .album-btn--cdjapan:hover,
.music-album .album-btn--cdjapan:focus  { color: var(--store-cdjapan-fg); }
.music-album .album-btn--playasia:hover,
.music-album .album-btn--playasia:focus { color: var(--store-playasia-fg); }

/* ---------- Body content ---------- */
.album-content {
	padding-top: var(--album-gap);
	border-top: 1px solid var(--album-border);
}

@media (prefers-reduced-motion: reduce) {
	.music-album .album-btn { transition: none; }
	.music-album .album-btn:hover { transform: none; }
}