/* ==========================================================================
   多彩贵州·中国原生态国际摄影大展 — 首页设计系统
   民族多彩风：苗绣红 / 蜡染靛蓝 / 姜黄 / 银饰月白
   版本: 1.0  2026-07-27
   ========================================================================== */

/* ---------- 设计令牌（Design Tokens） ---------- */
:root {
    /* 贵州民族色板 */
    --gz-red:        #C8402F;   /* 苗绣红 - 强调/按钮 */
    --gz-red-dark:   #A33224;   /* 苗绣红-深 */
    --gz-red-light:  #E8685A;   /* 苗绣红-浅 */
    --gz-indigo:     #1E3A5F;   /* 蜡染靛蓝 - 标题/深色块 */
    --gz-indigo-deep:#152B47;   /* 靛蓝-深 */
    --gz-yellow:     #E9B44C;   /* 姜黄 - 装饰/点缀 */
    --gz-yellow-soft:#F5D48A;   /* 姜黄-浅 */
    --gz-white:      #F7F5F0;   /* 银饰月白 - 浅色背景 */
    --gz-ink:        #17171B;   /* 墨黑 - 暗色画廊 */
    --gz-ink-soft:   #232329;   /* 墨黑-卡片 */
    --gz-green:      #5C7A6E;   /* 雾灰绿 - 辅助 */
    --gz-purple:     #6B4E8B;   /* 侗布紫 - 辅助 */

    /* 文字色 */
    --gz-text:       #2B2B30;
    --gz-text-light: #6E6E76;
    --gz-text-invert:#F2EFE8;

    /* 字体 */
    --gz-font-serif: "Songti SC","STSong","Noto Serif SC","Source Han Serif SC","SimSun",serif;
    --gz-font-sans:  "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;

    /* 间距/圆角/阴影 */
    --gz-radius:     14px;
    --gz-radius-lg:  22px;
    --gz-shadow:     0 8px 30px rgba(23,23,27,.08);
    --gz-shadow-lg:  0 18px 50px rgba(23,23,27,.14);
    --gz-transition: all .35s cubic-bezier(.25,.8,.25,1);
}

/* ---------- 基础重置 ---------- */
.gz-home {
    font-family: var(--gz-font-sans);
    color: var(--gz-text);
    background: var(--gz-white);
    overflow-x: hidden;
}
.gz-home h1, .gz-home h2, .gz-home h3, .gz-home h4, .gz-home h5 {
    font-family: var(--gz-font-serif);
    color: var(--gz-indigo);
}
.gz-home a { transition: var(--gz-transition); }
.gz-home img { max-width: 100%; }

/* ---------- 板块容器 ---------- */
.gz-section {
    position: relative;
    padding: 80px 0;
}
.gz-section--tight { padding: 56px 0; }
.gz-section--white { background: #fff; }
.gz-section--cream { background: var(--gz-white); }
.gz-section--indigo {
    background: linear-gradient(160deg, var(--gz-indigo) 0%, var(--gz-indigo-deep) 100%);
    color: var(--gz-text-invert);
}
.gz-section--ink {
    background: var(--gz-ink);
    color: var(--gz-text-invert);
}

/* ---------- 板块标题（大字幕 + 英文副标 + 纹样下划线） ---------- */
.gz-sec-head { text-align: center; margin-bottom: 48px; }
.gz-sec-sub {
    display: inline-block;
    font-size: 13px;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: var(--gz-red);
    font-weight: 600;
    margin-bottom: 12px;
}
.gz-sec-title {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 6px;
    letter-spacing: .06em;
}
.gz-sec-desc {
    color: var(--gz-text-light);
    font-size: 15px;
    margin-top: 10px;
}
/* 纹样下划线：姜黄渐变线 + 中心菱形（苗绣意象） */
.gz-sec-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}
.gz-sec-line::before,
.gz-sec-line::after {
    content: "";
    width: 56px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gz-yellow));
}
.gz-sec-line::after {
    background: linear-gradient(90deg, var(--gz-yellow), transparent);
}
.gz-sec-line i {
    width: 9px;
    height: 9px;
    background: var(--gz-red);
    transform: rotate(45deg);
    flex: none;
}
/* 深色板块标题反色 */
.gz-section--indigo .gz-sec-title,
.gz-section--ink .gz-sec-title { color: #fff; }
.gz-section--indigo .gz-sec-desc,
.gz-section--ink .gz-sec-desc { color: rgba(242,239,232,.65); }
.gz-section--indigo .gz-sec-sub,
.gz-section--ink .gz-sec-sub { color: var(--gz-yellow); }

/* ---------- 按钮 ---------- */
.gz-btn {
    display: inline-block;
    padding: 13px 38px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .12em;
    text-decoration: none !important;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--gz-transition);
}
.gz-btn--red {
    background: linear-gradient(135deg, var(--gz-red) 0%, var(--gz-red-dark) 100%);
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(200,64,47,.35);
}
.gz-btn--red:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(200,64,47,.45);
    color: #fff;
}
.gz-btn--yellow {
    background: linear-gradient(135deg, var(--gz-yellow) 0%, #D99F33 100%);
    color: var(--gz-indigo-deep) !important;
    box-shadow: 0 8px 22px rgba(233,180,76,.35);
}
.gz-btn--yellow:hover { transform: translateY(-3px); color: var(--gz-indigo-deep); }
.gz-btn--ghost {
    border-color: rgba(255,255,255,.55);
    color: #fff !important;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(6px);
}
.gz-btn--ghost:hover {
    background: rgba(255,255,255,.16);
    border-color: #fff;
    transform: translateY(-3px);
}
.gz-btn--outline {
    border-color: var(--gz-indigo);
    color: var(--gz-indigo) !important;
    background: transparent;
}
.gz-btn--outline:hover {
    background: var(--gz-indigo);
    color: #fff !important;
    transform: translateY(-3px);
}

/* ---------- 卡片 ---------- */
.gz-card {
    background: #fff;
    border-radius: var(--gz-radius);
    box-shadow: var(--gz-shadow);
    overflow: hidden;
    transition: var(--gz-transition);
}
.gz-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--gz-shadow-lg);
}

/* ---------- 玻璃拟态 ---------- */
.gz-glass {
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: var(--gz-radius-lg);
    box-shadow: var(--gz-shadow);
}

/* ---------- 图片悬停缩放容器 ---------- */
.gz-imgzoom { overflow: hidden; border-radius: var(--gz-radius); display: block; position: relative; }
.gz-imgzoom img {
    width: 100%;
    display: block;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.25,.8,.25,1);
}
.gz-imgzoom:hover img { transform: scale(1.06); }
/* 图片底部渐变遮罩（承载文字） */
.gz-imgzoom .gz-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(23,23,27,0) 45%, rgba(23,23,27,.72) 100%);
    pointer-events: none;
}

/* ---------- Bento 网格（展区导航） ---------- */
.gz-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 190px;
    gap: 18px;
}
.gz-bento-item {
    position: relative;
    border-radius: var(--gz-radius);
    overflow: hidden;
    display: block;
    isolation: isolate;
}
.gz-bento-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .65s cubic-bezier(.25,.8,.25,1);
}
.gz-bento-item:hover img { transform: scale(1.08); }
.gz-bento-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(21,43,71,.05) 30%, rgba(21,43,71,.78) 100%);
    transition: var(--gz-transition);
}
.gz-bento-item:hover::after { background: linear-gradient(180deg, rgba(200,64,47,.08) 20%, rgba(163,50,36,.82) 100%); }
.gz-bento-label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 18px 20px;
    z-index: 2;
    color: #fff;
}
.gz-bento-label h5 {
    margin: 0;
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .05em;
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.gz-home .gz-bento-label h5 { color: #fff; }
.gz-bento-label small {
    display: block;
    font-size: 11px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--gz-yellow-soft);
    margin-bottom: 3px;
}
/* 跨度变体 */
.gz-bento-item.gz-w2 { grid-column: span 2; }
.gz-bento-item.gz-h2 { grid-row: span 2; }
.gz-bento-item.gz-w2 h5, .gz-bento-item.gz-h2 h5 { font-size: 24px; }

/* ---------- 新闻卡片（玻璃拟态 + 图上文下） ---------- */
.gz-news-card { display: flex; flex-direction: column; height: 100%; }
.gz-news-card .gz-imgzoom { border-radius: var(--gz-radius) var(--gz-radius) 0 0; }
.gz-news-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.gz-news-tag {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--gz-red);
    background: rgba(200,64,47,.09);
    border: 1px solid rgba(200,64,47,.22);
    padding: 3px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.gz-news-title {
    font-size: 18px;
    line-height: 1.55;
    margin: 0 0 10px;
    font-weight: 700;
}
.gz-news-title a { color: var(--gz-indigo); text-decoration: none; }
.gz-news-title a:hover { color: var(--gz-red); }
.gz-news-excerpt {
    color: var(--gz-text-light);
    font-size: 14px;
    line-height: 1.7;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gz-news-more {
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--gz-red);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.gz-news-more::after { content: "→"; transition: transform .3s; }
.gz-news-more:hover::after { transform: translateX(5px); }
.gz-news-more:hover { color: var(--gz-red-dark); }

/* ---------- 风物卡片流（杂志风 Bento 文章导航） ---------- */
.gz-flavor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 235px;
    gap: 20px;
}
.gz-flavor-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: var(--gz-radius);
    overflow: hidden;
    isolation: isolate;
    text-decoration: none !important;
    box-shadow: var(--gz-shadow);
}
.gz-flavor-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .65s cubic-bezier(.25, .8, .25, 1);
}
.gz-flavor-card:hover img { transform: scale(1.07); }
.gz-flavor-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(23, 23, 27, 0) 32%, rgba(23, 23, 27, .85) 100%);
    transition: opacity .4s;
}
.gz-flavor-info {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gz-flavor-tag {
    align-self: flex-start;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(200, 64, 47, .88);
    color: var(--gz-yellow-soft);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .15em;
}
.gz-home .gz-flavor-title {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gz-flavor-excerpt {
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gz-flavor-more {
    color: var(--gz-yellow);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .08em;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.gz-flavor-more i { font-style: normal; transition: transform .3s; }
.gz-flavor-card:hover .gz-flavor-more i { transform: translateX(5px); }
/* 首卡 2×2 精选 */
.gz-flavor-card:first-child { grid-column: span 2; grid-row: span 2; }
.gz-flavor-card:first-child .gz-flavor-title { font-size: 26px; -webkit-line-clamp: 2; }
.gz-flavor-card:first-child .gz-flavor-excerpt { -webkit-line-clamp: 3; font-size: 14px; }
/* 标准卡隐藏摘要，保证排版紧凑 */
.gz-flavor-card:not(:first-child) .gz-flavor-excerpt { display: none; }

/* ---------- 暗色画廊（热点作品） ---------- */
.gz-work-card { text-align: center; }
.gz-work-card .gz-imgzoom { border-radius: var(--gz-radius); }
.gz-work-card .gz-imgzoom img { height: 210px; }
.gz-work-title {
    color: #F2EFE8 !important;
    font-size: 16px;
    font-weight: 600;
    margin: 14px 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gz-work-meta {
    font-size: 12.5px;
    color: rgba(242,239,232,.5);
    letter-spacing: .05em;
}
.gz-work-meta b { color: var(--gz-yellow); font-weight: 600; }
/* 悬停「See Photos」遮罩 */
.gz-work-card .gz-view {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(200,64,47,.55);
    opacity: 0;
    transition: var(--gz-transition);
    z-index: 2;
    backdrop-filter: blur(2px);
}
.gz-work-card .gz-imgzoom:hover .gz-view { opacity: 1; }
.gz-view span {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    border: 1.5px solid rgba(255,255,255,.85);
    padding: 9px 20px 9px 24px;
    border-radius: 999px;
}

/* ---------- 图文并排（森罗万象/大展介绍） ---------- */
.gz-feature-figure { border-radius: var(--gz-radius-lg); overflow: hidden; box-shadow: var(--gz-shadow-lg); }
.gz-feature-figure img { width: 100%; display: block; transition: transform .7s; }
.gz-feature-figure:hover img { transform: scale(1.03); }
.gz-feature-text p {
    color: var(--gz-text-light);
    line-height: 1.95;
    font-size: 15px;
    text-align: justify;
}
.gz-feature-text .lead-line {
    font-family: var(--gz-font-serif);
    font-size: 17px;
    color: var(--gz-indigo);
    border-left: 3px solid var(--gz-yellow);
    padding-left: 14px;
    margin-bottom: 18px;
    line-height: 1.8;
}

/* ---------- 民族纹样装饰 ---------- */
/* 苗绣色带（顶部细条） */
.gz-ribbon {
    height: 5px;
    background: linear-gradient(90deg,
        var(--gz-red) 0%, var(--gz-red) 25%,
        var(--gz-yellow) 25%, var(--gz-yellow) 50%,
        var(--gz-indigo) 50%, var(--gz-indigo) 75%,
        var(--gz-green) 75%, var(--gz-green) 100%);
}
/* 蜡染涡纹分隔（重复径向渐变圆点） */
.gz-divider {
    height: 14px;
    background-image: radial-gradient(circle, var(--gz-yellow) 2px, transparent 2.5px);
    background-size: 22px 14px;
    background-repeat: repeat-x;
    background-position: center;
    opacity: .55;
}
/* 角落纹样（菱形连续） */
.gz-pattern-band {
    height: 10px;
    background:
        linear-gradient(135deg, var(--gz-yellow) 25%, transparent 25%) -5px 0/10px 10px,
        linear-gradient(225deg, var(--gz-yellow) 25%, transparent 25%) -5px 0/10px 10px;
    opacity: .35;
}

/* ---------- 统计数字 ---------- */
.gz-stat { text-align: center; padding: 10px 0; }
.gz-stat .gz-stat-num {
    font-family: var(--gz-font-serif);
    font-size: 46px;
    font-weight: 700;
    color: var(--gz-yellow);
    line-height: 1.1;
}
.gz-stat .gz-stat-label {
    font-size: 14px;
    letter-spacing: .2em;
    color: rgba(242,239,232,.75);
    margin-top: 8px;
}
.gz-stat .gz-stat-icon {
    font-size: 30px;
    color: var(--gz-red-light);
    margin-bottom: 10px;
    display: block;
}

/* ---------- 滚动进场动画 ---------- */
.gz-anim {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .8s cubic-bezier(.25,.8,.25,1), transform .8s cubic-bezier(.25,.8,.25,1);
    will-change: opacity, transform;
}
.gz-anim.gz-in { opacity: 0; transform: scale(.96); }
.gz-anim.gz-on { opacity: 1; transform: none; }
/*  stagger 延迟 */
.gz-d1 { transition-delay: .08s; }
.gz-d2 { transition-delay: .16s; }
.gz-d3 { transition-delay: .24s; }
.gz-d4 { transition-delay: .32s; }

/* ---------- Hero 覆盖层（大标题 + 滚动提示） ---------- */
.gz-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 66px;
}
.gz-hero-title {
    font-family: var(--gz-font-serif);
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: .18em;
    text-shadow: 0 4px 24px rgba(0,0,0,.45);
    margin: 0;
    text-align: center;
}
.gz-home .gz-hero-title { color: #fff; }
.gz-hero-sub {
    color: var(--gz-yellow-soft);
    letter-spacing: .5em;
    font-size: 14px;
    text-transform: uppercase;
    margin-top: 12px;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.gz-scroll-hint {
    margin-top: 34px;
    width: 26px;
    height: 44px;
    border: 2px solid rgba(255,255,255,.75);
    border-radius: 999px;
    position: relative;
}
.gz-scroll-hint::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 8px;
    width: 4px;
    height: 9px;
    margin-left: -2px;
    border-radius: 999px;
    background: var(--gz-yellow);
    animation: gzScrollDot 1.8s ease-in-out infinite;
}
@keyframes gzScrollDot {
    0%   { transform: translateY(0); opacity: 1; }
    70%  { transform: translateY(16px); opacity: 0; }
    100% { transform: translateY(0); opacity: 0; }
}

/* ---------- 导航滚动玻璃态 ---------- */
.navbar.gz-nav-solid {
    background: rgba(23,23,27,.82) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 24px rgba(0,0,0,.25);
}

/* ---------- CTA 板块 ---------- */
.gz-cta {
    position: relative;
    text-align: center;
    background:
        radial-gradient(circle at 18% 30%, rgba(233,180,76,.16) 0%, transparent 42%),
        radial-gradient(circle at 82% 70%, rgba(200,64,47,.2) 0%, transparent 42%),
        linear-gradient(150deg, var(--gz-indigo) 0%, var(--gz-indigo-deep) 100%);
    overflow: hidden;
}
.gz-cta .gz-sec-title { color: #fff; }

/* ---------- 响应式 ---------- */
@media (max-width: 1199px) {
    .gz-bento { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
    .gz-sec-title { font-size: 30px; }
    .gz-hero-title { font-size: 36px; letter-spacing: .1em; }
    .gz-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
    .gz-flavor-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 210px; }
    .gz-section { padding: 60px 0; }
}
@media (max-width: 767px) {
    .gz-sec-title { font-size: 26px; }
    .gz-hero-title { font-size: 27px; }
    .gz-hero-sub { font-size: 11px; letter-spacing: .3em; }
    .gz-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 12px; }
    .gz-bento-item.gz-w2 { grid-column: span 2; }
    .gz-flavor-grid { grid-template-columns: 1fr; grid-auto-rows: 250px; gap: 14px; }
    .gz-flavor-card:first-child { grid-column: span 1; grid-row: span 1; }
    .gz-flavor-card:first-child .gz-flavor-title { font-size: 20px; }
    .gz-flavor-card:not(:first-child) .gz-flavor-excerpt { display: -webkit-box; }
    .gz-stat .gz-stat-num { font-size: 34px; }
    .gz-section { padding: 46px 0; }
}