/* Prefecture guide system: Top Attractions (.pref-grid) layout */
.pref-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--jth-space-2);
  margin-bottom: var(--jth-space-3);
}

.pref-grid .pref-card {
  display: block;
  border: 1px solid var(--jth-border);
  border-radius: var(--jth-radius);
  padding: var(--jth-space-1);
}

.pref-grid .pref-card h3 {
  margin: 0;
  padding: var(--jth-space-1) 0 0;
}

@media (min-width: 768px) {
  .pref-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .pref-grid {
    grid-template-columns: 1fr;
  }
}

/* Prefecture guide system: Top Attractions (.pref-grid) card images.
   Intentionally hidden site-wide -- consolidates 8 competing client-side
   scripts that used to fight over showing/hiding these (some swapped in
   Wikipedia-sourced images, a later one always won by hiding them). Kept
   hidden per owner decision pending the Priority 5 image-license audit. */
.pref-grid .pref-card img,
.pref-grid .pref-card picture,
.pref-grid .pref-card figure {
  display: none;
}

/* Prefecture guide system: exception for license-verified images.
   Images swapped in by jth_prefecture_verified_images() are shown.
   All 47 prefectures now carry verified image data (empty-src cards
   would stay hidden if an alt-key mismatch ever breaks the swap). */
.pref-grid .pref-card img.jth-verified-image {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: var(--jth-radius);
  margin-bottom: var(--jth-space-1);
}

/* Prefecture guide system: hide the "no posts found" notice on the hotels/transport hub category
   pages now that they carry dedicated guide content instead of a post
   listing. WordPress core adds the category-{slug} body class already, so
   no JS is needed (migrated from jth-hide-empty-monetization-category).
   2026-07-30: extended to the four season hub categories, which can also
   sit at zero classified articles between content additions (e.g. winter
   after its one article lost its winter classification in that day's audit
   correction) and carry the same dedicated guide content in that state. */
body.category-hotels .posts-not-found,
body.category-transport .posts-not-found,
body.category-spring .posts-not-found,
body.category-summer .posts-not-found,
body.category-autumn .posts-not-found,
body.category-winter .posts-not-found {
  display: none;
}

/* Prefecture guide system: Top Attractions individual spot guides.
   This extends the old Kyoto-only guide block to Tokyo/Kyoto/Osaka pages. */
.jth-spot-guide-pro {
  margin: 18px 0 30px;
  padding: 22px;
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius-lg);
  background: var(--jth-bg);
  box-shadow: var(--jth-shadow-card);
}
.jth-spot-hero {
  margin: -22px -22px 18px;
  overflow: hidden;
  border-radius: var(--jth-radius-lg) var(--jth-radius-lg) 0 0;
  background: var(--jth-bg-panel);
}
.jth-spot-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.jth-spot-hero__body {
  padding: 16px 18px 2px;
}
/* h1側のセレクタは、Cocoon本体の h1 向けスタイル(.article h1 等、0-1-1)に
   単独クラス(0-1-0)が負けないための specificity 確保。 */
.jth-spot-hero h1,
.jth-spot-hero__title {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--jth-ink-strong);
  font-size: 1.45rem;
  line-height: 1.3;
}
.jth-spot-hero__body p {
  margin: 0 0 12px;
  color: var(--jth-muted);
}
.jth-spot-guide-pro h2 {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--jth-ink-strong);
  font-size: 1.45rem;
  line-height: 1.3;
}
.jth-spot-guide-pro h3 {
  margin: 20px 0 8px;
  color: var(--jth-ink-strong);
  font-size: 1.1rem;
  line-height: 1.35;
}
.jth-spot-guide-pro p {
  margin: 0 0 12px;
  line-height: 1.75;
}
.jth-spot-guide-pro ul {
  margin: 0 0 14px 1.2em;
  line-height: 1.75;
}
.jth-spot-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.jth-spot-guide-card {
  padding: 14px;
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius);
  background: var(--jth-bg-panel);
}
.jth-spot-guide-card strong {
  display: block;
  margin-bottom: 4px;
  color: var(--jth-ink-strong);
}
.jth-spot-guide-card span {
  display: block;
  color: var(--jth-ink);
  line-height: 1.6;
}
.jth-spot-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.jth-spot-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: var(--jth-radius);
  background: var(--jth-accent);
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
}
.jth-spot-cta a:nth-child(2) { background: #c2571c; }
.jth-spot-cta a:nth-child(3) { background: var(--jth-accent-dark); }
.jth-spot-sources {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--jth-border-soft);
}
.jth-spot-sources h3 {
  margin-top: 0;
  font-size: 1rem;
}
.jth-spot-sources ul {
  margin-bottom: 0;
}
.jth-spot-sources a {
  color: var(--jth-accent);
  text-decoration: none;
}
.jth-spot-sources a:hover {
  text-decoration: underline;
}
.jth-spot-back {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--jth-border-soft);
}
.jth-spot-back p {
  margin: 0 0 6px;
}
.jth-spot-back p:last-child {
  margin-bottom: 0;
}
.jth-spot-back a {
  color: var(--jth-accent);
  font-weight: 700;
  text-decoration: none;
}
.jth-spot-back a:hover {
  text-decoration: underline;
}
@media (max-width: 680px) {
  .jth-spot-guide-pro { padding: 16px; }
  .jth-spot-hero {
    margin: -16px -16px 16px;
  }
  .jth-spot-hero__body {
    padding: 14px 14px 2px;
  }
  .jth-spot-hero h1,
  .jth-spot-hero__title {
    font-size: 1.25rem;
  }
  .jth-spot-cta a { width: 100%; }
}

/* ============================================================
   Prefecture guide — design refresh (A x B x C hybrid).
   Styles both the existing markup emitted by
   jth_insert_prefecture_guide() and the new sections added in
   Phase 2 (breadcrumb, hero, byline, TOC, compare table, CTA).
   All classes are namespaced .jth-* to avoid Cocoon collisions.
   ============================================================ */

/* Prefecture guide system: breadcrumb */
.jth-breadcrumb {
  font-size: var(--jth-text-sm);
  color: var(--jth-muted);
  margin: 0 0 var(--jth-space-2);
}
.jth-breadcrumb a {
  color: var(--jth-muted);
  text-decoration: none;
}
.jth-breadcrumb a:hover { color: var(--jth-accent); }
.jth-breadcrumb span[aria-hidden] { margin: 0 6px; color: var(--jth-border); }

/* Author / updated / affiliate-disclosure byline */
.jth-guide-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--jth-space-1);
  font-size: var(--jth-text-sm);
  color: var(--jth-muted);
  margin: 0 0 var(--jth-space-3);
}
.jth-guide-byline .jth-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--jth-accent-soft);
  color: var(--jth-accent-ink);
  font-weight: 600;
  font-size: var(--jth-text-sm);
}
.jth-guide-byline .jth-dot { color: var(--jth-border); }
.jth-guide-byline .jth-disclosure { color: var(--jth-muted); }

/* Prefecture guide system: table of contents */
.jth-toc {
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius);
  background: var(--jth-bg-panel);
  padding: var(--jth-space-2);
  margin: 0 0 var(--jth-space-3);
}
.jth-toc-title {
  font-size: var(--jth-text-sm);
  font-weight: 600;
  color: var(--jth-ink-strong);
  margin: 0 0 var(--jth-space-1);
}
.jth-toc ol {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px var(--jth-space-3);
  margin: 0;
  padding-left: 1.2em;
}

@media (min-width: 768px) {
  .jth-toc ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.jth-toc a {
  color: var(--jth-accent);
  text-decoration: none;
}
.jth-toc a:hover { text-decoration: underline; }

/* Prefecture guide system: main guide box */
.jth-high-demand-guide-pro {
  margin: var(--jth-space-2) 0 var(--jth-space-3);
  padding: 14px 16px 16px;
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius-lg);
  background: var(--jth-bg);
  box-shadow: var(--jth-shadow-card);
}
.jth-high-demand-guide-pro > h2 {
  margin: 0 0 var(--jth-space-1);
  color: var(--jth-ink-strong);
  font-size: var(--jth-text-xl);
  line-height: 1.25;
}
.jth-guide-lead {
  margin: 0 0 var(--jth-space-2);
  color: var(--jth-muted);
  line-height: 1.7;
}

/* Prefecture guide system: quick facts */
.jth-guide-facts {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  border-top: 1px solid var(--jth-border-soft);
}
.jth-guide-facts li {
  padding: 6px 0;
  border-bottom: 1px solid var(--jth-border-soft);
  font-size: var(--jth-text-sm);
  color: var(--jth-ink);
  line-height: 1.5;
}

/* Prefecture guide system: quick facts detail cards */
.jth-facts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: var(--jth-space-2);
  align-items: stretch;
}
.jth-facts-grid .jth-guide-panel {
  padding: 10px 12px;
}

/* Prefecture guide system: section subheading */
.jth-guide-subhead {
  margin: 0 0 6px;
  padding-left: 12px;
  border-left: 4px solid var(--jth-accent);
  font-size: 1.15rem;
  color: var(--jth-ink-strong);
}

/* Prefecture guide system: panel grid */
.jth-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
  align-items: stretch;
}
.jth-guide-panel {
  background: var(--jth-bg-panel);
  min-width: 0;
  padding: 11px 12px;
  transition: var(--jth-transition);
}
.jth-guide-panel,
.jth-planning-card,
.jth-link-panel,
.jth-first-time-card,
.jth-purpose-card,
.jth-cat-card {
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius-lg);
  min-width: 0;
}
.jth-guide-panel,
.jth-planning-card {
  box-shadow: var(--jth-shadow-card);
}
.jth-guide-panel:hover {
  border-color: var(--jth-accent);
  box-shadow: var(--jth-shadow-hover);
  transform: translateY(-2px);
}
.jth-guide-panel h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  color: var(--jth-ink-strong);
}
.jth-guide-panel ul {
  margin: 0;
  padding-left: 1.05em;
  line-height: 1.6;
}
.jth-guide-panel li { margin-bottom: 4px; }

@media (max-width: 600px) {
  .jth-guide-grid,
  .jth-facts-grid { grid-template-columns: 1fr; }
  .jth-planning-guides-pro > h2 {
    font-size: var(--jth-text-lg);
    line-height: 1.2;
  }
  .jth-pref-internal-links > h2 {
    font-size: var(--jth-text-lg);
    line-height: 1.2;
  }
  .jth-pref-internal-links > p {
    margin: 0 0 var(--jth-space-2);
    line-height: 1.6;
  }
  .jth-guide-byline {
    gap: 2px 6px;
    margin: 0 0 var(--jth-space-2);
    font-size: 0.78rem;
    line-height: 1.35;
  }
  .jth-guide-byline .jth-avatar {
    width: 24px;
    height: 24px;
    font-size: 0.65rem;
  }
}

/* Prefecture guide system: comparison table */
.jth-compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--jth-space-3);
  font-size: var(--jth-text-sm);
}
.jth-compare-table th,
.jth-compare-table td {
  text-align: left;
  padding: var(--jth-space-1);
  border-bottom: 1px solid var(--jth-border-soft);
  vertical-align: top;
}
.jth-compare-table thead th {
  background: var(--jth-bg-panel);
  color: var(--jth-ink-strong);
  font-weight: 600;
}
.jth-compare-table tbody td:first-child { color: var(--jth-accent); font-weight: 600; }

/* Prefecture guide system: common questions */
.jth-faq { margin-top: var(--jth-space-3); }
.jth-faq-item {
  padding: var(--jth-space-2) 0;
  border-bottom: 1px solid var(--jth-border-soft);
}
.jth-faq-item:first-of-type { border-top: 1px solid var(--jth-border-soft); }
.jth-faq-q {
  margin: 0 0 4px;
  font-weight: 600;
  color: var(--jth-ink-strong);
}
.jth-faq-a {
  margin: 0;
  color: var(--jth-muted);
  line-height: 1.7;
}

/* Prefecture guide system: CTA banner */
.jth-cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jth-space-2);
  flex-wrap: wrap;
  margin: var(--jth-space-3) 0;
  padding: var(--jth-space-2) var(--jth-space-3);
  border-radius: var(--jth-radius-xl);
  background: var(--jth-accent);
  color: #fff;
}
.jth-cta-banner .jth-cta-copy strong {
  display: block;
  font-size: var(--jth-text-lg);
  line-height: 1.3;
}
.jth-cta-banner .jth-cta-copy span {
  display: block;
  margin-top: 4px;
  color: #a7f3d0;
  font-size: var(--jth-text-sm);
}
.jth-cta-banner a {
  display: inline-block;
  padding: var(--jth-space-1) var(--jth-space-2);
  border-radius: var(--jth-radius);
  background: #fff;
  color: var(--jth-accent);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* Prefecture guide system: recommended planning guides */
.jth-planning-guides-pro { margin: var(--jth-space-3) 0; }
.jth-planning-guides-pro > h2 {
  font-size: var(--jth-text-xl);
  color: var(--jth-ink-strong);
  margin: 0 0 var(--jth-space-1);
}
.jth-planning-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--jth-space-2);
  margin-top: var(--jth-space-2);
  align-items: stretch;
}
.jth-planning-card {
  background: var(--jth-bg);
  padding: 14px 14px 15px;
  transition: var(--jth-transition);
}
.jth-planning-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--jth-shadow-hover);
  border-color: var(--jth-accent);
}
.jth-planning-card h3 {
  margin: 0 0 var(--jth-space-1);
  font-size: var(--jth-text-lg);
  color: var(--jth-ink-strong);
}
.jth-planning-card p {
  margin: 0 0 var(--jth-space-1);
  font-size: var(--jth-text-sm);
  color: var(--jth-muted);
  line-height: 1.6;
}
.jth-planning-card a {
  font-weight: 600;
  color: var(--jth-accent);
  text-decoration: none;
}
.jth-planning-card a:hover { text-decoration: underline; }

/* Prefecture guide system: internal link panels */
.jth-pref-internal-links { margin: var(--jth-space-4) 0 var(--jth-space-3); }
.jth-pref-internal-links > h2 {
  font-size: var(--jth-text-xl);
  color: var(--jth-ink-strong);
  margin: 0 0 var(--jth-space-1);
}
.jth-link-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--jth-space-2);
  margin-top: var(--jth-space-2);
  align-items: stretch;
}
.jth-link-panel {
  background: var(--jth-bg-panel);
  padding: 14px 14px 15px;
  transition: var(--jth-transition);
  box-shadow: var(--jth-shadow-card);
}
.jth-link-panel:hover {
  border-color: var(--jth-accent);
  box-shadow: var(--jth-shadow-hover);
  transform: translateY(-2px);
}
.jth-link-panel h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--jth-ink-strong);
}
.jth-link-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1.85;
}
.jth-link-panel a {
  color: var(--jth-accent);
  text-decoration: none;
  font-size: var(--jth-text-sm);
}
.jth-link-panel a:hover { text-decoration: underline; }

/* Prefecture guide system: responsive collapse */
@media (max-width: 720px) {
  .jth-toc ol,
  .jth-guide-grid,
  .jth-planning-grid,
  .jth-link-panels {
    grid-template-columns: 1fr;
  }
  .jth-high-demand-guide-pro { padding: var(--jth-space-2); }
}

/* Prefecture guide system: Top Attractions card details.
   The card used to show only the spot name (about 10 words for the whole
   section). jth_prefecture_card_details() injects the description and the
   Price / Time needed values that already exist in the _jth_spot_guide meta
   for all 185 spots. Same source as the spot page, so the two cannot drift.
   See docs/spec-prefecture-page.md R2. */
.pref-grid .pref-card .jth-card-intro {
  margin: var(--jth-space-1) 0 0;
  font-size: var(--jth-text-sm);
  line-height: 1.6;
  color: var(--jth-muted);
}

.pref-grid .pref-card .jth-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jth-space-1);
  margin: var(--jth-space-1) 0 0;
}

.pref-grid .pref-card .jth-card-chip {
  display: inline-block;
  padding: 2px var(--jth-space-1);
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--jth-muted);
}

.pref-grid .pref-card .jth-card-chip__label {
  font-weight: 600;
}