/* ============================================================
   Category hubs: guides (things-to-do / itinerary / food / hotels /
   transport / seasonal-travel). Shared skin for the jth_*_guide_html()
   functions rendered via jth_category_guide_loop_start() on otherwise-
   empty topic category archives. Previously jth-hotels-core/jth-esim-
   guide-pro had no CSS at all (unstyled); now unified with the
   prefecture-guide visual language (.jth-guide-panel/.jth-cta-banner).
   ============================================================ */
.jth-cat-hub {
  margin: var(--jth-space-2) 0 var(--jth-space-3);
  padding: var(--jth-space-2);
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius-lg);
  background: var(--jth-bg);
  box-shadow: var(--jth-shadow-card);
}
.jth-cat-hub > h1 {
  margin: 0 0 var(--jth-space-1);
  color: var(--jth-ink-strong);
  font-size: var(--jth-text-2xl);
  line-height: 1.2;
}
.jth-cat-hub-lead {
  margin: 0 0 var(--jth-space-2);
  color: var(--jth-muted);
  line-height: 1.7;
  font-size: var(--jth-text-lg);
}
.jth-cat-hub-note {
  margin: 0 0 var(--jth-space-2);
  font-size: var(--jth-text-sm);
  color: var(--jth-muted);
}
.jth-cat-hub h2 {
  margin: var(--jth-space-2) 0 var(--jth-space-1);
  font-size: var(--jth-text-xl);
  color: var(--jth-ink-strong);
}
.jth-cat-hub h3 {
  margin: 0 0 var(--jth-space-1);
  font-size: var(--jth-text-lg);
  color: var(--jth-ink-strong);
}
.jth-cat-hub ul { margin: 0 0 var(--jth-space-3); padding-left: 1.15em; line-height: 1.65; }
.jth-cat-hub table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--jth-space-3);
  font-size: var(--jth-text-sm);
}
.jth-cat-hub th,
.jth-cat-hub td {
  text-align: left;
  padding: var(--jth-space-1);
  border-bottom: 1px solid var(--jth-border-soft);
  vertical-align: top;
}
.jth-cat-hub thead th { background: var(--jth-bg-panel); color: var(--jth-ink-strong); font-weight: 600; }

.jth-cat-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--jth-space-2);
  margin-bottom: var(--jth-space-3);
  align-items: stretch;
}
.jth-cat-hub-grid.two { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.jth-cat-card {
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius-lg);
  background: var(--jth-bg-panel);
  padding: 14px 14px 15px;
  transition: var(--jth-transition);
  box-shadow: var(--jth-shadow-card);
}
.jth-cat-card:hover {
  border-color: var(--jth-accent);
  box-shadow: var(--jth-shadow-hover);
  transform: translateY(-2px);
}
.jth-cat-card h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--jth-ink-strong); }
.jth-cat-card p { margin: 0; color: var(--jth-muted); line-height: 1.6; font-size: var(--jth-text-sm); }
.jth-cat-card ul { margin: 0; padding-left: 1.1em; line-height: 1.6; font-size: var(--jth-text-sm); }
.jth-cat-card li { margin-bottom: 4px; }

.jth-cat-cta-row { display: flex; gap: var(--jth-space-1); flex-wrap: wrap; margin: 0 0 var(--jth-space-2); }
.jth-cat-btn {
  display: inline-block;
  padding: var(--jth-space-1) var(--jth-space-2);
  border-radius: var(--jth-radius);
  background: var(--jth-accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  font-size: var(--jth-text-sm);
  transition: var(--jth-transition);
}
.jth-cat-btn:hover { background: var(--jth-accent-dark); }
.jth-cat-btn.alt {
  background: var(--jth-bg);
  color: var(--jth-accent);
  border: 1px solid var(--jth-border);
}
.jth-cat-btn.alt:hover { border-color: var(--jth-accent); }

@media (max-width: 600px) {
  .jth-cat-hub { padding: var(--jth-space-2); }
  .jth-cat-hub-grid,
  .jth-cat-hub-grid.two { grid-template-columns: 1fr; }
  .jth-cat-cta-row { flex-direction: column; }
  .jth-cat-cta-row .jth-cat-btn { width: 100%; text-align: center; }
}

/* Cocoon's archive-title h1 ("Hotels" etc.) would sit above the hub's own
   <h1> on the six topic hub categories, leaving two H1s per page. The hub
   heading is the more descriptive one, so hide the archive title there. */
body.category-hotels .archive-title,
body.category-transport .archive-title,
body.category-things-to-do .archive-title,
body.category-itinerary .archive-title,
body.category-food .archive-title,
body.category-seasonal-travel .archive-title,
body.category-spring .archive-title,
body.category-summer .archive-title,
body.category-autumn .archive-title,
body.category-winter .archive-title {
  display: none;
}

/* ============================================================
   Clickable card variant for hub navigation (Seasonal Travel's
   Spring/Summer/Autumn/Winter cards, 2026-07-30). The whole card is
   one <a> so touch/click works anywhere on it; the CTA text at the
   bottom still gives a clear, explicit link purpose for screen readers
   and link lists, not just "click the card".
   ============================================================ */
.jth-cat-card-link { padding: 0; }
.jth-cat-card-linkwrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px 14px 15px;
  color: inherit;
  text-decoration: none;
}
.jth-cat-card-link h3 { color: var(--jth-accent); }
.jth-cat-card-linkwrap p { flex-grow: 1; }
.jth-cat-card-cta {
  display: inline-block;
  margin-top: var(--jth-space-1);
  color: var(--jth-accent);
  font-weight: 600;
  font-size: var(--jth-text-sm);
}
.jth-cat-card-link:hover .jth-cat-card-cta { text-decoration: underline; }

.jth-cat-hub-back { margin: 0 0 var(--jth-space-1); font-size: var(--jth-text-sm); }

/* "Related articles" heading printed between the season hub box (glance +
   recommended prefectures) and Cocoon's own archive post list, so it isn't
   inside .jth-cat-hub and doesn't get mistaken for part of the box below it. */
.jth-section-heading {
  margin: var(--jth-space-3) 0 var(--jth-space-1);
  font-size: var(--jth-text-xl);
  color: var(--jth-ink-strong);
}

/* ============================================================
   Prefecture page photo hero (2026-07-05, Tokyo pilot). Same visual
   language as .jth-home-hero, kept as an independent class so the
   proven homepage implementation is never touched by this rollout.
   Only rendered when jth_prefecture_hero_enabled() returns true for
   the current slug (functions.php).
   ============================================================ */
.jth-has-page-hero .entry-title { display: none; }
/* Cocoon's own default post-thumbnail eye-catch would otherwise stack a
   second, unrelated photo above the new hero. */
.jth-has-page-hero .eye-catch { display: none; }
.jth-page-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--jth-radius-lg);
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  margin: var(--jth-space-1) 0 var(--jth-space-3);
  background: var(--jth-ink-strong);
}
.jth-page-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.jth-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, .15), rgba(15, 23, 42, .78));
}
.jth-page-hero__inner {
  position: relative;
  z-index: 1;
  padding: var(--jth-space-3);
  max-width: 680px;
  color: #fff;
}
.jth-page-hero__inner h1 {
  margin: 0 0 var(--jth-space-1);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1.2;
}
.jth-page-hero__inner p {
  margin: 0;
  color: #e2e8f0;
  font-size: var(--jth-text-lg);
  line-height: 1.5;
}
@media (max-width: 600px) {
  .jth-page-hero__inner { padding: var(--jth-space-2); }
  .jth-page-hero__inner p { font-size: var(--jth-text-base); }
}

@media (min-width: 768px) {
  .jth-page-hero { min-height: 350px; }
  .jth-page-hero__inner h1 { font-size: 2rem; }
}

@media (min-width: 1024px) {
  .jth-page-hero { min-height: 400px; }
  .jth-page-hero__inner h1 { font-size: 2.25rem; }
}