/* Daily Top Articles — frontend styles */

/* ── Top-5 card list ─────────────────────────────────────── */
.dta-top5 {
	display: flex;
	flex-direction: column;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: inherit;
}

.dta-card {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 14px;
}

/* ── Avatar circle ───────────────────────────────────────── */
.dta-card__icon {
	flex-shrink: 0 !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	background-color: var(--dta-icon-bg, #b03a2e);
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1;
	user-select: none;
	overflow: hidden;
	box-sizing: content-box !important;
}

.dta-card__icon--image {
	background-color: transparent;
}

.dta-card__icon img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

/* ── Card body ───────────────────────────────────────────── */
.dta-card__body {
	flex: 1;
	min-width: 0;
}

.dta-top5 .dta-card__title {
	margin: 0 0 5px;
	font-size: var(--dta-title-size, 15px);
	font-weight: var(--dta-title-weight, 700);
	color: var(--dta-title-color, #1a2f4e);
	font-family: var(--dta-title-family, inherit);
	line-height: var(--dta-title-lh, 1.4);
	letter-spacing: var(--dta-title-ls, normal);
}

.dta-top5 .dta-card__title a {
	color: inherit;
	text-decoration: none;
}

.dta-top5 .dta-card__title a:hover {
	text-decoration: underline;
}

.dta-top5 .dta-card__subtitle {
	margin: 0;
	font-size: var(--dta-subtitle-size, 14px);
	font-weight: var(--dta-subtitle-weight, 400);
	color: var(--dta-subtitle-color, #555);
	font-family: var(--dta-subtitle-family, inherit);
	line-height: var(--dta-subtitle-lh, 1.55);
	letter-spacing: var(--dta-subtitle-ls, normal);
}

.dta-card__subtitle em {
	font-style: italic;
}

@media (max-width: 1024px) {
	.dta-top5 .dta-card__title {
		font-size: var(--dta-title-size-tablet, var(--dta-title-size, 15px));
		line-height: var(--dta-title-lh-tablet, var(--dta-title-lh, 1.4));
		letter-spacing: var(--dta-title-ls-tablet, var(--dta-title-ls, normal));
	}
	.dta-top5 .dta-card__subtitle {
		font-size: var(--dta-subtitle-size-tablet, var(--dta-subtitle-size, 14px));
		line-height: var(--dta-subtitle-lh-tablet, var(--dta-subtitle-lh, 1.55));
		letter-spacing: var(--dta-subtitle-ls-tablet, var(--dta-subtitle-ls, normal));
	}
}

@media (max-width: 767px) {
	.dta-top5 .dta-card__title {
		font-size: var(--dta-title-size-mobile, var(--dta-title-size-tablet, var(--dta-title-size, 15px)));
		line-height: var(--dta-title-lh-mobile, var(--dta-title-lh-tablet, var(--dta-title-lh, 1.4)));
		letter-spacing: var(--dta-title-ls-mobile, var(--dta-title-ls-tablet, var(--dta-title-ls, normal)));
	}
	.dta-top5 .dta-card__subtitle {
		font-size: var(--dta-subtitle-size-mobile, var(--dta-subtitle-size-tablet, var(--dta-subtitle-size, 14px)));
		line-height: var(--dta-subtitle-lh-mobile, var(--dta-subtitle-lh-tablet, var(--dta-subtitle-lh, 1.55)));
		letter-spacing: var(--dta-subtitle-ls-mobile, var(--dta-subtitle-ls-tablet, var(--dta-subtitle-ls, normal)));
	}
}