/* ============================================================
   Homepage (front page, id=3) — Phase 4.
   Migrated from 3 inline <style> blocks previously embedded in the
   page's post_content. Same class names/markup as before (no HTML
   structure change beyond the --featured card variant), now reusing
   the site-wide --jth-* tokens for consistency with the redesigned
   prefecture pages.
   ============================================================ */

.home .entry-content { display: flex; flex-direction: column; }
.home .entry-content .jth-visual-hub { order: -20; }
.home .entry-content .jth-purpose-hub { order: -10; }
.home .entry-content .jth-cta { order: -9; }

.jth-visual-hub { margin: var(--jth-space-1) 0 var(--jth-space-4); }
.jth-visual-hub__intro { margin: 0 0 var(--jth-space-2); color: #334155; max-width: 760px; }

/* Bento-style photo grid: first card (.jth-visual-card--featured) reads
   as the photo-forward hero tile; the rest form a supporting grid. */
.jth-visual-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 150px;
  gap: var(--jth-space-2);
}
.jth-visual-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--jth-radius-lg);
  background: var(--jth-ink-strong);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--jth-shadow-card);
  transition: var(--jth-transition);
}
.jth-visual-card:hover { box-shadow: var(--jth-shadow-hover); }
.jth-visual-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.jth-visual-card:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, .08), rgba(15, 23, 42, .78));
}
.jth-visual-card:hover img { transform: scale(1.04); }
.jth-visual-card span { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; }
.jth-visual-card strong { display: block; font-size: 1.05rem; line-height: 1.25; }
.jth-visual-card em {
  display: block;
  margin-top: 4px;
  color: #e2e8f0;
  font-size: .86rem;
  font-style: normal;
  line-height: 1.35;
}
.jth-visual-card--featured {
  grid-column: auto;
  grid-row: auto;
}
.jth-visual-card--featured strong { font-size: 1.4rem; }
.jth-visual-card--featured em { font-size: .95rem; }
.jth-visual-card--plain {
  background: var(--jth-bg-panel);
  border: 1px solid var(--jth-border-soft);
  color: #172033;
  padding: var(--jth-space-2);
}
.jth-visual-card--plain:after { display: none; }
.jth-visual-card--plain span { position: static; }
.jth-visual-card--plain em { color: var(--jth-muted); }

@media (min-width: 640px) {
  .jth-visual-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 168px; }
  .jth-visual-card--featured { grid-column: span 2; grid-row: span 1; }
  .jth-visual-card--featured strong { font-size: 1.55rem; }
  .jth-visual-card--featured em { font-size: 1rem; }
}

@media (min-width: 1024px) {
  .jth-visual-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 178px; }
  .jth-visual-card--featured { grid-column: span 2; grid-row: span 2; }
  .jth-visual-card--featured strong { font-size: 1.75rem; }
  .jth-visual-card--featured em { font-size: 1.05rem; }
}

.jth-first-time-hub { margin: var(--jth-space-4) 0; }
.jth-first-time-head { margin-bottom: var(--jth-space-2); }
.jth-first-time-head h2 {
  font-size: 1.5rem;
  margin: 0 0 var(--jth-space-1);
}
.jth-first-time-head p { margin: 0; color: #4b5563; line-height: 1.7; }
.jth-first-time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--jth-space-2);
  align-items: stretch;
}
.jth-first-time-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius-lg);
  background: var(--jth-bg);
  text-decoration: none;
  color: #111827;
  box-shadow: var(--jth-shadow-card);
  transition: var(--jth-transition);
}
.jth-first-time-card:hover {
  transform: translateY(-2px);
  border-color: var(--jth-accent);
  box-shadow: var(--jth-shadow-hover);
}
.jth-first-time-card img { width: 100%; height: 130px; object-fit: cover; display: block; }
.jth-first-time-card-body { padding: var(--jth-space-2) var(--jth-space-2); }
.jth-first-time-card-title {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 var(--jth-space-1);
  color: var(--jth-ink-strong);
}
.jth-first-time-card p { font-size: .94rem; line-height: 1.65; margin: 0; color: #475569; }

@media (max-width: 680px) {
  .jth-first-time-hub { margin: var(--jth-space-3) 0; }
  .jth-first-time-grid { grid-template-columns: 1fr; }
  .jth-first-time-card img { height: 150px; }
}

.jth-purpose-hub { margin: var(--jth-space-4) 0; }
.jth-purpose-hub__intro {
  max-width: 760px;
  margin: calc(-1 * var(--jth-space-2)) 0 var(--jth-space-3);
  color: var(--jth-muted);
}
.jth-purpose-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--jth-space-2);
  align-items: stretch;
}
.jth-purpose-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--jth-border-soft);
  border-left: 5px solid var(--jth-accent);
  border-radius: var(--jth-radius-lg);
  background: var(--jth-bg-panel);
  color: #172033;
  text-decoration: none;
  box-shadow: var(--jth-shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.jth-purpose-card:hover { transform: translateY(-2px); box-shadow: var(--jth-shadow-hover); }
.jth-purpose-card:focus-visible,
.jth-first-time-card:focus-visible {
  outline: 3px solid var(--jth-accent);
  outline-offset: 3px;
}
.jth-purpose-card img { width: 100%; height: 110px; object-fit: cover; display: block; }
.jth-purpose-card-body { padding: var(--jth-space-2); }
.jth-purpose-card strong { display: block; font-size: 1rem; color: var(--jth-accent-dark); }
.jth-purpose-card-desc { display: block; margin-top: 5px; color: #475569; font-size: .9rem; line-height: 1.45; }

@media (max-width: 600px) {
  .jth-purpose-grid { grid-template-columns: 1fr; gap: 12px; }
  .jth-purpose-card img { height: 96px; }
  .jth-purpose-card-body { padding: 12px; }
  .jth-purpose-card-desc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

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

@media (min-width: 1024px) {
  .jth-purpose-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Homepage system: utility rules */
.home .date-tags,
.home .post-update,
.home .sns-follow,
.home .sns-follow-message,
.home #sidebar .widget_search { display: none !important; }
@media (min-width: 768px) {
  .home .footer-widgets-mobile { display: none !important; }
}
@media (max-width: 767px) {
  .home .footer-widgets.cf { display: none !important; }
  .home .footer-widgets-mobile { display: block !important; }
}

/* Homepage system: hero. Gives the front page a strong photo-forward first view
   (previously the top ~676px was logo + text + CTA with no imagery, which
   read as empty/cheap, especially on mobile). The hero carries the page's
   visible H1; Cocoon's own .entry-title ("Explore Japan") is hidden on the
   home page to avoid a doubled heading. Background reuses an existing
   audited image (no new upload). */
.home .entry-title { display: none; }
/* .entry-content is a flex column whose existing sections use negative order
   (jth-visual-hub is -20); the hero must sit above them, so order -30. */
.home .entry-content .jth-home-hero { order: -30; }
.jth-home-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--jth-radius-lg);
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  margin: var(--jth-space-1) 0 var(--jth-space-3);
  background: var(--jth-ink-strong);
}
.jth-home-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.jth-home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, .15), rgba(15, 23, 42, .78));
}
.jth-home-hero__inner {
  position: relative;
  z-index: 1;
  padding: var(--jth-space-3);
  max-width: 680px;
  color: #fff;
}
.jth-home-hero__inner h1 {
  margin: 0 0 var(--jth-space-1);
  color: #fff;
  font-size: 2rem;
  line-height: 1.15;
}
.jth-home-hero__inner p {
  margin: 0 0 var(--jth-space-2);
  color: #e2e8f0;
  font-size: var(--jth-text-lg);
  line-height: 1.5;
}
.jth-home-hero__cta {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--jth-radius);
  background: var(--jth-accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.jth-home-hero__cta:hover,
.jth-home-hero__cta:focus { background: var(--jth-accent-dark); }
@media (max-width: 600px) {
  .jth-home-hero__inner { padding: var(--jth-space-2); }
  .jth-home-hero__inner p { font-size: var(--jth-text-base); }
}

@media (min-width: 768px) {
  .jth-first-time-head h2 { font-size: 1.75rem; }
  .jth-home-hero { min-height: 400px; }
  .jth-home-hero__inner h1 { font-size: 2.35rem; }
}

@media (min-width: 1024px) {
  .jth-home-hero { min-height: 460px; }
  .jth-home-hero__inner h1 { font-size: 2.6rem; }
}

/* Homepage system: layout. The only sidebar widget that was
   showing (Popular Destinations) duplicated the homepage's own destination
   cards, so rather than leaving an empty 376px sidebar column (which pushed
   the content left and created a lopsided empty gutter on the right), the
   whole sidebar is hidden on the front page and #main expands to full width.
   .content-in is flex, so hiding #sidebar + width:100% on #main centers the
   content. Prefecture/post pages keep their sidebar (unaffected). */
/* #content ancestor added to raise specificity above Cocoon's own responsive
   #sidebar/#main rules (which otherwise win on source order at equal
   specificity). */
.home #content #sidebar { display: none !important; }
.home #content #main { width: 100% !important; }

/* Latest Articles slider (pref_latest_posts_slider_func output). Replaces
   the function's old hardcoded inline styles (#ddd border, #003b80 blue
   title, 10px radius) with the site-wide --jth-* card language so it
   matches the First Time in Japan / Plan Your Japan Trip cards. */
.jth-posts-slider {
  display: flex;
  gap: var(--jth-space-2);
  overflow-x: auto;
  padding-bottom: var(--jth-space-1);
}
.jth-post-card {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius-lg);
  background: var(--jth-bg);
  box-shadow: var(--jth-shadow-card);
  text-decoration: none;
  color: var(--jth-ink);
  transition: var(--jth-transition);
}
.jth-post-card:hover {
  transform: translateY(-2px);
  border-color: var(--jth-accent);
  box-shadow: var(--jth-shadow-hover);
}
.jth-post-card__img { width: 100%; height: 140px; object-fit: cover; display: block; }
.jth-post-card__body { display: block; padding: var(--jth-space-2); }
.jth-post-card__meta {
  display: block;
  margin: 0 0 6px;
  color: var(--jth-muted);
  font-size: .78rem;
  line-height: 1.2;
  letter-spacing: 0;
}
.jth-post-card__title {
  display: block;
  margin: 0 0 var(--jth-space-1);
  font-size: var(--jth-text-base);
  font-weight: 600;
  line-height: 1.35;
  color: var(--jth-ink-strong);
}
.jth-post-card__excerpt {
  display: block;
  font-size: var(--jth-text-sm);
  color: var(--jth-muted);
  line-height: 1.6;
}
.jth-post-card__excerpt:empty { display: none; }

/* Homepage system: Latest Articles should read like the other homepage card grids,
   not like a compact carousel. Prefecture pages keep the horizontal slider. */
.home .jth-posts-slider {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--jth-space-2);
  overflow: visible;
  padding-bottom: 0;
}
.home .jth-post-card {
  flex: initial;
}
.home .jth-post-card__img {
  height: 130px;
}
.home .jth-post-card__excerpt {
  display: none;
}

/* Explore Japan by Region: one navigational unit combining the map and all
   47 prefecture links. The original full-detail map remains as a faint
   geographic backdrop; eight large region links carry the interaction. */
.jth-region-hub {
  margin: var(--jth-space-5) 0 var(--jth-space-4);
}
.jth-region-hub__head {
  margin-bottom: var(--jth-space-3);
}
.jth-region-hub__head h2 {
  margin: 0 0 var(--jth-space-1);
  color: var(--jth-ink-strong);
  font-size: var(--jth-text-xl);
  line-height: 1.25;
}
.jth-region-hub__head p {
  max-width: 780px;
  margin: 0;
  color: var(--jth-muted);
  line-height: 1.7;
}
.jth-region-map {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1;
  width: min(100%, 680px);
  margin: 0 auto var(--jth-space-4);
  overflow: hidden;
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius-xl);
  background: linear-gradient(180deg, #f8fbfd 0%, #eef6f7 100%);
  box-shadow: var(--jth-shadow-card);
}
.jth-region-map > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .12;
  filter: grayscale(1) contrast(.65);
  pointer-events: none;
}
.jth-region-map__node {
  --jth-region-color: var(--jth-accent);
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 10px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: var(--jth-radius);
  background: var(--jth-region-color);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .18);
  color: #fff;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  transition: var(--jth-transition);
}
.jth-region-map__node:hover {
  transform: translate(-50%, calc(-50% - 2px));
  box-shadow: var(--jth-shadow-hover);
  color: #fff;
}
.jth-region-map__node:focus-visible {
  outline: 3px solid var(--jth-ink-strong);
  outline-offset: 3px;
}
.jth-region-map__node--hokkaido { left: 72%; top: 16%; width: 22%; }
.jth-region-map__node--tohoku { left: 66%; top: 42%; width: 18%; }
.jth-region-map__node--kanto { left: 65%; top: 64%; width: 15%; }
.jth-region-map__node--chubu { left: 47%; top: 60%; width: 15%; }
.jth-region-map__node--kansai { left: 39%; top: 74%; width: 15%; }
.jth-region-map__node--chugoku { left: 21%; top: 70%; width: 17%; }
.jth-region-map__node--shikoku { left: 27%; top: 84%; width: 17%; }
.jth-region-map__node--kyushu { left: 15%; top: 94%; width: 28%; }
.jth-region-map__direction {
  position: absolute;
  z-index: 1;
  right: 14px;
  bottom: 12px;
  color: var(--jth-muted);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.jth-region-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--jth-space-2);
  align-items: start;
}
.jth-region-card {
  --jth-region-color: var(--jth-accent);
  overflow: hidden;
  scroll-margin-top: 96px;
  border: 1px solid var(--jth-border-soft);
  border-left: 6px solid var(--jth-region-color);
  border-radius: var(--jth-radius-lg);
  background: var(--jth-bg-panel);
  box-shadow: var(--jth-shadow-card);
}
.jth-region-map__node--hokkaido,
.jth-region-card--hokkaido { --jth-region-color: var(--jth-region-hokkaido); }
.jth-region-map__node--tohoku,
.jth-region-card--tohoku { --jth-region-color: var(--jth-region-tohoku); }
.jth-region-map__node--kanto,
.jth-region-card--kanto { --jth-region-color: var(--jth-region-kanto); }
.jth-region-map__node--chubu,
.jth-region-card--chubu { --jth-region-color: var(--jth-region-chubu); }
.jth-region-map__node--kansai,
.jth-region-card--kansai { --jth-region-color: var(--jth-region-kansai); }
.jth-region-map__node--chugoku,
.jth-region-card--chugoku { --jth-region-color: var(--jth-region-chugoku); }
.jth-region-map__node--shikoku,
.jth-region-card--shikoku { --jth-region-color: var(--jth-region-shikoku); }
.jth-region-map__node--kyushu,
.jth-region-card--kyushu { --jth-region-color: var(--jth-region-kyushu); }
.jth-region-card summary {
  position: relative;
  display: block;
  min-height: 72px;
  padding: 14px 48px 14px var(--jth-space-2);
  cursor: pointer;
  list-style: none;
}
.jth-region-card summary::-webkit-details-marker { display: none; }
.jth-region-card summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: var(--jth-space-2);
  transform: translateY(-50%);
  color: var(--jth-region-color);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}
.jth-region-card[open] summary::after { content: "−"; }
.jth-region-card summary:focus-visible {
  outline: 3px solid var(--jth-accent);
  outline-offset: -3px;
}
.jth-region-card summary h3 {
  margin: 0;
  color: var(--jth-ink-strong);
  font-size: var(--jth-text-lg);
  line-height: 1.3;
}
.jth-region-card summary small {
  display: block;
  margin-top: 4px;
  color: var(--jth-muted);
  font-size: var(--jth-text-sm);
  font-weight: 400;
  line-height: 1.45;
}
.jth-region-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jth-space-1);
  margin: 0;
  padding: var(--jth-space-2);
  border-top: 1px solid var(--jth-border-soft);
  list-style: none;
}
.jth-region-links li { margin: 0; }
.jth-region-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--jth-border-soft);
  border-radius: var(--jth-radius);
  background: var(--jth-bg);
  color: var(--jth-accent-dark);
  font-size: var(--jth-text-sm);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
.jth-region-links a::after {
  content: "›";
  margin-left: 6px;
  color: var(--jth-region-color);
  font-size: 1.15rem;
  line-height: 1;
}
.jth-region-links a:hover {
  border-color: var(--jth-region-color);
  color: var(--jth-region-color);
}
.jth-region-links a:focus-visible {
  outline: 3px solid var(--jth-region-color);
  outline-offset: 2px;
}

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

@media (min-width: 1100px) {
  .jth-region-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .jth-region-hub { margin-top: var(--jth-space-4); }
  .jth-region-hub__head { margin-bottom: var(--jth-space-2); }
  .jth-region-map { margin-bottom: var(--jth-space-3); }
  .jth-region-map__node {
    min-height: 32px;
    padding: 5px 6px;
    border-width: 1px;
    font-size: .68rem;
  }
  .jth-region-map__node--hokkaido { width: 25%; }
  .jth-region-map__node--tohoku { width: 21%; }
  .jth-region-map__node--kanto,
  .jth-region-map__node--chubu,
  .jth-region-map__node--kansai { width: 17%; }
  .jth-region-map__node--chugoku { width: 17%; }
  .jth-region-map__node--shikoku { width: 20%; }
  .jth-region-map__node--kyushu { width: 30%; }
  .jth-region-map__direction { right: 8px; bottom: 6px; font-size: .66rem; }
  .jth-region-card summary { min-height: 68px; }
}

@media (max-width: 420px) {
  .jth-region-map {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    aspect-ratio: auto;
    gap: var(--jth-space-1);
    padding: var(--jth-space-2);
  }
  .jth-region-map__node,
  .jth-region-map__node--hokkaido,
  .jth-region-map__node--tohoku,
  .jth-region-map__node--kanto,
  .jth-region-map__node--chubu,
  .jth-region-map__node--kansai,
  .jth-region-map__node--chugoku,
  .jth-region-map__node--shikoku,
  .jth-region-map__node--kyushu {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    min-height: 44px;
    transform: none;
  }
  .jth-region-map__node:hover { transform: translateY(-2px); }
  .jth-region-map__direction { display: none; }
}

@media (max-width: 600px) {
  .jth-post-card { flex: 0 0 200px; }
}

/* ============================================================