/* ==========================================================================
   Nominees page
   Figma: JUNOS - Winners Nominees Updates
     130:3400  Songwriter of the Year  ->  .nominees-songwriter-section
     130:3329  Name of the Award       ->  .nominees-nameof-award-section
   Used by: awards-nominees.php

   Both sections share the same shell - a two-tone heading straddling the top
   of a black panel, a sponsor line, then a row of cards - so the shell lives
   in .nominees-block / -heading / -panel / -sponsor and only the rows and the
   card bodies differ.

   Standalone on purpose: this page does not depend on winners-nominees-page.css,
   so the credit icons are redefined here at the sizes the nominee cards use.
   ========================================================================== */

.nominees-songwriter-section,
.nominees-nameof-award-section {
	--nominees-gold: #b7a261;
	--nominees-gold-light: #dccf9a;
	--nominees-panel-bg: #000;
	padding: 40px 0;
	position: relative;
}

.nominees-songwriter-section {
	--nominees-gutter: 40px;
}

.nominees-nameof-award-section {
	--nominees-gutter: 32px;
}

.nominees-songwriter-section *,
.nominees-songwriter-section *:before,
.nominees-songwriter-section *:after,
.nominees-nameof-award-section *,
.nominees-nameof-award-section *:before,
.nominees-nameof-award-section *:after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Shared shell: heading + panel
   The heading straddles the panel's top edge: Figma trims its text box to
   cap-height/baseline and then pulls the panel up 16px. The margins below
   reproduce that without text-box-trim by absorbing the 8px above the caps
   and the 10px below the baseline that a line-height:1 box adds at 48px.
   -------------------------------------------------------------------------- */

.nominees-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	isolation: isolate;
}
.nominees-block h2{
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* no row-gap: when the two halves stack they should sit on their own
	   natural line spacing, as they do in the mobile design */
	gap: 0 14px;
	margin: -8px 0 -26px;
	padding: 0 40px;
	font-family: 'CalibreWeb-Bold', sans-serif;
	font-size: 48px;
	line-height: 1;
	text-transform: uppercase;
	word-break: break-word;
}
.nominees-block h2 span{
	-webkit-text-stroke: 1px #b7a261;
	font-stretch: normal;
	font-style: normal;
	letter-spacing: normal;
	color: rgba(255, 255, 255, 0);
}

@supports (text-box-trim: trim-both) {
	.nominees-block h2 {
		text-box-trim: trim-both;
		text-box-edge: cap alphabetic;
		margin: 0 0 -16px;
	}
}

.nominees-heading-primary {
	color: #fff;
}

/* Second half is drawn as a gold outline with no fill */
.nominees-heading-outline {
	color: var(--nominees-gold);
}

@supports (-webkit-text-stroke: 1px #000) {
	.nominees-heading-outline {
		color: transparent;
		-webkit-text-stroke: 1px var(--nominees-gold);
	}
}

.nominees-panel {
	position: relative;
	z-index: 1;
	width: 100%;
	background: var(--nominees-panel-bg);
	padding: 32px 40px 40px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.nominees-sponsor {
	margin: 0;
	font-family: 'CalibreWeb-Regular', sans-serif;
	font-size: 20px;
	line-height: 1.2;
	color: #fff;
	opacity: 0.5;
	word-break: break-word;
}

/* --------------------------------------------------------------------------
   Rows
   Card width is set per row so each row stays a plain wrapping flex
   container: songwriter is four across, name-of-award is five.
   -------------------------------------------------------------------------- */

.nominees-songwriter-row,
.nominees-award-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 42px var(--nominees-gutter);
}

.nominee-card {
	flex: 0 0 auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.nominees-songwriter-row > .nominee-card {
	width: calc((100% - (3 * var(--nominees-gutter))) / 4);
}

.nominees-award-row > .nominee-card {
	width: calc((100% - (4 * var(--nominees-gutter))) / 5);
}

/* --------------------------------------------------------------------------
   Shared card photo
   -------------------------------------------------------------------------- */

.nominee-card-media {
	width: 100%;
}

.nominee-card-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 304 / 235;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Songwriter card: photo, nominee, publisher, then the nominated songs
   -------------------------------------------------------------------------- */

.nominee-card-top {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.nominee-card-identity {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nominee-card-name {
	margin: 0;
	font-family: 'TiemposHeadline-Regular', serif;
	font-weight: normal;
	font-size: 24px;
	line-height: 1.2;
	color: var(--nominees-gold);
	word-break: break-word;
}

.nominee-card-name a {
	color: inherit;
	text-decoration: none;
}

.nominee-card-name a:hover,
.nominee-card-name a:focus {
	color: var(--nominees-gold-light);
}

.nominee-card-publisher {
	margin: 0;
	font-family: 'Calibre-Semibold', sans-serif;
	font-size: 18px;
	line-height: 1.2;
	color: #fff;
	word-break: break-word;
}

/* Dividers - gold under the nominee, white between the songs */

.nominee-card-divider {
	display: block;
	width: 100%;
	height: 1px;
	border: 0;
	margin: 0;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		#fff 50%,
		rgba(255, 255, 255, 0) 100%
	);
}

.nominee-card-divider--gold {
	background: linear-gradient(
		90deg,
		rgba(183, 162, 97, 0) 0%,
		#b7a261 50%,
		rgba(183, 162, 97, 0) 100%
	);
}

.nominee-song {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.nominee-song-title {
	margin: 0;
	font-family: 'TiemposHeadline-Regular', serif;
	font-weight: normal;
	font-size: 20px;
	line-height: 1.2;
	color: #fff;
	word-break: break-word;
}

.nominee-song-title a {
	color: inherit;
	text-decoration: none;
}

.nominee-song-title a:hover,
.nominee-song-title a:focus {
	color: var(--nominees-gold);
}

.nominee-song-writers {
	margin: 0;
	font-family: 'CalibreWeb-Regular', sans-serif;
	font-size: 16px;
	line-height: 1.2;
	color: #fff;
	word-break: break-word;
}

/* --------------------------------------------------------------------------
   Name-of-award card: photo, then the song/album and who it belongs to
   -------------------------------------------------------------------------- */

.award-nominee-body {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.award-nominee-title {
	margin: 0;
	font-family: 'TiemposHeadline-Regular', serif; 
	font-weight: normal;
	/* font-family: 'CalibreWeb-Medium', sans-serif;
	font-weight: 600; */
	font-size: 20px;
	line-height: 1.2;
	color: var(--nominees-gold);
	word-break: break-word;
}

.award-nominee-title a {
	color: inherit;
	text-decoration: none;
}

.award-nominee-title a:hover,
.award-nominee-title a:focus {
	/* color: var(--nominees-gold-light); */
	color: #fff;
}

/* --------------------------------------------------------------------------
   Credit rows - shared, the award cards just run a size bigger
   -------------------------------------------------------------------------- */

.nominee-song-credits,
.award-nominee-credits {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* style.css paints a gold dot on every `ul > li`; drop it inside these cards */
.nominee-song-credits > li:before,
.award-nominee-credits > li:before {
	content: none;
	display: none;
}

.nominee-song-credit,
.award-nominee-credit {
	margin: 0;
	display: flex;
	gap: 8px;
	font-family: 'CalibreWeb-Regular', sans-serif;
	font-size: 16px;
	line-height: 1.2;
	color: #fff;
	word-break: break-word;
}

.award-nominee-credit {
	font-size: 20px;
}

.nominee-song-credit a,
.award-nominee-credit a {
	color: inherit;
	text-decoration: none;
}

.nominee-song-credit a:hover,
.nominee-song-credit a:focus,
.award-nominee-credit a:hover,
.award-nominee-credit a:focus {
	color: var(--nominees-gold);
}

/* --------------------------------------------------------------------------
   Credit icons
   Figma uses Font Awesome `record-vinyl`, `microphone-circle` and `pen-circle`
   in gold. All three are drawn here so they do not depend on that kit.
   -------------------------------------------------------------------------- */

.nominee-credit-icon {
	flex: 0 0 14px;
	border-radius: 0%;
	color: var(--nominees-gold);
	display: flex;
	flex-wrap: wrap;
	font-size: 18px;
	line-height: 1;
	top: 4px;
	position: relative;
}


/* 16px variant used by the name-of-award cards */
.nominee-credit-icon--md {
	width: 16px;
	height: 16px;
	top: 5px;
	position: relative;
	font-size: 9px;
}

.nominee-credit-icon--artist:before {
	content: '\f130'; /* microphone */
}

.nominee-credit-icon--songwriter:before {
	content: '\f304'; /* pen */
	font-size: 8px;
}

/* A record's concentric rings; `closest-side` makes the ray half the box,
   so the stops scale with the size. */
.nominee-credit-icon--album {
	background: radial-gradient(
		circle closest-side at 50% 50%,
		var(--nominees-panel-bg) 0 13.75%,
		var(--nominees-gold) 13.75% 35%,
		var(--nominees-panel-bg) 35% 60%,
		var(--nominees-gold) 60% 90%,
		transparent 90% 100%
	);
}

.nominee-credit-icon--album:before {
	content: none;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media only screen and (min-width: 1024px) {
	.nominees-songwriter-row.row-of-5 > .nominee-card{width: calc((100% - (4 * var(--nominees-gutter))) / 5);}
}
@media only screen and (max-width: 1200px) {
	.nominees-songwriter-section {
		--nominees-gutter: 32px;
	}

	.nominees-nameof-award-section {
		--nominees-gutter: 24px;
	}

	.nominees-block h2{
		font-size: 40px;
		margin: -6px 0 -24px;
		padding: 0 32px;
	}

	@supports (text-box-trim: trim-both) {
		.nominees-block h2{
			margin: 0 0 -16px;
		}
	}

	.nominees-panel {
		padding: 28px 32px 32px;
	}

	/* four across */
	.nominees-award-row > .nominee-card {
		width: calc((100% - (3 * var(--nominees-gutter))) / 4);
	}
}

@media only screen and (max-width: 1023px) {
	/* songwriter two across, award three */
	.nominees-songwriter-row > .nominee-card {
		width: calc((100% - var(--nominees-gutter)) / 2);
	}

	.nominees-award-row > .nominee-card {
		width: calc((100% - (2 * var(--nominees-gutter))) / 3);
	}
}

@media only screen and (max-width: 767px) {
	.nominees-songwriter-section,
	.nominees-nameof-award-section {
		--nominees-gutter: 24px;
		padding: 24px 0;
	}

	/* Mobile keeps the 40px heading and the panel's vertical rhythm from the
	   1200px step above; only the horizontal inset tightens to 20px. */
	.nominees-block h2{
		padding: 0 20px;
	}

	.nominees-panel {
		padding: 32px 20px 40px;
	}

	/* both sections go one across */
	.nominees-songwriter-row > .nominee-card,
	.nominees-award-row > .nominee-card {
		width: 100%;
	}

	.award-nominee-title {
		font-size: 24px;
	}

	.nominee-card-name {
		font-size: 22px;
	}

	.nominee-card-publisher {
		font-size: 17px;
	}
}