/* 首页写真推荐（hero photo 模式）：立图轮播（每页4张·卡片=立图+surface文字区）+ 月历打卡面板+积分盲盒 */

/* ---------- 布局：右栏 320px，整体高度 340px ---------- */
@media (min-width:769px) {
        .pcgh-home-top.pcgh-home-top--photo {
                grid-template-columns: minmax(0, 1fr) minmax(280px, 320px)
        }
}

.pcgh-home-top.pcgh-home-top--photo {
        --pcgh-home-hero-signin-height: 340px !important
}

/* 签到面板与写真区等高 stretch（顶部+底部同时对齐） */
.pcgh-home-top.pcgh-home-top--photo .pcgh-home-signin--photo {
        align-self: stretch
}

.pcgh-home-top .pcgh-home-signin--photo {
        padding: 14px 16px 16px
}

/* ---------- 立图卡片：立图封面 + surface 底色文字区（标题亮色/摘要暗色） ---------- */
.pcgh-home-hero--photo {
        position: relative;
        min-height: var(--pcgh-home-hero-signin-height, 340px);
        min-width: 0
}

.pcgh-home-hero--photo .pcgh-photopick__viewport {
        position: relative;
        width: 100%;
        min-height: calc(var(--pcgh-home-hero-signin-height, 340px) - 26px);
        overflow: hidden;
        border-radius: var(--pcgh-radius-lg, 12px);
        background: linear-gradient(180deg, #1b2838, #172030);
        box-shadow: 0 14px 36px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .05)
}

.pcgh-home-hero--photo .pcgh-photopick__track {
        display: flex;
        align-items: stretch;
        height: 100%;
        margin: 0;
        transition: transform .55s cubic-bezier(.4, 0, .2, 1);
        will-change: transform
}

.pcgh-home-hero--photo .pcgh-photopick__card {
        display: flex;
        flex-direction: column;
        flex: 0 0 25%;
        min-width: 0;
        padding: 10px 7px 8px;
        text-decoration: none
}

.pcgh-home-hero--photo .pcgh-photopick__cover {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        border-radius: var(--pcgh-radius-lg, 12px);
        background: #0f172a
}

.pcgh-home-hero--photo .pcgh-photopick__cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        display: block;
        transition: transform .35s ease
}

.pcgh-home-hero--photo .pcgh-photopick__card:hover .pcgh-photopick__cover img {
        transform: scale(1.045)
}

.pcgh-home-hero--photo .pcgh-photopick__body {
        display: block;
        margin: 7px 0 0;
        padding: 7px 9px 8px;
        border-radius: var(--pcgh-radius, 8px);
        background: var(--pcgh-surface, #1f2733)
}

.pcgh-home-hero--photo .pcgh-photopick__title {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0;
        color: var(--pcgh-text, #c7d5e0);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.45;
        word-break: break-all
}

.pcgh-home-hero--photo .pcgh-photopick__excerpt {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        margin: 4px 0 0;
        height: 2.9em;
        color: var(--pcgh-text-3, #5c6b7a);
        font-size: 12px;
        font-weight: 400;
        line-height: 1.45;
        word-break: break-all
}

/* ---------- 轮播圆点：文档流排在图片下方独立一行 ---------- */
.pcgh-home-hero--photo .pcgh-photopick__dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        min-height: 10px;
        margin-top: 9px
}

.pcgh-home-hero--photo .pcgh-photopick__dot {
        width: 7px;
        height: 7px;
        border: 0;
        padding: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, .35);
        cursor: pointer;
        transition: all .2s
}

.pcgh-home-hero--photo .pcgh-photopick__dot.is-active {
        background: #66c0f4;
        width: 18px;
        border-radius: 4px
}

/* ---------- 月历打卡面板 ---------- */
.pcgh-dailycard {
        display: flex;
        flex-direction: column;
        min-width: 0;
        flex: 1
}

.pcgh-dailycard__streak {
        margin: 0 0 12px;
        font-size: 14px;
        color: var(--pcgh-text, #c7d5e0)
}

.pcgh-dailycard__streak b {
        font-size: 17px;
        font-weight: 800;
        color: #409eff;
        margin: 0 2px
}

.pcgh-dailycard__cal {
        min-width: 0
}

.pcgh-dailycard__cal-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 8px
}

.pcgh-dailycard__cal-month {
        font-size: 14px;
        font-weight: 700;
        color: var(--pcgh-text, #c7d5e0)
}

.pcgh-dailycard__cal-nav {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--pcgh-text-3, #5c6b7a);
        cursor: pointer
}

.pcgh-dailycard__cal-nav:hover {
        color: var(--pcgh-primary, #66c0f4)
}

.pcgh-dailycard__cal-nav svg {
        width: 16px;
        height: 16px
}

.pcgh-dailycard__cal-week {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 5px;
        margin-bottom: 6px
}

.pcgh-dailycard__cal-week span {
        text-align: center;
        font-size: 12px;
        color: var(--pcgh-text-3, #5c6b7a)
}

.pcgh-dailycard__cal-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 5px
}

.pcgh-dailycard__day {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 32px;
        font-size: 13px;
        background: rgba(255, 255, 255, .05);
        color: var(--pcgh-text, #c7d5e0);
        cursor: default
}

.pcgh-dailycard__day.is-muted {
        background: transparent;
        color: var(--pcgh-text-3, #5c6b7a);
        opacity: .45
}

.pcgh-dailycard__day.is-done {
        background: #67c23a;
        color: #fff;
        font-weight: 700
}

.pcgh-dailycard__day.is-today {
        box-shadow: inset 0 0 0 2px #409eff
}

/* ---------- 积分抽盲盒入口（日历下方） ---------- */
.pcgh-dailycard__blindbox {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 12px;
        padding: 9px 12px;
        border-radius: var(--pcgh-radius, 8px);
        background: rgba(var(--pcgh-primary-rgb, 102, 192, 244), .10);
        text-decoration: none;
        transition: filter .15s ease
}

.pcgh-dailycard__blindbox:hover {
        filter: brightness(1.15)
}

.pcgh-dailycard__blindbox-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        border-radius: var(--pcgh-radius, 8px);
        background: linear-gradient(135deg, #f5a623, #e6822d);
        background: linear-gradient(135deg, var(--pcgh-primary, #66c0f4), color-mix(in srgb, var(--pcgh-primary, #66c0f4) 70%, #1b2838));
        color: #fff;
        box-shadow: 0 2px 8px rgba(var(--pcgh-primary-rgb, 102, 192, 244), .3)
}

.pcgh-dailycard__blindbox-icon svg {
        width: 17px;
        height: 17px
}

.pcgh-dailycard__blindbox-text {
        display: flex;
        flex-direction: column;
        min-width: 0
}

.pcgh-dailycard__blindbox-text b {
        font-size: 13px;
        font-weight: 700;
        color: var(--pcgh-text, #c7d5e0)
}

.pcgh-dailycard__blindbox-text small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
        color: var(--pcgh-text-3, #5c6b7a)
}

.pcgh-dailycard__blindbox-arrow {
        margin-left: auto;
        flex: 0 0 auto;
        color: var(--pcgh-text-3, #5c6b7a)
}

.pcgh-dailycard__blindbox-arrow svg {
        width: 16px;
        height: 16px
}

.pcgh-dailycard__foot {
        margin-top: auto;
        padding-top: 12px
}

.pcgh-dailycard__mine {
        display: block;
        margin-top: 9px;
        font-size: 12px;
        color: var(--pcgh-text-3, #5c6b7a);
        text-align: center
}

.pcgh-dailycard__mine b {
        color: var(--pcgh-text, #c7d5e0);
        font-weight: 700
}

/* ---------- 浅色主题适配 ---------- */
html[data-pcgh-theme-resolved=light] .pcgh-home-hero.pcgh-home-hero--photo {
        background: transparent
}


html[data-pcgh-theme-resolved=light] .pcgh-home-hero--photo .pcgh-photopick__viewport {
        background: linear-gradient(180deg, #eef2f7, #e2e8f0);
        box-shadow: var(--pcgh-shadow, 0 14px 36px rgba(15, 23, 42, .1))
}

html[data-pcgh-theme-resolved=light] .pcgh-home-hero--photo .pcgh-photopick__cover {
        background: #dbe3ec
}

html[data-pcgh-theme-resolved=light] .pcgh-home-hero--photo .pcgh-photopick__dot {
        background: rgba(15, 23, 42, .28)
}

html[data-pcgh-theme-resolved=light] .pcgh-home-hero--photo .pcgh-photopick__dot.is-active {
        background: var(--pcgh-primary, #417a9b)
}

html[data-pcgh-theme-resolved=light] .pcgh-dailycard__blindbox {
        background: #fdf6ec;
        background: rgba(var(--pcgh-primary-rgb, 102, 192, 244), .12)
}

html[data-pcgh-theme-resolved=light] .pcgh-dailycard__blindbox-text b {
        color: #8a5a1f;
        color: color-mix(in srgb, var(--pcgh-primary, #66c0f4) 55%, #1f2937)
}

html[data-pcgh-theme-resolved=light] .pcgh-dailycard__blindbox-text small,
html[data-pcgh-theme-resolved=light] .pcgh-dailycard__blindbox-arrow {
        color: #b0854f;
        color: color-mix(in srgb, var(--pcgh-primary, #66c0f4) 45%, #64748b)
}

html[data-pcgh-theme-resolved=light] .pcgh-dailycard__day {
        background: #f5f7fa;
        color: #303133
}

html[data-pcgh-theme-resolved=light] .pcgh-dailycard__day.is-done {
        background: #67c23a;
        color: #fff
}

/* ---------- 移动端 ---------- */
@media (max-width:720px) {
        .pcgh-home-hero--photo {
                min-height: 320px
        }

        .pcgh-home-hero--photo .pcgh-photopick__viewport {
                min-height: calc(320px - 26px)
        }

        .pcgh-home-hero--photo .pcgh-photopick__card {
                flex: 0 0 50%
        }

        .pcgh-home-hero--photo .pcgh-photopick__title {
                font-size: 12px
        }

        .pcgh-dailycard__blindbox {
                margin-top: 10px;
                padding: 8px 10px
        }

        .pcgh-home-top .pcgh-home-signin--photo {
                min-height: 0;
                padding: 14px 14px 16px
        }

        .pcgh-dailycard__day {
                height: 28px;
                font-size: 12px
        }
}

/* 第五轮：隐藏写真轮播左右箭头（圆点已可翻页） */
.pcgh-home-hero--photo .pcgh-home-hero__nav {
        display: none !important
}