/* Events Page Styles */

/* ======================================================================================== */
/* RESTRUCTURING PLAN - Event Layout Architecture
/* ======================================================================================== */
/*
GOAL: Consistent vertical spacing where each event date row takes exactly 40px in DOM flow,
      with all event content (title, details) overlaying absolutely on top.

CURRENT PROBLEM:
- Event_Container takes 96px (title + date) when collapsed
- Creates inconsistent vertical rhythm
- Title row shows through as black gap when collapsed
- Hours spent aligning expanded date rows with collapsed date rows

NEW STRUCTURE:
1. Event_Overlay (position: absolute, bottom: 40px, sits directly above date row)
   - Collapsed state: Just title row (4rem height)
   - Expanded state: Title + artist/venue + time/music row (NO date, NO cover - grows upward)
   - SAME POSITION for both states - NO repositioning needed on expand/collapse!
   - Purpose: Content floats above date row, grows/shrinks vertically

2. Event_Date_Row (40px, position: relative, in DOM flow)
   - Contains: Date cells only (day of week, month, day, days away)
   - Purpose: Creates consistent 40px vertical rhythm for calendar
   - Always at bottom of Event_Container
   - Background: Striped (even/odd) when collapsed, transparent when expanded
   - Border: Month color when collapsed, white when expanded

3. Event_Cover_Overlay (position: absolute, top: 40px, below date row)
   - Contains: Cover/ticket info
   - Only visible when expanded
   - Separate from main overlay for cleaner positioning
   - DOM should not be affected at all by expanded/collapsed state.

BENEFITS:
- Every event = exactly 40px of vertical space in flow (predictable scrolling)
- Title overlays above previous content (no black gaps)
- Collapsed/expanded just changes overlay content (not positioning strategy)
- Date row alignment is automatic (expanded date sits at same bottom: 0 as date row)
- Cleaner separation: flow layout vs overlay content

IMPLEMENTATION STEPS:
1. Update HTML structure in Page_Events.js Generate_Expanded_HTML()
2. Extract Main_Date into Event_Date_Row wrapper (outside Event_Overlay)
3. Create Event_Overlay wrapper for all content including title
4. Update CSS to handle new structure
5. Update Page_Base.js if it references old selectors
6. Test collapsed/expanded transitions, scroll centering, date alignment

CRITICAL: Both collapsed and expanded states use position: absolute for overlay.
         Only difference is content height. Date row stays in flow always.
*/

@font-face {
	font-family: 'Enathica';
	src: url('../Fonts/Enathica.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Technology';
	src: url('../Fonts/Technology.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Hustle';
	src: url('../Fonts/Hustle Bright.woff2') format('woff2'),
	     url('../Fonts/Hustle Bright.woff') format('woff'),
	     url('../Fonts/Hustle Bright.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Grotters';
	src: url('../Fonts/Grotters.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Outrunner';
	src: url('../Fonts/AXROutrunner.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Ranger Italic Shadow';
	src: url('../Fonts/Ranger Italic Shadow.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

.Title[style*="Ranger Italic Shadow"] {
	font-weight: normal !important;
	font-size: calc(var(--Text_5rem) * 1.2) !important;
	color: var(--Yellow_250) !important;
	text-shadow: 3px 3px 0 var(--Pink_240);
}

/*
SIZING RULES - DO NOT VIOLATE:
1. Row width: Set ONCE in base styles (95vw)
   - NEVER override in media queries
   
2. Block widths: Percentages of row width
   - Desktop: Date=15%, Venue=18%, Main=55%, Artist=12%
   - Mobile: Date=15%, Main=85% (Venue/Artist hidden)
   
3. Centering: .Events_Data uses flex with align-items: center
   
4. Units:
   - Row width: vw (viewport-relative)
   - Block widths: % (row-relative)
   - Vertical spacing: vw (viewport-relative)
*/

.Events_Data {
	width: 100%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.Events_Data::after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, 
		#1a2332 0,        /* Deep blue-gray at top */
		#2d4a6e 15vh,     /* Blue-gray */
		#4a6fa5 30vh,     /* Muted sky blue */
		#d4a574 45vh,     /* Warm peachy glow (sun's reflection) */
		#8b6f8a 55vh,     /* Lavender-purple */
		#3d2e4f 65vh,     /* Deep purple */
		#1a1520 75vh,     /* Very dark purple */
		#000000 75vh      /* Black starts at 75vh */
	);
	z-index: -2;
	pointer-events: none;
}

.Events_Data::before {
	content: '';
	position: fixed;
	margin-top: min(30vh, 200px);
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70vw;
	height: 70vw;
	max-height: 30vh;
	background-image: url('../Page_Base_Images/Logo_Westend.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.15;
	z-index: -1;
	pointer-events: none;
	filter: brightness(0.3);
}

/* ======================================================================================== */
/* EVENT CONTAINER & EVENT */
/* ======================================================================================== */
/* IMPORTANT LAYOUT RULES:
   - Container height: 96px (56px title + 40px date) - matches collapsed event height
   - Collapsed events: position: relative, flow normally, fill container exactly
   - Expanded events: position: absolute with bottom: -3.5rem to push down by cover row height
   - This keeps the DATE ROW at the same vertical position (56px from container top)
   - Expanded events grow UPWARD from the date row position
   - Container overflow: visible allows expanded content to extend beyond container
*/
.Event_Container {
	width: 100vw;
	display: flex;
	justify-content: center;
	background: transparent;
	position: relative;
	height: 40px; /* Only date row height - title overlays above */
	min-height: 40px;
	overflow: visible; /* Allows overlays to extend beyond container */
	--event-row-height: 40px;
	z-index: 1;
}

@media (min-width: 1024px) {
	.Event_Container {
		height: 56px;
		min-height: 56px;
		--event-row-height: 56px;
	}
}

/* Past events: completely transparent background, simple structure */
.Event_Container_Past {
	background: transparent !important;
	mix-blend-mode: screen;
}

.Event_Container_Past .Event_Collapsed_Row {
	background: transparent !important;
	filter: grayscale(100%) brightness(0.5);
	opacity: 0.5;
}

.Event_Container_Past .Event_Date {
	justify-content: flex-start;
	margin-left: 8vw;
}

.Event_Container_Past .Date_Day {
	font-size: 0.5em;
	font-weight: normal;
}

/* Event_Overlay: Contains title + content rows, sits above date row */
.Event_Overlay {
	position: absolute;
	bottom: var(--event-row-height, 40px); /* Dynamically positioned based on Event_Date_Row height */
	left: 0;
	width: 100vw;
	max-width: 100vw;
	z-index: 10;
	overflow: visible; /* Allow glow effects to extend beyond container */
	transition: none;
	font-size: clamp(8px, 1.5vw, 24px);
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto;
}

.Event_Collapsed {
	/* No positioning changes needed - overlay stays at bottom: 40px for both states */
	z-index: 1;
}

/* Event_Collapsed_Row: Always 40px in flow, creates consistent vertical rhythm */
.Event_Collapsed_Row {
	position: relative;
	width: 100vw;
	height: 40px;
	z-index: 5;
	display: flex;
	align-items: stretch;
	background: transparent;
}

@media (min-width: 1024px) {
	.Event_Collapsed_Row {
		height: 56px;
	}
}

.Event_Collapsed_Row .Event_Collapsed_Content {
	flex: 1;
}

/* Centered/selected event highlight - 50% white with additive blend */
.Event_Container_Centered .Event_Collapsed_Row {
	background: rgba(255, 255, 255, 0.15) !important;
	mix-blend-mode: screen;
}

/* ======================================================================================== */
/* DATE MARKER (for days without events) */
/* ======================================================================================== */

.Date_Marker {
	width: 100vw;
	display: grid;
	grid-template-columns: 8vw auto auto 1fr;
	align-items: center;
	padding: 0.4rem 0;
	background: transparent;
	opacity: 0.5;
	mix-blend-mode: screen;
}

.Date_Marker_Today {
	padding: 1.6rem 0;
}

.Date_Marker_Today .Date_Marker_Date,
.Date_Marker_Today .Date_Marker_Day {
	filter: brightness(2);
}

.Date_Marker_Date {
	font-size: var(--Text_Small);
	color: var(--color-gray-dark);
	white-space: nowrap;
	text-align: left;
	padding-right: 0.5rem;
	grid-column: 2;
}

.Date_Marker_Today .Date_Marker_Date {
	color: var(--color-gray-dark);
	font-size: var(--Text_Mid);
	font-weight: bold;
}

.Date_Marker_Day {
	font-size: var(--Text_Small);
	color: var(--color-gray-dark);
	font-weight: bold;
	text-align: left;
	grid-column: 3;
}

.Date_Marker_Today .Date_Marker_Day {
	font-size: var(--Text_Mid);
	color: var(--month-highlight-color);
}

.Date_Marker_Centered {
	background: rgba(255, 255, 255, 0.1);
	opacity: 1;
}

.Date_Marker_Centered .Date_Marker_Date,
.Date_Marker_Centered .Date_Marker_Day {
	filter: brightness(2);
	color: var(--month-highlight-color, var(--color-cyan));
	font-weight: bold;
}

.Date_Marker_Centered .Date_Marker_Text {
	color: var(--month-highlight-color, var(--color-cyan));
	font-weight: bold;
}

/* ======================================================================================== */
/* DATE - Collapsed row content grid */
/* ======================================================================================== */

.Event_Collapsed_Content {
	display: grid;
	grid-template-columns: 1.5fr 4fr 1.5fr;
	width: 100%;
	align-items: stretch;
	box-sizing: border-box;
	font-size: 40px;
	background: none;
}

@media (max-width: 512px) {
	.Event_Collapsed_Content {
		grid-template-columns: 1.5fr 4fr; /* Remove 3rd column, title expands */
	}
}

@media (min-width: 1024px) {
	.Event_Collapsed_Content {
		font-size: 56px;
	}
}

/* Disco at Dive event - use green background when expanded */
.Event_Overlay:not(.Event_Collapsed) ~ .Event_Collapsed_Row:has(.Title_Disco_at_Dive) {
	background: var(--Color_Event_Disco) !important;
}

.Event_Center {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* When collapsed: show title, hide day of week */
.Event_Collapsed ~ .Event_Collapsed_Row .Event_Center .Main_Date_Day_Of_Week {
	display: none;
}

.Event_Collapsed ~ .Event_Collapsed_Row .Event_Center .Event_Title_Collapsed {
	display: flex;
}

/* When expanded: show day of week, hide title */
.Event_Overlay:not(.Event_Collapsed) ~ .Event_Collapsed_Row .Event_Center .Main_Date_Day_Of_Week {
	display: flex;
}

.Event_Overlay:not(.Event_Collapsed) ~ .Event_Collapsed_Row .Event_Center .Event_Title_Collapsed {
	display: none;
}

.Main_Date_Day_Of_Week {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-right: 16px;
	font-size: 0.75em;
	color: var(--color-white);
	line-height: 1;
	font-weight: bold;
}

.Event_Title_Collapsed {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75em; /* Scale down all titles when collapsed */
	position: relative;
	overflow: visible;
}

.Event_Title_Collapsed .Title {
	font-size: 1.5em; /* Larger than container */
	color: var(--color-white);
	line-height: 1;
	font-weight: bold;
	position: absolute;
	white-space: nowrap;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.Event_Date {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-left: 16px;
}

.Date_Month {
	color: var(--color-white);
	text-transform: uppercase;
	font-size: 0.5em;
	line-height: 1;
	margin-right: 0.25em;
}

.Date_Day {
	font-weight: bold;
	font-size: 0.75em;
	color: var(--color-white);
	line-height: 1;
}

.Date_Day_Suffix {
	font-weight: normal;
	font-size: 0.7em;
	line-height: 1;
	margin-left: 0.075em;
}

@media (max-width: 512px) {
	.Date_Month {
		font-size: 0.4em;
	}

	.Date_Day {
		font-size: 0.6em;
		margin-right: 0.5em;
	}

	.Date_Day_Suffix {
		display: none;
	}
}

.Event_Date_Days_Away {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 24px;
	font-size: 0.75em;
	color: var(--color-white);
	line-height: 1;
	font-weight: bold;
}

@media (max-width: 512px) {
	.Event_Date_Days_Away {
		display: none;
	}
}

.Days_Away_Text {
	font-size: 0.4em;
	margin-left: .5em;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1;
}

/* ======================================================================================== */
/* MAIN */
/* ======================================================================================== */
/* IMPORTANT: DO NOT ADD PADDING, MARGINS, OR ROW-GAP TO .Event_Main OR ITS CHILDREN */
/* User wants NO spacing added - content should fit naturally */

.Event_Content {
	background: none;
	display: grid;
	grid-template-rows: auto 3.5rem 3.5rem 40px 3.5rem;
	height: auto;
	align-content: start;
	align-items: stretch;
	justify-items: center;
	flex-shrink: 0;
	box-sizing: border-box;
	gap: 0;
	row-gap: 0;
}

.Event_Collapsed .Event_Content {
	grid-template-rows: 4rem 40px;
	height: auto;
	align-content: stretch;
	background: none;
}

/* Upper rows wrapper with gradient (rows 1-3) */
.Event_Rows_Gradient {
	display: grid;
	grid-template-rows: auto auto auto; /* Title, Artist/Venue, Time */
	background: linear-gradient(to bottom, transparent 0%, rgba(30, 30, 30, 0.85) 100%);
}

.Event_Collapsed .Event_Rows_Gradient {
	grid-template-rows: auto; /* Just title when collapsed */
	background: none;
}

/* Hide content rows when collapsed */
.Event_Collapsed .Event_Overlay_Main,
.Event_Collapsed .Event_Overlay_Music {
	display: none;
}

/* Hide cover when collapsed */
.Event_Collapsed .Event_Cover {
	display: none;
}

.Event_Music {
	display: none; /* Hidden - genre/era moved to Main_Time row */
}

.Music_Genre {
	text-align: center;
	color: #888;
	font-size: var(--Text_Mid);
	font-style: italic;
}

.Music_Era {
	text-align: center;
	color: #888;
	font-size: var(--Text_Mid);
	font-style: italic;
}

.Event_Overlay_Title {
	color: var(--color-white);
	font-weight: bold;
	text-align: center;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--Text_5rem);
	padding: 1rem 0; /* Add vertical padding to prevent glow from being cropped */
	overflow: visible; /* Allow glow effect to extend beyond container */
}

.Event_Collapsed .Event_Overlay_Title {
	display: none; /* Hidden when collapsed - title shown in date row instead */
}

.Title {
	color: var(--color-white);
	font-weight: bold;
	text-align: center;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--Text_5rem);
}

.Event_Collapsed .Title {
	font-size: var(--Text_Larger);
}

/* ======================================================================================== */
/* MAIN - Artist + Venue */
/* ======================================================================================== */

.Event_Overlay_Main {
	font-size: var(--Text_Large);
	align-self: center;
	display: grid;
	grid-template-columns: 1fr 4rem 1fr;
	width: 100%;
	align-items: center;
}

.Main_Artist {
	color: #f0f;
	text-align: right;
	font-size: 1.5em;
}

.Main_At {
	color: var(--color-gray);
	font-size: 0.75em;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
}



.Main_Venue {
	color: #0ff;
	text-decoration: none;
	text-align: left;
	padding-left: 0.5em;
}

.Main_Venue_Link:hover {
	text-decoration: none;
	color: var(--color-white);
}

@keyframes flicker {
	0%, 49% {
		opacity: 1;
		text-shadow: 0 0 8px rgba(0, 250, 250, 0.5);
	}
	50%, 99% {
		opacity: 0.6;
		text-shadow: 0 0 4px rgba(0, 250, 250, 0.3);
	}
}

.Event_Overlay_Music {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	width: 100%;
	font-size: var(--Text_Larger);
	font-weight: normal;
	color: var(--color-cyan);
	font-family: 'Technology', monospace;
	letter-spacing: 0.075em;
	text-shadow: 0 0 8px rgba(0, 250, 250, 0.5);
}

.Event_Overlay_Music .Music_Genre {
	grid-column: 1;
	font-family: Arial, sans-serif;
	letter-spacing: normal;
	animation: none !important;
	text-shadow: none;
}

.Event_Overlay_Music .Music_Era {
	grid-column: 3;
	font-family: Arial, sans-serif;
	letter-spacing: normal;
	animation: none !important;
	text-shadow: none;
}

.Music_Time {
	grid-column: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25em;
	animation: flicker 0.5s infinite;
}

.Time_Numbers {
	text-align: center;
}

.Time_Period {
	font-size: 0.5em;
	font-weight: normal;
	text-transform: uppercase;
}

.Main_No_Cover {
	text-align: center;
	font-size: var(--Text_Large);
	color: var(--color-cover-gold);
	background: var(--color-cover-gold-dark);
	font-weight: bold;
	text-transform: uppercase;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
}

.Event_Cover {
	display: none; /* Hidden for now - will be positioned as absolute sticker later */
	position: absolute;
	top: 40px;
	left: 0;
	width: 100vw;
	height: 3.5rem;
	z-index: 3;
	grid-template-columns: 1fr 2fr 1fr;
	grid-template-rows: 1fr;
	gap: 0;
	justify-items: center;
	align-items: center;
}

.Cover_Advanced {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.Cover_GetTickets {
	width: 100%;
	height: 100%;
}

.Cover_Door {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--color-cover-dark);
	color: #888;
	font-size: var(--Text_Mid);
}

.Cover_Door .Main_Cover_Value {
	color: var(--color-cover-bright);
}

.Main_Cover_Value {
	color: var(--color-cover-bright);
	font-weight: bold;
	font-size: var(--Text_Large);
}

.Cover_GetTickets_Link {
	background: var(--color-cover);
	color: var(--color-gray-bright);
	text-decoration: none;
	font-weight: bold;
	font-size: var(--Text_Large);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.Cover_GetTickets_Link .Main_Cover_Value {
	color: var(--color-cover-bright);
	font-size: var(--Text_Large);
	font-weight: bold;
}

.Cover_GetTickets_Link:hover {
	background: var(--color-cover-bright);
	color: var(--color-white);
}

.Cover_GetTickets_Link:hover .Main_Cover_Value {
	color: var(--color-white);
}

/* ======================================================================================== */
/* ARTIST */
/* ======================================================================================== */

.Event_Artist {
	background: var(--color-gray-darker);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-shrink: 0;
	box-sizing: border-box;
	
}

.Event_Artist .Artist_Link {
	text-decoration: none;
	background: #1877F2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

/* ======================================================================================== */
/* RESPONSIVE - MOBILE */
/* ======================================================================================== */

/* Lock sizing at minimum viewport width */
@media (max-width: 320px) {
	.Event {
		width: 288px; /* 90% of 320px */
	}
}