/* ============================================================
   layout.css — 页面骨架（v4 层叠折叠式）
   页面由四张整屏「层」堆叠而成：滚动时下一层覆盖上一层，
   被覆盖层由脚本压暗缩小，形成逐层折叠的观感
   ============================================================ */

/* 限制页面横向不可滚动 */
body {
    overflow-x: hidden;

}

/* 页头：悬浮于各层之上的薄纱标识条 */
.site-header {
    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 10;

    background: linear-gradient(180deg, rgba(16, 9, 4, 0.72), rgba(16, 9, 4, 0));

}

/* 页头内容行：左右两端对齐 */
.site-header-inner {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px 0;

}

/* 页头域名标识 */
.header-brand {
    font-family: var(--font-display);

    letter-spacing: 0.12em;

    color: rgba(244, 231, 207, 0.85);

}

/* 页头右侧时刻（由脚本写入） */
.header-clock {
    font-size: 14px;

    color: rgba(207, 176, 138, 0.75);

}

/* 层容器：整屏钉位，下一层滚动覆盖 */
.panel {
    position: sticky;

    top: 0;

    display: flex;

    align-items: center;

    min-height: 100vh;

    min-height: 100svh;

    overflow: hidden;

    border-radius: 26px 26px 0 0;

    background: var(--color-bg);

    box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.55);

}

/* 首层与视口同宽同角 */
.panel-hero {
    border-radius: 0;

}

/* 层内摄影基底 */
.panel-bg {
    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

}

/* 摄影上的暗纱：保证文字可读并统一夜色 */
.panel-scrim {
    position: absolute;

    inset: 0;

    background:
        radial-gradient(120% 90% at 50% 40%, rgba(20, 12, 6, 0.18), rgba(20, 12, 6, 0.66) 88%),
        linear-gradient(180deg, rgba(20, 12, 6, 0.5), rgba(20, 12, 6, 0.28) 40%, rgba(20, 12, 6, 0.62));

}

/* 各层摄影基底：深夜厨房 / 暖光罐架 / 夜色串灯书 */
.panel-bg-kitchen {
    background-image: url("../assets/hero-kitchen.jpg");

}

.panel-bg-jars {
    background-image: url("../assets/cafe-jars.jpg");

}

.panel-bg-book {
    background-image: url("../assets/book-lights.jpg");

}

/* 层内内容容器 */
.panel-inner {
    position: relative;

    z-index: 2;

    width: min(var(--width-page), 100% - 48px);

    margin-inline: auto;

    padding: 108px 0 72px;

    transform-origin: 50% 0;

    will-change: transform, filter;

}

/* 链路层：独立的深木底色，不铺摄影 */
.panel-beam {
    background:
        radial-gradient(900px 520px at 50% 8%, rgba(120, 82, 44, 0.3), transparent 70%),
        linear-gradient(180deg, #221610, #180f09);

}

/* 英雄区：左文案右留言板的两栏布局 */
.hero {
    display: grid;

    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);

    align-items: center;

    gap: 56px;

}

/* 分区标题组：主标题与副题的节奏 */
.section-head {
    margin-bottom: 36px;

}

/* 分区主标题 */
.section-title {
    font-size: clamp(26px, 3.4vw, 34px);

    letter-spacing: 0.06em;

    color: var(--color-ink);

    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);

}

/* 分区副题 */
.section-sub {
    margin-top: 8px;

    color: var(--color-ink-soft);

}

/* 服务罐栅格：三列自适应 */
.service-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: var(--space-gap);

}

/* 文摘卡片栅格 */
.passage-grid {
    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: var(--space-gap);

}

/* 页脚：最底一层收尾横幅 */
.site-footer {
    position: relative;

    z-index: 4;

    padding: 30px 0 36px;

    background-color: #140c06;

    color: var(--color-ink-soft);

    text-align: center;

}

/* 页脚行距 */
.site-footer p {
    margin-top: 4px;

    font-size: 14px;

    letter-spacing: 0.08em;

}

/* 平板断点：英雄区收单列、罐位双列 */
@media (max-width: 900px) {

    /* 英雄区收为单列 */
    .hero {
        grid-template-columns: 1fr;

        gap: 40px;

    }

    /* 罐位栅格收为双列 */
    .shelf-grid,
    .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}

/* 手机断点：全单列并放开层高限制 */
@media (max-width: 600px) {

    /* 层高改为随内容生长 */
    .panel {
        position: relative;

        min-height: 100svh;

    }

    /* 罐位栅格收为单列 */
    .service-grid {
        grid-template-columns: 1fr;

    }

    /* 层内上下内距收紧 */
    .panel-inner {
        padding: 88px 0 56px;

    }

}