/* ============================================================
   記事一覧 /stories/ ・/stories/{cat}/(str- 名前空間・v1.24.0 #7)
   図鑑(zukan.css)の視覚言語を継承(タイトル/タブ/ページャ/空状態は zkn- を再利用)。
   本ファイルは記事カードと「この記事に登場する店」の追加分のみ。
   @since 1.24.0
   ============================================================ */

/* ============================================================
   1. 記事カードグリッド
   ============================================================ */
.str-grid-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px 140px;
}
.str-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 48px;
    row-gap: 72px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.str-item { min-width: 0; }
.str-card { display: block; text-decoration: none; color: inherit; }
.str-card-thumb {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--ntm-paper-deep);
}
.str-card-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 1.2s var(--zkn-ease, ease);
}
.str-card:hover .str-card-thumb img { transform: scale(1.05); }
.str-card-ph {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, var(--ntm-paper-deep), var(--ntm-sand-soft));
}
.str-card-ph span {
    font-family: var(--ntm-font-en-italic); font-style: italic;
    font-size: .8rem; letter-spacing: .22em;
    color: var(--ntm-slate-soft);
}
.str-card-cat {
    display: block;
    margin-top: 20px;
    font-family: var(--ntm-font-serif);
    font-size: .78rem;
    letter-spacing: .18em;
    color: var(--ntm-terracotta);
}
.str-card .str-card-title {
    margin: 8px 0 0;
    font-family: var(--ntm-font-serif);
    font-weight: 500;
    font-size: 1.12rem;
    line-height: 1.9;
    letter-spacing: .08em;
    color: var(--ntm-indigo);
}
.str-card:hover .str-card-title { color: var(--ntm-terracotta); }
.str-card-foot {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.str-card-date {
    font-family: var(--ntm-font-en);
    font-size: .72rem;
    letter-spacing: .16em;
    color: var(--ntm-slate-soft);
}
.str-card:hover .zkn-arw {
    background: var(--ntm-indigo);
    border-color: var(--ntm-indigo);
    color: var(--ntm-paper);
}
.str-card:hover .zkn-arw svg { transform: translateX(5px); }

/* ============================================================
   2. この記事に登場する店(single-post / single-nts_story 本文末)
   ============================================================ */
.str-shops {
    max-width: 1080px;
    margin: 0 auto;
    padding: 72px 0 24px;
}
.str-shops-en {
    display: block;
    font-family: var(--ntm-font-en-italic);
    font-style: italic;
    font-size: .95rem;
    letter-spacing: .13em;
    color: var(--ntm-terracotta);
    margin-bottom: 12px;
}
.str-shops .str-shops-t {
    font-family: var(--ntm-font-serif);
    font-weight: 500;
    font-size: 1.35rem;
    letter-spacing: .14em;
    color: var(--ntm-indigo);
    margin: 0 0 32px;
}
.str-shops-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.str-shops-grid .zkn-item { margin-top: 0 !important; }
.str-shops-grid .zkn-card .zkn-card-title { font-size: 1rem; line-height: 1.9; }
.str-shops-name {
    display: block;
    margin-top: 12px;
    font-family: var(--ntm-font-sans);
    font-size: .78rem;
    letter-spacing: .1em;
    color: var(--ntm-slate);
}
.str-shops-name .area {
    display: block;
    font-size: .68rem;
    letter-spacing: .14em;
    color: var(--ntm-slate-soft);
}

/* ============================================================
   3. レスポンシブ
   ============================================================ */
@media (max-width: 900px) {
    .str-grid-wrap { padding: 0 20px 96px; }
    .str-grid { grid-template-columns: 1fr 1fr; column-gap: 18px; row-gap: 48px; }
    .str-card .str-card-title { font-size: .98rem; letter-spacing: .05em; }
    .str-shops { padding: 56px 0 16px; }
    .str-shops-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .str-shops-grid .zkn-card .zkn-card-title { font-size: .85rem; }
}
@media (max-width: 640px) {
    .str-grid { grid-template-columns: 1fr; }
    .str-shops-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   4. prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .str-card-thumb img { transition: none; }
}