/* =============================================================================
   EVENT CARDS — front.css
   Consolidated from: theme custom.css §7 (base grid/hover), plugin override
   file, and theme responsive.css §6 (mobile stack). Now fully self-contained
   — this plugin owns .event-card-row and everything under it end to end, so
   no more cross-file specificity fights and no !important needed purely to
   out-rank another stylesheet. !important is kept only where a rule needs to
   beat a *narrower* media query further down this same file (documented
   inline), which is a normal, predictable same-file cascade concern.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   BASE GRID + CARD SHELL
   Was: theme custom.css §7. Selector widened to .jena-events .event-card-row
   throughout so this file is the sole authority — no risk of a theme update
   silently changing the base grid out from under the plugin.
   ----------------------------------------------------------------------------- */

.jena-events .event-card-row {
	display: grid;
	grid-template-columns: 0 minmax(130px, 15%) 1fr minmax(140px, 20%) 3%;
	gap: 0.5rem;
	padding: 50px 0;
	border-bottom: 3px solid currentColor;
	width: 100%;
	max-width: 100%;
	cursor: pointer;
	transition: background 0.25s ease;
}

.jena-events .wp-block-columns.event-card-row {
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
}

.jena-events .event-card-row:first-child {
	border-top: 3px solid currentColor;
}

.jena-events .event-card-row a {
	text-decoration: none;
}

.jena-events .event-card-row p {
	line-height: 1.4;
}

/* Hover: background inverts, text flips to sage-green.
   :has(:focus-visible) gives keyboard users the same highlight when they
   tab to the title link. :focus-visible (not :focus) means it never
   "sticks" after a mouse click. Kept as separate rules so a browser
   without :has() support only drops these, never the hover rules. */
.jena-events .event-card-row:hover {
	background: currentColor;
}

.jena-events .event-card-row:has(:focus-visible) {
	background: currentColor;
}

/* -----------------------------------------------------------------------------
   CONTAINER WIDTH
   Caps the block on ultra-wide screens so line lengths stay readable
   instead of stretching to fill the viewport.
   ----------------------------------------------------------------------------- */

.jena-events {
	max-width: 100%;
	margin-inline: auto;
}

/* -----------------------------------------------------------------------------
   GRID PLACEMENT
   Places markup pieces into explicit columns AND the same row, so layout
   is independent of source order. (The markup puts the title first for
   screen readers; visually the date still comes first.) Column 1
   (width 0) and column 5 (3%) are left empty on purpose — unused tracks.
   ----------------------------------------------------------------------------- */

.event-card-row .event-date {
	grid-column: 2;
	grid-row: 1;
	min-width: 0; /* prevent date text overflowing its track into the title column */
}

.event-card-row .event-card-main {
	grid-column: 3;
	grid-row: 1;
	min-width: 0; /* allow long titles to wrap instead of overflowing the grid track */
	padding-inline: 1.5rem; /* fixed breathing room from the date/details columns, independent of gap or track width */
}

.event-card-row .event-details {
	grid-column: 4;
	grid-row: 1;
}

/* -----------------------------------------------------------------------------
   TYPOGRAPHY
   Sizes use clamp-free rem values at desktop; the media queries below step
   them down. All margins zeroed so mobile row-gap is the single source of
   spacing once cards stack (see stacked layout below).
   ----------------------------------------------------------------------------- */

.event-card-row .event-date,
.event-card-row .event-date p {
	color: #000;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--larger); /* 35px — matches .event-title */
	font-style: normal;
	line-height: 2.5rem; /* 40px — fixed value, not a multiplier, so it stays exact even if the font-size variable changes */
	margin: 0;
}

/*
 * Forces a multi-day event's begin/end dates onto two separate lines at
 * every screen size. Single-day events don't use this class — just one
 * plain <time> on one line. See jena_events_render_card() in
 * render-functions.php.
 */
.event-date__line {
	display: block;
}

.event-date__line:first-child {
	margin-bottom: 0.05em;
}

.event-card-row .event-title,
.event-card-row .event-title a {
	color: #000;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--larger); /* 35px — matches .event-date */
	font-style: normal;
	line-height: 2.5rem; /* 40px — fixed value, not a multiplier, so it stays exact even if the font-size variable changes */
	margin: 0;
	text-transform: uppercase;
	width: 90%;
}

.home h3.event-title {
	max-width: 90%;
}

/* Short description line under the title — secondary text, not competing
   visually with the title. */
.event-card-row .event-description {
	color: #000;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium-x);
	font-style: normal;
	font-weight: 400;
	line-height: 1.35;
	text-transform: none;
	margin: 0.35em 0 0;
}

.event-card-row:hover .event-description {
	color: var(--wp--preset--color--sage-green);
}

.event-card-row:has(:focus-visible) .event-description {
	color: var(--wp--preset--color--sage-green);
}

.event-card-row .event-details p {
	color: #000;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium-x);
	font-style: normal;
	line-height: 1.35;
	text-transform: uppercase;
	margin: 0;
}

/* Hover-invert: date, title, and details text flip to sage-green together
   with the row background above. */
.event-card-row:hover .event-date,
.event-card-row:hover .event-date p,
.event-card-row:hover .event-title,
.event-card-row:hover .event-title a,
.event-card-row:hover .event-details p {
	color: var(--wp--preset--color--sage-green);
}

.event-card-row:has(:focus-visible) .event-date,
.event-card-row:has(:focus-visible) .event-date p,
.event-card-row:has(:focus-visible) .event-title,
.event-card-row:has(:focus-visible) .event-title a,
.event-card-row:has(:focus-visible) .event-details p {
	color: var(--wp--preset--color--sage-green);
}

/* -----------------------------------------------------------------------------
   LIST SEMANTICS & ACCESSIBILITY
   ----------------------------------------------------------------------------- */

/* .event-list is a real <ul>, used purely for correct screen-reader
   semantics, not bullets — card styling above still applies per-item. */
.jena-events .event-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.event-card-row a:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

.jena-events .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* -----------------------------------------------------------------------------
   HOVER THUMBNAIL
   Floating image follows the cursor on hover, positioned by JS. The
   .event-card-thumb block is a data carrier only, never shown.
   ----------------------------------------------------------------------------- */

#event-hover-image {
	position: fixed;
	pointer-events: none;
	z-index: 9999;
	max-width: 300px;
	height: auto;
	object-fit: cover;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	opacity: 0;
	transform: scale(0.92);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

#event-hover-image.visible {
	opacity: 1;
	transform: scale(1);
}

.event-card-thumb {
	display: none !important;
}

/* -----------------------------------------------------------------------------
   ARCHIVE, PAST EVENTS & PAGINATION
   ----------------------------------------------------------------------------- */

.jena-events-archive-link {
	margin-top: 1.5rem;
}

.jena-events-pagination ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 2rem 0 0;
	padding: 0;
}

.jena-events-pagination a,
.jena-events-pagination span {
	display: inline-block;
	padding: 0.4em 0.75em;
	text-decoration: none;
}

.jena-events-pagination [aria-current="page"] {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.jena-events-pagination a:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

/*
 * Below 1200px, stop using side-by-side columns and stack date → title →
 * details vertically. 1200px matches the theme's own general breakpoint,
 * so this takes over layout at the same point the rest of the site adjusts.
 *
 * !important here is not about beating another file — it's beating this
 * same file's own desktop rules above, which is a normal, predictable
 * narrower-query-wins-last pattern within one stylesheet.
 */
@media (max-width: 1200px) {

	.jena-events .event-card-row {
		grid-template-columns: 1fr !important;
		row-gap: 10px !important;
		padding-block: 1.25rem !important;
		gap: 0;
	}

	.jena-events .event-card-row .event-date,
	.jena-events .event-card-row .event-date p,
	.jena-events .event-card-row .event-title,
	.jena-events .event-card-row .event-title a {
		font-size: 1.5rem !important;
		line-height: 1.75rem !important; /* keeps the desktop 40px/35px ratio at the smaller mobile size, rather than staying at the desktop 40px fixed value */
		padding: 0;
	}

	.jena-events .event-card-row .event-date,
	.jena-events .event-card-row .event-card-main,
	.jena-events .event-card-row .event-details {
		grid-column: 1 !important;
		grid-row: auto !important; /* undo the desktop "all in row 1" placement so items stack */
	}

	/* Visual stacking order stays date → title → details, even though
	   the title comes first in the markup (for screen readers). */
	.jena-events .event-card-row .event-date {
		order: -1;
	}

	.jena-events .event-card-row .event-card-main {
		padding-inline: 0; /* desktop side-padding only makes sense between side-by-side columns — reset here so title stays flush-left with date/details once stacked */
	}

	.jena-events .wp-block-columns.event-card-row {
		display: block;
	}

	.jena-events .event-card-row .wp-block-column {
		padding-left: 10px;
		padding-bottom: 5px;
	}

	.jena-events .event-card-row .event-details p {
		font-size: 0.938rem !important;
		line-height: 1.25rem !important;
	}

}