/**
 * Discography / release-archive grid: hover & keyboard-focus affordance.
 *
 * Loaded only on the discography page and the band / label release
 * archives - see decibel_child_enqueue_discography_styles() in
 * functions.php. It never touches any other listing on the site.
 *
 * Why this file exists:
 *
 * 1. The parent theme's ONLY hover state for release-layout-standard is
 *
 *        .release-layout-standard .entry:hover .img-bg,
 *        .release-layout-standard .entry:hover .entry-image img { opacity: .66; }
 *
 *    i.e. the cover fades to 66% and the inline dominant-colour <div class="img-bg">
 *    bleeds through as a heavy tint. It reads as "disabled", not "active".
 *    We override that back to full strength and give a real cue instead:
 *    a small cover zoom, an accent-coloured title, and a soft drop shadow.
 *
 * 2. There was no keyboard-focus indicator at all on the full-card link
 *    (a.entry-link-mask). We add a visible :focus-visible ring, and mirror
 *    the hover treatment via :focus-within so a tabbed-to card looks the
 *    same as a hovered one.
 *
 * #c74735 is the site's Customizer-configured accent colour (the same
 * warm brick tone used across the theme). It has no CSS custom property,
 * so it is repeated literally here.
 *
 * Selectors are prefixed with .release-items .entry-release-grid.entry so
 * they out-specify the parent's .release-layout-standard .entry rules
 * without needing !important (except on the opacity reset, which fights an
 * equally-specific parent :hover rule).
 */

.release-items .entry-release-grid .entry-image {
	transition: transform .45s cubic-bezier(.33, .02, 0, .94),
	            filter .45s ease;
}

.release-items .entry-release-grid .entry-image img {
	transition: transform .55s cubic-bezier(.33, .02, 0, .94),
	            opacity .3s ease;
}

/* Keep the cover at full strength - cancel the parent's opacity: .66 dim. */
.release-items .entry-release-grid.entry:hover .entry-image img,
.release-items .entry-release-grid.entry:focus-within .entry-image img {
	opacity: 1 !important;
	transform: scale(1.05);
}

.release-items .entry-release-grid.entry:hover .img-bg,
.release-items .entry-release-grid.entry:focus-within .img-bg {
	opacity: 1 !important;
}

/* Lift the cover slightly and float it above the light page. */
.release-items .entry-release-grid.entry:hover .entry-image,
.release-items .entry-release-grid.entry:focus-within .entry-image {
	transform: translateY(-4px);
	filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .28));
}

/* Title picks up the theme accent on hover / keyboard focus. */
.release-items .entry-release-grid .entry-title a {
	transition: color .25s ease;
}

.release-items .entry-release-grid.entry:hover .entry-title a,
.release-items .entry-release-grid.entry:focus-within .entry-title a {
	color: #c74735;
}

/* Keyboard-focus ring on the full-card link. */
.release-items .entry-release-grid .entry-link-mask:focus-visible {
	outline: 3px solid #c74735;
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.release-items .entry-release-grid.entry:hover .entry-image,
	.release-items .entry-release-grid.entry:focus-within .entry-image,
	.release-items .entry-release-grid.entry:hover .entry-image img,
	.release-items .entry-release-grid.entry:focus-within .entry-image img {
		transform: none;
	}
}


/**
 * ===================================================================
 * Discography hero - album-cover montage
 *
 * The parent theme's standard #hero renders a shared 2020 header photo
 * (a low-res, blurred crop) behind a small centred page title. On the
 * discography index we swap that for a filmstrip of recent album covers
 * - the covers ARE the discography - and make the title a statement.
 *
 * Markup comes from decibel_child_discography_hero_montage() and
 * decibel_child_discography_hero_subline() in functions.php. Everything
 * here is scoped to body.discography-page so no other hero is affected.
 * ===================================================================
 */

.discography-page #hero {
	background-color: #0d0d0d;
	min-height: 46vh;
}

/* The theme's default photo (and its Ken Burns zoom) is now redundant. */
.discography-page #hero > .img-bg {
	display: none;
}

.disco-hero-montage {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	overflow: hidden;
	pointer-events: none;
}

.disco-hero-montage__tile {
	flex: 1 1 auto;
	width: 12.5%;
	min-width: 150px;
	height: 100%;
}

.disco-hero-montage__tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.3) brightness(0.66) contrast(0.96);
}

/* Scrim: vertical for legibility, horizontal to anchor the left-aligned text. */
.disco-hero-montage::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(13, 13, 13, 0.5) 0%, rgba(13, 13, 13, 0.78) 62%, rgba(13, 13, 13, 0.93) 100%),
		linear-gradient(90deg, rgba(13, 13, 13, 0.82) 0%, rgba(13, 13, 13, 0.34) 46%, rgba(13, 13, 13, 0.32) 100%);
}

/* Hero content rides above the montage. */
.discography-page #hero-inner {
	position: relative;
	z-index: 1;
}

/* The theme centres .post-title-container in a 960px box; realign it to
 * the album grid below and left-set the text. */
.discography-page #hero .post-title-container,
.discography-page #hero .post-meta-container {
	max-width: 1400px;
	margin: 0 auto;
	padding-left: 30px;
	padding-right: 30px;
	text-align: left;
}

/* font-size carries !important because a theme media-query rule (.post-title
 * at a fixed px) otherwise wins; scope is a single element so it's contained.
 * NB: the theme sets html { font-size: 10px }, so 1rem = 10px here. */
.discography-page #hero-content .post-title {
	margin: 0;
	font-size: clamp(3.4rem, 7.5vw, 7.5rem) !important;
	line-height: 1.03;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.disco-hero-subline {
	margin: 14px 0 0;
	font-size: clamp(1.3rem, 1.5vw, 1.6rem);
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.74);
}