/* =========================================================
   NMW redesign — Artist detail (Figma frame 42 / node 154:1377)
   Grey title bar (name + role) + 3 columns:
   [ portrait photo on purple ] | [ bio + social ] | [ event cards ].
   Measurements taken 1:1 from the 1728px design.
   ========================================================= */

.rds-artist {
	font-family: var(--font-sans);
	background: #7067e0;
	color: #000;
	--rds-purple: #7067e0;
	--rds-olive: #90991a;
	--rds-grey: #cbcbcb;
	--rds-orange: #f97827;
	padding-top: 95px;               /* clear the fixed redesign header */
}

/* ---- grey title bar (140px) — artist name + role ---- */
.rds-artist__title {
	height: 140px;
	background: var(--rds-grey);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 20px;
}
.rds-artist__name {
	margin: 0;
	font-weight: 700;
	font-size: 76px;
	line-height: 0.96;
	text-transform: capitalize;
	color: #000;
}
.rds-artist__role {
	margin: 4px 0 0;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #000;
}

/* ---- 3-column body ---- */
.rds-artist__body {
	display: flex;
	align-items: stretch;
	background: var(--rds-purple);
	min-height: calc(100vh - 95px - 140px);
}
.rds-artist__col {
	flex: 1 1 33.333%;
	width: 33.333%;
	min-width: 0;
}

/* Col 1 — portrait photo on purple (photo sits at the top of the column). */
.rds-artist__photo img,
.rds-artist__photo .rds-artist__ph {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 577 / 862;         /* tall portrait, from the design */
	object-fit: cover;
}
.rds-artist__ph { background: linear-gradient(135deg, #8a8f2a, #77593a); }

/* Col 2 — white bio panel. */
.rds-artist__desc {
	background: #fff;
	padding: 10px;
	color: #000;
}
.rds-artist__desc-text {
	font-weight: 400;
	font-size: 26px;
	line-height: 1.03;
	color: #000;
}
.rds-artist__desc-text p { margin: 0 0 1em; }
.rds-artist__social {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.4;
	color: #000;
}
.rds-artist__social a { color: #000; text-decoration: underline; }
.rds-artist__social span { color: #000; }

/* Col 3 — stacked event cards. First card is solid black (like the design). */
.rds-artist__events { display: block; }
.rds-artist__events .rds-ecard:first-child { background: #000; }

/* ---- event card (same shape as the venue detail) ---- */
.rds-ecard {
	position: relative;
	display: block;
	background: #131313;
	text-decoration: none;
	color: #fff;
}
.rds-ecard__body {
	height: 155px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 10px 30px;
	gap: 2px;
}
.rds-ecard__type {
	font-weight: 500;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.34px;
	text-transform: uppercase;
	color: var(--rds-grey);
	margin-bottom: 6px;
}
.rds-ecard__title {
	font-weight: 500;
	font-size: 36px;
	line-height: 1.15;
	text-transform: capitalize;
	color: #fff;
}
/* olive info strip */
.rds-ecard__meta {
	height: 35px;
	background: var(--rds-olive);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	padding: 0 20px;
	font-size: 16px;
	line-height: 23px;
	color: #000;
	white-space: nowrap;
}
.rds-ecard__venue { font-weight: 300; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.rds-ecard__date  { font-weight: 500; text-align: center; }
.rds-ecard__time  { font-weight: 300; text-align: right; }

/* ---- mobile: single column, stacked (M5 frames). MUST stay AFTER desktop. ---- */
@media (max-width: 1024px) {
	.rds-artist__name { font-size: 12vw; }
	.rds-artist__body { flex-direction: column; }
	.rds-artist__col { width: 100%; flex-basis: auto; min-width: 0; }
	.rds-ecard__title { font-size: 28px; }
	/* Let the olive strip's 1fr tracks shrink below their (nowrap) content so the
	   stacked column can't force the body wider than the viewport (which clipped
	   the bio). venue truncates via ellipsis; date/time keep their own width. */
	.rds-ecard__meta { min-width: 0; }
	.rds-ecard__venue,
	.rds-ecard__date,
	.rds-ecard__time { min-width: 0; }
}

/* phones: tighten the olive info strip so all three cells fit on one line. */
@media (max-width: 480px) {
	.rds-artist { overflow-x: hidden; }
	.rds-ecard__meta { gap: 8px; padding: 0 10px; font-size: 12px; }
}