@charset "UTF-8";
/* ==========================================================
   ニュースカード 共通CSS  /assets/news-card.css
   ----------------------------------------------------------
   県トップ / 県ニュース一覧 / お店トップ で共通利用
   .nwc-list      … PC2列 / SP1列
   .nwc-list--sec … セクション用（SPは3件まで）
   .nwc           … カード1枚（全体が詳細へのリンク）
   1rem = 10px
   ========================================================== */

.nwc-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.nwc {
    display: flex;
    flex-direction: column;
    padding: 1.4rem;
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    color: var(--ap-text);
    background: var(--ap-panel-v2);
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.nwc:hover {
    border-color: var(--ap-gold);
}

/* ----------------------------------------------------------
   ヘッダー（県版）
   サムネ | 店名  投稿時刻
          | エリア
   ---------------------------------------------------------- */
.nwc__head {
    display: grid;
    grid-template-columns: 3.6rem minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.8rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--ap-line);
}

.nwc__avatar {
    grid-column: 1;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    overflow: hidden;
    background: #17121a;
    border: 1px solid var(--ap-gold-line);
}

.nwc__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nwc__initial {
    color: var(--ap-gold);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
}

.nwc__shop {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    color: var(--text-primary);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nwc__area {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    color: var(--shop-text-dim, #a8a59f);
    font-size: 1.1rem;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nwc__time {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    color: var(--shop-text-dim, #a8a59f);
    font-size: 1.1rem;
    line-height: 1.4;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ヘッダー（お店ページ版）投稿時刻だけ */
.nwc__head--solo {
    display: flex;
    align-items: center;
}

.nwc__head--solo .nwc__time {
    text-align: left;
}

/* ----------------------------------------------------------
   本文（画像があれば左にサムネ）
   ---------------------------------------------------------- */
.nwc__body {
    display: flex;
    gap: 1rem;
    min-width: 0;
}

.nwc__thumb {
    flex: 0 0 8rem;
    display: block;
    width: 8rem;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    background: #17121a;
    border: 1px solid var(--ap-line-soft);
}

.nwc__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nwc__main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.nwc__text {
    display: -webkit-box;
    color: var(--ap-dim);
    font-size: 1.2rem;
    line-height: 1.7;
    word-break: break-word;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nwc__more {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.2rem;
    margin-top: 0.2rem;
    color: var(--ap-gold-light);
    font-size: 1.1rem;
    line-height: 1.4;
}

.nwc__more i {
    font-size: 1rem;
    line-height: 1;
}
/* ----------------------------------------------------------
   カテゴリバッジ
   ----------------------------------------------------------
   本文の真上に置く。ヘッダー（店名・投稿時刻）の行に混ぜると
   店名が押し出されて省略記号だらけになるため。

   色は modifier で --nwc-cat / --nwc-cat-bg を差し替えるだけ。
   管理画面（post.css）と同じスラッグだが、あちらは白地、
   こちらは黒地なので明度を上げた値を当てている。
   ---------------------------------------------------------- */
.nwc__cat {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: var(--nwc-cat-bg);
    color: var(--nwc-cat);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.nwc__cat i {
    font-size: 1.1rem;
    line-height: 1;
}

/* ---- 色 ---- */
.nwc__cat--blue {
    --nwc-cat: #8fbdec;
    --nwc-cat-bg: rgba(54, 114, 176, 0.22);
}

.nwc__cat--green {
    --nwc-cat: #74d7a1;
    --nwc-cat-bg: rgba(46, 158, 107, 0.20);
}

.nwc__cat--red {
    --nwc-cat: #f29a96;
    --nwc-cat-bg: rgba(207, 70, 64, 0.24);
}

.nwc__cat--gold {
    --nwc-cat: var(--ap-gold-light);
    --nwc-cat-bg: rgba(201, 168, 108, 0.18);
}

.nwc__cat--gray {
    --nwc-cat: var(--ap-muted);
    --nwc-cat-bg: rgba(255, 255, 255, 0.07);
}

/* ----------------------------------------------------------
   SP
   ---------------------------------------------------------- */
@media (max-width: 767.98px) {
    .nwc-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.6rem;
    }
    .nwc__cat {
        margin-bottom: 0.4rem;
        padding: 0.1rem 0.7rem;
        font-size: 1rem;
    }
    /* セクション（県トップ / お店トップ）は3件まで */
    .nwc-list--sec > .nwc:nth-child(n+4) {
        display: none;
    }

    .nwc {
        padding: 1rem 1.2rem;
    }

    .nwc__head {
        grid-template-columns: 3.2rem minmax(0, 1fr) auto;
        padding-bottom: 0.8rem;
        margin-bottom: 0.8rem;
    }

    .nwc__avatar {
        width: 3.2rem;
        height: 3.2rem;
    }

    .nwc__shop {
        font-size: 1.2rem;
    }

    .nwc__time {
        font-size: 1rem;
    }

    .nwc__thumb {
        flex: 0 0 7rem;
        width: 7rem;
    }

    .nwc__text {
        font-size: 1.2rem;
    }
}