/* =========================================================

   Artist Project — Billboard Style Artist Chart

   ========================================================= */



.artist-project-chart {

	width: 100%;

	max-width: 1200px;

	margin: 0 auto;

	color: #111;

}



/* =========================================================

   Header

   ========================================================= */



.artist-project-chart__header {

	display: flex;

	align-items: flex-end;

	justify-content: space-between;

	gap: 30px;

	margin-bottom: 28px;

	padding-bottom: 18px;

	border-bottom: 2px solid #111;

}



.artist-project-chart__eyebrow {

	display: block;

	margin-bottom: 5px;

	font-size: 11px;

	font-weight: 700;

	letter-spacing: 0.14em;

	text-transform: uppercase;

}



.artist-project-chart__title {

	margin: 0;

	font-size: clamp(24px, 3vw, 48px);

	font-weight: 800;

	line-height: 0.95;

	letter-spacing: -0.04em;

}



.artist-project-chart__meta {

	padding-bottom: 4px;

	font-size: 11px;

	font-weight: 700;

	letter-spacing: 0.1em;

	text-transform: uppercase;

}



/* =========================================================

   Table Header

   ========================================================= */



.artist-project-chart__head {

	display: grid;

	grid-template-columns: 62px 100px minmax(280px, 1fr) 155px 42px;

	align-items: center;

	min-height: 42px;

	padding: 0 14px;

	border-bottom: 1px solid #111;

	font-size: 10px;

	font-weight: 700;

	letter-spacing: 0.1em;

	text-transform: uppercase;

}



.artist-project-chart__head > div:nth-child(4) {

	text-align: left;

}



/* =========================================================

   Artist Item

   ========================================================= */



.artist-project-chart__item {

	width: 100%;

}



/* =========================================================

   Main Row

   ========================================================= */



.artist-project-chart__row {

	display: grid;

	grid-template-columns: 62px 100px minmax(280px, 1fr) 155px 42px;

	align-items: center;

	min-height: 92px;

	padding: 10px 14px;

	border-bottom: 1px solid #d7d7d7;

	background: #fff;

}



/* =========================================================

   Rank

   ========================================================= */



.artist-project-chart__rank {

	font-size: 30px;

	font-weight: 800;

	line-height: 1;

	letter-spacing: -0.04em;

}



/* =========================================================

   Movement

   ========================================================= */



.artist-project-chart__movement {

	display: flex;

	align-items: center;

	min-height: 30px;

	font-size: 12px;

	font-weight: 700;

}



.artist-project-chart__movement--up {

	color: #00f29a;

}



.artist-project-chart__movement--down {

	color: #e93645;

}



.artist-project-chart__movement--new {

	color: #00f29a;

}



.artist-project-chart__movement--same {

	color: #777;

}



.artist-project-chart__movement-arrow {

	font-size: 18px;

	line-height: 1;

}



.artist-project-chart__movement-badge {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	min-height: 28px;

	padding: 0 8px;

	background: #00f29a;

	color: #000;

	font-size: 9px;

	font-weight: 800;

	letter-spacing: 0.06em;

}



/* =========================================================

   Artist

   ========================================================= */



.artist-project-chart__artist {

	display: flex;

	align-items: center;

	min-width: 0;

	gap: 16px;

}



.artist-project-chart__artist-image {

	width: 78px;

	height: 78px;

	flex: 0 0 78px;

	overflow: hidden;

	border: 1px solid #d8d8d8;

	background: #f2f2f2;

}



.artist-project-chart__artist-image img {

	display: block;

	width: 100%;

	height: 100%;

	object-fit: cover;

}



.artist-project-chart__artist-info {

	min-width: 0;

}



.artist-project-chart__artist-name {

	margin: 0;

	font-size: 18px;

	font-weight: 800;

	line-height: 1.1;

}



.artist-project-chart__artist-name a {

	color: #111;

	text-decoration: underline;

	text-decoration-color: #e93645;

	text-decoration-thickness: 1px;

	text-underline-offset: 3px;

}



.artist-project-chart__artist-name a:hover {

	color: #000;

}



.artist-project-chart__artist-subtitle {

	margin: 5px 0 0;

	font-size: 15px;

	font-weight: 400;

	line-height: 1.25;

}



/* =========================================================

   Chart Stats

   ========================================================= */



.artist-project-chart__stats {

	display: grid;

	grid-template-columns: 34px 30px;

	align-items: center;

	column-gap: 8px;

	row-gap: 4px;

	font-size: 10px;

}



.artist-project-chart__stat {

	display: contents;

}



.artist-project-chart__stat span {

	font-size: 8px;

	font-weight: 500;

	letter-spacing: 0.05em;

	color: #777;

	text-transform: uppercase;

}



.artist-project-chart__stat strong {

	font-size: 11px;

	font-weight: 700;

}



/* =========================================================

   Featured #1 Billboard Hero Card

   ========================================================= */



.artist-project-chart__item--featured {

	margin: 10px 0 10px;

	padding: 0;

	border: 0;

	border-radius: 12px;

	background: #fff;

	overflow: hidden;

}



.artist-project-chart__featured-row {

	position: relative;

	display: grid;

	grid-template-columns: 76px 210px 48px minmax(220px, 1fr) 45px 125px 48px;

	align-items: center;

	min-height: 245px;

	padding: 0 8px 0 0;

	background: #f5f5f5;

}



.artist-project-chart__featured-rank {

	display: flex;

	align-items: center;

	justify-content: center;

	align-self: center;

	width: 76px;

	height: 76px;

	background: #00f29a;

	color: #000;

	font-size: 42px;

	font-weight: 800;

	line-height: 1;

	z-index: 2;

}



.artist-project-chart__featured-image {

	width: 210px;

	height: 200px;

	margin-left: 0;

	overflow: hidden;

	display: flex;

    align-items: center;

}



.artist-project-chart__featured-image img {

	display: block;

	width: 100%;

	height: 100%;

	object-fit: cover;

}



.artist-project-chart__featured-movement {

	display: flex;

	align-items: center;

	justify-content: center;

	height: 86px;

	background: #00f29a;

	color: #000;

}



.artist-project-chart__featured-movement span {

	font-size: 10px;

	font-weight: 800;

	letter-spacing: 0.08em;

	writing-mode: horizontal-tb;

	transform: rotate(0);

}



.artist-project-chart__featured-info {

	padding-left: 24px;

}



.artist-project-chart__featured-info h2 {

	margin: 0;

	font-size: 22px;

	font-weight: 800;

	line-height: 1.1;

}



.artist-project-chart__featured-info h2 a {

	color: #000;

	text-decoration: none;

}



.artist-project-chart__featured-info p {

	margin: 7px 0 0;

	font-size: 17px;

	line-height: 1.25;

}



.artist-project-chart__featured-star {

	font-size: 25px;

	color: #000;

	text-align: center;

}



.artist-project-chart__featured-stats {

	display: flex;

	flex-direction: column;

	gap: 7px;

}



.artist-project-chart__featured-stats div {

	display: grid;

	grid-template-columns: 48px 1fr;

	align-items: center;

}



.artist-project-chart__featured-stats span {

	color: #888;

	font-size: 11px;

	font-weight: 500;

}



.artist-project-chart__featured-stats strong {

	font-size: 13px;

	font-weight: 700;

}



.artist-project-chart__featured-toggle {

	width: 32px;

	height: 32px;

	border: 1px solid #999;

	background: transparent;

	color: #777;

	font-size: 20px;

	font-weight: 400;

}



.artist-project-chart__featured-toggle:hover {

	background: #00f29a;

	border-color: #00f29a;

	color: #000;

}



/* Normal chart rows */

.artist-project-chart__item:not(.artist-project-chart__item--featured)

	.artist-project-chart__row {

	background: #f1f1f1;

}



.artist-project-chart__item:not(.artist-project-chart__item--featured)

	.artist-project-chart__row {

	background: #f5f5f5;

}



.artist-project-chart__item:not(.artist-project-chart__item--featured) {

	margin-bottom: 10px;

}



.artist-project-chart__item:not(.artist-project-chart__item--featured)

	.artist-project-chart__row {

	border: 0;

	border-radius: 6px;

}



/* =========================================================

   Toggle

   ========================================================= */



.artist-project-chart__toggle {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 34px;

	height: 34px;

	margin: 0;

	padding: 0;

	border: 0;

	border-radius: 50%;

	background: #00f29a;

	color: #000;

	cursor: pointer;

	font-size: 19px;

	font-weight: 800;

	line-height: 1;

	transition:

		transform 0.2s ease,

		background-color 0.2s ease;

}



.artist-project-chart__toggle:hover {

	background: #00d985;

}



.artist-project-chart__toggle.is-open {

	transform: rotate(45deg);

}



/* =========================================================

   Expanded Details

   ========================================================= */



.artist-project-chart__details {

	background: #000;

	color: #fff;

	border-top: 2px solid #00f29a;

}



.artist-project-chart__details-inner {

	padding: 32px 38px 30px;

}



/* =========================================================

   Detail Grid

   ========================================================= */



.artist-project-chart__detail-grid {

	display: grid;

	grid-template-columns: 1fr 1fr 1.2fr;

	gap: 32px;

	align-items: start;

}



/* =========================================================

   Detail Boxes

   ========================================================= */



.artist-project-chart__detail-box:nth-child(4) {

	grid-column: 1;

	margin-top: 10px;

}



.artist-project-chart__detail-box {

	display: flex;

	flex-direction: column;

	align-items: flex-start;

	min-width: 0;

}



.artist-project-chart__detail-box h3 {

	margin: 0 0 12px;

	color: #fff;

	font-size: 12px;

	font-weight: 700;

	letter-spacing: 0.09em;

	text-transform: uppercase;

}



.artist-project-chart__detail-box strong {

	margin-bottom: 10px;

	color: #00f29a;

	font-size: 38px;

	font-weight: 800;

	line-height: 0.9;

}



.artist-project-chart__detail-box span {

	margin-bottom: 3px;

	color: rgba(1, 1, 1, 0.65);

	font-size: 9px;

	font-weight: 700;

	letter-spacing: 0.08em;

	text-transform: uppercase;

}



.artist-project-chart__detail-box small {

	color: #fff;

	font-size: 12px;

}



/* =========================================================

   Chart History

   ========================================================= */



.artist-project-chart__detail-box--history {

	position: relative;

}



.artist-project-chart__detail-box--history img {

	display: block;

	width: 150px;

	height: 140px !important;

	margin-top: 2px;

	object-fit: cover;

}



.artist-project-chart__history-link {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 30px;

	height: 30px;

	margin-top: 10px;

	border-radius: 50%;

	background: #00f29a;

	color: #000;

	font-size: 18px;

	font-weight: 800;

	text-decoration: none !important;

}



.artist-project-chart__history-link:hover {

	color: #000;

}



/* =========================================================

   Extra Information

   ========================================================= */



.artist-project-chart__extra {

	display: grid;

	grid-template-columns: 1fr auto;

	gap: 30px;

	margin-top: 26px;

	padding-top: 22px;

	border-top: 1px solid rgba(255, 255, 255, 0.3);

}



.artist-project-chart__extra-info {

	display: grid;

	grid-template-columns: repeat(2, minmax(160px, 1fr));

	gap: 24px;

}



.artist-project-chart__extra-info > div {

	display: flex;

	flex-direction: column;

	gap: 5px;

}



.artist-project-chart__extra-info span,

.artist-project-chart__share > span {

	color: rgba(255, 255, 255, 0.65);

	font-size: 9px;

	font-weight: 700;

	letter-spacing: 0.1em;

	text-transform: uppercase;

}



.artist-project-chart__extra-info strong {

	color: #fff;

	font-size: 15px;

	font-weight: 600;

}



/* =========================================================

   Share

   ========================================================= */



.artist-project-chart__share {

	display: flex;

	flex-direction: column;

	align-items: flex-start;

	gap: 9px;

}



.artist-project-chart__share > div {

	display: flex;

	gap: 8px;

}



.artist-project-chart__share a {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 40px;

	height: 40px;

	border: 1px solid #00f29a;

	color: #00f29a;

	font-size: 12px;

	font-weight: 700;

	text-decoration: none;

}



.artist-project-chart__share a:hover {

	background: #00f29a;

	color: #000;

}



/* =========================================================

   Profile Button

   ========================================================= */



.artist-project-chart__profile {

	margin-top: 24px;

	padding-top: 20px;

	border-top: 1px solid rgba(255, 255, 255, 0.3);

}



.artist-project-chart__profile a {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	min-height: 42px;

	padding: 0 22px;

	border: 1px solid #00f29a;

	color: #00f29a;

	font-size: 10px;

	font-weight: 800;

	letter-spacing: 0.08em;

	text-transform: uppercase;

	text-decoration: none;

}



.artist-project-chart__profile a:hover {

	background: #00f29a;

	color: #000;

}



/* =========================================================

   Accessibility

   ========================================================= */



.artist-project-chart .screen-reader-text {

	position: absolute;

	width: 1px;

	height: 1px;

	padding: 0;

	margin: -1px;

	overflow: hidden;

	clip: rect(0, 0, 0, 0);

	white-space: nowrap;

	border: 0;

}



/* =========================================================

   Tablet

   ========================================================= */



@media (max-width: 900px) {



	.artist-project-chart__head,

	.artist-project-chart__row {

		grid-template-columns: 52px 80px minmax(220px, 1fr) 125px 38px;

	}



	.artist-project-chart__artist-image {

		width: 62px;

		height: 62px;

		flex-basis: 62px;

	}



	.artist-project-chart__artist-name {

		font-size: 16px;

	}



	.artist-project-chart__artist-subtitle {

		font-size: 13px;

	}



	.artist-project-chart__detail-grid {

		grid-template-columns: repeat(2, 1fr);

	}



	.artist-project-chart__detail-box--history {

		grid-column: 1 / -1;

	}

}



/* =========================================================

   Mobile

   ========================================================= */



@media (max-width: 767px) {



	.artist-project-chart__header {

		align-items: flex-start;

		flex-direction: column;

		gap: 12px;

	}



	.artist-project-chart__meta {

		padding-bottom: 0;

	}



	.artist-project-chart__head {

		display: none;

	}



	.artist-project-chart__row {

		grid-template-columns: 45px minmax(0, 1fr) 85px 34px;

		gap: 8px;

		min-height: 88px;

		padding: 10px 8px;

	}



	.artist-project-chart__movement {

		display: none;

	}



	.artist-project-chart__rank {

		font-size: 24px;

	}



	.artist-project-chart__artist {

		gap: 10px;

	}



	.artist-project-chart__artist-image {

		width: 54px;

		height: 54px;

		flex-basis: 54px;

	}



	.artist-project-chart__artist-name {

		font-size: 15px;

	}



	.artist-project-chart__artist-subtitle {

		font-size: 11px;

	}



	.artist-project-chart__stats {

		grid-template-columns: 28px 25px;

		column-gap: 4px;

	}



	.artist-project-chart__toggle {

		width: 30px;

		height: 30px;

		font-size: 17px;

	}



	.artist-project-chart__details-inner {

		padding: 28px 20px;

	}



	.artist-project-chart__detail-grid {

		grid-template-columns: 1fr;

		gap: 28px;

	}



	.artist-project-chart__detail-box--history {

		grid-column: auto;

	}



	.artist-project-chart__detail-box strong {

		font-size: 38px;

	}



	.artist-project-chart__extra {

		grid-template-columns: 1fr;

		gap: 28px;

	}



	.artist-project-chart__extra-info {

		grid-template-columns: 1fr;

	}

	.artist-project-chart__share {

		width: 100%;

	}

	.artist-project-chart__profile {

		margin-top: 28px;

	}

	
    .artist-project-chart__featured-row {
        display: grid;

        grid-template-columns: 38px minmax(0, 1fr) 110px 45px;

        grid-template-rows: 180px auto;

        grid-template-areas:
            "rank image image movement"
            "star info stats toggle";

        align-items: center;

        padding: 20px 24px;
        column-gap: 8px;
        row-gap: 0px;

        min-height: 380px;
    }

    /* Top */
    .artist-project-chart__featured-rank {
        grid-area: rank;
    }

    .artist-project-chart__featured-image {
        grid-area: image;
    }

    .artist-project-chart__featured-movement {
        grid-area: movement;
    }

    /* Bottom */
    .artist-project-chart__featured-star {
        grid-area: star;
        align-self: center;
    }

    .artist-project-chart__featured-info {
        grid-area: info;

        min-width: 0;
        align-self: center;
    }

    .artist-project-chart__featured-stats {
        grid-area: stats;

        align-self: center;
        min-width: 0;
    }

    .artist-project-chart__featured-toggle {
        grid-area: toggle;

        align-self: center;
        justify-self: end;
    }

    /* Artist title */
    .artist-project-chart__featured-info h2,
    .artist-project-chart__featured-info h3 {
        font-size: 20px;
        line-height: 1.1;
        margin: 0 0 5px;
    }

    /* Artist subtitle */
    .artist-project-chart__featured-info p {
        font-size: 15px;
        line-height: 1.2;
        margin: 0;
    }

}