/**
 * NARITA TIME - Shop CSS(Phase 4 v1.2.0)
 *
 * 店舗関連のすべてのスタイル:
 *  - Shop info card(Story 末尾のお店情報カード)
 *  - Shop archive(全店舗一覧 + マップ)
 *  - Shop single(店舗個別ページ)
 *  - Map(Leaflet コンテナ + ポップアップ)
 *  - Area taxonomy page
 *  - Shop card(コンパクトリスト用)
 *
 * @package naritatime
 */

/* ============================================================
   Map コンテナ(Leaflet)
   ============================================================ */

.ntm-map-container {
    width: 100%;
    height: 480px;
    background: var(--ntm-paper);
    border: 1px solid var(--ntm-hairline);
    z-index: 1;
    position: relative;
}
.ntm-map-container.is-tall { height: 640px; }
.ntm-map-container.is-short { height: 320px; }

@media (max-width: 768px) {
    .ntm-map-container { height: 360px; }
    .ntm-map-container.is-tall { height: 480px; }
}

/* Leaflet ポップアップカスタマイズ */
.leaflet-popup-content-wrapper {
    border-radius: 2px !important;
    box-shadow: var(--ntm-shadow-lg) !important;
    padding: 0 !important;
}
.leaflet-popup-content {
    margin: 0 !important;
    line-height: 1.5 !important;
    font-family: var(--ntm-font-sans) !important;
}
.ntm-map-popup {
    width: 240px;
}
.ntm-map-popup-image {
    display: block;
    line-height: 0;
}
.ntm-map-popup-image img {
    display: block;
    width: 100%;
    height: 130px;
    object-fit: cover;
}
.ntm-map-popup-body {
    padding: 10px 14px 12px;
}
.ntm-map-popup-meta {
    font-family: var(--ntm-font-en-italic);
    font-style: italic;
    font-size: 11px;
    color: var(--ntm-terracotta);
    letter-spacing: var(--ntm-tracking-wider);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.ntm-map-popup-title {
    display: block;
    font-family: var(--ntm-font-serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--ntm-indigo);
    text-decoration: none;
    line-height: 1.35;
}
.ntm-map-popup-title:hover { color: var(--ntm-terracotta); }

/* マーカー */
.ntm-map-marker { background: transparent !important; border: none !important; }

/* マップ操作ヒント */
.ntm-map-hint {
    position: relative;
    margin-top: var(--ntm-space-2);
    font-family: var(--ntm-font-sans);
    font-size: 11px;
    color: var(--ntm-slate);
    text-align: right;
    letter-spacing: var(--ntm-tracking-wide);
}

/* ============================================================
   Shop Info Card(Story 末尾)
   ============================================================ */

.ntm-shop-info-card {
    margin-top: var(--ntm-space-10);
    padding: 0;
    background: var(--ntm-paper);
    border-left: 3px solid var(--ntm-terracotta);
    overflow: hidden;
}
.ntm-shop-info-card + .ntm-shop-info-card {
    margin-top: var(--ntm-space-5);
}

.ntm-shop-info-card-header {
    padding: var(--ntm-space-5) var(--ntm-space-6) var(--ntm-space-4);
    border-bottom: 1px solid var(--ntm-hairline);
    background: var(--ntm-snow);
}
.ntm-shop-info-card-label {
    display: inline-block;
    font-family: var(--ntm-font-en-italic);
    font-style: italic;
    font-size: var(--ntm-text-xs);
    color: var(--ntm-terracotta);
    letter-spacing: var(--ntm-tracking-widest);
    text-transform: uppercase;
    margin-bottom: var(--ntm-space-2);
}
.ntm-shop-info-card-name {
    font-family: var(--ntm-font-serif);
    font-size: var(--ntm-text-h4);
    font-weight: 700;
    color: var(--ntm-indigo);
    margin: 0;
    line-height: 1.3;
}
.ntm-shop-info-card-name a {
    color: var(--ntm-indigo);
    text-decoration: none;
}
.ntm-shop-info-card-name a:hover { color: var(--ntm-terracotta); }

.ntm-shop-info-card-meta-line {
    display: flex;
    align-items: center;
    gap: var(--ntm-space-3);
    margin-top: var(--ntm-space-3);
    font-family: var(--ntm-font-sans);
    font-size: var(--ntm-text-sm);
    color: var(--ntm-slate);
    flex-wrap: wrap;
}
.ntm-shop-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    border-radius: 2px;
    letter-spacing: var(--ntm-tracking-wide);
}
.ntm-shop-badge--open { background: #5B8A5B; }
.ntm-shop-badge--closed { background: var(--ntm-terracotta); }
.ntm-shop-badge--neutral { background: var(--ntm-slate-soft); }

.ntm-shop-info-card-body {
    padding: var(--ntm-space-5) var(--ntm-space-6);
}
.ntm-shop-info-row {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: var(--ntm-space-3);
    padding: var(--ntm-space-2) 0;
    border-bottom: 1px solid var(--ntm-hairline-soft);
    font-size: var(--ntm-text-sm);
}
.ntm-shop-info-row:last-child { border-bottom: none; }
.ntm-shop-info-row-label {
    font-family: var(--ntm-font-sans);
    color: var(--ntm-slate);
    font-weight: 500;
    letter-spacing: var(--ntm-tracking-wide);
}
.ntm-shop-info-row-value {
    color: var(--ntm-ink);
    line-height: var(--ntm-leading-snug);
}
.ntm-shop-info-row-value a {
    color: var(--ntm-indigo);
    text-decoration: underline;
    text-decoration-color: var(--ntm-terracotta);
    text-underline-offset: 3px;
}
.ntm-shop-info-row-value a:hover { color: var(--ntm-terracotta); }

.ntm-shop-hours-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 12px;
}
.ntm-shop-hours-table tr { border-bottom: 1px dashed var(--ntm-hairline-soft); }
.ntm-shop-hours-table tr:last-child { border-bottom: none; }
.ntm-shop-hours-table td {
    padding: 3px 4px;
    color: var(--ntm-ink);
}
.ntm-shop-hours-table td:first-child {
    width: 32px;
    color: var(--ntm-slate);
    font-weight: 500;
}
.ntm-shop-hours-table tr.is-today td {
    background: var(--ntm-paper-deep);
    color: var(--ntm-indigo);
    font-weight: 600;
}

.ntm-shop-info-card-actions {
    display: flex;
    gap: var(--ntm-space-3);
    padding: var(--ntm-space-4) var(--ntm-space-6);
    border-top: 1px solid var(--ntm-hairline);
    background: var(--ntm-snow);
    flex-wrap: wrap;
}
.ntm-shop-action {
    display: inline-flex;
    align-items: center;
    gap: var(--ntm-space-2);
    padding: var(--ntm-space-3) var(--ntm-space-5);
    font-family: var(--ntm-font-sans);
    font-size: var(--ntm-text-sm);
    color: var(--ntm-snow);
    background: var(--ntm-terracotta);
    text-decoration: none;
    letter-spacing: var(--ntm-tracking-wide);
    transition: all var(--ntm-transition-fast);
}
.ntm-shop-action:hover { background: var(--ntm-terracotta-deep); color: var(--ntm-snow); }
.ntm-shop-action--outline {
    color: var(--ntm-indigo);
    background: transparent;
    border: 1px solid var(--ntm-indigo);
}
.ntm-shop-action--outline:hover {
    color: var(--ntm-snow);
    background: var(--ntm-indigo);
}

/* ============================================================
   Shop Single Page
   ============================================================ */

.ntm-shop-single { background: var(--ntm-snow); }

.ntm-shop-hero {
    background: var(--ntm-paper);
    padding: var(--ntm-space-12) 0 var(--ntm-space-10);
    border-bottom: 1px solid var(--ntm-hairline);
}
.ntm-shop-hero-inner {
    max-width: var(--ntm-content-max);
    margin: 0 auto;
    padding: 0 var(--ntm-padding-pc);
}
.ntm-shop-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--ntm-space-8);
    align-items: start;
}
.ntm-shop-hero-image {
    aspect-ratio: 4 / 3;
    background: var(--ntm-paper-deep);
    overflow: hidden;
}
.ntm-shop-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ntm-shop-hero-meta-row {
    display: flex;
    align-items: center;
    gap: var(--ntm-space-3);
    margin-bottom: var(--ntm-space-3);
    font-family: var(--ntm-font-en-italic);
    font-style: italic;
    font-size: var(--ntm-text-sm);
    color: var(--ntm-terracotta);
    letter-spacing: var(--ntm-tracking-widest);
    text-transform: uppercase;
}
.ntm-shop-hero-title {
    font-family: var(--ntm-font-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: var(--ntm-indigo);
    line-height: 1.2;
    margin: 0 0 var(--ntm-space-3);
    letter-spacing: var(--ntm-tracking-tight);
}
.ntm-shop-hero-rule {
    width: 40px; height: 2px;
    background: var(--ntm-terracotta);
    border: none;
    margin: 0 0 var(--ntm-space-5);
}
.ntm-shop-hero-excerpt {
    font-family: var(--ntm-font-serif);
    font-size: var(--ntm-text-lg);
    line-height: var(--ntm-leading-relaxed);
    color: var(--ntm-ink);
    margin: 0 0 var(--ntm-space-5);
}
.ntm-shop-hero-status {
    display: flex;
    align-items: center;
    gap: var(--ntm-space-3);
    flex-wrap: wrap;
    font-size: var(--ntm-text-sm);
    color: var(--ntm-slate);
}

@media (max-width: 1024px) {
    .ntm-shop-hero-grid { grid-template-columns: 1fr; }
}

.ntm-shop-body {
    background: var(--ntm-snow);
    padding: var(--ntm-space-12) 0;
}
.ntm-shop-body-grid {
    max-width: var(--ntm-content-max);
    margin: 0 auto;
    padding: 0 var(--ntm-padding-pc);
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--ntm-space-10);
    align-items: start;
}
.ntm-shop-content {
    font-family: var(--ntm-font-sans);
    font-size: var(--ntm-text-base);
    line-height: var(--ntm-leading-relaxed);
    color: var(--ntm-ink);
}
.ntm-shop-content p { margin: 0 0 1.6em; }
.ntm-shop-content h2,
.ntm-shop-content h3 {
    font-family: var(--ntm-font-serif);
    color: var(--ntm-indigo);
    margin: var(--ntm-space-8) 0 var(--ntm-space-4);
}

.ntm-shop-sidebar {
    position: sticky;
    top: 100px;
}
.ntm-shop-side-card {
    background: var(--ntm-paper);
    padding: var(--ntm-space-6);
    border-left: 3px solid var(--ntm-terracotta);
    margin-bottom: var(--ntm-space-5);
}
.ntm-shop-side-card-title {
    font-family: var(--ntm-font-serif);
    font-size: var(--ntm-text-h4);
    font-weight: 700;
    color: var(--ntm-indigo);
    margin: 0 0 var(--ntm-space-4);
}

@media (max-width: 1024px) {
    .ntm-shop-body-grid { grid-template-columns: 1fr; }
    .ntm-shop-sidebar { position: static; }
}

/* この店の関連 Story */
.ntm-shop-stories {
    background: var(--ntm-paper);
    padding: var(--ntm-space-12) 0;
}

/* ============================================================
   Shop Archive(全店舗一覧)
   ============================================================ */

.ntm-shops-archive { background: var(--ntm-snow); padding-bottom: var(--ntm-space-12); }

.ntm-shops-archive-header {
    background: var(--ntm-indigo);
    color: var(--ntm-snow);
    padding: var(--ntm-space-12) 0 var(--ntm-space-10);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.ntm-shops-archive-header::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(194, 83, 58, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(194, 83, 58, 0.08) 0%, transparent 40%);
    pointer-events: none;
}
.ntm-shops-archive-header-inner {
    position: relative;
    max-width: var(--ntm-content-max);
    margin: 0 auto;
    padding: 0 var(--ntm-padding-pc);
}
.ntm-shops-label {
    font-family: var(--ntm-font-en-italic);
    font-style: italic;
    font-size: var(--ntm-text-sm);
    color: var(--ntm-terracotta-light);
    letter-spacing: var(--ntm-tracking-widest);
    text-transform: uppercase;
    margin-bottom: var(--ntm-space-3);
}
.ntm-shops-title {
    font-family: var(--ntm-font-serif);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    color: var(--ntm-snow);
    margin: 0 0 var(--ntm-space-3);
    letter-spacing: var(--ntm-tracking-tight);
}
.ntm-shops-rule {
    width: 60px; height: 2px;
    background: var(--ntm-terracotta);
    border: none;
    margin: 0 auto var(--ntm-space-5);
}
/* v1.4.0: 親クラス前置で body.ntm-theme p より specificity を上げる */
.ntm-shops-archive-header .ntm-shops-description {
    font-family: var(--ntm-font-serif);
    font-size: var(--ntm-text-base);
    color: rgba(255,255,255,0.9);
    max-width: 600px;
    margin: 0 auto;
    line-height: var(--ntm-leading-relaxed);
}

.ntm-shops-map-section {
    background: var(--ntm-paper);
    padding: var(--ntm-space-8) 0;
}
.ntm-shops-map-inner {
    max-width: var(--ntm-content-wide);
    margin: 0 auto;
    padding: 0 var(--ntm-padding-pc);
}

.ntm-shops-list-section {
    padding: var(--ntm-space-10) 0;
}
.ntm-shops-list-inner {
    max-width: var(--ntm-content-max);
    margin: 0 auto;
    padding: 0 var(--ntm-padding-pc);
}
.ntm-shops-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ntm-space-7) var(--ntm-space-6);
}

@media (max-width: 1024px) {
    .ntm-shops-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .ntm-shops-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Shop Card(コンパクト)
   ============================================================ */

.ntm-shop-card { background: transparent; }
.ntm-shop-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.ntm-shop-card-image {
    aspect-ratio: 4 / 3;
    background: var(--ntm-paper);
    overflow: hidden;
    margin-bottom: var(--ntm-space-3);
}
.ntm-shop-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ntm-ease-out);
}
.ntm-shop-card-link:hover .ntm-shop-card-image img { transform: scale(1.05); }

.ntm-shop-card-meta {
    display: flex;
    align-items: center;
    gap: var(--ntm-space-2);
    margin-bottom: var(--ntm-space-2);
    font-family: var(--ntm-font-sans);
    font-size: var(--ntm-text-xs);
    color: var(--ntm-slate);
    letter-spacing: var(--ntm-tracking-wider);
}
.ntm-shop-card-area {
    color: var(--ntm-terracotta);
    font-weight: 500;
}
.ntm-shop-card-business::before {
    content: "/";
    margin-right: 4px;
    color: var(--ntm-hairline);
}
.ntm-shop-card-title {
    font-family: var(--ntm-font-serif);
    font-size: var(--ntm-text-h4);
    font-weight: 700;
    color: var(--ntm-indigo);
    line-height: 1.3;
    margin: 0 0 var(--ntm-space-2);
    transition: color var(--ntm-transition-fast);
}
.ntm-shop-card-link:hover .ntm-shop-card-title { color: var(--ntm-terracotta); }
.ntm-shop-card-address {
    font-family: var(--ntm-font-sans);
    font-size: 12px;
    color: var(--ntm-slate);
    line-height: 1.5;
    margin: 0;
}

/* ============================================================
   Area Taxonomy Page(エリアページ)
   ============================================================ */

.ntm-area-page { background: var(--ntm-snow); }

.ntm-area-hero {
    background: var(--ntm-indigo);
    color: var(--ntm-snow);
    padding: var(--ntm-space-12) 0 var(--ntm-space-10);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.ntm-area-hero::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(194,83,58,0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(214,185,143,0.08) 0%, transparent 50%);
    pointer-events: none;
}
.ntm-area-hero-inner {
    position: relative;
    max-width: var(--ntm-content-max);
    margin: 0 auto;
    padding: 0 var(--ntm-padding-pc);
}
.ntm-area-label {
    font-family: var(--ntm-font-en-italic);
    font-style: italic;
    font-size: var(--ntm-text-sm);
    color: var(--ntm-terracotta-light);
    letter-spacing: var(--ntm-tracking-widest);
    text-transform: uppercase;
    margin-bottom: var(--ntm-space-3);
}
.ntm-area-title {
    font-family: var(--ntm-font-serif);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    color: var(--ntm-snow);
    margin: 0 0 var(--ntm-space-3);
    letter-spacing: var(--ntm-tracking-tight);
}
.ntm-area-rule {
    width: 60px; height: 2px;
    background: var(--ntm-terracotta);
    border: none;
    margin: 0 auto var(--ntm-space-5);
}
/* v1.4.0: 親クラス前置 */
.ntm-area-hero .ntm-area-description {
    font-family: var(--ntm-font-serif);
    font-size: var(--ntm-text-base);
    color: rgba(255,255,255,0.9);
    max-width: 640px;
    margin: 0 auto;
    line-height: var(--ntm-leading-relaxed);
}

.ntm-area-section {
    padding: var(--ntm-space-10) 0;
}
.ntm-area-section + .ntm-area-section { padding-top: 0; }
.ntm-area-section--map { background: var(--ntm-paper); padding: var(--ntm-space-8) 0; }
.ntm-area-section-inner {
    max-width: var(--ntm-content-max);
    margin: 0 auto;
    padding: 0 var(--ntm-padding-pc);
}

/* ============================================================
   関連 Story セクション(店舗ページの末尾)
   ============================================================ */

.ntm-shop-related-stories {
    background: var(--ntm-paper);
    padding: var(--ntm-space-12) 0;
}
.ntm-shop-related-stories-inner {
    max-width: var(--ntm-content-max);
    margin: 0 auto;
    padding: 0 var(--ntm-padding-pc);
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
    .ntm-shop-info-card-actions { flex-direction: column; }
    .ntm-shop-action { width: 100%; justify-content: center; }
    .ntm-shop-info-row { grid-template-columns: 80px 1fr; }
}