/* =============================================================================
   14-events-workshops.css — template_events_workshops.php
   The intro band, the 2x2 grid of period cards, the workshop cards inside
   them, and the JobClub table.

   THE ACCENT SYSTEM
   #events_schedule sets three custom properties and every heading, badge and
   border below reads them. A colour class on a period cell (.ev_c_blue, chosen
   by admins for custom periods) swaps the three values and the whole cell
   re-colours. Adding a colour is one rule plus an option in
   jobshop_event_period_colours().
   ============================================================================= */

#intro_band_columns {
	padding: 0.625rem 0;
}

/* One gap value drives both the gutter and the divider padding, so the line
   always sits centred between the columns. */
.intro_band_columns_layout {
	--gap-intro-band: clamp(1rem, 1.3vw, 1.8rem);
	display: grid;
	gap: var(--gap-intro-band);
	grid-template-columns: minmax(0, 1fr) minmax(30%, 40%);
}

/* min-width: 0 — a grid item defaults to min-width: auto, which means it
   refuses to shrink below its widest child. Without this a long word or a
   wide table pushes the whole layout past the viewport. */
.intro_band_col_left {
	min-width: 0;
	padding-right: var(--gap-intro-band);
	margin-right: var(--gap-intro-band);
}

.intro_band_col_right {
	min-width: 0;
}

.intro_band_col_right h3 {
	font-size: clamp(1rem, 0.8rem + 1vw, 2rem);
}

.jobclub_intro_card {
	padding: 1.25rem;
	border: 1px solid var(--js-orange-tint);
	border-radius: 5px;
	background-color: var(--js-orange-tint);
}

/* =============================================================================
   THE SCHEDULE
   ============================================================================= */
#events_schedule {
	padding: 1.25rem 0 3.75rem;

	--ev-accent: var(--js-orange);
	--ev-accent-shade: #d14a34;
	--ev-accent-tint: var(--js-orange-tint);

	--ev-neutral-border: #e4e0d9;
	--ev-neutral-tint: #faf9f7;
}

/* --- Period colour variants (admin "select colour") -----------------------
   Custom periods default to blue so they read differently from the orange
   months. */
.ev_c_blue {
	--ev-accent: #2563b0;
	--ev-accent-shade: #1d4e8f;
	--ev-accent-tint: #e8f0fb;
}

.ev_c_teal {
	--ev-accent: var(--js-blue);
	--ev-accent-shade: #0b8b84;
	--ev-accent-tint: var(--js-blue-tint);
}

.ev_c_purple {
	--ev-accent: #7d5bb5;
	--ev-accent-shade: #64478f;
	--ev-accent-tint: #f0eaf9;
}

/* A coloured cell also gets a stronger top edge so it stands out in the grid. */
.ev_period_cell[class*="ev_c_"] {
	border-top: 4px solid var(--ev-accent);
}

/* --- The 2x2 grid of period cards ----------------------------------------- */
.ev_periods_grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: auto;
	gap: 0.8rem;
	align-items: stretch;
}

.ev_period_cell {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 0.3rem 0;
	border: 1px solid var(--js-grey-tint);
	border-radius: 3px;
	background-color: var(--js-white);
	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);
}

/* A period given the whole width, below the grid. */
.ev_period_cell_full {
	margin-top: 1.5rem;
}

.ev_period_head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 0.3rem 0.7rem;
	/* Transparent until the body below is scrolled, when JS adds
	   .ev_period_head_scrolled — a transparent border rather than none, so the
	   heading does not jump by 2px when the line appears. */
	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: 0.8rem 0;
	font-size: 1.5rem;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--ev-accent);
}

.ev_period_count {
	font-family: var(--js-font-bold);
	font-size: 0.875rem;
	color: var(--ev-accent-shade);
	background-color: var(--ev-accent-tint);
	border-radius: 10px;
	padding: 0.3125rem 0.75rem;
	white-space: nowrap;
}

.ev_period_note {
	margin: 0.25rem 0 0;
	font-size: 1rem;
	line-height: 1.35;
	color: var(--js-grey);
}

/* Scrolls internally when one period has a lot, so the grid stays even. */
.ev_period_body {
	display: flex;
	flex-direction: column;
	max-height: 500px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #acaeaf transparent;
}

/* Chrome and Safari default to overlay scrollbars that only appear while
   scrolling. Styling ::-webkit-scrollbar at all switches them to a bar that
   stays visible whenever the box overflows, which is the hint we want. */
.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-accent-shade);
}

.ev_period_cell_full .ev_period_body {
	max-height: none;
	overflow: visible;
}

/* --- Subsections within a period ------------------------------------------ */
.ev_subsection {
	padding: 0.2rem;
}

.ev_subsection_workshops {
	padding-bottom: 1.5rem;
	background-color: #fbcec26d;
}

.ev_subsection_title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--js-font-bold);
	font-size: 1.125rem;
	letter-spacing: 0.015em;
	text-transform: uppercase;
	color: var(--js-grey);
	margin: 0.5rem 0.25rem;
	padding: 0.2rem;
}

.ev_subsection_title .ev_icon {
	color: var(--ev-accent);
}

.ev_subsection_localinfo {
	color: var(--js-blue);
}

/* Admin-added subsection, e.g. a blue "Welcome Week" block inside September.
   The .ev_c_* class on the subsection swaps the accent vars for its children. */
.ev_subsection_custom .ev_subsection_title {
	color: var(--ev-accent);
	border-top-color: var(--ev-accent);
}

.ev_subsection_custom .ev_info_card {
	background-color: var(--ev-accent-tint);
	border-color: var(--ev-accent);
}

/* --- Workshop cards ------------------------------------------------------- */
.ev_list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ev_card {
	position: relative;
	display: block;
	padding: 0.5rem 0.25rem;
	margin: 0 0.25rem;
	border: 1px solid var(--ev-neutral-border);
	/* A softer version of the accent so the left edge reads as a colour cue
	   rather than a second border. */
	border-left: 5px solid color-mix(in srgb, var(--ev-accent-shade) 45%, white);
	border-radius: 10px;
	background-color: var(--js-white);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	transform-origin: center;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 180ms ease-out;
}

.ev_card:hover,
.ev_card:focus-visible {
	transform: translateY(-2px) scale(1.012);
	box-shadow: 2px 10px 28px -10px rgba(16, 24, 40, 0.18),
		1px 2px 6px rgba(16, 24, 40, 0.06);
	border-color: color-mix(in srgb, var(--ev-neutral-border) 70%, var(--js-grey));
	border-left-color: var(--ev-accent-shade);
	/* Lifts above its neighbours so the shadow is not clipped by the next card. */
	z-index: 1;
}

.ev_card:active {
	transform: translateY(-1px) scale(1.004);
	transition-duration: 90ms;
}

.ev_card:focus-visible {
	outline: 2px solid var(--ev-accent-shade);
	outline-offset: 3px;
}

.ev_card_title {
	font-family: var(--js-font-bold);
	font-size: clamp(1rem, 0.8rem + 0.5vw, 1.2rem);
	line-height: 1.2;
	margin: 0.5rem 0.25rem;
	color: var(--js-black);
}

.ev_when {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.3rem 0.25rem;
}

.ev_date,
.ev_time,
.ev_place {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--js-font-bold);
	font-size: 0.875rem;
	color: var(--js-grey);
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ev_card {
		transition: box-shadow 150ms ease, border-color 150ms ease;
	}

	.ev_card:hover,
	.ev_card:focus-visible {
		transform: none;
	}
}

/* --- Local / info event card ---------------------------------------------- */
.ev_list_localinfo {
	display: flex;
	flex-direction: row;
	gap: 0.75rem;
}

.ev_info_card {
	padding: 1rem 1.125rem;
	margin-bottom: 0.75rem;
	border: 1px solid var(--ev-neutral-border);
	border-radius: 14px;
	background-color: var(--ev-neutral-tint);
	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: 0.25rem 0 0.375rem;
}

.ev_info_card_cancelled {
	border-color: #e5b8b4;
}

/* --- Empty states --------------------------------------------------------- */
.ev_empty {
	padding: 1.5rem;
	margin-top: 1.125rem;
	border: 1px dashed #d9d2c6;
	border-radius: 16px;
	background-color: var(--ev-neutral-tint);
}

.ev_empty p {
	margin: 0 0 1rem;
	color: var(--js-grey);
}

.ev_on_break_actions {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

/* =============================================================================
   JOBCLUB TABLE
   Each EVENT is its own <tbody class="ev_jobclub_group"> — one row for a
   regular session, badge + detail rows for a featured one, plus optional
   "next session" and cancellation rows. Grouping them that way is what lets
   the whole event hover and stripe as one thing.
   ============================================================================= */
.ev_table_scroll {
	overflow-x: auto;
	border-radius: 8px;
}

.ev_jobclub_table {
	width: 95%;
	/* Below this the columns are too cramped to read, so the wrapper above
	   scrolls sideways instead of the table shrinking further. */
	min-width: 300px;
	/* "separate", not "collapse": collapsed borders ignore border-radius, so
	   the rounded corners would not clip the row backgrounds. */
	border-collapse: separate;
	border-spacing: 0;
	border-top: 2px solid var(--js-orange-tint);
	border-bottom: 1.5px solid var(--js-orange-tint);
	border-radius: 8px;
	overflow: hidden;
	margin: 0 0.25rem;
}

.ev_jobclub_row td {
	padding: 0.5rem 0.3rem;
	font-size: 1rem;
	color: var(--js-grey);
	background-color: var(--js-white);
	vertical-align: middle;
	transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.ev_jobclub_table tbody:first-child tr:first-child td {
	border-top: none;
}

/* Striping: PHP adds the alt class to every second REGULAR group. Featured
   groups keep their own tint regardless, so their rows always match. */
.ev_jobclub_group_alt td {
	background-color: var(--ev-neutral-tint);
}

.ev_jobclub_row_featured td {
	background-color: #eafdfe;
}

/* The rows of one featured event should read as a single 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: 0.1rem;
}

.ev_jobclub_row_featured_head td {
	padding-bottom: 0.1rem;
	font-size: 0.7rem;
}

/* Hover lifts the whole event group together, not one row. */
.ev_jobclub_group:hover td {
	background-color: var(--js-orange-tint);
	transform: translateY(-3px);
}

.ev_jobclub_group_featured:hover td {
	background-color: #d9f4fb;
}

.ev_jobclub_badge_cell {
	white-space: nowrap;
}

/* Long titles are the one thing allowed to wrap. */
.ev_jobclub_title_cell {
	white-space: normal;
}

.ev_jobclub_title,
.ev_jobclub_date {
	font-family: var(--js-font-bold);
	color: #35383a;
}

.ev_jobclub_date,
.ev_jobclub_time,
.ev_jobclub_place {
	white-space: nowrap;
}

.ev_jobclub_place {
	text-align: left;
}

.ev_jobclub_date .ev_icon,
.ev_jobclub_time .ev_icon,
.ev_jobclub_place .ev_icon {
	margin-right: 0.1rem;
	color: var(--js-grey);
}

.ev_dropin_note {
	display: block;
	font-size: 0.875rem;
	font-style: italic;
	color: var(--js-grey);
	margin-top: 0.625rem;
}

/* --- Table badges ---------------------------------------------------------
   Separate from the global .badge component in 05-badges.css: these are row
   labels sized to a table cell, not free-standing pills.
   -------------------------------------------------------------------------- */
.ev_badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--js-font-bold);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.3125rem 2.5rem 0.3125rem 0.3125rem;
	border-radius: 3px;
}

.ev_badge_featured {
	background-color: #adedfde5;
	color: var(--js-grey);
}

/* The chronologically next drop-in gets its own row above everything else,
   solid orange so it reads louder than the featured badge. */
.ev_badge_next {
	background-color: #fa8b4a;
	color: var(--js-white);
}

.ev_jobclub_row_next td,
.ev_jobclub_row_next + tr td {
	background-color: #f88d4f29;
}

.ev_jobclub_row_next td {
	padding-bottom: 4px;
}

/* The badge row and the rows under it are one event — no divider. */
.ev_jobclub_row_next + tr td {
	border-top: none;
}

/* --- Cancelled events -----------------------------------------------------
   Cancelled sessions stay listed but struck through in red. The admin's
   message sits under them, italic and NOT struck through so it is readable.
   -------------------------------------------------------------------------- */
.ev_jobclub_group_cancelled .ev_jobclub_date,
.ev_jobclub_group_cancelled .ev_jobclub_time,
.ev_jobclub_group_cancelled .ev_jobclub_place,
.ev_jobclub_group_cancelled .ev_jobclub_title,
.ev_cancelled_text {
	text-decoration: line-through;
	color: #b3261e;
}

.ev_cancel_msg {
	color: #b3261e;
	font-style: italic;
	margin: 0.25rem 0 0;
}

.ev_jobclub_row_cancelmsg td {
	border-top: none;
	padding-top: 0;
}

.ev_card_cancelled {
	border-left-color: #b3261e;
}

/* No lift on a cancelled card — it is not something to click through to. */
.ev_card_cancelled:hover {
	transform: none;
	box-shadow: none;
}

/* Inline icons sit a touch high against the text otherwise. */
.ev_icon {
	vertical-align: -1px;
}

/* ============================================================================= */

@media (max-width: 750px) {
	/* The 40% right column is too narrow for the JobClub card to set type in,
	   so the columns become one and the card drops below the intro text. The
	   left column's padding only existed to hold the divider gutter. */
	.intro_band_columns_layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.intro_band_col_left {
		padding-right: 0;
		margin-right: 0;
		margin-bottom: var(--gap-intro-band);
	}

	/* Period cards stack, and stop clipping their own bodies — there is no
	   neighbouring cell left to stay level with. */
	.ev_periods_grid {
		grid-template-columns: 1fr;
	}

	.ev_period_body {
		max-height: none;
		overflow: visible;
	}

	.ev_period_head {
		padding: 0.5rem;
	}

	.ev_period_head h2 {
		font-size: 1.25rem;
		line-height: 1.2;
		margin: 0.3rem 0.1rem;
	}

	.ev_jobclub_row {
		font-size: 0.875rem;
	}
}