/**
 * Student Sessions - Frontend Styles
 *
 * Styles for the student sessions display on My Account page.
 *
 * @package    Techtronic_Courses
 * @subpackage Techtronic_Courses/assets/css
 * @since      1.1.0
 */

/* ==================================================
   Sessions Container
   ================================================== */

.tc-sessions-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

/* ==================================================
   Course Sessions Block
   ================================================== */

.tc-course-sessions-block {
	margin-bottom: 40px;
}

.tc-course-sessions-block h3 {
	color: #2c3e50;
	border-bottom: 2px solid #ff5722;
	padding-bottom: 10px;
	margin-bottom: 20px;
	font-size: 22px;
	font-weight: 600;
}

/* ==================================================
   Sessions Grid
   ================================================== */

.tc-sessions-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
}

/* ==================================================
   Session Card
   ================================================== */

.tc-session-card {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s, box-shadow 0.2s;
}

.tc-session-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tc-session-card h4 {
	margin: 0 0 15px 0;
	color: #2c3e50;
	font-size: 16px;
	font-weight: 600;
}

/* ==================================================
   Session Date & Time Box
   ================================================== */

.tc-session-datetime {
	margin-bottom: 12px;
	padding: 12px;
	background: #ecf0f1;
	border-radius: 4px;
}

.tc-session-datetime-row {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

.tc-session-datetime-row:last-child {
	margin-bottom: 0;
}

.tc-session-datetime-row .dashicons {
	color: #ff5722;
	margin-right: 8px;
}

.tc-session-datetime-row strong {
	color: #2c3e50;
	margin-right: 8px;
}

.tc-session-datetime-row span {
	color: #555;
}

/* ==================================================
   Zoom Link Section
   ================================================== */

.tc-session-zoom {
	margin-bottom: 12px;
}

.tc-session-zoom-header {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
}

.tc-session-zoom-header .dashicons {
	color: #00acc1;
	margin-right: 8px;
}

.tc-session-zoom-header strong {
	color: #2c3e50;
}

.tc-session-zoom-link {
	display: inline-block;
	background: #00acc1;
	color: #fff;
	padding: 8px 16px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
	margin-top: 5px;
	transition: background-color 0.2s;
}

.tc-session-zoom-link:hover {
	background: #00838f;
	color: #fff;
}

.tc-session-zoom-link:focus {
	outline: 2px solid #00acc1;
	outline-offset: 2px;
}

/* ==================================================
   Passcode Section
   ================================================== */

.tc-session-passcode {
	margin-bottom: 12px;
}

.tc-session-passcode strong {
	color: #2c3e50;
}

.tc-session-passcode code {
	background: #f4f4f4;
	padding: 4px 8px;
	border-radius: 3px;
	margin-left: 5px;
	font-weight: 600;
	color: #ff5722;
}

/* ==================================================
   Instructor Notes Section
   ================================================== */

.tc-session-notes {
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid #ddd;
}

.tc-session-notes strong {
	color: #2c3e50;
	display: block;
	margin-bottom: 5px;
}

.tc-session-notes p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #555;
}

/* ==================================================
   No Sessions Message
   ================================================== */

.tc-no-sessions {
	text-align: center;
	padding: 60px 20px;
	background: #f9f9f9;
	border-radius: 8px;
	margin-top: 20px;
}

.tc-no-sessions-icon {
	font-size: 64px;
	color: #ccc;
	margin-bottom: 20px;
}

.tc-no-sessions h3 {
	color: #2c3e50;
	font-size: 24px;
	margin-bottom: 10px;
}

.tc-no-sessions p {
	color: #666;
	font-size: 16px;
	margin-bottom: 20px;
}

.tc-browse-courses-button {
	display: inline-block;
	padding: 12px 24px;
	background: #ff5722;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-weight: 600;
	transition: background-color 0.2s;
}

.tc-browse-courses-button:hover {
	background: #e64a19;
	color: #fff;
}

.tc-browse-courses-button:focus {
	outline: 2px solid #ff5722;
	outline-offset: 2px;
}

/* ==================================================
   Responsive Design
   ================================================== */

@media (max-width: 768px) {
	.tc-sessions-grid {
		grid-template-columns: 1fr;
	}

	.tc-session-card {
		padding: 15px;
	}

	.tc-session-datetime-row {
		flex-wrap: wrap;
	}

	.tc-course-sessions-block h3 {
		font-size: 18px;
	}
}

@media (max-width: 480px) {
	.tc-sessions-container {
		padding: 10px;
	}

	.tc-session-card h4 {
		font-size: 14px;
	}

	.tc-session-datetime {
		padding: 10px;
	}

	.tc-session-zoom-link {
		display: block;
		text-align: center;
	}
}