/* =========================================================
   NMW redesign — Venue detail (Figma frame 46 / node 154:1573)
   Grey title bar (name + subtitle) + 3 columns:
   [ photo on purple ] | [ description + social ] | [ event cards ].
   Measurements taken 1:1 from the 1728px design.
   ========================================================= */

.rds-venue {
	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) — venue name + subtitle ---- */
.rds-venue__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-venue__name {
	margin: 0;
	font-weight: 700;
	font-size: 76px;
	line-height: 0.96;
	text-transform: capitalize;
	color: #000;
}
.rds-venue__subtitle {
	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-venue__body {
	display: flex;
	align-items: stretch;
	background: var(--rds-purple);
	min-height: calc(100vh - 95px - 140px);
}
.rds-venue__col {
	flex: 1 1 33.333%;
	width: 33.333%;
	min-width: 0;
}

/* Col 1 — venue photo on purple (photo sits at the top). */
.rds-venue__photo img,
.rds-venue__photo .rds-venue__ph {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 576 / 327;
	object-fit: cover;
}
.rds-venue__ph { background: linear-gradient(135deg, #8a8f2a, #77593a); }

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

/* Col 3 — stacked event cards. */
.rds-venue__events { display: block; }
.rds-venue__events .rds-ecard:first-child { background: #000; }

/* ---- event card (reused shape) ---- */
.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; }

.rds-venue__no-events {
	color: #fff;
	font-size: 16px;
	padding: 20px 10px;
	opacity: 0.85;
}

/* ---- mobile: single column, stacked (M5 frames). MUST stay AFTER desktop. ---- */
@media (max-width: 1024px) {
	.rds-venue { overflow-x: hidden; }
	.rds-venue__name { font-size: 12vw; }
	.rds-venue__body { flex-direction: column; }
	.rds-venue__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 a
	   stacked card can't force the body wider than the viewport. */
	.rds-ecard__meta,
	.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-ecard__meta { gap: 8px; padding: 0 10px; font-size: 12px; }
}