/**
 * FONZE HOUSE — Gallery Styles 前台版式 CSS(自包含可复用模块)
 *
 * 图片样式图库插入的 HTML 片段在此定义版式。
 * 结构:<div class="fonze-gallery fg--KEY"><figure class="fg-item"><img><figcaption></figure> | <div class="fg-text"><p></div></div>
 * 移动端优先:基础单列堆叠,≥768px 按版式拼格;想复用到别的项目连本文件一起拷走即可。
 */

/* ===== 基础(移动端单列) ===== */
.fonze-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    margin: 2.4rem 0;
    align-items: start;
}

.fonze-gallery .fg-item {
    display: block;
    margin: 0;
    overflow: hidden;
    background: #FFFFFF;
    border: .1rem solid #E2E8F0;
    border-radius: 1rem;
    box-shadow: 0 .2rem .8rem rgba(0, 0, 0, .06);
    transition: all .3s ease;
}

.fonze-gallery .fg-item:hover {
    transform: translateY(-.3rem);
    box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .1);
    border-color: #FE7610;
}

/* 比例跟随图片:不强制 aspect-ratio、不裁切,图按自然宽高撑开单元格 */
.fonze-gallery .fg-item img {
    display: block;
    width: 100%;
    height: auto;
}

.fonze-gallery .fg-item figcaption {
    flex: 0 0 auto;
    padding: .8rem 1.2rem;
    font-size: 1.4rem;
    line-height: 1.6;
    color: #5A6B7B;
    text-align: center;
    background: #F8FAFC;
}

.fonze-gallery .fg-text {
    display: flex;
    align-items: center;
    padding: 2.4rem 2rem;
    background: #F4F7FB;
    border: .1rem solid #E2E8F0;
    border-radius: 1rem;
}

.fonze-gallery .fg-text p {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.8;
    color: #5A6B7B;
}

/* ===== 桌面拼格(≥768px):只定列数与跨格,单元格高度由图片自然比例决定 ===== */
@media (min-width: 768px) {
    .fonze-gallery {
        gap: 1.6rem;
    }

    /* 2 两列 */
    .fg--two { grid-template-columns: repeat(2, 1fr); }

    /* 3 三列 */
    .fg--three { grid-template-columns: repeat(3, 1fr); }

    /* 4 四连排 */
    .fg--strip-four { grid-template-columns: repeat(4, 1fr); }

    /* 2×2 */
    .fg--grid-2x2 { grid-template-columns: repeat(2, 1fr); }

    /* 图左文右 / 文左图右 */
    .fg--img-text,
    .fg--text-img { grid-template-columns: repeat(2, 1fr); }

    /* 1 大 + 4 小(4 列,大图占左上 2×2) */
    .fg--one-big-four { grid-template-columns: repeat(4, 1fr); }
    .fg--one-big-four .fg-item:nth-child(1) {
        grid-column: span 2;
        grid-row: span 2;
    }

    /* 左大 + 右 2 */
    .fg--left-big-right-two { grid-template-columns: repeat(2, 1fr); }
    .fg--left-big-right-two .fg-item:nth-child(1) { grid-row: span 2; }

    /* 左 2 + 右大 */
    .fg--left-two-right-big { grid-template-columns: repeat(2, 1fr); }
    .fg--left-two-right-big .fg-item:nth-child(3) {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    /* 上横 + 下 2 */
    .fg--top-wide-bottom-two { grid-template-columns: repeat(2, 1fr); }
    .fg--top-wide-bottom-two .fg-item:nth-child(1) { grid-column: span 2; }

    /* 上 2 + 下横 */
    .fg--top-two-bottom-wide { grid-template-columns: repeat(2, 1fr); }
    .fg--top-two-bottom-wide .fg-item:nth-child(3) { grid-column: span 2; }

    /* 上横 + 中 2 + 下横 */
    .fg--wide-two-wide { grid-template-columns: repeat(2, 1fr); }
    .fg--wide-two-wide .fg-item:nth-child(1),
    .fg--wide-two-wide .fg-item:nth-child(4) { grid-column: span 2; }

    /* 左大 + 右 6 小(3 列,大图占左列 3 行) */
    .fg--left-big-right-six { grid-template-columns: repeat(3, 1fr); }
    .fg--left-big-right-six .fg-item:nth-child(1) { grid-row: span 3; }
}

/* ===== PC 端宽度(≥1024px):默认 60% 居中,避免图集过高挤占正文;<1024px 不设 width 即强制 100% =====
   宽度由后台弹窗选择,写入修饰类 fg-w-XX;无该类(存量片段)按默认 60%。 */
@media (min-width: 1024px) {
    .fonze-gallery {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }
    .fonze-gallery.fg-w-40 { width: 40%; }
    .fonze-gallery.fg-w-50 { width: 50%; }
    .fonze-gallery.fg-w-60 { width: 60%; }
    .fonze-gallery.fg-w-70 { width: 70%; }
    .fonze-gallery.fg-w-80 { width: 80%; }
    .fonze-gallery.fg-w-100 { width: 100%; }
}