/* ============================================================
   产品分类列表-1 (collections_list_1) 专属样式
   还原自 MY SHOP.html 的 .ly_collections_list_1.collectionsWrapper
   (visual_plugins_container data-type="collections_list" data-mode="mode_1")
   的公共样式块(bd4b17f2...css 结构 + 3b95b2ec...css 容器 + 8f547ec3/94c3c191...css 实例值);
   实例级值(比例/填充/列数/颜色/按钮/间距)由模板输出成 --cl-* CSS 变量, 本文件只消费变量。
   引入方: templates/sitebuilder/modules/collections_list_1.html
   交互: 无 JS(纯展示 + CSS hover, 不进 JS_FILES)
   注意: 新增本文件后需同步 SiteStaticPublishServiceImpl.CSS_FILES(发布态拷贝清单是硬编码的)。

   编辑态描边由 editor.css 的 .deco-edit-mode .deco-module::before 统一处理,
   本文件不写 outline(见后端指南 §4.5)。
   ============================================================ */

.ly_collections_list_1 { overflow: hidden; }
.ly_collections_list_1 a { text-decoration: none; color: inherit; }
.ly_collections_list_1 a:hover { text-decoration: unset; }

/* ---------- 模块宽度三规则(class 在内部容器 .wide 上, 见指南 §7 第13条) ---------- */
.ly_collections_list_1 .wide { margin: 0 auto; padding: 0; box-sizing: border-box; }
.ly_collections_list_1 .wide.module_width_1440 { width: 1440px; max-width: 100%; }
.ly_collections_list_1 .wide.module_width_full { width: 100%; }
.ly_collections_list_1 .wide.module_width_global { width: var(--deco-module-width, 1440px); max-width: 100%; }
.ly_collections_list_1 .wide > .section { box-sizing: border-box; }

/* ---------- 页面标题(原站 .collections_title; 无配置项: 字号沿用参考站, 字体/颜色走全局 deco-title) ---------- */
.ly_collections_list_1 .collections_title { padding: 80px 0 65px; font-size: 36px; text-align: center; }
.ly_collections_list_1 .collections_title h1 { margin: 0; font-weight: 600; }

/* ---------- 分类网格(列数: 其他组 PC/移动端列数) ---------- */
.ly_collections_list_1 .collectionsBox {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(var(--cl-pc-columns, 3), minmax(0, 1fr));
}
.ly_collections_list_1 .collections_item { position: relative; }
.ly_collections_list_1 .collections_item .collections_img_box {
    overflow: hidden;
    background-color: #f1f1f1;
}

/* ---------- 图片比例 ----------
   --cl-img-ratio: 1:1=100% / 4:3=75% / 2:3=150%;
   "适应图片"(img_ratio_adapt)不占位比例, 图片按原始高度铺满宽度 */
.ly_collections_list_1 .compute_item_img { position: relative; }
.ly_collections_list_1 .compute_process_img { position: relative; width: 100%; padding-top: var(--cl-img-ratio, 100%); }
.ly_collections_list_1 .compute_process_img > a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; }
.ly_collections_list_1 .compute_process_img img {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto;
    width: 100%; height: 100%;
    transition: all .3s ease-in-out;
}
.ly_collections_list_1 .img_ratio_adapt .compute_process_img { padding-top: 0; }
.ly_collections_list_1 .img_ratio_adapt .compute_process_img > a { position: static; }
.ly_collections_list_1 .img_ratio_adapt .compute_process_img img {
    position: static;
    display: block;
    width: 100%; height: auto;
}

/* ---------- 填充方式(等比 contain / 平铺 cover) + 图片展示区域(上/正中/下) ---------- */
.ly_collections_list_1 .img_fit_contain .compute_process_img img { object-fit: contain; }
.ly_collections_list_1 .img_fit_cover .compute_process_img img { object-fit: cover; }
.ly_collections_list_1 .img_pos_top .compute_process_img img { object-position: center top; }
.ly_collections_list_1 .img_pos_center .compute_process_img img { object-position: center center; }
.ly_collections_list_1 .img_pos_bottom .compute_process_img img { object-position: center bottom; }
/* 分类无封面图时回退默认图: contain 完整显示图标, 不被 cover 裁掉(同产品列表口径) */
.ly_collections_list_1 .compute_process_img img.pic_default {
    object-fit: contain;
    background: #f7f7f7;
}

/* ---------- 分类名称 + 按钮区(卡片色 / 对齐方式 / 名称颜色) ---------- */
.ly_collections_list_1 .collections_info {
    padding: 15px 0;
    background-color: var(--cl-card-bg, #ffffff00);
    text-align: var(--cl-text-align, center);
}
.ly_collections_list_1 .collections_name {
    display: block;
    width: 100%;
    font-size: 18px;
    color: var(--cl-name-color, #000000);
}
.ly_collections_list_1 .collections_name h2 { margin: 0; font-size: inherit; font-weight: 600; }
.ly_collections_list_1 .collections_name span { transition: all .3s ease-in-out; }
.ly_collections_list_1 .collections_name:hover { text-decoration: unset; }

/* 按钮: 宽/高留空 -> 变量为 auto, 由 padding 撑开(同 poster_138 口径) */
.ly_collections_list_1 .coll_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin-top: 12px;
    padding: 12px 30px;
    font-family: var(--cl-btn-font, inherit);
    color: var(--cl-btn-text-color, #ffffff);
    background-color: var(--cl-btn-bg-color, #095ac2);
    border: 1px solid var(--cl-btn-border-color, #00000000);
    font-size: var(--cl-btn-pc-font-size, 12px);
    border-radius: var(--cl-btn-pc-radius, 0px);
    width: var(--cl-btn-pc-width, auto);
    height: var(--cl-btn-pc-height, auto);
    text-align: center;
    transition: all .3s ease-in-out;
}
.ly_collections_list_1 .coll_btn:hover {
    color: var(--cl-btn-text-hover-color, #ffffff);
    background-color: var(--cl-btn-bg-hover-color, #095ac2);
    border-color: var(--cl-btn-border-hover-color, #00000000);
}

/* ---------- 分类名称和按钮展示位置(原站 ButtonPosition_*) ---------- */
.ly_collections_list_1 .collections_item.ButtonPosition_imageinternal .collections_info {
    position: absolute;
    top: 50%; left: 0;
    transform: translateY(-50%);
    width: 100%;
}
.ly_collections_list_1 .collections_item.ButtonPosition_imageleft,
.ly_collections_list_1 .collections_item.ButtonPosition_imageright {
    display: flex;
    align-items: stretch;
}
.ly_collections_list_1 .collections_item.ButtonPosition_imageleft .collections_info,
.ly_collections_list_1 .collections_item.ButtonPosition_imageright .collections_info {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: var(--cl-justify, center);
    width: 50%;
    padding: 15px;
}
/* 文本在图片左侧: 信息区 order 1 排到图片前(原站同写法) */
.ly_collections_list_1 .collections_item.ButtonPosition_imageleft .collections_info { order: 1; }
.ly_collections_list_1 .collections_item.ButtonPosition_imageleft .collections_img_box { order: 2; flex: 1; }
.ly_collections_list_1 .collections_item.ButtonPosition_imageright .collections_img_box { flex: 1; }

/* ---------- 图片 hover(原站: 常态放大 1.05, hover 归位) ---------- */
@media screen and (min-width: 1000px) {
    .ly_collections_list_1 .collections_item .compute_process_img img { transform: scale(1.05); }
    .ly_collections_list_1 .collections_item:hover .compute_process_img img { transform: scale(1); }
}

/* ---------- PC 端间距(上下 px / 左右 %) ---------- */
@media screen and (min-width: 1001px) {
    .ly_collections_list_1 {
        padding-top: var(--cl-pc-padding-top, 0px);
        padding-bottom: var(--cl-pc-padding-bottom, 80px);
    }
    .ly_collections_list_1 .wide > .section {
        padding-left: var(--cl-pc-padding-left, 0%);
        padding-right: var(--cl-pc-padding-right, 0%);
    }
}

/* ---------- 空态(装修时租户还没有分类, 给一块占位) ---------- */
.ly_collections_list_1 .collections_empty {
    grid-column: 1 / -1;
    padding: 72px 24px;
    border: 1px dashed #d9dee7;
    border-radius: 10px;
    background: #fafbfc;
    color: #8791a2;
    text-align: center;
    font-size: 14px;
}

/* ---------- 移动端(原站两档: 1000px / 750px) ---------- */
@media screen and (max-width: 1000px) {
    .ly_collections_list_1 {
        padding-top: var(--cl-mobile-padding-top, 0px);
        padding-bottom: var(--cl-mobile-padding-bottom, 20px);
    }
    .ly_collections_list_1 .wide > .section {
        padding-left: var(--cl-mobile-padding-left, 3%);
        padding-right: var(--cl-mobile-padding-right, 3%);
    }
    .ly_collections_list_1 .collectionsBox {
        grid-template-columns: repeat(var(--cl-mobile-columns, 1), minmax(0, 1fr));
    }
    .ly_collections_list_1 .collections_title { font-size: 40px; padding: 50px 0 70px; }
    .ly_collections_list_1 .collections_name { margin-top: 24px; font-size: 28px; }
    .ly_collections_list_1 .coll_btn {
        font-size: var(--cl-btn-mobile-font-size, 12px);
        border-radius: var(--cl-btn-mobile-radius, 0px);
        width: var(--cl-btn-mobile-width, auto);
        height: var(--cl-btn-mobile-height, auto);
    }
}
@media screen and (max-width: 750px) {
    .ly_collections_list_1 .collections_title { font-size: 20px; padding: 25px 0 35px; }
    .ly_collections_list_1 .collections_name { margin-top: 12px; font-size: 14px; }
}