/* ==========================================================================
   Winners + Nominees cards
   Figma: JUNOS - Winners Nominees Updates, node 80:4154 ("winners")
   Used by: awards-nominees.php  ->  .winners-nominees-section
   ========================================================================== */
:root{
	--White: #ffffff;
	--White-15: rgb(255 255 255 / 15%);
	--White-20: rgb(255 255 255 / 20%);
	--White-25: rgb(255 255 255 / 25%);
	--White-50: rgb(255 255 255 / 50%);
	--White-60: rgb(255 255 255 / 60%);
	--White-75: rgb(255 255 255 / 75%);
	--White-80: rgb(255 255 255 / 80%);
	--White-90: rgb(255 255 255 / 90%);
}
.winners-nominees-section {
	--winners-gold: #b7a261;
	--winners-gold-light: #dccf9a;
	--winners-card-bg: #000;
	--winners-gutter: 40px;
	--winners-card-pad: 16px;
	padding: 40px 0;
	position: relative;
}

.winners-nominees-section *,
.winners-nominees-section *:before,
.winners-nominees-section *:after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Rows
   Design is drawn as four rows of three cards; one wrapping flex row gives
   the same result and keeps the PHP loop free of "chunk into 3s" logic.
   Card width is set on the card itself, further down.
   -------------------------------------------------------------------------- */

.winners-nominees-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--winners-gutter);
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.winner-nominee-card {
	background: var(--winners-card-bg);
	padding: 8px 8px 28px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* three up: full width less the two gutters between the cards */
	flex: 0 0 auto;
	width: calc((100% - (2 * var(--winners-gutter))) / 3);
}

/* Gold hairline frame with a 4px mat around the photo */
.winner-card-media {
	width: 100%;
	padding: 4px;
	border: 1px solid var(--winners-gold);
	position: relative;
	z-index: 1;
	margin-bottom: -60px; /* content block rides up over the frame */
}

.winner-card-media img {
	min-height: 254px;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 304 / 235;
	object-fit: cover;
	box-shadow: 0 0 24px 0 rgba(183, 162, 97, 0.75);
}

.winner-card-body {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

/* JUNO statuette, overlapping the bottom-left of the photo frame */
.winner-card-statue {
	display: block;
	width: 64px;
	height: 80px;
	flex: 0 0 auto;
}

.winner-card-statue img {
	display: block;
	width: 64px;
	height: 80px;
}

/* --------------------------------------------------------------------------
   Award / winner copy
   -------------------------------------------------------------------------- */

.winner-card-content {
	width: 100%;
	padding: 0 var(--winners-card-pad);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.winner-card-heading {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.winner-card-subhead-main{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: 50px;
}
.winner-card-subhead-main .winner-card-subheading{
	flex: 0 0 calc(50% - 25px);
}
.winner-card-subheading{
	margin: 0;
	font-family: 'TiemposHeadline-Regular', serif;
	font-weight: normal;
	font-size: 24px;
	line-height: 1.2;
	color: var(--winners-gold);
	word-break: break-word;
	color: var(--winners-gold);
}
.winner-card-subheading p:last-child{margin-bottom: 0;}
.award-winner-credit{
	gap: 50px;
	color: #fff;
	font-size: 22px;
	font-family: 'CalibreWeb-Medium';
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	align-items: flex-start;
}
.award-winner-credit a{
	color: #fff;
}
.award-winner-credit a:hover{
	color: #b7a261;
}
.winner-nominee-card--multi .award-winner-credit-main{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: 50px;
}
.winner-nominee-card--multi .award-winner-credit{
  flex: 0 0 calc(50% - 25px);
  flex-direction: column;
  gap: 10px 0;
}
.winner-nominee-card--multi .award-winner-credit span:last-child {
  margin-top: auto;
}

.winner-credit-icon{
	flex: 0 0 14px;
  border-radius: 0%;
  color: #b7a261;
  display: flex;
  flex-wrap: wrap;
  font-size: 18px;
  line-height: 1;
  top: 5px;
  position: relative;
}

.winner-card-award {
	margin: 0;
	font-family: 'CalibreWeb-Bold', sans-serif;
	font-size: 18px;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #fff;
	word-break: break-word;
}

.winner-card-sponsor {
	margin: 0;
	font-family: 'CalibreWeb-Regular', sans-serif;
	font-size: 16px;
	line-height: 1;
	color: var(--White-75);
	word-break: break-word;
}

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

.winner-card-title a {
	color: var(--winners-gold);
	text-decoration: none;
}

.winner-card-title a:hover,
.winner-card-title a:focus {
	color: var(--White);
}

/* Winner credits (artist / songwriter) ------------------------------------- */

.winner-card-credits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.winner-card-credit {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

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

.winner-card-credit-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--winners-gold);
	color: var(--winners-card-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	line-height: 1;
}

.winner-card-credit-icon:before {
	display: block;
	font-family: 'Font Awesome 6 Pro', 'Font Awesome 5 Pro', 'Font Awesome 5 Free';
	font-weight: 900;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

/* Glyph can be set on the row (winners cards) or on the icon itself, so the
   same gold disc is reusable in the songs-of-the-year section below. */
.winner-card-credit--artist .winner-card-credit-icon:before,
.winner-card-credit-icon--artist:before {
	content: '\f130'; /* microphone */
}

.winner-card-credit--songwriter .winner-card-credit-icon:before,
.winner-card-credit-icon--publisher:before {
	content: '\f304'; /* pen */
	font-size: 10px;
}

/* 16px variant used by the song credit rows */
.winner-card-credit-icon--sm {
	width: 16px;
	height: 16px;
	font-size: 9px;
}

.winner-card-credit-icon--sm.winner-card-credit-icon--publisher:before {
	font-size: 8px;
}

/* Album: Figma uses Font Awesome `record-vinyl` - a record's concentric rings,
   drawn here so it does not depend on that glyph being in the site's FA kit.
   `closest-side` makes the ray half the box, so the stops scale with the size. */
.winner-card-credit-icon--album {
	background: radial-gradient(
		circle closest-side at 50% 50%,
		var(--winners-card-bg) 0 13.75%,
		var(--winners-gold) 13.75% 35%,
		var(--winners-card-bg) 35% 60%,
		var(--winners-gold) 60% 90%,
		transparent 90% 100%
	);
}

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

.winner-card-credit-name {
	font-family: 'Calibre-Semibold', sans-serif;
	font-size: 22px;
	line-height: 1.2;
	color: #fff;
	word-break: break-word;
}

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

.winner-card-credit-name a:hover,
.winner-card-credit-name a:focus {
	color: var(--winners-gold);
}

/* --------------------------------------------------------------------------
   Divider - gold fading out to both edges
   -------------------------------------------------------------------------- */

.winner-card-divider {
	display: block;
	width: 100%;
	height: 1px;
	border: 0;
	margin: 0;
	background: linear-gradient(
		90deg,
		rgba(183, 162, 97, 0) 0%,
		#b7a261 50%,
		rgba(183, 162, 97, 0) 100%
	);
}

/* --------------------------------------------------------------------------
   Nominees
   -------------------------------------------------------------------------- */

.winner-card-nominees {
	width: 100%;
	padding: 0 var(--winners-card-pad);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.winner-card-nominees-title {
	margin: 0;
	font-family: 'CalibreWeb-Bold', sans-serif;
	font-size: 18px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--White-60);
}

.winner-card-nominee-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Five or more nominees split into two columns (design: 7-up card), filling
   left-to-right then wrapping. The :has() rule does it automatically; the
   --split class is the explicit opt-in for browsers without :has(). */
.winner-card-nominee-list--split,
.winner-card-nominee-list:has(> li:nth-child(5)) {
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 20px;
	row-gap: 4px;
}

.winner-card-nominee-list--split > .winner-card-nominee,
.winner-card-nominee-list:has(> li:nth-child(5)) > .winner-card-nominee {
	flex: 0 0 auto;
	width: calc((100% - 20px) / 2);
}

.winner-card-nominee {
	position: relative;
	margin: 0;
	padding-left: 12px;
	font-family: 'CalibreWeb-Regular', sans-serif;
	font-size: 20px;
	line-height: 1.2;
	color: #fff;
	word-break: break-word;
}

/* 4px square marker - selector stays ahead of the reset above */
.winner-card-nominee-list > .winner-card-nominee:before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 4px;
	height: 4px;
	margin: 0;
	border-radius: 0;
	background: #fff;
	opacity: 0.6;
}

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

.winner-card-nominee a:hover,
.winner-card-nominee a:focus {
	color: var(--winners-gold);
}


.winner-card-media--multi{
	display: flex;
	height: 100%;
	max-height: 265px;
	gap: 50px;
	padding: 0;
  border: none;
}
.winner-card-media--multi a{
	padding: 4px;
  border: 1px solid var(--winners-gold);
  flex: 0 0 calc(50% - 25px);

}
.winner-nominee-card--multi .winner-card-media img{height: 100%;}
winner-nominee-card--multi .award-winner-credit-main {
  gap: 6px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.winner-card-statue.winner-card-statue--multi {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  gap: 50px;
}
.winner-card-statue.winner-card-statue--multi span:first-child{margin-right: auto;}
.winner-card-statue.winner-card-statue--multi span{flex: 0 0 calc(50% - 25px);}
/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 1024px) {
	.winner-nominee-card.winner-nominee-card--multi{
		width: 65%;
	}
}
@media only screen and (max-width: 1200px) {
	.winners-nominees-section {
		--winners-gutter: 30px;
	}

	.winner-card-media {
		margin-bottom: -52px;
	}

	.winner-card-title {
		font-size: 22px;
	}

	.winner-card-credit-name {
		font-size: 20px;
	}

	.winner-card-nominee {
		font-size: 18px;
	}
}

@media only screen and (max-width: 1023px) {
	/* two up */
	.winner-nominee-card {
		width: calc((100% - var(--winners-gutter)) / 2);
	}

	

.winner-card-media--multi{
gap: 28px;
}
.winner-card-media--multi a{

  flex: 0 0 calc(50% - 14px);

}

	.winner-nominee-card--multi .award-winner-credit-main{
		gap: 28px;
	} 
	.winner-nominee-card--multi .award-winner-credit{
		flex: 0 0 calc(50% - 14px);
	}

}

@media only screen and (max-width: 767px) {
	.winners-nominees-section {
		--winners-gutter: 24px;
		--winners-card-pad: 12px;
		padding: 24px 0;
	}

	/* one up */
	.winner-nominee-card {
		width: 100%;
	}

	.winner-card-body {
		gap: 16px;
	}

	.winner-card-statue {
		width: 48px;
		height: 60px;
	}

	.winner-card-statue img {
		width: 48px;
		height: 60px;
	}

	.winner-card-media {
		margin-bottom: -44px;
	}

	.winner-card-award {
		font-size: 16px;
	}

	.winner-card-sponsor {
		font-size: 15px;
	}

	.winner-card-title {
		font-size: 21px;
	}

	.winner-card-credit-name {
		font-size: 19px;
	}

	.winner-card-nominees-title {
		font-size: 16px;
	}

	.winner-card-nominee-list--split,
	.winner-card-nominee-list:has(> li:nth-child(5)) {
		flex-direction: column;
		flex-wrap: nowrap;
		row-gap: 6px;
	}

	.winner-card-nominee-list--split > .winner-card-nominee,
	.winner-card-nominee-list:has(> li:nth-child(5)) > .winner-card-nominee {
		width: auto;
	}

}

/* ==========================================================================
   Songs of the Year
   Figma: node 201:2399 ("nominees/desktop") - heading straddling a black
   panel, winner card on the left, the winning songs listed on the right.
   ========================================================================== */

.songs-of-year-section {
	--winners-gold: #b7a261;
	--winners-gold-light: #dccf9a;
	--winners-card-bg: #000;
	padding: 40px 0;
	position: relative;
}

.songs-of-year-section *,
.songs-of-year-section *:before,
.songs-of-year-section *:after {
	box-sizing: border-box;
}

.songs-of-year-main {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* One award block: heading + panel stacked, heading painting over the panel */
.songs-of-year-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	isolation: isolate;
}

/* Figma trims the heading's text box to cap-height/baseline and then pulls the
   panel up 8px, so the panel edge crosses the lower part of the letters.
   The margins below reproduce that on browsers without text-box-trim: they
   absorb the 4px above the caps and the 5px below the baseline that a
   line-height:1 box adds at 24px, then apply the design's own -8px. */
.songs-of-year-heading {
	position: relative;
	z-index: 2;
	width: 100%;
	margin: -4px 0 -13px;
	padding: 0 40px;
	font-family: 'CalibreWeb-Bold', sans-serif;
	font-size: 24px;
	line-height: 1;
	text-transform: uppercase;
	color: #fff;
	word-break: break-word;
}

@supports (text-box-trim: trim-both) {
	.songs-of-year-heading {
		text-box-trim: trim-both;
		text-box-edge: cap alphabetic;
		margin: 0 0 -8px;
	}
}

.songs-of-year-panel {
	position: relative;
	z-index: 1;
	width: 100%;
	background: var(--winners-card-bg);
	padding: 40px 32px 32px;
}

.songs-of-year-row {
	display: flex;
	align-items: flex-start;
	gap: 48px;
}

/* --------------------------------------------------------------------------
   Winner card (left)
   -------------------------------------------------------------------------- */

.songs-winner-card {
	flex: 0 0 auto;
	width: 320px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: var(--winners-card-bg);
}

.songs-winner-media {
	width: 100%;
	padding: 4px;
	border: 1px solid var(--winners-gold);
	position: relative;
	z-index: 1;
	margin-bottom: -60px;
}

.songs-winner-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 312 / 204;
	object-fit: cover;
	box-shadow: 0 0 8px 0 rgba(183, 162, 97, 0.75);
}

.songs-winner-body {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.songs-winner-statue {
	display: block;
	width: 64px;
	height: 80px;
	flex: 0 0 auto;
}

.songs-winner-statue img {
	display: block;
	width: 64px;
	height: 80px;
}

.songs-winner-content {
	width: 100%;
	padding: 0 12px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.songs-winner-heading {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.songs-winner-name {
	margin: 0;
	font-family: 'TiemposHeadline-Regular', serif;
	font-weight: normal;
	font-size: 32px;
	line-height: 1.2;
	color: var(--winners-gold);
	word-break: break-word;
}

.songs-winner-name a {
	color: inherit;
	text-decoration: none;
}

.songs-winner-name a:hover,
.songs-winner-name a:focus {
	color: var(--winners-gold-light);
}

.songs-winner-publisher {
	display: flex;
	/* align-items: center; */
	gap: 8px;
	margin: 0;
	font-family: 'Calibre-Semibold', sans-serif;
	font-size: 20px;
	line-height: 1.2;
	color: #fff;
	word-break: break-word;
}

/* gold fading out to both edges, inset to match the padded content */
.songs-winner-divider {
	display: block;
	width: 100%;
	height: 1px;
	border: 0;
	margin: 0;
	background: linear-gradient(
		90deg,
		rgba(183, 162, 97, 0) 0%,
		#b7a261 50%,
		rgba(183, 162, 97, 0) 100%
	);
}

.songs-winner-nominees {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.songs-winner-nominees-title {
	margin: 0;
	font-family: 'CalibreWeb-Bold', sans-serif;
	font-size: 18px;
	line-height: 1;
	text-transform: uppercase;
	color: #fff;
	opacity: 0.6;
}

.songs-winner-nominee-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* style.css paints a gold dot on every `ul > li`; drop it inside this card */
.songs-winner-nominee-list > li:before {
	content: none;
	display: none;
}

.songs-winner-nominee {
	position: relative;
	margin: 0;
	padding-left: 12px;
	font-family: 'CalibreWeb-Regular', sans-serif;
	font-size: 20px;
	line-height: 1.2;
	color: #fff;
	word-break: break-word;
}

.songs-winner-nominee-list > .songs-winner-nominee:before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 4px;
	height: 4px;
	margin: 0;
	border-radius: 0;
	background: #fff;
	opacity: 0.6;
}

.songs-winner-nominee a {
	color: inherit;
	text-decoration: none;
}

.songs-winner-nominee a:hover,
.songs-winner-nominee a:focus {
	color: var(--winners-gold);
}

/* --------------------------------------------------------------------------
   Song list (right)
   -------------------------------------------------------------------------- */

.songs-list {
	flex: 1 1 auto;
	min-width: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.songs-list > li:before {
	content: none;
	display: none;
}

.song-item {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

/* 1px white rule between songs, on the item rather than an extra node */
.song-item + .song-item {
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.5);
}

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

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

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

.song-writers {
	margin: 0;
	max-width: 670px;
	font-family: 'Calibre-Semibold', sans-serif;
	font-size: 18px;
	line-height: 1.2;
	color: #fff;
	word-break: break-word;
}

.song-credits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px 16px;
}

.song-credits > li:before {
	content: none;
	display: none;
}

.song-credit {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'CalibreWeb-Regular', sans-serif;
	font-size: 18px;
	line-height: 1.2;
	color: #fff;
}

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

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

ul.song-writers-list{margin: 0; gap: 16px; font-family: 'CalibreWeb-Regular', sans-serif;}
body.page-template-awards-nominees ul.song-writers-list{margin: 8px 0 0; gap: 8px 16px;}
ul.song-writers-list > li::before{display: none;}
ul.song-writers-list > li{margin: 0; gap: 6px; align-items: start; display: flex; flex-wrap: wrap; line-height: 20px; font-size: 18px; color: #fff;}
ul.song-writers-list > li i{
	flex: 0 0 14px;
	border-radius: 0%;
	color: #B7A261;
	display: flex;
	flex-wrap: wrap;
	font-size: 18px;
	line-height: 18px;
}
ul.song-writers-list > li span{ flex:1;}
ul.songs-list ul.song-writers-list{gap: 16px;}
body.page-template-awards-nominees  ul.songs-list ul.song-writers-list{gap: 8px 16px; flex-direction: column;}
.award-winner-credit {font-family: 'TiemposHeadline-Regular', serif;}
.award-winner-credit a.golden {color: #B7A261;}
.award-winner-credit a.golden:hover{color: #fff;}

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

@media only screen and (max-width: 1200px) {
	.songs-of-year-row {
		gap: 32px;
	}

	.songs-winner-name {
		font-size: 28px;
	}

	.songs-winner-publisher {
		font-size: 18px;
	}
}

@media only screen and (max-width: 1023px) {
	/* card above the songs */
	.songs-of-year-row {
		flex-direction: column;
		gap: 32px;
	}

	.songs-winner-card {
		width: 100%;
	}
}

@media only screen and (max-width: 767px) {
	.songs-of-year-section {
		padding: 24px 0;
	}

	.songs-of-year-main {
		gap: 24px;
	}

	.songs-of-year-heading {
		padding: 0 16px;
		font-size: 20px;
		line-height: 13px;
		margin-bottom: -7px;
	}

	.songs-of-year-panel {
		padding: 28px 16px 24px;
	}

	.songs-winner-body {
		gap: 16px;
	}

	.songs-winner-statue {
		width: 48px;
		height: 60px;
	}

	.songs-winner-statue img {
		width: 48px;
		height: 60px;
	}

	.songs-winner-media {
		margin-bottom: -44px;
	}

	.songs-winner-name {
		font-size: 26px;
	}

	.songs-winner-nominee {
		font-size: 18px;
	}

	.song-title {
		font-size: 21px;
	}

	.song-writers,
	.song-credit {
		font-size: 16px;
	}
}

/* ==========================================================================
   HALL ONE - two award blocks side by side
   Figma "Winners": CANADIAN MUSIC HALL OF FAME + WALT GREALIS SPECIAL
   ACHIEVEMENT AWARD, one winner card in each block.
   Self-contained: every class here is prefixed .hall-one-fame-.
   ========================================================================== */

.hall-one-fame-section {
	--hall-one-gold: #b7a261;
	--hall-one-gold-light: #dccf9a;
	--hall-one-bg: #000;
	--hall-one-gap: 40px;
	padding: 40px 0;
	position: relative;
}

.hall-one-fame-section *,
.hall-one-fame-section *:before,
.hall-one-fame-section *:after {
	box-sizing: border-box;
}

.hall-one-fame-main {
	display: flex;
	flex-wrap: wrap;
	/* stretch + justify-content:flex-end on the block bottom-aligns the
	   headings, so both panels start on the same line however many lines
	   each heading takes */
	align-items: stretch;
	gap: var(--hall-one-gap);
}

.hall-one-fame-block {
	width: calc((100% - var(--hall-one-gap)) / 2);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	isolation: isolate;
}

/* Figma trims the heading text box to cap-height/baseline and then pulls the
   panel up 16px, so the panel edge crosses the lower part of the letters.
   The fallback margins absorb the ~6px above the caps and ~8px below the
   baseline that a line-height:1 box adds at 40px, then apply that -16px. */
.hall-one-fame-heading {
	position: relative;
	z-index: 2;
	width: 100%;
	margin: -6px 0 -24px;
	padding: 0 40px;
	font-family: 'CalibreWeb-Bold', sans-serif;
	font-size: 40px;
	line-height: 1;
	text-transform: uppercase;
	color: #fff;
	/* break-word, not word-break, so long award names only split when a single
	   word genuinely cannot fit the column */
	overflow-wrap: break-word;
}

@supports (text-box-trim: trim-both) {
	.hall-one-fame-heading {
		text-box-trim: trim-both;
		text-box-edge: cap alphabetic;
		margin: 0 0 -16px;
	}
}

.hall-one-fame-panel {
	position: relative;
	z-index: 1;
	width: 100%;
	background: var(--hall-one-bg);
	padding: 48px 40px 40px;
}

.hall-one-fame-card {
	width: 100%;
	background: var(--hall-one-bg);
	padding: 8px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.hall-one-fame-media {
	width: 100%;
	padding: 4px;
	border: 1px solid var(--hall-one-gold);
	position: relative;
	z-index: 1;
	/* the statue is 80px tall and hangs 20px below the frame */
	margin-bottom: -60px;
}

.hall-one-fame-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 304 / 235;
	object-fit: cover;
	box-shadow: 0 0 8px 0 rgba(183, 162, 97, 0.75);
}

.hall-one-fame-body {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.hall-one-fame-statue {
	display: block;
	width: 64px;
	height: 80px;
	flex: 0 0 auto;
}

.hall-one-fame-statue img {
	display: block;
	width: 64px;
	height: 80px;
}

.hall-one-fame-content {
	width: 100%;
	padding: 0 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hall-one-fame-meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hall-one-fame-label {
	margin: 0;
	font-family: 'CalibreWeb-Bold', sans-serif;
	font-size: 18px;
	line-height: 1;
	text-transform: uppercase;
	color: #fff;
	word-break: break-word;
}

.hall-one-fame-date {
	margin: 0;
	font-family: 'CalibreWeb-Regular', sans-serif;
	font-size: 16px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--White-75);
}

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

.hall-one-fame-name a {
	color: inherit;
	text-decoration: none;
}

.hall-one-fame-name a:hover,
.hall-one-fame-name a:focus {
	color: var(--hall-one-gold-light);
}

@media only screen and (max-width: 1200px) {
	.hall-one-fame-section {
		--hall-one-gap: 30px;
	}

	.hall-one-fame-heading {
		font-size: 26px;
		margin: -5px 0 -21px;
		padding: 0 32px;
	}

	@supports (text-box-trim: trim-both) {
		.hall-one-fame-heading {
			margin: 0 0 -14px;
		}
	}

	.hall-one-fame-panel {
		padding: 40px 32px 32px;
	}
}

@media only screen and (max-width: 767px) {
	.hall-one-fame-section {
		--hall-one-gap: 24px;
		padding: 24px 0;
	}

	/* one block per row */
	.hall-one-fame-block {
		width: 100%;
	}

	.hall-one-fame-heading {
		font-size: 28px;
		margin: -4px 0 -17px;
		padding: 0 16px;
	}

	@supports (text-box-trim: trim-both) {
		.hall-one-fame-heading {
			margin: 0 0 -11px;
		}
	}

	.hall-one-fame-panel {
		padding: 32px 16px 24px;
	}

	.hall-one-fame-body {
		gap: 16px;
	}

	.hall-one-fame-statue,
	.hall-one-fame-statue img {
		width: 48px;
		height: 60px;
	}

	.hall-one-fame-media {
		margin-bottom: -44px;
	}

	.hall-one-fame-label {
		font-size: 16px;
	}

	.hall-one-fame-name {
		font-size: 21px;
	}
}

/* ==========================================================================
   HALL TWO - one heading, inductee cards three across
   Figma "Winners": CANADIAN MUSIC HALL OF FAME, three cards in a single
   full-width panel, 24px between cards.
   Self-contained: every class here is prefixed .hall-two-fame-.
   ========================================================================== */

.hall-two-fame-section {
	--hall-two-gold: #b7a261;
	--hall-two-gold-light: #dccf9a;
	--hall-two-bg: #000;
	--hall-two-gap: 24px;
	padding: 40px 0;
	position: relative;
}

.hall-two-fame-section *,
.hall-two-fame-section *:before,
.hall-two-fame-section *:after {
	box-sizing: border-box;
}

.hall-two-fame-main {
	display: flex;
	flex-wrap: wrap;
}

.hall-two-fame-block {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	isolation: isolate;
}

.hall-two-fame-heading {
	position: relative;
	z-index: 2;
	width: 100%;
	margin: -6px 0 -24px;
	padding: 0 40px;
	font-family: 'CalibreWeb-Bold', sans-serif;
	font-size: 40px;
	line-height: 1;
	text-transform: uppercase;
	color: #fff;
	overflow-wrap: break-word;
}

@supports (text-box-trim: trim-both) {
	.hall-two-fame-heading {
		text-box-trim: trim-both;
		text-box-edge: cap alphabetic;
		margin: 0 0 -16px;
	}
}

.hall-two-fame-panel {
	position: relative;
	z-index: 1;
	width: 100%;
	background: var(--hall-two-bg);
	padding: 48px 40px 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--hall-two-gap);
}

/* three across */
.hall-two-fame-card {
	width: calc((100% - (var(--hall-two-gap) * 2)) / 3);
	background: var(--hall-two-bg);
	padding: 8px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.hall-two-fame-media {
	width: 100%;
	padding: 4px;
	border: 1px solid var(--hall-two-gold);
	position: relative;
	z-index: 1;
	margin-bottom: -60px;
}

.hall-two-fame-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 304 / 235;
	object-fit: cover;
	box-shadow: 0 0 8px 0 rgba(183, 162, 97, 0.75);
}

.hall-two-fame-body {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.hall-two-fame-statue {
	display: block;
	width: 64px;
	height: 80px;
	flex: 0 0 auto;
}

.hall-two-fame-statue img {
	display: block;
	width: 64px;
	height: 80px;
}

.hall-two-fame-content {
	width: 100%;
	padding: 0 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hall-two-fame-meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hall-two-fame-label {
	margin: 0;
	font-family: 'CalibreWeb-Bold', sans-serif;
	font-size: 18px;
	line-height: 1;
	text-transform: uppercase;
	color: #fff;
	word-break: break-word;
}

.hall-two-fame-date {
	margin: 0;
	font-family: 'CalibreWeb-Regular', sans-serif;
	font-size: 16px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--White-75);
}

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

.hall-two-fame-name a {
	color: inherit;
	text-decoration: none;
}

.hall-two-fame-name a:hover,
.hall-two-fame-name a:focus {
	color: var(--hall-two-gold-light);
}

@media only screen and (max-width: 1200px) {
	.hall-two-fame-heading {
		font-size: 34px;
		margin: -5px 0 -21px;
		padding: 0 32px;
	}

	@supports (text-box-trim: trim-both) {
		.hall-two-fame-heading {
			margin: 0 0 -14px;
		}
	}

	.hall-two-fame-panel {
		padding: 40px 32px 32px;
	}
}

@media only screen and (max-width: 1023px) {
	/* three across drops to two */
	.hall-two-fame-card {
		width: calc((100% - var(--hall-two-gap)) / 2);
	}
}

@media only screen and (max-width: 767px) {
	.hall-two-fame-section {
		padding: 24px 0;
	}

	.hall-two-fame-card {
		width: 100%;
	}

	.hall-two-fame-heading {
		font-size: 28px;
		margin: -4px 0 -17px;
		padding: 0 16px;
	}

	@supports (text-box-trim: trim-both) {
		.hall-two-fame-heading {
			margin: 0 0 -11px;
		}
	}

	.hall-two-fame-panel {
		padding: 32px 16px 24px;
	}

	.hall-two-fame-body {
		gap: 16px;
	}

	.hall-two-fame-statue,
	.hall-two-fame-statue img {
		width: 48px;
		height: 60px;
	}

	.hall-two-fame-media {
		margin-bottom: -44px;
	}

	.hall-two-fame-label {
		font-size: 16px;
	}

	.hall-two-fame-name {
		font-size: 21px;
	}
}

/* ==========================================================================
   HALL THREE - one heading, recipient cards four across
   Figma "Winners": WALT GREALIS SPECIAL ACHIEVEMENT AWARD, four cards in a
   single full-width panel, 16px between cards.
   Self-contained: every class here is prefixed .hall-three-fame-.
   ========================================================================== */

.hall-three-fame-section {
	--hall-three-gold: #b7a261;
	--hall-three-gold-light: #dccf9a;
	--hall-three-bg: #000;
	--hall-three-gap: 16px;
	padding: 40px 0;
	position: relative;
}

.hall-three-fame-section *,
.hall-three-fame-section *:before,
.hall-three-fame-section *:after {
	box-sizing: border-box;
}

.hall-three-fame-main {
	display: flex;
	flex-wrap: wrap;
}

.hall-three-fame-block {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	isolation: isolate;
}

.hall-three-fame-heading {
	position: relative;
	z-index: 2;
	width: 100%;
	margin: -6px 0 -24px;
	padding: 0 40px;
	font-family: 'CalibreWeb-Bold', sans-serif;
	font-size: 40px;
	line-height: 1;
	text-transform: uppercase;
	color: #fff;
	overflow-wrap: break-word;
}

@supports (text-box-trim: trim-both) {
	.hall-three-fame-heading {
		text-box-trim: trim-both;
		text-box-edge: cap alphabetic;
		margin: 0 0 -16px;
	}
}

.hall-three-fame-panel {
	position: relative;
	z-index: 1;
	width: 100%;
	background: var(--hall-three-bg);
	padding: 48px 40px 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--hall-three-gap);
}

/* four across */
.hall-three-fame-card {
	width: calc(33.3333% - 11px);
	background: var(--hall-three-bg);
	padding: 8px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.hall-three-fame-media {
	width: 100%;
	padding: 4px;
	border: 1px solid var(--hall-three-gold);
	position: relative;
	z-index: 1;
	margin-bottom: -60px;
}

.hall-three-fame-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 304 / 235;
	object-fit: cover;
	box-shadow: 0 0 8px 0 rgba(183, 162, 97, 0.75);
}

.hall-three-fame-body {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.hall-three-fame-statue {
	display: block;
	width: 64px;
	height: 80px;
	flex: 0 0 auto;
}

.hall-three-fame-statue img {
	display: block;
	width: 64px;
	height: 80px;
}

.hall-three-fame-content {
	width: 100%;
	padding: 0 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hall-three-fame-meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hall-three-fame-label {
	margin: 0;
	font-family: 'CalibreWeb-Bold', sans-serif;
	font-size: 18px;
	line-height: 1;
	text-transform: uppercase;
	color: #fff;
	word-break: break-word;
}

.hall-three-fame-date {
	margin: 0;
	font-family: 'CalibreWeb-Regular', sans-serif;
	font-size: 16px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--White-75);
}

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

.hall-three-fame-name a {
	color: inherit;
	text-decoration: none;
}

.hall-three-fame-name a:hover,
.hall-three-fame-name a:focus {
	color: var(--hall-three-gold-light);
}

@media only screen and (max-width: 1200px) {
	.hall-three-fame-heading {
		font-size: 34px;
		margin: -5px 0 -21px;
		padding: 0 32px;
	}

	@supports (text-box-trim: trim-both) {
		.hall-three-fame-heading {
			margin: 0 0 -14px;
		}
	}

	.hall-three-fame-panel {
		padding: 40px 32px 32px;
	}
}

@media only screen and (max-width: 1023px) {
	/* four across drops to two */
	.hall-three-fame-card {
		width: calc((100% - var(--hall-three-gap)) / 2);
	}
}

@media only screen and (max-width: 767px) {
	.hall-three-fame-section {
		--hall-three-gap: 24px;
		padding: 24px 0;
	}

	.hall-three-fame-card {
		width: 100%;
	}

	.hall-three-fame-heading {
		font-size: 28px;
		margin: -4px 0 -17px;
		padding: 0 16px;
	}

	@supports (text-box-trim: trim-both) {
		.hall-three-fame-heading {
			margin: 0 0 -11px;
		}
	}

	.hall-three-fame-panel {
		padding: 32px 16px 24px;
	}

	.hall-three-fame-body {
		gap: 16px;
	}

	.hall-three-fame-statue,
	.hall-three-fame-statue img {
		width: 48px;
		height: 60px;
	}

	.hall-three-fame-media {
		margin-bottom: -44px;
	}

	.hall-three-fame-label {
		font-size: 16px;
	}

	.hall-three-fame-name {
		font-size: 21px;
	}
}