@import './variables.css';
@import './base.css';

/* Timeline styles for program template */
.program {
	display: flex;
	flex-direction: column;
	/* gap: 32px; */
}

.timeline-inner {
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
}
.timeline-inner:nth-child(odd) {
    background: #FFF;
}.timeline-inner:nth-child(even) {
    background-color: #F9F9F9;
}.timeline-inner .timeline-item {
    max-width: 1220px;
    margin-inline: auto;
    padding-inline: 10px;
}

.timeline-item {
	align-items: flex-start;
	display: flex;
	gap: 32px;
}

.timeline-time {
	color: #2675BA;
	font-family: var(--main-font), serif;
	font-size: 16px;
	font-weight: 500;
	/* letter-spacing: -.55px; */
	line-height: 1.4;
	/* margin-top: 16px; */
	min-width: 110px;
	/* padding-right: 16px; */
	text-align: right;
	display: flex;
	align-items: center;
}
.timeline-time:before {
    content: "";
    width: 25px;
    height: 25px;
    background-size: 100%;
    display: block;
    background-color: transparent;
    background-image: url('data:image/svg+xml,<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75ZM1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12ZM12 7.25C12.4142 7.25 12.75 7.58579 12.75 8V11.6893L15.0303 13.9697C15.3232 14.2626 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2626 15.3232 13.9697 15.0303L11.4697 12.5303C11.329 12.3897 11.25 12.1989 11.25 12V8C11.25 7.58579 11.5858 7.25 12 7.25Z" fill="%232675BA"></path></g></svg>');
    background-repeat: no-repeat;
    margin-right: 10px;
}

.timeline-content {
	/* border-radius: 8px; */
	color: #153E6A;
	flex: 1;
	padding: 0 20px;
	/* border: 0.5px solid #999; */
	/* background-color: #FFF; */
}

.timeline-title {
	font-family: var(--main-font), serif;
	font-size: 25px;
	font-weight: 500;
	/* letter-spacing: -.55px; */
	line-height: 1.2;
	margin-bottom: 20px;
}
.timeline-title:after {
    content: "";
    width: 100px;
    display: block;
    height: 2px;
    background-color: var(--new-gray);
    margin-top: 15px;
    margin-bottom: 30px;
}

.timeline-description {
	font-size: 18px;
}

.timeline-content-body {
	font-size: 16px;
	line-height: 1.7;
}

.timeline-content-body b,
.timeline-content-body strong {
	font-weight: 500;
}

.timeline-content-body i,
.timeline-content-body em {
	font-style: italic;
}

.timeline-content-body p {
	margin-bottom: 10px;
}

/* .timeline-content-body p:nth-of-type(2n) {
	border-bottom: dotted 1px #CCCCCC;
	padding-bottom: 10px;
} */

/* .timeline-content-body p:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
} */

.timeline-content-body div {
    display: flex;
    flex-wrap: wrap;
		margin: -8px;
}
.timeline-content-body div p {
    width: 33.333%;
    padding: 8px;
    box-sizing: border-box;
    opacity: 0.85;
    line-height: 1.4;
    font-size: 15px;
}

.timeline-content-body a {
	text-decoration: underline;
}

.timeline-content-body ul,
.timeline-content-body ol {
	margin: 16px 0 16px 32px;
	padding: 0;
}

.timeline-content-body h2 {
	font-size: 24px;
	font-weight: 500;
	margin-bottom: 10px;
	margin-top: 20px;
}

.timeline-content-body h2 strong {
	font-family: var(--main-font), serif;
	font-weight: 500;
	letter-spacing: -.55px;
}

.timeline-content-body li {
	margin-bottom: 8px;
}

.timeline-content-body blockquote {
	border-left: 3px solid var(--primary-color, #7A5CFA);
	color: #666666;
	font-style: italic;
	margin: 16px 0;
	padding-left: 16px;
}

.timeline-content-body img {
	display: block;
	height: auto;
	margin: 16px 0;
	max-width: 100%;
}

.program .speakers-list ul {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(2, 1fr);
	margin: 0 !important;
}

.program .speakers-list ul li {
	align-items: center;
	background-color: #1B5089;
	border-radius: 20px;
	color: #FFFFFF;
	display: flex;
	gap: 20px;
	padding: 10px 20px;
	transition: background-color 0.3s ease;
}

.program .speakers-list ul li:hover {
	background-color: #2675BA;
}

.program .speakers-list ul li img {
	border-radius: 100%;
	max-width: 60px;
}

.program .speakers-list article a {
	text-decoration: none;
}

.program .speakers-list article a h3 {
	font-size: 16px;
	line-height: 1.4;
}

.program .speakers-list .read-more {
	color: #DDDDDD;
	font-size: 14px;
	text-decoration: underline;
	transition: color 0.3s ease;
}

.program .speakers-list .read-more:hover {
	color: #FFFFFF;
}

@media (max-width: 640px) {
	.timeline-item {
		flex-direction: column;
		gap: 8px;
	}

	.timeline-time {
		margin-bottom: 8px;
		padding-right: 0;
		text-align: left;
	}

	.timeline-title {
		font-size: 24px;
		line-height: 1.3;
	}

	.program .speakers-list ul {
		grid-template-columns: 1fr;
	}
	.timeline-content-body div p{
		font-size: 13px;
	}
}