/* =========================================================
   COMPONENT: Meme card + luoi masonry full man hinh
   Su dung o: trang chu, taxonomy, search, single meme
   Dependencies: tokens.css
   ========================================================= */

/* --- Luoi masonry full man hinh (CSS columns, khong can JS) ---
   Dung column-width => so cot TU DONG nhan theo be rong viewport. */
.am__meme-grid {
	column-width: 165px;
	column-gap: var(--am-space-4);
	margin-block: var(--am-space-3);
}

@media (min-width: 768px) {
	.am__meme-grid { column-width: 215px; }
}

@media (min-width: 1280px) {
	.am__meme-grid { column-width: 235px; }
}

/* --- Card meme --- */
.am__meme-card {
	position: relative;            /* moc cho nut yeu thich */
	break-inside: avoid;           /* khong cat card giua 2 cot */
	margin-bottom: var(--am-space-6);
	background: var(--am-color-bg);
	border-radius: var(--am-radius-xl);
	overflow: hidden;
	box-shadow: var(--am-shadow-md);
	border: 1px solid rgba(0, 0, 0, 0.03);
	transition: all var(--am-duration-normal) var(--am-ease);
}

.am__meme-card:hover {
	box-shadow: var(--am-shadow-xl);
	transform: translateY(-4px);
}

.am__meme-card__link {
	display: block;
	color: var(--am-color-text);
	text-decoration: none;
}

.am__meme-card__img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--am-color-bg-soft);
}

/* Khung trong khi meme chua co anh */
.am__meme-card__noimg {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--am-color-bg-muted);
}

.am__meme-card__title {
	margin: 0;
	padding: var(--am-space-4);
	font-size: var(--am-fs-base);
	font-weight: 700;
	line-height: var(--am-lh-snug);
	color: var(--am-color-text);
}

.am__meme-card__link:hover .am__meme-card__title {
	color: var(--am-color-primary);
}

/* --- Nut yeu thich tren card --- */
.am__meme-card__fav {
	position: absolute;
	top: var(--am-space-2);
	right: var(--am-space-2);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-size: 20px;
	line-height: 1;
	color: var(--am-color-text-muted);
	background: rgba(255, 255, 255, 0.92);
	border: none;
	border-radius: var(--am-radius-pill);
	box-shadow: var(--am-shadow-sm);
	cursor: pointer;
	transition: color var(--am-duration-fast) var(--am-ease),
		transform var(--am-duration-fast) var(--am-ease);
}

.am__meme-card__fav:hover {
	transform: scale(1.08);
}

.am__meme-card__fav:hover,
.am__meme-card__fav.is-fav {
	color: var(--am-color-danger);
}

/* --- Nut "Tai them meme" --- */
.am__load-more {
	margin-top: var(--am-space-5);
	text-align: center;
}

.am__load-more .is-loading {
	opacity: 0.7;
	pointer-events: none;
}