@keyframes rotate {
  0%    { transform: rotate(0deg); }
  100%  { transform: rotate(360deg); }
}

/* @FIXME these styles need to reflect the styles in the upcoming events block. :(
          clean this mess up!

          * currently these styles only apply to upcoming, but they shoujld apply to both, regardless of whether it's
          upcoming or not
          * styles are here and in the blocks. HOw can a css import?
 */


.pre-footer .event-in-row ,
.sidebar .event-in-row 
{

	.event-date-card {
		display: initial;
		text-align: left;
		padding: .6em .9em .5em;
		width: 100%;
		margin-bottom: .5em;
		background: hsl(192, 30%, 94%);
		border-bottom: 1px solid hsl(192, 30%, 90%);
		font-size: 1.1em;
	}

	.event-date-card__month {
		display: inline-block;
		padding-bottom: 0;
	}
	.event-date-card__day {
		display: inline-block;
		font-size: inherit;
	}

	.event-details .event-title {
		margin-top: .5em;
	}

	.event-image {
		border-radius: 3px 3px 0 0;
	}

	.event-description {
		font-weight: 200;
	}

	@media(min-width: 740px) {
		flex-direction: column;
	}
}


.pre-footer .bates-events-list {

	.event-in-row {
		padding-bottom: 1em;
	}

	.event-description {
		font-size: .9em;
	}

	@media(min-width: 1400px) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1em;

		.event-image {
			background: linear-gradient( hsl(192, 20%, 50%), hsl(192, 30%, 94%) );
		}
	}
}


.single-event {

	&._align-left {
		@media(min-width:600px) {
			float: left;
			margin: 0 1em .5em 0;
		}
	}
	&._align-right {
		@media(min-width: 600px){
			float: right;
			margin: 0 0 .5em 1em;
		}
	}

	p:empty {
		display: none;
	}

	.event-title {
		margin-top: 0;
	}

	.event-image {
		max-height: 200px;
		overflow: hidden;
		margin-bottom: 1em;
		border-bottom: 1px solid hsl(0,0%,94%);

		img {
			width: 100%;
			height: auto;
		}
	}

	.event-date {
		background-color: hsl(0,0%,98%);
		background-image: url("calendar-icon.svg");
		background-position: .8em center;
		background-repeat: no-repeat;
		background-size: 3rem;
		border-radius: 3px;
		border: 1px solid hsl(0,0%,94%);
		font-weight: bold;
		font-size: 1.1em;
		margin-bottom: 1em;
		padding: 1.5em 1.5em 1.5em 5rem;

		display: none;
	}

	&.bates-event-has-location ,
	&.bates-event-has-map ,
	&.bates-event-has-starttime ,
	&.bates-event-has-startdate ,
	&.bates-event-has-enddate ,
	&.bates-event-has-endtime
	{
		.event-date {
			display: block;
			float: none;
		}
	}

	.event-date-details {
		font-size: 1.1em;

		.event-datemeta {
			padding-top: .5em;
			display: inline-block;
			font-weight: 300;
			font-size: .8em;
			color: hsl(0,0%,50%);
		}

		.event-rsvp {
			color: hsl(0,0%,30%);
		}
	}

	.event-date-wrap {
	}

	.event-location {
		background-image: url('map-icon.svg');
		background-position: 1rem center;
		background-repeat: no-repeat;
		background-size: 2.5rem;
		margin: .5em 0 2em;
		padding: 0 2rem 0 5rem;
		font-size: .9em;
		position: relative;
		min-height: 2em;

		&.map-active:after {
			content: '';
			position: absolute;
			right: 39%;
			top: calc( 50% - 10px);
			z-index: 0;
			display: block;
			height: 20px;
			width: 20px;
			border: 5px solid silver;
			border-right-color: transparent;
			border-radius: 100px;
			animation: rotate .8s infinite linear;
		}

		iframe {
			z-index: 60;
			position: relative;
		}

	}
	.bates_event-full-location {
		font-weight: 200;
		margin-bottom: .7em;
		line-height: 1.3em;
	}

	a.event-show-map {
		display: inline-block;
	}

	.event-description {
		margin-top: .7em;
	}

	.event-location ~ .event-description {
		border-top: 1px solid hsl(0,0%,94%);
		padding-top: 2em;
	}

	@media(min-width: 550px){

		display: flex;

		&._alternate-layout {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: .8em;
		}

		.event-image {
			max-width: 300px;
			max-height: none;
			margin-right: 1.5em;
			margin-bottom: 0;
			border-bottom: none;
		}

		.event-date {
			font-size: 1em;
		}

		.event-date-wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.event-location {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: .9em;

			&.map-active:after {
				right: 160px;
			}

			iframe {
				margin-left: 1em;
			}
		}

		.bates_event-full-location {
			margin-bottom: 0;
		}

		a.event-show-map {
			margin-left: 2em;
		}

	}
	@media(max-width: 549px){
		.event-location {
			transition: padding .3s;

			iframe {
				width: 100% !important;
			}

			&.map-active {
				padding-left: 0;
				padding-right: 0;
				background-image: none;
			}
		}
	}
}



.bates-event_associated_urls {
	margin-bottom: 1.5em;

	a {
		display: block;
		margin: 0 0 .5em 0;
		font-size: 1.2em;
		background: hsl(0, 0%, 55%); /*hsl(200, 8%, 55%)*/
		color: white;
		border-radius: 4px;
		padding: .7em 1.5em;
		border:none;
		text-decoration: none;

		&:hover {
			box-shadow: inset 0 0 50px hsla(0,0%,0%,.5);
			color: white;
			border: none;
			text-decoration: none;
		}
	}

	a:first-of-type {
		background: hsl(350, 78%, 30%);
	}

	@media (min-width:550px) {
		display: flex;

		a {
			margin: 0 .5em 0 0;
		}
	}

}

.bates-event-tags {
	margin: 3em 0;
	font-size: .9em;
	color: hsl(0,0%,40%);
	padding-top: 1em;
	border-top: 1px solid hsl(0,0%,94%);
	font-weight: 300;

	a {
		color: inherit;
	}
}


.event-in-row {
	.event-description p {
		color: hsl(0, 0%, 39%);
	}

	.event-description p.event-times {
		font-weight: bold;
		font-size: .8em;
	}
}

.events-list._grouped-by-date {
	.bates-events-day-wrapper {
		padding-block: 1em;
	}
}

/* these apply only to DEFAULT style */
.bates-events-list.bates-events-style-default {
	.event-in-row {
		--borderRadius: 3px;

		background: hsl(0, 0%, 98%);
		border-radius: var(--borderRadius);
		border: 1px solid hsl(0, 0%, 94%);

		margin: .5em 0 1em;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1em;

		.event-image {
			overflow: hidden;
			border-radius: var(--borderRadius) 0 0 var(--borderRadius);

			width: 100%;
			max-height: 300px;

			img {
				display: block;
				width: 100%;
				height: auto;
				max-width: none;
			}
		}

		h4.event-title {
			font-size: 1.3em;

			a {
				color: hsl(350, 78%, 30%);
				text-decoration: none;
				border-bottom: none;
			}
		}

		@media (min-width: 550px) {
			.event-image {
				min-width: 300px;
				max-width: 300px;
				max-height: 400px;

				img {
					height: auto;
				}
			}

			.event-date-card {
				padding: 0 2em;
			}
		}

		@media (min-width: 550px) {
			flex-direction: row;
		}


	}

	&._grouped-by-date {
		.date-header {
			font-family: var(--fontSansSerif), sans-serif;
			font-weight: 700;
			font-size: 1.7em;
			margin-block: .5em;

			@media ( min-width: 800px ) {
				font-weight: 300;
				font-size: 2em;
			}

			._weekday:after {
				content: ', ';
			}
		}
	}

	&:not(._grouped-by-date) {
		.date-header {
			display: flex;
			flex-direction: column;
			font-size: 1em;
			text-align: center;
			padding-inline: 1em;
			margin-block: .3em;
			box-sizing: border-box;

			._weekday {
				display: none;
			}

			._month {
				text-transform: uppercase;
				padding-bottom: .3em;
			}

			._day-of-month {
				font-size: 1.5em;
				font-weight: bold;
				color: #000;
			}
		}
	}
}

.alignfull .event-in-row {
	border-left: 0;
	border-right: 0;
	margin-block: 0;
}


/* These apply only to CLASSIC style */
.bates-events-list.bates-events-style-classic {

	--image-size: 80px;

	@media ( min-width: 1024px ) {
		--image-size: 125px;
	}

	@media ( min-width: 1280px ) {
		--image-size: 150px;
	}

	.date-header {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.event-title {
		/* color: #000; */
		margin-top: 0;
		font-size: 1.6em;
		font-weight: 200;
		font-family: var(--fontSansSerif), sans-serif;

		a {
			/* color: inherit; */
			color: var(--colorGarnet, #881124);
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	.event-details {
		padding: 1px 0 1em;
	}

	.event-times {
		margin: .5em 0 1em 0;
		color: var(--colorBlue_dark, hsl(198, 94%, 14%));
		font-weight: 700;
		font-size: .9em;
	}

	.event-image {
		img {
			width: 100%;
			height: 100px;
			object-fit: cover;
		}

		@media ( min-width: 800px ) {
			width: var(--image-size);
			height: var(--image-size);
			float: right;
			margin-left: 1em;

			img {
				width: 100%;
				height: 100%;
				border-radius: 100%;
				object-fit: cover;
			}
		}

	}


	._weekday {
		font-size: .8em;
		font-weight: 600;
	}

	._day-of-month {
		color: hsl(0, 0%, 100%);
		border-radius: 1px;
		font-weight: bold;
		line-height: 1.3em;
		/* margin: 5px 0; */

		display: inline-block;
		padding: .3em .6em;
		font-size: 1.3em;
		background-color: var(--colorGarnet_dark);
	}

	._month {
		font-size: .6em;
		font-weight: 300;
		text-transform: uppercase;
	}

	&._grouped-by-date {
		.bates-events-day-wrapper {
			display: grid;
			grid-template-columns: 100px 1fr;
			padding: .9em 0;
			gap: 1em;
		}

		.date-header {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.event-in-row {
			grid-column: 2;
			padding: .9em 0;
		}

		.bates-events-day-wrapper ~ .bates-events-day-wrapper {
			border-top: dashed hsl(0 0% 90%) 1px;
		}
	}

	&:not(._grouped-by-date) {

		.event-in-row {
			padding-bottom: 1.5em;
			margin-bottom: 1.5em;
			/* border-bottom: 1px dashed silver; */

			display: grid;
			grid-template-columns: 100px 1fr;
			gap: .5em;
		}

		.event-image {
			grid-column: 1 / 3;
		}

		@media ( max-width: 800px ) {
			._month {
				font-size: inherit;
			}
		}

		@media ( min-width: 800px ) {
			.event-in-row {
				display: grid;
				gap: 1em;
				grid-template-columns: 100px auto var(--image-size);

				.event-image {
					grid-column: 3;
					grid-row: 1;
				}

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