/*
 * City Dock Gig Calendar: default layout.
 *
 * Two columns: the date on the left, everything else on the right.
 * This file loads before theme and Beaver Builder styles and uses single-class
 * selectors, so a matching rule in the site's own CSS always wins.
 *
 * Quick adjustments via custom properties, e.g. in the theme:
 *   .gig-list { --gig-date-width: 5rem; --gig-divider: #ddd; }
 */

.gig-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gig {
	display: grid;
	grid-template-columns: var(--gig-date-width, 4.5rem) minmax(0, 1fr);
	gap: var(--gig-gap, 1.25rem);
	align-items: start;
	padding-block: var(--gig-spacing, 1.25rem);
	border-bottom: 1px solid var(--gig-divider, rgb(0 0 0 / 0.15));
}

/* The date column. The <time> is a flex column so the month, day and weekday
   can be reordered with `order` or put on one line with `flex-direction: row`. */
.gig__date {
	margin: 0;
	font-size: 1rem;
	line-height: 1.15;
	text-align: center;
}

.gig__date time {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.gig__month,
.gig__weekday {
	font-size: 0.875em;
}

.gig__day {
	font-size: 2em;
	font-weight: 700;
	line-height: 1;
}

/* The details column. */
.gig__details > * {
	margin: 0 0 0.25em;
}

.gig__details > :last-child {
	margin-bottom: 0;
}

.gig__venue {
	font-weight: 700;
}

.gig__note p {
	margin: 0 0 0.25em;
}

.gig__note p:last-child {
	margin-bottom: 0;
}

/* Full date for screen readers. */
.cd-gig-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}