/* ===========================================================================
   cross-nudge.css — 「連假提醒 + 順路吃」
   ---------------------------------------------------------------------------
   設計原則（刻意壓抑，不靠裝飾取勝）：
     1. 只有一個強調色（墨藍 #1e293b）。色彩留給照片，版面本身近乎無色。
     2. 分隔一律用 1px 極淡線，不用色塊、不用圓角膠囊、不用彩色標籤。
     3. 數字用等寬（tabular-nums）並對齊基線，日期與倒數才會看起來整齊。
     4. 版位的任務是「兩秒讀完」：首頁版固定三層，不再往下長。

   兩種版型：
     .cn-band   首頁 —— 橫向兩欄，高度約 110px
     .cn-card   側欄 —— 直向堆疊（-inline 為手機兩欄壓縮）
   =========================================================================== */

.cn {
    --cn-ink: #1e293b;
    --cn-ink-soft: #475569;
    --cn-muted: #64748b;
    --cn-line: #e8eef7;
    --cn-line-warm: #efe9df;
    --cn-gold: #8a6a3f;
    --cn-surface-warm: #fcfaf7;

    font-variant-numeric: tabular-nums;
    color: var(--cn-ink);
}

.cn-kicker {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .18em;
    color: var(--cn-muted);
    white-space: nowrap;
}

.cn-mark {
    font-size: .56rem;
    letter-spacing: .14em;
    color: #8a744f;
    border: 1px solid #e6dccb;
    border-radius: 3px;
    padding: .08rem .26rem .06rem;
    line-height: 1;
}

.cn-dot { margin: 0 .34rem; color: #cbd5e1; }

/* ===========================================================================
   首頁條列版
   =========================================================================== */

.cn-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin: 1.3rem 0;
    background: #fff;
    border: 1px solid var(--cn-line);
    border-radius: 13px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    overflow: hidden;
}

.cn-band--single { grid-template-columns: minmax(0, 1fr); }

.cn-col {
    display: flex;
    flex-direction: column;
    gap: .42rem;
    min-width: 0;
    padding: .82rem 1.15rem .86rem;
}
.cn-col--food {
    background: var(--cn-surface-warm);
    border-left: 1px solid var(--cn-line);
}

/* 第一層：標籤（左）＋ 動作（右）。把動作提上來，省掉一整行高度 */
.cn-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    min-height: 16px;
}
.cn-head-act {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .7rem;
    font-weight: 500;
    color: var(--cn-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color .16s ease;
}
.cn-head-act i { font-size: .52rem; }
.cn-head-act:hover { color: var(--cn-ink); text-decoration: none; }

/* 第二層：主資訊。倒數與「N 天連假」同一行，日期退成細字 */
.cn-lead {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .38rem;
    margin: 0;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--cn-ink);
    overflow-wrap: anywhere;
}

.cn-when {
    font-size: 1.72rem;
    font-weight: 700;
    line-height: .92;
    letter-spacing: -.05em;
    font-variant-numeric: tabular-nums;
}
.cn-when-u {
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .08em;
    color: var(--cn-muted);
    margin-left: -.16rem;
}

/* 極細的垂直分隔：代替「·」，讓兩個事實讀起來是並列而不是串連 */
.cn-rule {
    align-self: center;
    width: 1px;
    height: .95em;
    background: #dbe3ee;
}

.cn-lead-date {
    font-size: .74rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--cn-muted);
    font-variant-numeric: tabular-nums;
}

.cn-lead--food {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.012em;
}

/* 第三層：補充（假日名／請假）＋ 細連結，一行收完 */
.cn-sub {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    margin: 0;
    font-size: .74rem;
    line-height: 1.5;
    color: var(--cn-muted);
}
.cn-sub-link {
    margin-left: .5rem;
    color: var(--cn-ink-soft);
    text-decoration: none;
    border-bottom: 1px solid var(--cn-line);
}
.cn-sub-link:hover { color: var(--cn-ink); border-bottom-color: var(--cn-ink-soft); text-decoration: none; }

/* 店家：兩張細長 chip 並排，只留縮圖、店名、評分 */
.cn-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
    margin-top: .1rem;
}

.cn-chip {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    padding: .18rem 0;
    text-decoration: none;
    color: inherit;
}
.cn-chip:hover { text-decoration: none; color: inherit; }

.cn-chip-thumb {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    overflow: hidden;
    background: #f3eee6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c9b596;
    font-size: .58rem;
}
.cn-chip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cn-chip-name {
    min-width: 0;
    flex: 1 1 auto;
    font-size: .75rem;
    font-weight: 500;
    color: var(--cn-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .16s ease;
}
.cn-chip:hover .cn-chip-name { color: #0f172a; }

.cn-chip-rate {
    flex: 0 0 auto;
    font-size: .68rem;
    font-weight: 600;
    color: var(--cn-gold);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 991.98px) {
    /* 平板以下兩欄各只剩 ~330px 時，店家 chip 會擠成「嘉義車頭…」，改單欄 */
    .cn-chips { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .cn-band {
        grid-template-columns: minmax(0, 1fr);
        margin: 1.15rem 0;
        border-radius: 12px;
    }
    .cn-col { padding: .72rem .9rem .76rem; }
    .cn-col--food {
        border-left: 0;
        border-top: 1px solid var(--cn-line);
    }
    .cn-when { font-size: 1.5rem; }
    .cn-lead { font-size: .86rem; }
    .cn-lead--food { font-size: .92rem; }
    .cn-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem .6rem; }
    .cn-chip-name { font-size: .72rem; }
    /* 手機把「攻略」這種次要出口收掉，主要動作仍在標籤列右側 */
    .cn-sub-link { display: none; }
}

/* ===========================================================================
   側欄版（列表頁／排行頁／店家頁）
   =========================================================================== */

.cn-card {
    display: grid;
    gap: .6rem;
    margin-bottom: 1rem;
}
.cn-card .cn-sec {
    padding: .95rem 1rem;
    background: #fff;
    border: 1px solid var(--cn-line);
    border-radius: 12px;
}
.cn-card .cn-sec--food { background: var(--cn-surface-warm); border-color: #f0eae0; }

.cn-card .cn-kicker { margin-bottom: .7rem; font-size: .62rem; }

.cn-cd {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    margin: 0 0 .4rem;
}
.cn-cd-n {
    font-size: 2.05rem;
    line-height: .9;
    font-weight: 700;
    letter-spacing: -.05em;
}
.cn-cd-u { font-size: .68rem; letter-spacing: .08em; color: var(--cn-muted); }
.cn-cd-today { font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; }

.cn-title {
    margin: 0;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.01em;
    color: var(--cn-ink);
    overflow-wrap: anywhere;
}
.cn-title small {
    display: block;
    margin-top: .26rem;
    font-size: .73rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--cn-muted);
}

.cn-note {
    margin: .42rem 0 0;
    font-size: .73rem;
    line-height: 1.7;
    color: var(--cn-muted);
    overflow-wrap: anywhere;
}

.cn-stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin: .8rem 0 0;
    padding: .5rem 0;
    border-top: 1px solid #f0f3f8;
    border-bottom: 1px solid #f0f3f8;
}
.cn-stat dt {
    margin: 0;
    font-size: .66rem;
    font-weight: 400;
    letter-spacing: .06em;
    color: var(--cn-muted);
}
.cn-stat dd {
    margin: 0;
    font-size: .77rem;
    font-weight: 600;
    color: var(--cn-ink);
}

.cn-pitch {
    margin: .75rem 0 .85rem;
    font-size: .79rem;
    font-weight: 500;
    line-height: 1.65;
    color: #334155;
    overflow-wrap: anywhere;
}

.cn-act {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
}

.cn-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .48rem .85rem;
    border-radius: 7px;
    background: var(--cn-ink);
    color: #fff;
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .03em;
    text-decoration: none;
    transition: background .18s ease;
}
.cn-btn:hover { background: #0f172a; color: #fff; text-decoration: none; }

.cn-tlink {
    display: inline-block;
    font-size: .74rem;
    color: var(--cn-ink-soft);
    text-decoration: none;
    padding-bottom: 1px;
    border-bottom: 1px solid var(--cn-line);
    transition: color .18s ease, border-color .18s ease;
}
.cn-tlink:hover { color: var(--cn-ink); border-bottom-color: var(--cn-ink-soft); text-decoration: none; }
.cn-tlink--dim { color: var(--cn-muted); }

/* 店家列：細線分隔，不做方框 */
.cn-list { list-style: none; margin: .7rem 0 0; padding: 0; }
.cn-list > li + li { border-top: 1px solid var(--cn-line-warm); }

.cn-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 10px;
    align-items: center;
    gap: .6rem;
    padding: .5rem 0;
    text-decoration: none;
    color: inherit;
}
.cn-item:hover { text-decoration: none; color: inherit; }
.cn-item:hover .cn-item-name { color: #0f172a; }

.cn-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    background: #f3eee6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c9b596;
    font-size: .72rem;
}
.cn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cn-item-body { min-width: 0; }

.cn-item-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.42;
    color: var(--cn-ink);
}

.cn-item-meta {
    display: block;
    margin-top: .2rem;
    font-size: .66rem;
    color: var(--cn-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cn-item-meta b { font-weight: 600; color: var(--cn-gold); }

.cn-item-go {
    font-size: .9rem;
    line-height: 1;
    text-align: right;
    color: #c8d1dd;
    transition: color .18s ease;
}
.cn-item:hover .cn-item-go { color: var(--cn-ink); }

.cn-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1.1rem;
    margin-top: .55rem;
    padding-top: .7rem;
    border-top: 1px solid var(--cn-line-warm);
}

/* 手機並排版：兩欄各約 160px，只留標題與一行店家 */
@media (max-width: 575.98px) {
    .cn-card--inline { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
    .cn-card--inline .cn-sec { min-width: 0; padding: .75rem .8rem; }
    .cn-card--inline .cn-kicker { margin-bottom: .5rem; font-size: .58rem; letter-spacing: .14em; }
    /* 大字倒數在 160px 寬的格子裡只會擠掉標題，讓位給「3 天連假」 */
    .cn-card--inline .cn-cd { display: none; }
    .cn-card--inline .cn-title { font-size: .8rem; }
    .cn-card--inline .cn-title small { font-size: .67rem; }
    .cn-card--inline .cn-note { font-size: .68rem; line-height: 1.6; margin-top: .3rem; }
    .cn-card--inline .cn-stat { margin-top: .55rem; padding: .4rem 0; }
    .cn-card--inline .cn-stat dt { font-size: .6rem; letter-spacing: .02em; }
    .cn-card--inline .cn-stat dd { font-size: .7rem; }
    .cn-card--inline .cn-pitch { font-size: .72rem; margin: .6rem 0 .7rem; }
    .cn-card--inline .cn-btn { padding: .44rem .7rem; font-size: .7rem; width: 100%; justify-content: center; }
    .cn-card--inline .cn-act { gap: .5rem; }
    .cn-card--inline .cn-thumb { width: 32px; height: 32px; border-radius: 7px; }
    .cn-card--inline .cn-item { grid-template-columns: 32px minmax(0, 1fr); gap: .45rem; padding: .42rem 0; }
    .cn-card--inline .cn-item-go { display: none; }
    .cn-card--inline .cn-item-meta .cn-loc,
    .cn-card--inline .cn-item-meta .cn-loc-dot { display: none; }
    .cn-card--inline .cn-day-extra { display: none; }
    .cn-card--inline .cn-foot { gap: .3rem .8rem; padding-top: .55rem; }
}

@media (max-width: 359.98px) {
    .cn-card--inline .cn-thumb { display: none; }
    .cn-card--inline .cn-item { grid-template-columns: minmax(0, 1fr); }
    .cn-card--inline .cn-item-name { font-size: .74rem; }
    .cn-card--inline .cn-item-meta { font-size: .62rem; }
    .cn-card--inline .cn-btn { font-size: .68rem; padding: .4rem .5rem; }
    .cn-chips { grid-template-columns: minmax(0, 1fr); }
}