/* Recommended Tools —— 参考创客贴首页第一版块排版 */
.indmod { margin: 0px auto 20px auto; }
.indmod .indmdbox { display: flex; gap: 20px; }
.indmod .indmdbox .indmditem { display: flex; min-width: 0; }
.indmod .indmdbox .indmditem:nth-child(1) { flex: 2; }
.indmod .indmdbox .indmditem:nth-child(2) { flex: 1; }
.indmod .indmdbox .indmditem:nth-child(3) { flex: 1; }

/* 左侧 Hero 大图（标题/副标题/按钮/插画已烘焙在背景图中） */
.indmod .indmdbox .indmditem .indmdhero {
    display: block; width: 100%; height: 300px; border-radius: 24px;
    background: no-repeat url(/UploadFiles/Poster/poster0.png) center center;
    background-size: 100% 100%; text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
}
.indmod .indmdbox .indmditem .indmdhero:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(99, 102, 241, .18); }

/* 中间两张竖排卡片 */
.indmod .indmdbox .indmditem:nth-child(2) .mdbox { display: flex; flex-direction: column; width: 100%; height: 300px; }
.indmod .indmdbox .indmditem .inmmmt { flex: 1; margin-bottom: 20px; }
.indmod .indmdbox .indmditem .inmmmb { flex: 1; }
.indmod .indmdbox .indmditem .indmdlib {
    position: relative; display: flex; width: 100%; height: 100%; border-radius: 24px; overflow: hidden;
    background-repeat: no-repeat; background-position: right center; background-size: cover; text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
}
.indmod .indmdbox .indmditem .inmmmt .indmdlib { background-image: url(../images/stmdbg02.png); }
.indmod .indmdbox .indmditem .inmmmb .indmdlib { background-image: url(../images/stmdbg03.png); }
.indmod .indmdbox .indmditem .indmdlib:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(99, 102, 241, .18); }
.indmod .indmdbox .indmditem .indmdlib .ltfn { display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; padding: 16px 0 16px 32px; }
.indmod .indmdbox .indmditem .indmdlib .ltfn .th { font-size: 24px; font-weight: bold; color: #1a1a2e; }
.indmod .indmdbox .indmditem .indmdlib .ltfn .th span { letter-spacing: 1px; }
.indmod .indmdbox .indmditem .indmdlib .ltfn .dsc { margin-top: 8px; font-size: 13px; color: #6b7280; line-height: 1.5; }

/* 圆形箭头按钮（中间两卡默认显示；包装卡 PC 端隐藏、H5 端显示） */
.indmod .indmdbox .indmditem .indmdlib .arrow,
.indmod .indmdbox .indmditem .indmdlic .arrow {
    margin-top: auto; width: 40px; height: 40px; border-radius: 50%; background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12); display: flex; align-items: center; justify-content: center;
}
.indmod .indmdbox .indmditem .indmdlib .arrow i,
.indmod .indmdbox .indmditem .indmdlic .arrow i { width: 9px; height: 9px; border-top: 2px solid #6366f1; border-right: 2px solid #6366f1; transform: rotate(45deg); margin-left: -3px; }

/* 右侧单张卡片 —— PC 端保持原样（居中标题 + 字距副标题 + 紫色按钮） */
.indmod .indmdbox .indmditem .indmdlic {
    display: flex; width: 100%; height: 300px; border-radius: 24px; text-decoration: none; text-align: center;
    background: no-repeat url(../images/stmdbg04.png) center center; background-size: cover;
    transition: transform .3s ease, box-shadow .3s ease;
}
.indmod .indmdbox .indmditem .indmdlic:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(99, 102, 241, .18); }
.indmod .indmdbox .indmditem .indmdlic .ltfn { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; }
.indmod .indmdbox .indmditem .indmdlic .ltfn .th { font-size: 34px; font-weight: bold; color: #1a1a2e; }
.indmod .indmdbox .indmditem .indmdlic .ltfn .dsc { padding-top: 12px; font-size: 16px; color: #6b7280; letter-spacing: 5px; }
.indmod .indmdbox .indmditem .indmdlic .ltfn .lnk { padding-top: 32px; }
.indmod .indmdbox .indmditem .indmdlic .btn { display: inline-block; padding: 12px 34px; border-radius: 10px; background: #6366f1; color: #fff; font-size: 16px; box-shadow: 0 8px 20px rgba(99, 102, 241, .35); }
.indmod .indmdbox .indmditem .indmdlic .arrow { display: none; }

/* 宽度低于1800时兼容处理 */
@media screen and (max-width: 1800px) {
    .indmod .indmdbox .indmditem .indmdlib .ltfn { padding-left: 28px; }
    .indmod .indmdbox .indmditem .indmdlib .ltfn .th { font-size: 22px; }
    .indmod .indmdbox .indmditem .indmdlic .ltfn .th { font-size: 28px; }
}

/* H5/移动端：Hero 占满首行，文化墙/门头/包装 三卡一行放在 Hero 下方；包装卡改为与前两张一致的左对齐+圆形箭头 */
@media screen and (max-width: 992px) {
    .indmod .indmdbox { flex-wrap: wrap; gap: 12px; }
    /* 第一行：AI海报 Hero 整行 */
    .indmod .indmdbox .indmditem:nth-child(1) { flex: 0 0 100%; }
    .indmod .indmdbox .indmditem .indmdhero { height: 150px; }
    /* 第二行：三张卡片一行显示（中间两卡占 2 份 + 右侧单卡占 1 份） */
    .indmod .indmdbox .indmditem:nth-child(2) { flex: 2; }
    .indmod .indmdbox .indmditem:nth-child(3) { flex: 1; }
    .indmod .indmdbox .indmditem:nth-child(2) .mdbox { flex-direction: row; height: auto; gap: 12px; }
    .indmod .indmdbox .indmditem .inmmmt { flex: 1; margin-bottom: 0; }
    .indmod .indmdbox .indmditem .inmmmb { flex: 1; }
    .indmod .indmdbox .indmditem .indmdlib { height: 95px; }
    .indmod .indmdbox .indmditem .indmdlic { height: 95px; }
    /* 三卡内部排版统一为左对齐、缩小标题、隐藏描述 */
    .indmod .indmdbox .indmditem .indmdlib .ltfn,
    .indmod .indmdbox .indmditem .indmdlic .ltfn { padding: 12px 0 12px 12px; justify-content: flex-start; align-items: flex-start; }
    .indmod .indmdbox .indmditem .indmdlib .ltfn .th,
    .indmod .indmdbox .indmditem .indmdlic .ltfn .th { font-size: 15px; }
    .indmod .indmdbox .indmditem .indmdlib .ltfn .dsc,
    .indmod .indmdbox .indmditem .indmdlic .ltfn .dsc { display: none; }
    .indmod .indmdbox .indmditem .indmdlib .arrow,
    .indmod .indmdbox .indmditem .indmdlic .arrow { width: 28px; height: 28px; }
    .indmod .indmdbox .indmditem .indmdlib .arrow i,
    .indmod .indmdbox .indmditem .indmdlic .arrow i { width: 7px; height: 7px; }
    /* 包装卡：H5 隐藏紫色按钮、显示圆形箭头，左对齐、插画靠右 */
    .indmod .indmdbox .indmditem .indmdlic { text-align: left; background-position: right center; }
    .indmod .indmdbox .indmditem .indmdlic .ltfn .lnk { display: none; }
    .indmod .indmdbox .indmditem .indmdlic .arrow { display: flex; }
}
