/* Reset and body */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background-color: #f7f9fc;
	color: #333;
	padding: 30px;
}

h1 {
	text-align: center;
	margin-bottom: 20px;
	color: #2c3e50;
}

/* Agenda list */
#agenda {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 15px; /* spacing between items */
	max-width: 600px;
	margin: 0 auto; /* center the list */
}

/* Individual agenda item card */
.agenda-item {
	background: #fff;
	padding: 20px;
	border-radius: 12px;
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
}

.pointer {
	cursor: pointer;
}

.agenda-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
}

.agenda-item .title {
	font-size: 1.2rem;
	font-weight: 600;
	margin-bottom: 8px;
	color: #34495e;
}

.agenda-item .datetime {
	font-size: 0.95rem;
	color: #7f8c8d;
}

.agenda-item-body {
	display: flex;
	gap: 15px; /* space between image and text */
	align-items: center; /* vertically center text & image */
}

.img-body {
	flex-shrink: 0; /* don’t shrink the image container */
	display: flex;
	justify-content: center;
	align-items: center;
}

.img {
	max-height: 100%; /* scale down to fit the container vertically */
	max-width: 50px; /* optional: max width for layout control */
	height: auto; /* preserve aspect ratio */
	width: auto; /* preserve aspect ratio */
	object-fit: contain; /* scale to fit inside container */
}

.agenda-details {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-in-out, opacity 0.2s ease-in-out;
	opacity: 0;
	margin-top: 10px;
}

.agenda-item.expanded .agenda-details {
	max-height: 2000px; /* big enough to fit content */
	opacity: 1;
}

.collapse {
	height: 32px;
	width: 32px;
}

.details-body {
	display: flex;
	width: 100%;
	justify-content: space-between;
}

.undetermined-body {
	display: flex;
	justify-content: center;
	align-items: center;
}

.undetermined {
	background-color: #ececec;
}

.collapse-body {
	display: flex;
	justify-content: center;
	align-items: center;
}

.collapse {
	display: flex;
	width: 100%;
	justify-content: space-between;
	transition: transform 0.2s ease-in-out;
}

.hidden {
	display: none !important;
}

.rotate {
	transform: rotate(180deg);
}

/* Mobile responsiveness */
@media only screen and (max-width: 992px) {
	#agenda {
		gap: 20px;
		max-width: 100%;
	}

	.agenda-item {
		padding: 30px;
		border-radius: 15px;
	}

	.agenda-item-body {
		flex-direction: column; /* stack image above text */
		align-items: flex-start; /* align text left */
		gap: 15px;
	}

	.img {
		max-width: 80px; /* bigger image */
		max-height: 80px;
	}

	.details-body {
		width: 100%;
		gap: 10px;
	}

	.agenda-item .title {
		font-size: 3rem;
	}

	.agenda-item .datetime {
		font-size: 2rem;
	}

	.agenda-details {
		font-size: 2rem;
		margin-top: 15px;
	}

	.collapse {
		width: 40px;
		height: 40px;
	}

	.undetermined-body {
		font-size: 2rem;
	}
}