/* ============================================================
   DAILY PICKS — 沿用主站 styles.css 的设计变量与字体
   版式：feed 式单列，每条卡片横向铺开所有图片，从上到下排列
   ============================================================ */

/* ---------- 导航已全站统一（见 styles.css .navbar），本页不再单独覆盖 ---------- */

/* ---------- 灯箱增强：左右切换 + 滚轮缩放 + 拖动 ---------- */
#lightboxImg { touch-action: none; will-change: transform; transition: opacity 0.18s ease; }
#lightboxImg.lb-loading { opacity: 0; }
/* 移动端修复：去掉点按高亮蓝色色块、禁用长按选择 */
#lightbox,
#lightbox * { -webkit-tap-highlight-color: transparent; }
#lightbox {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
}
.daily-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
/* hover 仅对支持悬停的设备生效，避免手机点按后箭头卡在金色状态 */
@media (hover: hover) {
    .daily-lb-nav:hover { background: var(--gold, #d4af37); border-color: transparent; color: #111; }
}
.daily-lb-prev { left: 28px; }
.daily-lb-next { right: 28px; }
.daily-lb-counter {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .85);
    font-size: .85rem;
    letter-spacing: .15em;
    z-index: 2;
}
.daily-lb-hint {
    position: absolute;
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .4);
    font-size: .75rem;
    letter-spacing: .08em;
    z-index: 2;
    pointer-events: none;
}
@media (max-width: 768px) {
    .daily-lb-nav { width: 42px; height: 42px; font-size: 1.1rem; }
    .daily-lb-prev { left: 10px; }
    .daily-lb-next { right: 10px; }
    .daily-lb-hint { display: none; }
}

/* ---------- Hero ---------- */
.daily-hero {
    position: relative;
    min-height: 88vh;
    padding: 12rem 2rem 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    overflow: hidden;
    background: #0a0a0a;
}

.daily-hero-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(10, 10, 10, 0.5) 0%, rgba(10, 10, 10, 0.55) 55%, #0a0a0a 100%),
        url('/images/hero/hero-main.jpg') center 30% / cover no-repeat;
}

.daily-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%);
}

.daily-hero-content {
    position: relative;
    z-index: 2;
    max-width: 860px;
}

.daily-breadcrumb {
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.5rem;
}

.daily-breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: var(--transition);
}

.daily-breadcrumb a:hover { color: var(--gold); }
.daily-breadcrumb span { margin: 0 0.5rem; }

.daily-hero-tag {
    font-size: 0.75rem;
    letter-spacing: 3px;
    color: var(--gold);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.daily-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.15;
    margin-bottom: 1.5rem;
}

.daily-hero p {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    max-width: 680px;
    margin: 0 auto 2rem;
}

.daily-hero p strong { color: var(--gold); font-weight: 600; }

.daily-hero-meta {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
}

.daily-hero-meta span { display: inline-flex; align-items: center; gap: 0.5rem; }
.daily-hero-meta i { color: var(--gold); }

/* ---------- Section header ---------- */
.daily-section {
    padding: 6rem 2rem;
    background: var(--bg-primary);
}

.daily-section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 4rem;
}

.daily-section-header h2 {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.daily-section-header p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
}

.daily-section-header p strong { color: var(--text-primary); font-weight: 600; }

/* ---------- Loading & empty states ---------- */
.daily-loading, .daily-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

/* ---------- Grid（单列 feed） ---------- */
.daily-grid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* ---------- Day group separator ---------- */
.daily-day-group {
    margin: 1rem 0 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.daily-day-group:first-child { margin-top: 0; }

.daily-day-date {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.daily-day-count {
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: var(--text-secondary);
    text-transform: uppercase;
}

/* ---------- Card（单条全宽，上图片下信息） ---------- */
.daily-card {
    position: relative;
    background: var(--bg-card);
    overflow: hidden;
    scroll-margin-top: 140px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.4s ease;
}

.daily-card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08); }

.daily-card.is-target { animation: dailyFlash 2.5s ease-out; }

@keyframes dailyFlash {
    0%   { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
    20%  { box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.7); }
    100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

/* ---------- 图片区：所有图横向并排 ---------- */
.daily-images {
    display: grid;
    /* 列数由 JS inline style 设定：grid-template-columns: repeat(N, 1fr) */
    grid-template-columns: 1fr;
    gap: 2px;
    width: 100%;
    background: #f0f0f0;
}

.daily-images img,
.daily-images video {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.6s ease, opacity 0.4s ease;
    background: #e8e8e8;
}

.daily-images img { cursor: zoom-in; }

.daily-card:hover .daily-images img,
.daily-card:hover .daily-images video { transform: scale(1.02); }

/* 单图时限制最大高度 */
.daily-card.has-single-img .daily-images img,
.daily-card.has-single-img .daily-images video {
    aspect-ratio: 16 / 9;
    max-height: 70vh;
}

/* ---------- 卡片信息区 ---------- */
.daily-body {
    padding: 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.daily-ref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.daily-ref {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--text-primary);
    background: #f0e9d6;
    border: 1px solid var(--gold);
    padding: 0.3rem 0.7rem;
    text-transform: uppercase;
}

.daily-date {
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.daily-cat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    letter-spacing: 2px;
    color: var(--gold);
    text-transform: uppercase;
    font-weight: 600;
    align-self: flex-start;
}

.daily-cat::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--gold);
    display: inline-block;
}

.daily-desc {
    font-size: 1.05rem;
    color: var(--text-primary);
    line-height: 1.65;
    margin: 0;
    font-weight: 400;
}

.daily-desc-cn {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    font-style: italic;
}

/* ---------- CTA 行 ---------- */
.daily-cta {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.daily-cta-hint {
    font-size: 0.72rem;
    letter-spacing: 1px;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.daily-cta-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.daily-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #25D366;
    color: #ffffff;
    text-decoration: none;
    padding: 0.75rem 1.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: var(--transition);
}

.daily-wa-btn:hover {
    background: #1da851;
    transform: translateY(-1px);
}

.daily-wa-btn i { font-size: 1rem; }

.daily-copy-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 42px;
    height: 42px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
}

.daily-copy-btn:hover { border-color: var(--gold); color: var(--gold); }
.daily-copy-btn.copied { color: var(--gold); border-color: var(--gold); }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .daily-hero {
        padding: 9rem 1.5rem 4rem;
        min-height: 50vh;
    }
    .daily-hero h1 { font-size: 2rem; }
    .daily-hero-meta { gap: 1rem; font-size: 0.7rem; }
    .daily-section { padding: 4rem 6px; }
    .daily-grid { gap: 2rem; }
    .daily-body { padding: 1.25rem; }
    .daily-desc { font-size: 0.98rem; }
    .daily-cta { flex-direction: column; align-items: stretch; }
    .daily-cta-buttons { justify-content: space-between; }
    .daily-wa-btn { flex: 1; justify-content: center; }

    /* 移动端九宫格（仿朋友圈）：固定 3 列，按图片数量自动分排
       1-3 张=一排，4-6 张=两排，7-9 张=三排，10+ 自动加排 */
    .daily-images { grid-template-columns: repeat(3, 1fr) !important; gap: 3px; }
    .daily-images img,
    .daily-images video { aspect-ratio: 1 / 1 !important; width: 100% !important; height: auto !important; max-height: none !important; object-fit: cover; }
}