.bento-box {
	background-color: var(--on-white);
	padding: var(--space-sm);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(189, 201, 198, 0.2);
}
@media (min-width: 1200px) {
	.bento-box { padding: var(--space-md);}
}
.bento-box ul { list-style: none; }	

@media (min-width: 1200px) {
	.md-flex-row { flex-direction: row !important; }
	.md-w-1-4 { width: 25% !important; }
	.md-items-start { align-items: flex-start !important; }
	.md-justify-start { justify-content: flex-start !important; }
}


/* Profile Section */
.profile-card {
	background-color: var(--on-white);
	padding: var(--space-md);
	border-radius: var(--radius-2xl);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
	border: 1px solid rgba(189, 201, 198, 0.2);
	transition: box-shadow 0.3s ease;
}
.profile-card:hover {
	box-shadow: 0 10px var(--space-md-sm) -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
@media (min-width: 1200px) {
	.l-container-panel{ padding: var(--space-base) var(--space-margin) var(--space-margin) var(--space-margin);}
	.profile-card { padding: 2.5rem; } 
}

.profile-img-container {
	overflow: hidden;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
	border: 6px solid var(--on-white);
	background-color: var(--surface-variant);
	position: relative;
	width: 100%;
	height: auto;
	max-height: 350px;
	object-fit: contain !important;
	object-position: bottom center;
	margin: 0 auto;
	display: block;
	transition: transform 0.5s;
}
.profile-img-container img{
	width: 100%;
	height: auto;
	max-height: 350px;
	object-fit: contain !important;
	object-position: bottom center;
	margin: 0 auto;
	display: block;
	transition: transform 0.5s;
}

.doctor-badge-floating {
	position: absolute;
	bottom: -1rem;
	background-color: var(--secondary);
	color: var(--on-white);
	padding: 0.3rem var(--space-md-sm);
	border-radius: var(--radius-full);
	font-weight: 700;
	font-size: .8rem;
	box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
	letter-spacing: 0.05em;
	white-space: nowrap;
	border: 3px solid var(--on-white);
	z-index: 10;
}


/* Article Cards */
.article-card {
	background-color: var(--on-white);
	overflow: hidden; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	border-radius: var(--space-md);
	transition: all 0.3s; border: 1px solid rgba(189, 201, 198, 0.1); cursor: pointer;
}
.article-card:hover {
	background-color: var(--on-white);
	transform: translateY(-1px);
	box-shadow: 0 16px 32px -12px rgb(128 133 132 / 25%);
}
.article-img-wrapper {
	height: 15rem;
	width: 100%;
	overflow: hidden;
	position: relative;
}
.article-img-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.article-card:hover .article-img-wrapper img { transform: scale(1.05); }
.article-content {
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	flex-grow: 1;
 }
.article-title { font-size: 1rem;transition: color 0.2s; margin-bottom: var(--space-sm); font-weight: 700; color: var(--on-surface);line-height: 1.2; }
.article-card:hover .article-title { color: var(--primary); }



/* Video Cards */
.video-card {
	aspect-ratio: 16 / 9;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	position: relative;
	height: auto;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.video-card:hover{ 
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -10px rgba(130, 83, 53, 0.15);
}
.video-card:hover .video-overlay { 
	background-color: rgba(0, 0, 0, 0.3);
}
.video-icon { 
	opacity: 0.8;
	transition: transform 0.2s;
	font-variation-settings: 'FILL' 1 !important;
	color: var(--on-white); 
}
.video-card:hover .video-icon { transform: scale(1.5); }
.video-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
	padding: var(--space-sm);
}




/* --- Components --- */

/* Sidebar Doctor Menu */
.doctor-sidebar {
	position: sticky;
	top: 6rem;
	background-color: var(--surface-container-low);
	padding: var(--space-md);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(189, 201, 198, 0.3);
}
.doctor-list-container {
	max-height: 614px;
	overflow-y: auto;
}
.doctor-list-container::-webkit-scrollbar { width: 4px; }
.doctor-list-container::-webkit-scrollbar-track { background: transparent; }
.doctor-list-container::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: 10px; }

.doctor-btn {
	display: flex; align-items: center; gap: var(--space-sm);
	padding: .6rem; text-align: left;
	transition: all 0.2s; border: 1px solid var(--outline-variant);
	background-color: var(--on-white);
	color: var(--on-surface-variant);
	width: 100%;
}
.doctor-btn:hover {
	border: 1px solid var(--primary);
}
.doctor-btn .material-symbols-outlined { transition: color 0.2s; }
.doctor-btn:hover .material-symbols-outlined { color: var(--primary); }
.doctor-btn.is-active {
	background-color: var(--primary);
	color: var(--on-white);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	border-color: transparent;
}
.doctor-btn.is-active:hover {
	background-color: var(--primary);
}
.doctor-btn.is-active .material-symbols-outlined {
	color: var(--on-white);
}