/* =========================================================
   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: #f97827;             /* orange fill behind the columns */
	color: #000;
	--rds-purple: #7067e0;
	--rds-olive: #90991a;
	--rds-grey: #cbcbcb;
	--rds-orange: #f97827;
	--rds-brown: #77593a;
	--rds-blue: #88A6C5;
	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: none;
	color: #000;
}
.rds-artist__role { display: none; }   /* role hidden under the name per design */

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

/* Col 1 — portrait photo: scale to column width, keep the original aspect. */
.rds-artist__photo img {
	display: block;
	width: 100%;
	height: auto;
}
.rds-artist__photo .rds-artist__ph {
	display: block;
	width: 100%;
	aspect-ratio: 577 / 862;
	background: linear-gradient(135deg, #8a8f2a, #77593a);
}

/* Col 2 — slate-blue bio panel (Figma). */
.rds-artist__desc {
	background: var(--rds-blue);
	padding: 24px;
	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 {
	min-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: none;
	color: #fff;
}
/* brown info strip */
.rds-ecard__meta {
	height: 35px;
	background: #77593a;
	color: #88A6C5;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	padding: 0 20px;
	font-size: 16px;
	line-height: 23px;
	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; }
/* hover → brown card + slate-blue title */
.rds-ecard:hover .rds-ecard__body { background: var(--rds-brown, #77593a); }
.rds-ecard,
.rds-ecard:hover { text-decoration: none; }   /* never underline the card text */
.rds-ecard:hover .rds-ecard__title,
.rds-ecard:hover .rds-ecard__type,
.rds-ecard:hover .rds-ecard__date-top { color: var(--rds-blue, #88A6C5); }

/* ---- mobile: single column, stacked (M5 frames). MUST stay AFTER desktop. ---- */
@media (max-width: 1024px) {
	.rds-artist__name { font-size: 12vw; }
	.rds-artist__desc-text { font-weight: 400; font-size: 22px; line-height: 1.03; color: #000; }
	.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; }
}

/* read-more toggle (mobile bio clamp) */
.nmw-readmore__btn {
	display: block;
	margin: 12px auto 0;
	background: transparent;
	border: 0;
	padding: 6px 0;
	font-family: var(--font-mono, monospace);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: #000;
	text-transform: lowercase;
	cursor: pointer;
}
.nmw-readmore__btn:hover { color: #fff; }

/* event card (#45): date on top → title → category, brown belka (venue | time), orange 2px divider */
.rds-ecard { border-bottom: 2px solid #f97827; }
.rds-ecard__date-top {
	font-family: var(--font-mono, monospace);
	font-size: 13px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--rds-grey, #cbcbcb);
	margin-bottom: 8px;
}
.rds-ecard__type { margin: 8px 0 0; }          /* category now sits UNDER the title */
.rds-ecard__meta { grid-template-columns: 1fr 1fr; }   /* venue left · time right */