/* Anvoy Events (/events)
   ---------------------------------------------------------------------------
   Colours are Bootstrap --bs-* variables throughout, never literals, so the
   whole app follows the viewer's light/dark choice with no second palette to
   keep in step. Linked through anvoy_css_link() so filemtime busts the cache. */

/* The date block on a list row: month above, day below, the way a calendar
   tear-off reads. Fixed width so titles line up down the list. */
.ev-date {
	flex: 0 0 3.6rem;
	text-align: center;
	border-radius: .4rem;
	background: var(--bs-tertiary-bg);
	padding: .3rem 0;
}
.ev-date .m {
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--bs-danger);
	font-weight: 700;
	line-height: 1.2;
}
.ev-date .d {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.05;
}

/* Template picker tiles. A button rather than a link because each one submits
   the form above it, carrying the title and date already typed in. */
.ev-tpl {
	display: flex;
	gap: .7rem;
	align-items: flex-start;
	width: 100%;
	height: 100%;
	padding: .8rem .85rem;
	border: 1px solid var(--bs-border-color);
	border-radius: .5rem;
	background: var(--bs-body-bg);
	color: var(--bs-body-color);
	text-align: left;
}
.ev-tpl:hover,
.ev-tpl:focus-visible {
	border-color: var(--bs-primary);
	background: var(--bs-primary-bg-subtle);
}
.ev-tpl-ic {
	flex: 0 0 auto;
	color: var(--bs-primary);
	line-height: 1;
	padding-top: .1rem;
}
.ev-tpl-body { display: flex; flex-direction: column; min-width: 0; }
.ev-tpl-body .nm { font-weight: 600; }
.ev-tpl-body .ds { font-size: .85rem; color: var(--bs-secondary-color); }
.ev-tpl-body .mt {
	font-size: .76rem;
	color: var(--bs-secondary-color);
	margin-top: .25rem;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.ev-new-step {
	border-top: 1px solid var(--bs-border-color);
	padding-top: .9rem;
}

/* --- the public page hero -------------------------------------------------
   Three rungs: the host's photo, else the hosting entity's banner, else a wash
   keyed to the template. Only the first two get the scrim. */
/* The block under the photo (or, with no photo, the whole hero). A tint class
   may be added to it; with a photo above, it stays plain so the two do not
   fight. */
.ev-hero {
	padding: .9rem;
	border: 1px solid var(--bs-border-color);
	border-radius: .5rem;
}
.ev-hero-photo + .ev-hero {
	border-top: 0;
	border-radius: 0 0 .5rem .5rem;
}

.ev-hero-photo {
	position: relative;
	min-height: 210px;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
	background-color: var(--bs-tertiary-bg);   /* while the image loads */
	border-radius: .5rem .5rem 0 0;
	overflow: hidden;
}
/* The scrim is what makes ANY photo safe to put text on. The host chooses the
   picture and there is no knowing how light the bottom of it is, so the words
   get their own dark ground. White here is deliberate and theme-independent:
   it sits on this gradient, not on the page. */
.ev-hero-scrim {
	position: relative;
	width: 100%;
	padding: 2.5rem .9rem .8rem;
	background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,0) 100%);
	color: #fff;
}
.ev-hero-when  { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; opacity: .92; }
.ev-hero-title { font-size: 1.6rem; font-weight: 700; line-height: 1.15; }
.ev-hero-where { font-size: .85rem; opacity: .92; }

/* The wash, when there is neither a photo nor a banner. Bootstrap's subtle
   backgrounds, so they follow the theme on their own. */
.ev-tint-banquet    { background: var(--bs-warning-bg-subtle); }
.ev-tint-class      { background: var(--bs-info-bg-subtle); }
.ev-tint-program    { background: var(--bs-primary-bg-subtle); }
.ev-tint-outreach   { background: var(--bs-success-bg-subtle); }
.ev-tint-fundraiser { background: var(--bs-danger-bg-subtle); }
.ev-tint-party      { background: var(--bs-secondary-bg-subtle); }

/* The builder's More options panel is meant to read as secondary to the eight
   fields above it, not as another equal section. */
#evMore .accordion-button { font-weight: 600; }
#evMore .accordion-button:not(.collapsed) {
	background: var(--bs-tertiary-bg);
	color: var(--bs-body-color);
	box-shadow: none;
}