/**
 * Market 子页面 Featured Project 卡片样式
 *
 * 依赖：网格容器需带有 CSS class "mooton-market-cards"
 * （通过一次性注入脚本写入 22 个子页面的 post_content）
 *
 * 选择器全部基于结构关系，不硬编码 spectraId，
 * 新增/删除卡片自动适配。
 */

/* ---- 卡片外层容器（带 bg 色、圆角、overflow 裁剪）---- */

.mooton-market-cards > .wp-block-spectra-container {
	overflow: hidden;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* ---- 图片 16:9 铺满卡片 ---- */

.mooton-market-cards .wp-block-image {
	aspect-ratio: 16 / 9;
	width: 100%;
	margin: 0;
	overflow: hidden;
}

.mooton-market-cards .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 去掉 image 自身的圆角，由卡片外层容器统一裁剪 */
.mooton-market-cards .wp-block-image,
.mooton-market-cards .wp-block-image img {
	border-radius: 0;
}

/* ---- 文本内容 padding（图片下方的标题和详情）---- */

.mooton-market-cards .wp-block-image + .wp-block-spectra-content {
	padding-top: 16px;
}

/* inner-card 文本内容 padding */
.mooton-market-cards > .wp-block-spectra-container > .wp-block-spectra-container > .wp-block-spectra-content,
.mooton-market-cards > .wp-block-spectra-container > .wp-block-spectra-container > .wp-block-columns {
	padding-left: 0;
	padding-right: 0;
}

/* ---- 按钮区域 padding ---- */

.mooton-market-cards > .wp-block-spectra-container > .wp-block-buttons {
	padding: 0 0 20px;
	margin-top: auto;
}

/* ---- Case List（动态 Case 卡片，使用 Spectra 容器的 grid 布局）---- */
/* 卡片直接作为 mooton-market-cards Spectra 容器的子元素，继承其 4 列 grid */

/* ---- 卡片标题固定 2 行高度，防错位 ---- */

.mooton-market-cards .wp-block-spectra-content h4 {
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.4em;
	margin-bottom: 8px;
}

/* ---- 响应式：Spectra 网格容器默认所有断点都用 4 列，需手动覆盖 ---- */

/* 平板 (768–1024px)：2 列，适中 padding */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .mooton-market-cards.wp-block-spectra-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

/* 移动端 (< 768px)：1 列，紧凑 padding */
@media (max-width: 767.98px) {
    .mooton-market-cards.wp-block-spectra-container {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}