/* =========================================================
   NMW redesign — Event / Programme detail (Figma frame 50 / node 154:1503)
   Full-width title band + 3 columns
   [ hero on purple ] | [ description ] | [ date/time + directions + purchase ]
   then a row of the event's artist cards.
   Measurements taken 1:1 from the 1728px design.
   ========================================================= */

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

/* ---- full-width grey title band — "<title> AT <venue>" ---- */
.rds-event__title {
	min-height: 180px;
	background: var(--rds-grey);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px 40px;
}
.rds-event__title-type {                     /* type subtitle under the big title (desktop + mobile) */
	margin-top: 12px;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #000;
}
.rds-event__at { display: none; }            /* venue moved into the meta column, not the title */
.rds-event__heading {
	margin: 0;
	font-weight: 700;
	font-size: 64px;
	line-height: 0.98;
	text-transform: none;
	color: #000;
	max-width: 1495px;
}
.rds-event__at { font-weight: 700; }

/* ---- 3-column body ---- */
.rds-event__body {
	display: flex;
	align-items: stretch;
	background: var(--rds-orange);
	min-height: 751px;
}
.rds-event__col {
	flex: 1 1 33.333%;
	width: 33.333%;
	min-width: 0;
}

/* Col 1 — hero image on purple (sits at the top of the column). */
.rds-event__photo img,
.rds-event__photo .rds-event__ph {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 582 / 751;
	object-fit: cover;
}
.rds-event__ph { background: linear-gradient(135deg, #8a8f2a, #77593a); display: block; }

/* Col 2 — white description panel. */
.rds-event__desc {
	background: #88A6C5;
	padding: 16px;
	color: #000;
}
.rds-event__desc-text {
	font-weight: 400;
	font-size: 22px;
	line-height: 1.08;
	color: #000;
}
.rds-event__desc-text p { margin: 0 0 1em; }

/* works list (inside the blue description column) */
.rds-event__works { margin-top: 24px; border-top: 1px solid rgba(0, 0, 0, 0.25); padding-top: 16px; }
.rds-event__works-title {
	margin: 0 0 12px;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: #000;
}
.rds-event__work { margin: 0 0 16px; }
.rds-event__work-title { font-weight: 700; font-size: 20px; line-height: 1.1; color: #000; }
.rds-event__work-meta {
	font-family: var(--font-mono, monospace);
	font-size: 13px;
	letter-spacing: 0.3px;
	color: #000;
	opacity: 0.8;
	margin: 2px 0 4px;
}
.rds-event__work-desc { font-size: 16px; line-height: 1.15; color: #000; }
.rds-work-rm__btn {
	display: inline;
	background: none;
	border: 0;
	padding: 0;
	margin-left: 4px;
	font: inherit;
	font-weight: 700;
	color: #000;
	text-decoration: underline;
	cursor: pointer;
}
.rds-work-rm__btn:hover { color: #fff; }
.rds-event__work-link { display: inline-block; margin-top: 4px; font-size: 14px; color: #000; text-decoration: underline; }
.rds-event__work-link:hover { color: #fff; }

/* Col 3 — date/time + directions + purchase, on purple. */
.rds-event__meta {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;          /* when → tickets → related flow from the top */
	background: #77593a;                  /* brown meta column (Figma) */
	color: #fff;
	padding: 0;
}
.rds-event__when {
	flex: 0 0 auto;                       /* sits at the top; BILETY drops to the bottom (meta space-between) */
	padding: 40px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
}
/* order on desktop: date · venue (big) · time · directions */
.rds-event__date   { order: 1; font-weight: 500; font-size: 20px; letter-spacing: 0.3px; }
.rds-event__venue  { order: 2; display: block; font-weight: 700; font-size: 40px; line-height: 1.04; margin: 8px 0; }
.rds-event__venue-entry { font-size: 15px; font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; }
.rds-event__time   { order: 3; font-weight: 300; font-size: 18px; }
.rds-event__type   { display: none; }   /* type now lives in the title subtitle */
.rds-event__directions {
	order: 4;
	display: inline-block;
	margin-top: 14px;
	font-size: 12px;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
/* compact full-width orange ticket bar (sits under the when-block) */
.rds-event__ticketbar {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: var(--rds-orange);
	color: #000;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.1;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	padding: 16px 20px;
}
.rds-event__ticketbar:hover { background: #000; color: var(--rds-orange); }

/* ---- "Artistic people" grey label bar above the persons row ---- */
.rds-event__artists-label {
	background: var(--rds-grey);
	color: #000;
	min-height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px 40px;
	font-weight: 700;
	font-size: clamp(32px, 5vw, 64px);
	line-height: 0.96;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}
@media (max-width: 1024px) {
	.rds-event__artists-label { min-height: 64px; font-size: 28px; }
}

/* ---- related events (meta column: grey label + stacked black cards) ---- */
.rds-event__related { display: block; }
.rds-event__related-label {
	background: var(--rds-grey);
	color: #000;
	min-height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 10px 20px;
	font-weight: 700;
	font-size: clamp(16px, 1.4vw, 22px);
	letter-spacing: 0.2px;
	text-transform: uppercase;
}
.rds-event__rcard { display: flex; flex-direction: column; text-decoration: none; color: #fff; background: #000; border-top: 1px solid var(--rds-orange); }
.rds-event__rcard-body {
	flex: 1 1 auto;                 /* fill the card so the belka pins to the bottom */
	min-height: 120px;             /* uniform baseline height across all cards */
	padding: 20px 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	transition: background 0.15s ease;
}
.rds-event__rcard-type {
	display: block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.34px;
	text-transform: uppercase;
	color: var(--rds-grey);
	margin-bottom: 6px;
}
.rds-event__rcard-title {
	display: block;
	font-weight: 500;
	font-size: 30px;
	line-height: 1.12;
	text-transform: none;
	transition: color 0.15s ease;
}
.rds-event__rcard-belka {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
	min-height: 34px;
	padding: 6px 20px;
	background: #77593a;
	color: #88A6C5;
	font-size: 14px;
	white-space: nowrap;
}
.rds-event__rcard-venue { text-align: left;   font-weight: 300; overflow: hidden; text-overflow: ellipsis; }
.rds-event__rcard-date  { text-align: center; font-weight: 500; }
.rds-event__rcard-time  { text-align: right;  font-weight: 300; }
.rds-event__rcard:hover .rds-event__rcard-body { background: #77593a; }
.rds-event__rcard:hover .rds-event__rcard-title { color: var(--rds-blue, #88A6C5); }

/* ---- "Other events" — grey label + full-width 3-col card grid (bottom) ---- */
.rds-event__other-label {
	background: var(--rds-grey);
	color: #000;
	min-height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px 40px;
	font-weight: 700;
	font-size: clamp(32px, 5vw, 64px);
	line-height: 0.96;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}
.rds-event__other {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--rds-orange);
}
.rds-event__other .rds-event__rcard { border-top: 0; }

/* ---- artist cards row (photo + olive name strip → artist single) ---- */
.rds-event__artists {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background: var(--rds-orange);
}
.rds-eartist { display: block; text-decoration: none; color: #000; }
.rds-eartist__photo { position: relative; overflow: hidden; isolation: isolate; }
.rds-eartist__photo img,
.rds-eartist__photo .rds-eartist__ph {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 577 / 417;
	object-fit: cover;
	transition: filter 0.25s ease, opacity 0.25s ease;
}
.rds-eartist__ph { background: linear-gradient(135deg, #8a8f2a, #77593a); display: block; }
/* duotone hover like the artists overview (mirror + exclusion tint) */
.rds-eartist__photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: #77593A;
	mix-blend-mode: exclusion;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}
.rds-eartist:hover .rds-eartist__photo img { filter: saturate(1.7) invert(1); opacity: 0.6; transform: scaleX(-1); }
.rds-eartist:hover .rds-eartist__photo::after { opacity: 1; }
/* role strip (black) sits above the name strip — like the artists overview */
.rds-eartist__role {
	background: #000;
	color: #fff;
	font-family: var(--font-mono, monospace);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-align: center;
	padding: 6px 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* name strip (slate-blue, black ink) */
.rds-eartist__name {
	min-height: 50px;
	background: #88A6C5;
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	font-weight: 700;
	font-size: 20px;
	text-align: center;
	text-transform: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rds-eartist:hover .rds-eartist__role { color: var(--rds-orange); }

/* ---- mobile: single column, stacked (M5 frames). MUST stay AFTER desktop. ---- */
@media (max-width: 1024px) {
	.rds-event { overflow-x: hidden; }
	.rds-event__heading { font-size: 9vw; }
	.rds-event__at { display: none; }            /* venue moves to the brown strip on mobile */
	.rds-event__title-type { display: block; margin-top: 12px; font-size: 14px; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; color: #000; }
	/* M5 order: title → info belka → BILETY → bio → image → artists */
	.rds-event__body { flex-direction: column; min-height: 0; }   /* no forced height → no empty orange gap */
	.rds-event__col { width: 100%; flex-basis: auto; min-width: 0; }
	.rds-event__body--nophoto .rds-event__col { width: 100%; flex-basis: auto; }
	/* flatten the meta column so its children (info belka / tickets / related)
	   join the body flex and can be ordered relative to photo + description */
	.rds-event__meta { display: contents; }
	.rds-event__when     { order: 1; }   /* info belka */
	.rds-event__ticketbar { order: 2; }  /* BILETY / ZAPISY bar */
	.rds-event__photo    { order: 3; }   /* photo above the description (when present) */
	.rds-event__desc     { order: 4; }   /* description */
	.rds-event__related  { order: 5; }   /* related events: after the description, before artists */
	.rds-event__artists { grid-template-columns: 1fr; }
	.rds-event__other { grid-template-columns: 1fr; }
	.rds-event__other-label { min-height: 64px; font-size: 28px; }
	.rds-eartist__role { font-size: 10px; padding: 3px 10px; letter-spacing: 0.6px; }
	.rds-eartist__name { font-size: 16px; min-height: 42px; }

	/* info as a brown belka (one justified row again on mobile) */
	.rds-event__when {
		background: #77593a;
		color: #fff;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 4px 14px;
		padding: 12px 18px;
		text-align: left;
	}
	.rds-event__when > * { order: 0; }   /* natural DOM order on mobile: venue · date · time */
	.rds-event__venue { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-weight: 500; font-size: 15px; margin: 0; }
	.rds-event__type { display: none; }          /* strip shows venue; the type sits under the title */
	.rds-event__date { flex: 0 0 auto; white-space: nowrap; font-size: 15px; font-weight: 500; }
	.rds-event__time { flex: 0 0 auto; white-space: nowrap; font-size: 15px; font-weight: 300; margin: 0; }
	.rds-event__directions { display: none; }
	/* purchase → full-width orange BILETY bar */
	.rds-event__ticket { padding: 0; border-top: 0; }
	.rds-event__purchase {
		display: block;
		width: 100%;
		background: var(--rds-orange);
		text-align: center;
		padding: 16px;
		box-sizing: border-box;
	}
	.rds-event__price { background: #77593a; color: #fff; margin: 0; padding: 8px; text-align: center; }
}

@media (max-width: 480px) {
	.rds-event__heading { font-size: 32px; }
	.rds-event__desc-text { font-size: 18px; }
}

/* 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; }

/* ---- optional partners strip (grey label + brown image band, like the home footer) ---- */
.rds-event__partners-label {
	background: var(--rds-grey);
	color: #000;
	min-height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px 40px;
	font-weight: 700;
	font-size: clamp(32px, 5vw, 64px);
	line-height: 0.96;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}
.rds-event__partners {
	width: 100%;
	background: var(--rds-brown, #77593a);
	line-height: 0;
}
.rds-event__partners-img { display: block; width: 100%; height: auto; }

/* Fixed-size partners logo (admin toggle "Fixed max-width") — centred on the
   brown band, capped by the inline max-width the editor sets (default 300px). */
.rds-event__partners--fixed { text-align: center; padding: 28px 0; line-height: normal; }
.rds-event__partners--fixed .rds-event__partners-img { display: inline-block; width: auto; max-width: 300px; }

@media (max-width: 1024px) {
	.rds-event__partners-label { min-height: 88px; font-size: 40px; }
}

/* no hero image → drop the empty column, bio + meta become 50/50 (desktop only;
   on mobile everything stacks full-width like the standard layout) */
@media (min-width: 1025px) {
	.rds-event__body--nophoto .rds-event__col { flex: 1 1 50%; width: 50%; }
}