/* =============================================================================
   13-events-workshops.css
   Events & Workshops page: period grid, workshop cards, JobClub table.

   Loaded via "wp_enqueue_style()" in `inc/enqueue.php` 
   >> the load ORDER in inc/enqueue.php matches the numeric filename order
   and the order they appeared in original style.css file. 
============================================================================= */
   
/* ------------------------------
   || EVENTS & WORKSHOPS

   Layout: the first 4 periods render as a fixed 2x2 grid 
           5th period only exists if it has events 
   Events split into up-to 3 sub-sections: 
        Workshops, JobClub, local/info
		
------------------------------- */


#events_schedule {
	--ev-orange-shade: #d14a34;
	--ev-neutral-border: #e4e0d9;
	padding: 20px 0 60px;
	/* overflow-x: hidden; / * to prevent horizontal scrolling */
}
#events_schedule>.container>h1 {
	margin-bottom: 15px;
}
#events_schedule>.container>p.large {
	max-width: 850px;
	color: var(--js-grey);
	margin-bottom: 30px;
}
#ev-jobclub {
	margin-top: 30px;
}

/* ----- Jump links ----- */
.ev_jump {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 20px 20px 20px;
	margin: 0 0 30px;
	border: 1px solid var(--ev-neutral-border);
	border-radius: 10px;
	background-color: var(--js-orange-tint);
}
.ev_jump_link {
	font-family: "effrabold";
	font-size: 14pt;
	line-height: 1;
	text-decoration: none;
	color: var(--js-grey);
	background-color: var(--js-white);
	border: 1px solid var(--ev-neutral-border);
	border-radius: 30px;
	padding: 11px 18px;
	transition: all 0.15s ease-in-out;
}
.ev_jump_link:hover,
.ev_jump_link:focus-visible {
	background-color: var(--js-orange);
	border-color: var(--js-orange);
	color: var(--js-white);
}

/* ---- 2x2 grid of period cards ---- */
.ev_periods_grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* "auto" sizes each ROW to its tallest cell  */
	grid-auto-rows: auto;
	gap: 24px;
	align-items: stretch;
}

/* ---------------------
|| PERIOD CELL
---------------------- */
.ev_period_cell {
	display: flex;
	flex-direction: column;
	/* Grid items default to min-width:auto, so a wide unbreakable child (like JobClub table's min-width:420px)
	   can force everything wider than the viewport. min-width:0 opts back into normal shrinking */
	min-width: 0;
	background-color: var(--js-white);
	border: 1px solid var(--ev-neutral-border);
	border-radius: 8px;
	padding: 13px 20px 13px;
	scroll-margin-top: 120px;
	transition: box-shadow 0.2s ease-in-out;
}
.ev_period_cell:hover {
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}
.ev_period_cell_full {
	margin-top: 24px;
}

.ev_period_head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px 4px;
	padding-bottom: 10px;
	margin-bottom: 0px;
	/* transparent bottom border until .ev_period_body gets scrolled, toggled by .ev_period_head_scrolled. */
	border-bottom: 2px solid transparent;
	transition: border-color 0.15s ease-in-out;
}
.ev_period_head_scrolled {
	border-bottom-color: var(--ev-neutral-border);
}
.ev_period_head h2 {
	margin-bottom: 0;
	font-size: 15pt;
	line-height: 20pt;
	color: var(--js-orange);
}
.ev_period_count {
	font-family: "effrabold";
	font-size: 10.5pt;
	color: var(--ev-orange-shade);
	background-color: var(--js-orange-tint);
	border-radius: 10px;
	padding: 5px 12px;
	white-space: nowrap;
}
.ev_period_note {
	margin: 4px 0 0;
	font-size: 12.5pt;
	line-height: 17pt;
	color: var(--js-grey);
}

/* Empty state */
.ev_empty {
	background-color: var(--ev-neutral-tint);
	border: 1px dashed #d9d2c6;
	border-radius: 16px;
	padding: 24px 24px;
	margin-top: 18px;
}
.ev_empty p {
	margin: 0 0 16px;
	color: var(--js-grey);
}

/* Scrolls internally when a cell has a lot, so the grid stays visually even. */
.ev_period_body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 0;
	max-height: 500px;
	overflow-y: auto;
	padding-right: 8px; /* room for the scrollbar */
	scrollbar-width: thin;
	scrollbar-color: #acaeaf transparent;
}
/* Chrome/Safari/Edge default to macOS-style overlay scrollbars: only appear while scrolling 
   Styling ::-webkit-scrollbar at all switches browsers to always-visible-when-overflowing bar  */
.ev_period_body::-webkit-scrollbar {
	width: 6px;
}
.ev_period_body::-webkit-scrollbar-track {
	background: transparent;
}
.ev_period_body::-webkit-scrollbar-thumb {
	background-color: #acaeaf;
	border-radius: 5px;
}
.ev_period_body::-webkit-scrollbar-thumb:hover {
	background-color: var(--ev-orange-shade);
}
.ev_period_cell_full .ev_period_body {
	max-height: none;
	overflow: visible;
}

.ev_subsection_title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: "effrabold";
	font-size: 12pt;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--js-grey);
	margin-bottom: 12px;
	padding-top: 10px;
	margin-top: 10px;
	border-top: 2px solid #d1958270;
}

.ev_subsection_title .ev_icon, 
.ev_subsection_jobclub .ev_subsection_title .ev_icon {
	color: var(--js-orange);
}

/* ---- Workshop cards ---- */
.ev_list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ev_card {
	/* .ev_card is a link */
	display: block;
	background-color: var(--js-white);
	border: 1px solid var(--ev-neutral-border);
	border-left: 5px solid #f15f4870;
	border-radius: 10px;
	padding: 10px 10px 5px;
	transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.ev_card:hover {
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
	transform: translateY(-1px);
	border-left-color: var(--ev-orange-shade);
}
.ev_when {
	display: flex;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 15px;
	margin-bottom: 8px;
}
.ev_date, .ev_time, .ev_place {
	font-family: "effrabold";
	font-size: 11pt;
	color: var(--js-grey);
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
}
.ev_date, .ev_time {
	padding-right: 10px;
	border-right: 2px solid var(--js-grey);
}

.ev_card_title {
	font-family: "effrabold";
	font-size: 12pt;
	line-height: 14pt;
	margin: 0 0 3px;
	color: var(--js-black);
}
.ev_caption {
	font-size: 12pt;
	line-height: 17pt;
	color: var(--js-grey);
	margin: 8px 0 0;
}
.ev_book {
	margin-top: 10px;
	padding-left: 0px;
}

/* ---- JobClub table 
   Regular and "featured" sessions are the same list */
.ev_table_scroll {
	/* scroll sideways on narrow screens */
	overflow-x: auto;
	border-radius: 8px;
}
.ev_jobclub_table {
	width: 100%;
	min-width: 420px; /* below this, columns get too cramped to read - scroll instead of shrink */
	border-collapse: separate; /* not "collapse" - needed for border-radius + overflow:hidden below to clip row backgrounds reliably */
	border-spacing: 0;
	border: 1px solid var(--ev-neutral-border);
	border-radius: 8px;
	overflow: hidden;
}
.ev_jobclub_row td {
	padding: 8px 10px;
	font-size: 11.5pt;
	color: var(--js-grey);
	background-color: var(--js-white);
	border-top: 1px solid var(--ev-neutral-border);
	vertical-align: middle;
	transition: background-color 0.15s ease-in-out;
}
.ev_jobclub_row:first-child td {
	border-top: none;
}
/* Striping uses an explicit class set in PHP because a featured event is two <tr>s */
.ev_jobclub_row_alt td {
	background-color: var(--ev-neutral-tint);
}
.ev_jobclub_row_featured td {
	/* Featured rows keep their consistent tint, matching the badge colour */
	background-color: #eafdfe;
}
/* The two rows of a featured event should read as one associated event:
   no divider between them, and the second row sits snug under the first. */
.ev_jobclub_row_featured_body td {
	border-top: none;
	padding-top: 4px;
}
.ev_jobclub_row_featured_head td {
	padding-bottom: 4px;
}
/* the hover effect doesnt work with two featured rows */
.ev_jobclub_row td:hover,
.ev_jobclub_row:hover td {
	background-color: var(--ev-orange-tint);
}
.ev_jobclub_badge_cell {
	white-space: nowrap;
}
.ev_jobclub_title_cell {
	white-space: normal; /* long titles should wrap */
}
.ev_jobclub_title {
	font-family: "effrabold";
	color: #35383a;
}
.ev_badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: "effrabold";
	font-size: 9.5pt;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 5px 40px 5px 5px;
	border-radius: 3px;
}
.ev_badge_featured {
	background-color: #adedfde5;
	color: var(--js-grey);
}
.ev_dropin_note {
	display: block;
	font-size: 10.5pt;
	color: var(--js-grey);
	font-style: italic;
	margin-top: 10px;
}
.ev_jobclub_date,
.ev_jobclub_time,
.ev_jobclub_place {
	white-space: nowrap;
}
.ev_jobclub_date {
	font-family: "effrabold";
	color: #35383a;
}
.ev_jobclub_date .ev_icon,
.ev_jobclub_time .ev_icon,
.ev_jobclub_place .ev_icon {
	margin-right: 5px;
	color: var(--js-grey);
}
.ev_jobclub_place {
	text-align: left;
}


/* ---- LOCAL/INFO Event Card ---- */
.ev_subsection_localinfo {
	color: var(--js-blue);
}

.ev_list_localinfo {
	display: flex;
	flex-direction: row;
	gap: 12px;
}

.ev_info_card {
	background-color: var(--ev-neutral-tint);
	border: 1px solid var(--ev-neutral-border);
	border-radius: 14px;
	padding: 16px 18px;
	margin-bottom: 12px;
	transition: box-shadow 0.2s ease-in-out;
}
.ev_info_card:last-child {
	margin-bottom: 0;
}
.ev_info_card:hover {
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}
.ev_info_card .ev_when {
	margin: 4px 0 6px;
}

/* ---- Shared inline icon sizing ---- */
.ev_icon {
	vertical-align: -1px;
}


/* Events responsive */
@media only screen and (max-width: 1000px) {
	.ev_periods_grid {
		grid-template-columns: 1fr;
	}
	.ev_period_body {
		max-height: none;
		overflow: visible;
	}
}

@media only screen and (max-width: 650px) {
	#events_schedule {
		padding: 45px 0 60px;
	}
	.ev_period_cell {
		padding: 22px 20px 24px;
	}
	.ev_period_head h2 {
		font-size: 19pt;
		line-height: 23pt;
	}
	.ev_jump_link {
		font-size: 11pt;
		padding: 9px 14px;
	}
	.ev_jobclub_row {
		font-size: 11pt;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ev_period_cell,
	.ev_card,
	.ev_jobclub_row td,
	.ev_info_card,
	.ev_jump_link,
	.ev_more_link {
		transition: none;
	}
}