/* =========================================
   ABADÁ EUROPEAN GAMES — EVENT SCHEDULE
   ========================================= */


/* Main schedule container */
.abada-games-schedule {
	background: #07184d;
	color: #ffffff;
	width: 100%;
	padding: 70px 60px;
	box-sizing: border-box;
}


/* Main title */
.abada-games-schedule__heading {
	margin: 0 0 55px 0;
	color: #ffffff;
	font-size: 64px;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: -2px;
}


/* Program list */
.abada-games-schedule__list {
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}


/* =========================================
   EVENT ROW
   ========================================= */

.abada-games-schedule__item {
	display: grid;

	grid-template-columns:
		130px
		100px
		140px
		minmax(0, 1fr);

	align-items: center;
	gap: 25px;

	padding: 30px 10px;

	border-bottom: 1px solid rgba(255, 255, 255, 0.18);

	transition:
		background-color 0.25s ease,
		padding-left 0.25s ease,
		padding-right 0.25s ease;
}


/* Normal row hover */
.abada-games-schedule__item:hover {
	background: rgba(36, 72, 164, 0.18);
}


/* Row has expandable information */
.abada-games-schedule__item--expandable {
	cursor: pointer;
}


/* Stronger hover when clickable */
.abada-games-schedule__item--expandable:hover {
	background: rgba(36, 72, 164, 0.32);
	padding-left: 22px;
	padding-right: 22px;
}


/* Open state */
.abada-games-schedule__item--expandable.is-expanded {
	background: rgba(36, 72, 164, 0.24);
	padding-left: 22px;
	padding-right: 22px;
}


/* Keyboard focus */
.abada-games-schedule__item--expandable:focus-visible {
	outline: 2px solid #ff5a1f;
	outline-offset: -2px;
}


/* =========================================
   DAY
   ========================================= */

.abada-games-schedule__day {
	color: #ff5a1f;
	font-size: 27px;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}


/* =========================================
   DATE
   ========================================= */

.abada-games-schedule__date {
	color: rgba(255, 255, 255, 0.78);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 2px;
	text-transform: uppercase;
}


/* =========================================
   TIME
   ========================================= */

.abada-games-schedule__time {
	color: rgba(255, 255, 255, 0.82);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}


/* =========================================
   MAIN EVENT CONTENT
   ========================================= */

.abada-games-schedule__content {
	display: grid;

	grid-template-columns:
		minmax(200px, 0.8fr)
		minmax(240px, 1fr);

	column-gap: 45px;
	row-gap: 6px;

	align-items: start;
}


/* Category */
.abada-games-schedule__category {
	grid-column: 1;
	grid-row: 1;

	margin: 0 0 3px 0;

	color: #ff5a1f;

	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;

	letter-spacing: 1.8px;
	text-transform: uppercase;
}


/* Event title */
.abada-games-schedule__title {
	grid-column: 1;
	grid-row: 2;

	margin: 0;

	color: #ffffff;

	font-size: 26px;
	font-weight: 800;
	line-height: 1.15;

	text-transform: uppercase;
}


/* Location */
.abada-games-schedule__location {
	grid-column: 2;
	grid-row: 1;

	margin: 0;

	color: #ffffff;

	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}


/* Description */
.abada-games-schedule__description {
	grid-column: 2;
	grid-row: 2;

	color: rgba(255, 255, 255, 0.72);

	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
}


/* =========================================
   MORE INFORMATION HINT
   ========================================= */

.abada-games-schedule__expand-hint {
	grid-column: 1;
	grid-row: 3;

	display: inline-flex;
	align-items: center;
	gap: 8px;

	width: fit-content;

	margin-top: 10px;

	color: rgba(255, 255, 255, 0.62);

	font-size: 11px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: 1.3px;
	text-transform: uppercase;

	pointer-events: none;

	transition: color 0.2s ease;
}


.abada-games-schedule__expand-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 18px;
	height: 18px;

	color: #ff5a1f;

	font-size: 18px;
	font-weight: 400;
	line-height: 1;
}


/* Hint gets brighter when hovering the card */
.abada-games-schedule__item--expandable:hover
.abada-games-schedule__expand-hint {
	color: #ffffff;
}


/* =========================================
   EXPANDED DETAILS
   ========================================= */

   .abada-games-schedule__details {
	grid-column: 1 / -1;
	grid-row: 4;

	overflow: hidden;

	max-height: 0;
	opacity: 0;

	margin-top: 0;
	padding: 0 24px;

	background: rgba(255, 255, 255, 0.06);

	border-left: 2px solid #ff5a1f;

	color: rgba(255, 255, 255, 0.82);

	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;

	cursor: default;

	transform: translateY(-6px);

	transition:
		max-height 0.32s ease,
		opacity 0.22s ease,
		transform 0.32s ease,
		margin-top 0.32s ease,
		padding-top 0.32s ease,
		padding-bottom 0.32s ease;
}


/* Open state */
.abada-games-schedule__details.is-open {
	opacity: 1;

	margin-top: 16px;
	padding-top: 22px;
	padding-bottom: 22px;

	transform: translateY(0);
}


/* Completely remove closed details after the animation */
.abada-games-schedule__details[hidden] {
	display: none;
}


/* =========================================
   ADD TO CALENDAR
   ========================================= */

.abada-games-schedule__calendar {
	grid-column: 2;
	grid-row: 3;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;

	width: fit-content;

	margin-top: 10px;
	padding: 10px 15px;

	background: transparent;

	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 0;

	color: #ffffff;

	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: 1.3px;
	text-transform: uppercase;

	cursor: pointer;

	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}


/* Plus icon */
.abada-games-schedule__calendar-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 18px;
	height: 18px;

	color: #ff5a1f;

	font-size: 18px;
	font-weight: 400;
	line-height: 1;

	transition: color 0.2s ease;
}



/* Keyboard accessibility */
.abada-games-schedule__calendar:focus-visible {
	outline: 2px solid #ff5a1f;
	outline-offset: 3px;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1024px) {

	.abada-games-schedule {
		padding: 55px 35px;
	}


	.abada-games-schedule__heading {
		font-size: 52px;
		margin-bottom: 40px;
	}


	.abada-games-schedule__item {
		grid-template-columns:
			100px
			90px
			115px
			minmax(0, 1fr);

		gap: 18px;

		padding: 26px 5px;
	}


	.abada-games-schedule__content {
		grid-template-columns: 1fr;
		row-gap: 7px;
	}


	.abada-games-schedule__category,
	.abada-games-schedule__title,
	.abada-games-schedule__location,
	.abada-games-schedule__description,
	.abada-games-schedule__expand-hint,
	.abada-games-schedule__details,
	.abada-games-schedule__calendar {
		grid-column: 1;
		grid-row: auto;
	}


	.abada-games-schedule__title {
		font-size: 22px;
	}


	.abada-games-schedule__location {
		margin-top: 7px;
	}


	.abada-games-schedule__expand-hint {
		margin-top: 12px;
	}


	.abada-games-schedule__calendar {
		margin-top: 10px;
	}


	.abada-games-schedule__details {
		margin-top: 12px;
	}

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

	.abada-games-schedule {
		padding: 40px 22px;
	}


	.abada-games-schedule__heading {
		font-size: 40px;
		letter-spacing: -1px;
		margin-bottom: 32px;
	}


	.abada-games-schedule__item {
		display: grid;

		grid-template-columns: 1fr 1fr;

		gap: 10px 20px;

		padding: 25px 0;
	}


	.abada-games-schedule__item--expandable:hover,
	.abada-games-schedule__item--expandable.is-expanded {
		padding-left: 12px;
		padding-right: 12px;
	}


	.abada-games-schedule__day {
		font-size: 24px;
	}


	.abada-games-schedule__date {
		text-align: right;
	}


	.abada-games-schedule__time {
		grid-column: 1 / -1;
		margin-top: 5px;
	}


	.abada-games-schedule__content {
		grid-column: 1 / -1;

		display: block;

		margin-top: 12px;
	}


	.abada-games-schedule__category {
		margin-bottom: 7px;
	}


	.abada-games-schedule__title {
		font-size: 24px;
		margin-bottom: 14px;
	}


	.abada-games-schedule__location {
		margin-bottom: 6px;
	}


	.abada-games-schedule__description {
		font-size: 14px;
	}


	.abada-games-schedule__expand-hint {
		margin-top: 16px;
	}


	.abada-games-schedule__details {
		margin-top: 14px;
		padding: 18px;
	}


	.abada-games-schedule__calendar {
		margin-top: 18px;
	}

}

/* FORCE CALENDAR BUTTON HOVER */
.abada-games-schedule
button.abada-games-schedule__calendar:hover {
	background-color: #ff5a1f !important;
	border-color: #ff5a1f !important;
	color: #ffffff !important;
}


/* FORCE + ICON HOVER */
.abada-games-schedule
button.abada-games-schedule__calendar:hover
.abada-games-schedule__calendar-icon {
	color: #ffffff !important;
}