/* JidoPost Phase 1 v0.4 STRUCTURE FINAL */

/* 23-language defensive layout */
.jp-nav__menu,.jp-mobile-menu__list,.jp-card-grid,.jp-home-lead__grid,.jp-feature-list,.jp-wide-feature,.jp-now__track,.jp-region__grid,.jp-slot,.jp-slot *{min-width:0}
.jp-nav__menu{flex-wrap:wrap;row-gap:8px}
.jp-nav__menu a,.jp-nav__menu span{white-space:normal;text-align:center;overflow-wrap:anywhere}
.jp-card__title,.jp-card__excerpt,.jp-section-head h2,.jp-slot__title{overflow-wrap:anywhere}

/* Single keeps the same six-item GNB as Home/Category. */
.jp-header--single .jp-header__top{min-height:72px}

/* Home Now */
.jp-now{padding-top:32px}
.jp-now__track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--jp-card-gap)}
.jp-now__track--category{margin-bottom:0}

/* Slots */
.jp-slot-wrap{margin-block:12px}
.jp-slot{margin:24px 0;background:#fff;overflow:hidden}
.jp-slot__link{display:block;text-decoration:none;color:inherit}
.jp-slot__media{display:block;aspect-ratio:16/7;background:#e9edf2;overflow:hidden;border-radius:10px}
.jp-slot__media img{width:100%;height:100%;display:block;object-fit:cover}
.jp-slot__body{padding:10px 2px 0}
.jp-slot__title{font-size:clamp(15px,1.45vw,19px);line-height:1.4;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jp-slot__link:hover .jp-slot__title{text-decoration:underline;text-underline-offset:3px}
.jp-single>.jp-slot,.jp-article>.jp-slot{max-width:var(--jp-read);margin:32px auto}
.jp-category-page>.jp-container>.jp-slot{margin:36px 0}

/* Region Phase 1: only validated term links are rendered. */
.jp-region__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.jp-region__item{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--jp-line);background:#fff;text-decoration:none;font-weight:700}
.jp-region__item:hover{border-color:var(--jp-blue);color:var(--jp-blue)}
.jp-category-page .jp-region{padding:24px 0 52px}

/* Category variants */
.jp-category-module{margin:0 0 56px}
.jp-category-module__head{display:flex;justify-content:space-between;gap:24px;align-items:end;border-top:1px solid var(--jp-line);padding-top:20px;margin-bottom:20px}
.jp-category-module__head h2{font-size:var(--jp-fs-h2);margin:4px 0 0}
.jp-category-module__updated{font-size:var(--jp-fs-meta);color:var(--jp-muted);white-space:nowrap}
.jp-place-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--jp-line)}
.jp-place-list__item{display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;padding:16px 0;border-bottom:1px solid var(--jp-line)}
.jp-place-list__num{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--jp-navy);color:#fff;font-size:12px;font-weight:800}
.jp-place-list__body{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline}
.jp-place-list__name{font-size:17px;font-weight:750;text-decoration:none}
.jp-place-list__story{font-size:13px;color:var(--jp-muted);text-decoration:none}
.jp-place-list__name:hover,.jp-place-list__story:hover{text-decoration:underline;text-underline-offset:3px}
.jp-card--utility-feature{border:1px solid var(--jp-line);background:var(--jp-surface);padding:28px;max-width:820px}
.jp-card--utility-feature .jp-card__title{font-size:clamp(24px,3vw,36px);margin-top:0}
.jp-card__label--sponsored{color:var(--jp-muted);text-transform:uppercase;letter-spacing:.06em}

/* Article metadata */
.jp-article-head__meta{display:flex;flex-wrap:wrap;gap:6px 18px}
.jp-article-head__meta span{min-width:0}

@media (max-width:1199px){
  .jp-now__track{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jp-region__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:767px){
  .jp-header--single .jp-header__top{min-height:60px}
  /* Exactly two home horizontal scrollers: Now + SNS Hotspots. */
  .jp-now__track,.jp-home-section--hotspots .jp-card-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(76vw,1fr);grid-template-columns:none;overflow-x:auto;gap:16px;padding-bottom:8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .jp-now__track>.jp-card,.jp-home-section--hotspots .jp-card-grid>.jp-card{scroll-snap-align:start}
  .jp-now__track--category{grid-auto-columns:minmax(72vw,1fr)}
  .jp-region__grid{grid-template-columns:1fr}
  .jp-slot{margin:20px 0}
  .jp-slot__media{aspect-ratio:2/1}
  .jp-slot__body{padding:9px 1px 0}
  .jp-slot__title{font-size:15px}
  .jp-category-module{margin-bottom:40px}
  .jp-category-module__head{align-items:start;flex-direction:column;gap:8px}
  .jp-place-list__body{display:grid;gap:3px}
}


/* v0.4.2 Home density/readability tuning.
   - Feature + side-list modules use a wider side rail.
   - Side list uses 5 items to better match feature height.
   - Home section vertical rhythm is tighter on desktop/tablet.
   - Region module is intentionally not rendered in Phase 1. */
.jp-home-lead__grid,
.jp-feature-list,
.jp-wide-feature{
  grid-template-columns:minmax(0,7fr) minmax(420px,5fr);
  gap:28px;
}

.jp-home-lead__side,
.jp-feature-list__side,
.jp-wide-feature__side{
  gap:14px;
}

.jp-home-lead__side .jp-card--horizontal,
.jp-feature-list__side .jp-card--horizontal{
  padding-bottom:14px;
  border-bottom:1px solid var(--jp-line);
}

.jp-home-lead__side .jp-card--horizontal:last-child,
.jp-feature-list__side .jp-card--horizontal:last-child{
  padding-bottom:0;
  border-bottom:0;
}

.jp-home-lead__side .jp-card--horizontal .jp-card__link,
.jp-feature-list__side .jp-card--horizontal .jp-card__link{
  grid-template-columns:116px minmax(0,1fr);
  gap:14px;
}

.jp-home-lead__side .jp-card--horizontal .jp-card__media,
.jp-feature-list__side .jp-card--horizontal .jp-card__media{
  aspect-ratio:16/10;
}

.jp-home-lead__side .jp-card--horizontal .jp-card__title,
.jp-feature-list__side .jp-card--horizontal .jp-card__title{
  -webkit-line-clamp:2;
  line-clamp:2;
  font-size:16px;
  line-height:1.35;
}

.jp-home-lead__side .jp-card--horizontal .jp-card__excerpt,
.jp-feature-list__side .jp-card--horizontal .jp-card__excerpt{
  -webkit-line-clamp:2;
  line-clamp:2;
  font-size:13px;
  line-height:1.45;
  margin-top:5px;
}

.jp-wide-feature__side .jp-card--compact{
  padding-bottom:12px;
}

.jp-wide-feature__side .jp-card--compact .jp-card__link{
  grid-template-columns:108px minmax(0,1fr);
  gap:14px;
  align-items:center;
}

.jp-wide-feature__side .jp-card--compact .jp-card__media{
  aspect-ratio:4/3;
}

.jp-wide-feature__side .jp-card--compact .jp-card__title{
  font-size:16px;
  line-height:1.4;
  -webkit-line-clamp:3;
  line-clamp:3;
}

@media (min-width:1200px){
  .jp-home .jp-section{padding-block:44px}
  .jp-home .jp-section--lead{padding-top:28px;padding-bottom:40px}
  .jp-home .jp-now{padding-top:40px}
  .jp-home .jp-section-head{margin-bottom:22px}
}

@media (min-width:768px) and (max-width:1199px){
  .jp-home-lead__grid,
  .jp-feature-list,
  .jp-wide-feature{
    grid-template-columns:minmax(0,6.5fr) minmax(340px,5.5fr);
    gap:24px;
  }
  .jp-home .jp-section{padding-block:48px}
  .jp-home .jp-section--lead{padding-top:24px;padding-bottom:36px}
}

@media (max-width:767px){
  .jp-home-lead__grid,
  .jp-feature-list,
  .jp-wide-feature{grid-template-columns:1fr;gap:24px}
  .jp-home-lead__side .jp-card--horizontal .jp-card__link,
  .jp-feature-list__side .jp-card--horizontal .jp-card__link{
    grid-template-columns:34% minmax(0,1fr);
  }
  .jp-home .jp-section{padding-block:40px}
}

/* v0.4.3 Home side-card width fix.
   Force the side-card text body to consume all space remaining after the image.
   This avoids narrow intrinsic grid sizing seen on KO Home in Hero / Destinations / Heritage. */
@media (min-width:768px){
  /* tokens.css still gives the ARTICLE itself a two-column grid.
     The template already grids/flexes the inner link, so that outer grid
     collapses the link into only the first track. Neutralize it here. */
  .jp-home-lead__side .jp-card--horizontal,
  .jp-feature-list__side .jp-card--horizontal,
  .jp-wide-feature__side .jp-card--compact{
    display:block;
    grid-template-columns:none;
    width:100%;
    min-width:0;
  }

  .jp-home-lead__side .jp-card--horizontal .jp-card__link,
  .jp-feature-list__side .jp-card--horizontal .jp-card__link,
  .jp-wide-feature__side .jp-card--compact .jp-card__link{
    display:flex;
    width:100%;
    min-width:0;
    max-width:none;
    align-items:flex-start;
  }

  .jp-home-lead__side .jp-card--horizontal .jp-card__media,
  .jp-feature-list__side .jp-card--horizontal .jp-card__media{
    flex:0 0 116px;
    width:116px;
    min-width:116px;
  }

  .jp-wide-feature__side .jp-card--compact .jp-card__media{
    flex:0 0 108px;
    width:108px;
    min-width:108px;
  }

  .jp-home-lead__side .jp-card--horizontal .jp-card__body,
  .jp-feature-list__side .jp-card--horizontal .jp-card__body,
  .jp-wide-feature__side .jp-card--compact .jp-card__body{
    flex:1 1 0;
    width:auto;
    min-width:0;
    max-width:none;
    overflow:visible;
  }

  .jp-home-lead__side .jp-card--horizontal .jp-card__title,
  .jp-feature-list__side .jp-card--horizontal .jp-card__title,
  .jp-wide-feature__side .jp-card--compact .jp-card__title,
  .jp-home-lead__side .jp-card--horizontal .jp-card__excerpt,
  .jp-feature-list__side .jp-card--horizontal .jp-card__excerpt{
    width:100%;
    max-width:none;
  }

  .jp-home-lead__side .jp-card--horizontal .jp-card__title,
  .jp-feature-list__side .jp-card--horizontal .jp-card__title{
    -webkit-line-clamp:2;
    line-clamp:2;
  }

  .jp-home-lead__side .jp-card--horizontal .jp-card__excerpt,
  .jp-feature-list__side .jp-card--horizontal .jp-card__excerpt{
    -webkit-line-clamp:2;
    line-clamp:2;
  }

  .jp-wide-feature__side .jp-card--compact .jp-card__title{
    -webkit-line-clamp:3;
    line-clamp:3;
  }
}

/* Tighter Home vertical rhythm requested during KO desktop QA. */
@media (min-width:1200px){
  .jp-home .jp-section{padding-block:30px}
  .jp-home .jp-section--lead{padding-top:24px;padding-bottom:30px}
  .jp-home .jp-now{padding-top:30px}
  .jp-home .jp-section-head{margin-bottom:18px}
}
@media (min-width:768px) and (max-width:1199px){
  .jp-home .jp-section{padding-block:34px}
  .jp-home .jp-section--lead{padding-top:22px;padding-bottom:30px}
}


/* =========================================================
   v0.4.5 KO SCREEN DESIGN PASS 1
   Scope: Home finish / Category variants / Single editorial body.
   Structural styles remain language-neutral; KO is the first QA target.
   ========================================================= */

/* ---------- Shared editorial rhythm ---------- */
.jp-category-page,
.jp-single-page{background:#fff}

.jp-category-page>.jp-container,
.jp-single-page>.jp-container{max-width:1240px}

.jp-category-page .jp-page-head{padding:42px 0 30px;max-width:920px}
.jp-category-page .jp-page-head h1{font-size:clamp(34px,4vw,48px);letter-spacing:-.035em;line-height:1.14}
.jp-category-page .jp-page-head__desc{margin-top:12px;max-width:760px;font-size:16px;line-height:1.7}
.jp-category-page .jp-page-head--compact{padding-bottom:22px}

/* ---------- Category page: lead feature ---------- */
.jp-category-page .jp-category-feature{margin-bottom:42px}
.jp-category-page .jp-category-feature .jp-card--feature .jp-card__link{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr);
  gap:34px;
  align-items:center;
}
.jp-category-page .jp-category-feature .jp-card--feature .jp-card__media{margin:0}
.jp-category-page .jp-category-feature .jp-card--feature .jp-card__body{min-width:0;padding-right:10px}
.jp-category-page .jp-category-feature .jp-card--feature .jp-card__title{
  margin:0;
  font-size:clamp(26px,3vw,38px);
  line-height:1.24;
  letter-spacing:-.025em;
  -webkit-line-clamp:3;
  line-clamp:3;
}
.jp-category-page .jp-category-feature .jp-card--feature .jp-card__excerpt{
  margin-top:14px;
  font-size:15px;
  line-height:1.72;
  -webkit-line-clamp:4;
  line-clamp:4;
}

/* Heritage keeps a stronger visual lead without changing the query structure. */
.jp-category-page--heritage-culture .jp-category-feature .jp-card--feature .jp-card__link{
  grid-template-columns:minmax(0,1.65fr) minmax(300px,.8fr);
}

/* Travel Guide lead is an intentional utility card with no image. */
.jp-category-page--travel-guide .jp-category-feature .jp-card--utility-feature{
  max-width:none;
  border:1px solid var(--jp-line);
  border-left:5px solid var(--jp-blue);
  background:var(--jp-surface);
  padding:34px 38px;
}
.jp-category-page--travel-guide .jp-category-feature .jp-card--utility-feature .jp-card__link{display:block}
.jp-category-page--travel-guide .jp-category-feature .jp-card--utility-feature .jp-card__title{font-size:clamp(28px,3.2vw,42px);max-width:900px}
.jp-category-page--travel-guide .jp-category-feature .jp-card--utility-feature .jp-card__excerpt{max-width:840px;font-size:16px}

/* ---------- Category page: secondary modules ---------- */
.jp-category-page .jp-category-module{margin-bottom:46px}
.jp-category-page .jp-category-module>.jp-section-head,
.jp-category-page .jp-category-module__head{
  margin-bottom:18px;
  padding-top:18px;
}
.jp-category-page .jp-category-module>.jp-section-head h2,
.jp-category-page .jp-category-module__head h2{font-size:clamp(22px,2.3vw,30px)}

/* Hotspots: photo-first row, not another generic three-card grid. */
.jp-category-page--hotspots .jp-category-module--hotspots{
  padding:24px;
  border:1px solid var(--jp-line);
  background:var(--jp-surface);
}
.jp-category-page--hotspots .jp-category-module--hotspots .jp-section-head{border-top:0;padding-top:0}

/* Food numbered place list is compact and scan-friendly on desktop. */
.jp-category-page--food-dining .jp-food-maplist .jp-place-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:34px;
}
.jp-category-page--food-dining .jp-place-list__item{min-width:0}
.jp-category-page--food-dining .jp-place-list__name{font-size:16px}

/* Heritage editor pick: wide story + readable compact rail. */
.jp-category-page--heritage-culture .jp-category-module .jp-wide-feature{
  grid-template-columns:minmax(0,1.55fr) minmax(320px,.85fr);
  gap:30px;
}
.jp-category-page--heritage-culture .jp-category-module .jp-wide-feature__side{gap:0}
.jp-category-page--heritage-culture .jp-category-module .jp-wide-feature__side .jp-card--compact{
  display:block;
  padding:14px 0;
  border-bottom:1px solid var(--jp-line);
}
.jp-category-page--heritage-culture .jp-category-module .jp-wide-feature__side .jp-card--compact:first-child{padding-top:0}
.jp-category-page--heritage-culture .jp-category-module .jp-wide-feature__side .jp-card__link{
  display:flex;
  gap:14px;
  width:100%;
  align-items:flex-start;
}
.jp-category-page--heritage-culture .jp-category-module .jp-wide-feature__side .jp-card__media{
  flex:0 0 112px;
  width:112px;
  aspect-ratio:4/3;
}
.jp-category-page--heritage-culture .jp-category-module .jp-wide-feature__side .jp-card__body{flex:1 1 0;min-width:0}
.jp-category-page--heritage-culture .jp-category-module .jp-wide-feature__side .jp-card__title{font-size:16px;line-height:1.42;-webkit-line-clamp:3;line-clamp:3}

/* Wellness: four equal cards, slightly lighter copy density. */
.jp-category-page--wellness .jp-category-module .jp-card-grid--4{gap:20px}
.jp-category-page--wellness .jp-category-module .jp-card__excerpt{-webkit-line-clamp:2;line-clamp:2}

/* Travel Guide practical topics read as utility blocks. */
.jp-category-page--travel-guide .jp-category-module .jp-utility-grid{gap:14px}
.jp-category-page--travel-guide .jp-category-module .jp-card--utility{
  min-height:0;
  padding:22px;
  border:1px solid var(--jp-line);
  background:#fff;
}
.jp-category-page--travel-guide .jp-category-module .jp-card--utility .jp-card__title{font-size:18px;line-height:1.45}
.jp-category-page--travel-guide .jp-category-module .jp-card--utility .jp-card__excerpt{-webkit-line-clamp:3;line-clamp:3}

/* ---------- Category latest ---------- */
.jp-category-page .jp-category-latest{margin-top:12px;padding-top:0}
.jp-category-page .jp-category-latest>.jp-section-head{margin-bottom:22px}
.jp-category-page .jp-category-latest .jp-card-grid{row-gap:38px}
.jp-category-page .jp-category-latest .jp-card__title{font-size:18px;line-height:1.42}
.jp-category-page .jp-category-latest .jp-card__excerpt{font-size:14px;line-height:1.65;-webkit-line-clamp:3;line-clamp:3}
.jp-category-page .jp-pagination{margin-top:42px;padding-top:22px;border-top:1px solid var(--jp-line)}

/* ---------- Single: editorial header ---------- */
.jp-single-page{padding-top:0}
.jp-single-page .jp-single{padding-top:10px}
.jp-single-page .jp-article-head{max-width:900px;padding:42px 0 30px;text-align:left}
.jp-single-page .jp-article-head__label{
  margin-bottom:12px;
  font-size:12px;
  letter-spacing:.035em;
}
.jp-single-page .jp-article-head h1{
  max-width:900px;
  font-size:clamp(38px,4.3vw,58px);
  line-height:1.14;
  letter-spacing:-.038em;
}
.jp-single-page .jp-article-head__lead{
  max-width:820px;
  margin-top:18px;
  color:#4f5b68;
  font-size:19px;
  line-height:1.72;
}
.jp-single-page .jp-article-head__meta{
  margin-top:20px;
  padding-top:15px;
  border-top:1px solid var(--jp-line);
  color:var(--jp-muted);
}

.jp-single-page .jp-single__hero{max-width:1120px;margin:0 auto 42px}
.jp-single-page .jp-single__hero-img{border-radius:2px}

/* ---------- Single: reading body ---------- */
.jp-single-page .jp-article{
  max-width:740px;
  color:#202936;
  font-size:18px;
  line-height:1.86;
  letter-spacing:-.006em;
}
.jp-single-page .jp-article>p{margin-bottom:1.55em}
.jp-single-page .jp-article h2{
  position:relative;
  margin:58px 0 18px;
  padding-top:18px;
  border-top:1px solid var(--jp-line);
  font-size:30px;
  line-height:1.34;
  letter-spacing:-.025em;
}
.jp-single-page .jp-article h3{margin:38px 0 14px;font-size:23px;line-height:1.42;letter-spacing:-.02em}
.jp-single-page .jp-article h4{margin:30px 0 10px;font-size:19px;line-height:1.5}
.jp-single-page .jp-article a:not(.jidopost-place-card){color:#0d63c7;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.jp-single-page .jp-article ul,
.jp-single-page .jp-article ol{margin:0 0 1.6em;padding-left:1.4em}
.jp-single-page .jp-article li{margin:.45em 0}
.jp-single-page .jp-article blockquote{
  margin:34px 0;
  padding:6px 0 6px 22px;
  border-left:4px solid var(--jp-blue);
  color:#465364;
  font-size:20px;
  line-height:1.7;
}
.jp-single-page .jp-article figure{margin:36px 0}
.jp-single-page .jp-article figcaption{margin-top:9px;font-size:12px;line-height:1.55;color:var(--jp-muted)}
.jp-single-page .jp-article img{border-radius:2px}
.jp-single-page .jp-article .alignwide{
  width:min(980px,calc(100vw - 48px));
  max-width:none;
  margin-left:50%;
  transform:translateX(-50%);
}
.jp-single-page .jp-article table{width:100%;margin:30px 0;font-size:14px;line-height:1.55}
.jp-single-page .jp-article th{background:var(--jp-surface);font-weight:750}
.jp-single-page .jp-article th,
.jp-single-page .jp-article td{padding:12px 14px}

/* Existing Travel Memo markup can opt into either class spelling already used by S2 guard. */
.jp-single-page .jp-article .travel-memo,
.jp-single-page .jp-article .travelmemo{
  margin:34px 0;
  padding:22px 24px;
  border:1px solid var(--jp-line);
  border-left:5px solid var(--jp-blue);
  background:var(--jp-surface);
  border-radius:2px;
}
.jp-single-page .jp-article .travel-memo>:first-child,
.jp-single-page .jp-article .travelmemo>:first-child{margin-top:0}
.jp-single-page .jp-article .travel-memo>:last-child,
.jp-single-page .jp-article .travelmemo>:last-child{margin-bottom:0}

/* Article map belongs to the article rhythm, not a separate app surface. */
.jp-single-page .jidopost-article-map{margin:44px 0 34px;border-radius:4px}
.jp-single-page .jidopost-article-map__head{padding:18px 20px}

/* ---------- Single: related + tags ---------- */
.jp-single-page .jp-related{
  max-width:1120px;
  margin:64px auto 0;
  padding-top:0;
}
.jp-single-page .jp-related .jp-section-head{margin-bottom:22px}
.jp-single-page .jp-related .jp-card-grid{gap:24px}
.jp-single-page .jp-related .jp-card__excerpt{-webkit-line-clamp:2;line-clamp:2}
.jp-single-page .jp-article-footer{max-width:740px;margin-top:34px;padding-top:22px;border-top:1px solid var(--jp-line)}
.jp-single-page .jp-tags{display:flex;flex-wrap:wrap;gap:8px}
.jp-single-page .jp-tags a{margin:0;padding:7px 11px;border:1px solid var(--jp-line);background:#fff;border-radius:999px;font-size:12px}
.jp-single-page .jp-tags a:hover{border-color:var(--jp-blue);color:var(--jp-blue)}

/* ---------- Desktop home final polish ---------- */
@media (min-width:1200px){
  .jp-home .jp-home-lead__grid,
  .jp-home .jp-feature-list,
  .jp-home .jp-wide-feature{align-items:start}
  .jp-home .jp-section-head h2{letter-spacing:-.02em}
}

/* ---------- Tablet ---------- */
@media (min-width:768px) and (max-width:1199px){
  .jp-category-page .jp-category-feature .jp-card--feature .jp-card__link,
  .jp-category-page--heritage-culture .jp-category-feature .jp-card--feature .jp-card__link{
    grid-template-columns:minmax(0,1.3fr) minmax(280px,.9fr);
    gap:24px;
  }
  .jp-category-page--heritage-culture .jp-category-module .jp-wide-feature{
    grid-template-columns:minmax(0,1.25fr) minmax(280px,.95fr);
  }
  .jp-single-page .jp-article{font-size:17.5px}
}

/* ---------- Mobile 390px target ---------- */
@media (max-width:767px){
  .jp-category-page>.jp-container,
  .jp-single-page>.jp-container{padding-inline:18px}

  .jp-category-page .jp-page-head{padding:26px 0 22px}
  .jp-category-page .jp-page-head h1{font-size:34px}
  .jp-category-page .jp-page-head__desc{font-size:15px}

  .jp-category-page .jp-category-feature{margin-bottom:34px}
  .jp-category-page .jp-category-feature .jp-card--feature .jp-card__link,
  .jp-category-page--heritage-culture .jp-category-feature .jp-card--feature .jp-card__link{
    grid-template-columns:1fr;
    gap:16px;
  }
  .jp-category-page .jp-category-feature .jp-card--feature .jp-card__body{padding-right:0}
  .jp-category-page .jp-category-feature .jp-card--feature .jp-card__title{font-size:25px}
  .jp-category-page .jp-category-feature .jp-card--feature .jp-card__excerpt{font-size:14px;-webkit-line-clamp:3;line-clamp:3}
  .jp-category-page--travel-guide .jp-category-feature .jp-card--utility-feature{padding:24px 22px}

  .jp-category-page .jp-category-module{margin-bottom:36px}
  .jp-category-page--hotspots .jp-category-module--hotspots{padding:18px}
  .jp-category-page--food-dining .jp-food-maplist .jp-place-list{grid-template-columns:1fr}
  .jp-category-page--heritage-culture .jp-category-module .jp-wide-feature{grid-template-columns:1fr;gap:22px}
  .jp-category-page--heritage-culture .jp-category-module .jp-wide-feature__side .jp-card__media{flex-basis:96px;width:96px}
  .jp-category-page .jp-category-latest .jp-card-grid{row-gap:30px}

  .jp-single-page .jp-single{padding-top:0}
  .jp-single-page .jp-article-head{padding:26px 0 22px}
  .jp-single-page .jp-article-head h1{font-size:34px;line-height:1.18}
  .jp-single-page .jp-article-head__lead{font-size:17px;line-height:1.7}
  .jp-single-page .jp-article-head__meta{font-size:12px}
  .jp-single-page .jp-single__hero{margin-bottom:28px}
  .jp-single-page .jp-article{font-size:17px;line-height:1.82}
  .jp-single-page .jp-article h2{margin-top:46px;font-size:25px}
  .jp-single-page .jp-article h3{font-size:21px}
  .jp-single-page .jp-article blockquote{margin:28px 0;padding-left:16px;font-size:18px}
  .jp-single-page .jp-article .alignwide{width:100%;margin-left:0;transform:none}
  .jp-single-page .jp-article table{font-size:13px}
  .jp-single-page .jp-related{margin-top:50px}
  .jp-single-page .jp-related .jp-card-grid{grid-template-columns:1fr;gap:28px}
  .jp-single-page .jidopost-article-map__viewport{height:300px}
}

/* =========================================================
   v0.4.7 KO REAL-DEVICE MOBILE PASS 1
   Fixes the mobile recurrence of the pre-v0.4.3 nested-grid width bug
   and tunes KO typography/rhythm for an actual ~390px phone viewport.
   Desktop/tablet >=768px are intentionally unchanged.
   ========================================================= */
@media (max-width:767px){
  /* Keep horizontal content inside its own scroller; prevent component
     intrinsic widths from widening the page. */
  .jp-home,
  .jp-category-page,
  .jp-single-page{overflow-x:clip}

  /* Header density on a real phone. */
  .jp-header__top,
  .jp-header--single .jp-header__top{
    min-height:56px;
    grid-template-columns:40px minmax(0,1fr) auto;
  }
  .custom-logo{max-height:38px;max-width:210px}
  .jp-header__menu-btn,
  .jp-search-toggle,
  .jp-language__trigger{min-width:40px;min-height:40px}

  /* Home lead: the v0.4.3 outer-grid neutralization must also apply
     below 768px. Without this, the ARTICLE consumes 35% first and its
     inner link is divided again, recreating the old narrow-text layout. */
  .jp-home-lead__side .jp-card--horizontal,
  .jp-feature-list__side .jp-card--horizontal,
  .jp-wide-feature__side .jp-card--compact{
    display:block;
    grid-template-columns:none;
    width:100%;
    min-width:0;
  }

  .jp-home-lead__side .jp-card--horizontal .jp-card__link,
  .jp-feature-list__side .jp-card--horizontal .jp-card__link,
  .jp-wide-feature__side .jp-card--compact .jp-card__link{
    display:flex;
    grid-template-columns:none;
    width:100%;
    min-width:0;
    max-width:none;
    gap:12px;
    align-items:flex-start;
  }

  .jp-home-lead__side .jp-card--horizontal .jp-card__media,
  .jp-feature-list__side .jp-card--horizontal .jp-card__media{
    flex:0 0 96px;
    width:96px;
    min-width:96px;
    aspect-ratio:16/10;
  }

  .jp-wide-feature__side .jp-card--compact .jp-card__media{
    flex:0 0 92px;
    width:92px;
    min-width:92px;
    aspect-ratio:4/3;
  }

  .jp-home-lead__side .jp-card--horizontal .jp-card__body,
  .jp-feature-list__side .jp-card--horizontal .jp-card__body,
  .jp-wide-feature__side .jp-card--compact .jp-card__body{
    flex:1 1 0;
    min-width:0;
    width:auto;
    max-width:none;
    overflow:visible;
  }

  .jp-home-lead__side .jp-card--horizontal .jp-card__title,
  .jp-feature-list__side .jp-card--horizontal .jp-card__title{
    width:100%;
    max-width:none;
    font-size:16px;
    line-height:1.38;
    -webkit-line-clamp:2;
    line-clamp:2;
  }

  /* Bring back a short summary in the Home editorial rails so mobile
     keeps the same information hierarchy as the polished desktop. */
  .jp-home-lead__side .jp-card--horizontal .jp-card__excerpt,
  .jp-feature-list__side .jp-card--horizontal .jp-card__excerpt{
    display:-webkit-box;
    width:100%;
    max-width:none;
    margin-top:4px;
    color:var(--jp-muted);
    font-size:12.5px;
    line-height:1.45;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
    overflow:hidden;
  }

  .jp-wide-feature__side .jp-card--compact .jp-card__title{
    width:100%;
    max-width:none;
    font-size:15.5px;
    line-height:1.4;
    -webkit-line-clamp:3;
    line-clamp:3;
  }

  .jp-home-lead__side,
  .jp-feature-list__side,
  .jp-wide-feature__side{gap:0}

  .jp-home-lead__side .jp-card--horizontal,
  .jp-feature-list__side .jp-card--horizontal,
  .jp-wide-feature__side .jp-card--compact{
    padding:12px 0;
    border-bottom:1px solid var(--jp-line);
  }
  .jp-home-lead__side .jp-card--horizontal:first-child,
  .jp-feature-list__side .jp-card--horizontal:first-child,
  .jp-wide-feature__side .jp-card--compact:first-child{padding-top:0}
  .jp-home-lead__side .jp-card--horizontal:last-child,
  .jp-feature-list__side .jp-card--horizontal:last-child,
  .jp-wide-feature__side .jp-card--compact:last-child{
    padding-bottom:0;
    border-bottom:0;
  }

  /* Home mobile hierarchy. */
  .jp-home .jp-section{padding-block:32px}
  .jp-home .jp-section--lead{padding-top:18px;padding-bottom:26px}
  .jp-home .jp-home-lead__grid,
  .jp-home .jp-feature-list,
  .jp-home .jp-wide-feature{gap:22px}
  .jp-home .jp-card--hero .jp-card__label{margin-top:10px}
  .jp-home .jp-card--hero .jp-card__title{
    font-size:24px;
    line-height:1.24;
    letter-spacing:-.025em;
  }
  .jp-home .jp-section-head{margin-bottom:16px;padding-top:16px}
  .jp-home .jp-section-head h2{font-size:22px;line-height:1.3}

  /* Now + Hotspots remain the two intentional swipe rails, but use a
     slightly smaller card width and hide browser scrollbars. */
  .jp-now__track,
  .jp-home-section--hotspots .jp-card-grid{
    grid-auto-columns:minmax(82vw,1fr);
    gap:14px;
    scrollbar-width:none;
  }
  .jp-now__track::-webkit-scrollbar,
  .jp-home-section--hotspots .jp-card-grid::-webkit-scrollbar{display:none}
  .jp-now__track .jp-card__title,
  .jp-home-section--hotspots .jp-card__title{font-size:16px;line-height:1.4}
  .jp-now__track .jp-card__excerpt{font-size:13px;line-height:1.5}

  /* Category: compact the editorial scale for an actual 360-390px CSS
     viewport while keeping clear hierarchy. */
  .jp-category-page .jp-page-head{padding:22px 0 18px}
  .jp-category-page .jp-page-head h1{
    font-size:30px;
    line-height:1.15;
    letter-spacing:-.03em;
  }
  .jp-category-page .jp-page-head__desc{font-size:14px;line-height:1.65}
  .jp-category-page .jp-category-feature{margin-bottom:28px}
  .jp-category-page .jp-category-feature .jp-card--feature .jp-card__title{
    font-size:22px;
    line-height:1.3;
  }
  .jp-category-page .jp-category-feature .jp-card--feature .jp-card__excerpt{
    font-size:13.5px;
    line-height:1.58;
  }
  .jp-category-page .jp-category-module{margin-bottom:30px}
  .jp-category-page .jp-category-module__head{padding-top:16px;margin-bottom:16px}
  .jp-category-page .jp-category-module__head h2{font-size:21px}

  /* Heritage/category compact rails: same one-split rule as Home. */
  .jp-category-page--heritage-culture .jp-category-module .jp-wide-feature__side .jp-card--compact{
    display:block;
    width:100%;
  }
  .jp-category-page--heritage-culture .jp-category-module .jp-wide-feature__side .jp-card__link{
    display:flex;
    grid-template-columns:none;
    width:100%;
    gap:12px;
    align-items:flex-start;
  }
  .jp-category-page--heritage-culture .jp-category-module .jp-wide-feature__side .jp-card__media{
    flex:0 0 92px;
    width:92px;
    min-width:92px;
  }
  .jp-category-page--heritage-culture .jp-category-module .jp-wide-feature__side .jp-card__body{
    flex:1 1 0;
    min-width:0;
  }

  /* Single: 34px was visually oversized on the actual Android capture. */
  .jp-single-page .jp-article-head{padding:22px 0 18px}
  .jp-single-page .jp-article-head h1{
    font-size:29px;
    line-height:1.2;
    letter-spacing:-.03em;
  }
  .jp-single-page .jp-article-head__lead{font-size:16px;line-height:1.65}
  .jp-single-page .jp-single__hero{margin-bottom:24px}
  .jp-single-page .jp-article{font-size:16.5px;line-height:1.78}
  .jp-single-page .jp-article h2{margin-top:40px;font-size:23px;line-height:1.35}
  .jp-single-page .jp-article h3{font-size:20px}
  .jp-single-page .jp-related{margin-top:44px}
}

@media (max-width:390px){
  .jp-container{padding-inline:15px}
  .jp-home .jp-card--hero .jp-card__title{font-size:23px}
  .jp-single-page .jp-article-head h1{font-size:28px}
  .jp-category-page .jp-page-head h1{font-size:29px}
  .jp-home-lead__side .jp-card--horizontal .jp-card__media,
  .jp-feature-list__side .jp-card--horizontal .jp-card__media{flex-basis:92px;width:92px;min-width:92px}
}

/* v0.4.8 KO screen freeze candidate
   - Make the two intentional mobile swipe rails discoverable without JS.
   - Heritage Editor's Pick consumes 1 lead + 4 side stories (PHP count).
   Desktop does not show swipe guidance. */
.jp-swipe-hint{display:none}

@media (max-width:767px){
  .jp-swipe-hint{
    display:block;
    margin:-8px 0 10px;
    text-align:right;
    color:var(--jp-muted);
    font-size:12px;
    line-height:1.4;
    font-weight:650;
    letter-spacing:-.01em;
  }

  /* Keep a deliberate next-card peek so the swipe cue has a visual match. */
  .jp-now__track,
  .jp-home-section--hotspots .jp-card-grid{
    grid-auto-columns:minmax(82vw,1fr);
    scroll-padding-inline:0 14px;
  }
}


/* v0.5.2 — desktop article rail + multilingual campaign inventory */
@media (min-width:1024px){
  .jp-single-page>.jp-container{max-width:1160px}
  .jp-single-page .jp-single-layout{display:grid;grid-template-columns:minmax(0,740px) minmax(260px,320px);gap:44px;align-items:start;justify-content:center}
  .jp-single-page .jp-single-main{min-width:0}
  .jp-single-page .jp-article-head{max-width:740px;padding-top:42px}
  .jp-single-page .jp-single__hero{max-width:740px;margin:0 0 38px}
  .jp-single-page .jp-article{max-width:740px;margin-left:0;margin-right:0}
  .jp-single-page .jp-single-rail{min-width:0;padding-top:42px;position:relative}
  .jp-single-page .jp-single-rail__related{border-top:1px solid var(--jp-line);padding-top:18px;margin-top:6px}
  .jp-single-page .jp-single-rail__head{font-size:16px;font-weight:800;line-height:1.35;margin-bottom:12px}
  .jp-single-page .jp-single-rail__list{display:grid;gap:0}
  .jp-single-page .jp-single-rail__story{display:grid;grid-template-columns:92px minmax(0,1fr);gap:11px;align-items:center;padding:12px 0;border-bottom:1px solid var(--jp-line);color:inherit;text-decoration:none}
  .jp-single-page .jp-single-rail__thumb{display:block;aspect-ratio:4/3;background:var(--jp-surface);overflow:hidden}
  .jp-single-page .jp-single-rail__thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .jp-single-page .jp-single-rail__story-title{font-size:14px;line-height:1.4;font-weight:750}
  .jp-single-page .jp-single-rail>.jp-slot{margin:0 0 26px;max-width:none}
  .jp-single-page .jp-single-rail .jp-slot__media{aspect-ratio:16/9}
  .jp-single-page .jp-single-rail .jp-slot__body{padding:8px 1px 0}
  .jp-single-page .jp-single-rail .jp-slot__title{font-size:14px}
  .jp-single-page .jp-article-footer{margin-left:0}
}
@media (max-width:1023px){
  .jp-single-page .jp-single-layout{display:block}
  .jp-single-page .jp-single-rail{max-width:740px;margin:28px auto 0}
  /* Bottom Related Stories is the canonical related block on tablet/mobile.
     Keep the rail's secondary related list desktop-only to avoid duplicate recommendations. */
  .jp-single-page .jp-single-rail__related{display:none}
  .jp-single-page .jp-single-rail__head{font-size:18px;font-weight:800;margin-bottom:10px}
  .jp-single-page .jp-single-rail__story{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--jp-line);color:inherit;text-decoration:none}
  .jp-single-page .jp-single-rail__thumb{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--jp-surface)}
  .jp-single-page .jp-single-rail__thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .jp-single-page .jp-single-rail__story-title{font-weight:750;line-height:1.4}
  .jp-single-page .jp-single-rail>.jp-slot{max-width:none;margin:24px 0}
}


/* v0.5.4 — full-row campaign slots use a compact 16:5 desktop visual + title.
   This keeps Home/Category campaign rows lower than surrounding editorial modules.
   Single article rail remains stacked because the rail itself is narrow.
   Mobile returns to image-above/title-below. */
@media (min-width:768px){
  .jp-home .jp-slot:not(.jp-single-rail .jp-slot) .jp-slot__link,
  .jp-category-page .jp-slot:not(.jp-single-rail .jp-slot) .jp-slot__link{
    display:grid;
    grid-template-columns:minmax(0,1.8fr) minmax(280px,.8fr);
    gap:28px;
    align-items:stretch;
  }
  .jp-home .jp-slot .jp-slot__media,
  .jp-category-page .jp-slot .jp-slot__media{
    aspect-ratio:16/5;
    min-height:0;
  }
  .jp-home .jp-slot .jp-slot__body,
  .jp-category-page .jp-slot .jp-slot__body{
    padding:0 4px;
    display:flex;
    align-items:center;
    min-width:0;
  }
  .jp-home .jp-slot .jp-slot__title,
  .jp-category-page .jp-slot .jp-slot__title{
    width:100%;
    font-size:clamp(17px,1.5vw,22px);
    line-height:1.42;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}
@media (max-width:767px){
  .jp-home .jp-slot__link,
  .jp-category-page .jp-slot__link{display:block}
  .jp-home .jp-slot__media,
  .jp-category-page .jp-slot__media{aspect-ratio:2/1}
  .jp-home .jp-slot__body,
  .jp-category-page .jp-slot__body{display:block;padding:9px 1px 0}
  .jp-home .jp-slot__title,
  .jp-category-page .jp-slot__title{font-size:15px}
}
.jp-slot__link--static{cursor:default}
.jp-slot__link--static:hover .jp-slot__title{text-decoration:none}

/* v0.5.8 — dynamic editorial-series landing */
.jp-series-page>.jp-container{max-width:1240px}
.jp-series-head{padding:54px 0 34px;border-bottom:1px solid var(--jp-line);margin-bottom:34px;max-width:920px}
.jp-series-head h1{font-size:clamp(36px,4.4vw,56px);line-height:1.1;letter-spacing:-.04em;margin:10px 0 0;color:var(--jp-navy)}
.jp-series-head__desc{max-width:760px;margin:16px 0 0;color:var(--jp-muted);font-size:16px;line-height:1.75}
.jp-series-grid{row-gap:42px}
.jp-series-banner{margin:-8px 0 34px;max-width:920px;aspect-ratio:16/5;overflow:hidden;border-radius:10px;background:var(--jp-surface)}
.jp-series-banner img{display:block;width:100%;height:100%;object-fit:cover}

.jp-card--series .jp-card__body{position:relative;padding-top:14px}
.jp-card__series-order{font-size:12px;font-weight:950;letter-spacing:.08em;color:var(--jp-blue);margin-bottom:7px}
.jp-card--series .jp-card__title{font-size:20px;line-height:1.42}
.jp-card--series .jp-card__excerpt{font-size:14px;line-height:1.65}
@media(max-width:767px){
  .jp-series-page>.jp-container{padding-inline:18px}
  .jp-series-head{padding:28px 0 22px;margin-bottom:26px}
  .jp-series-head h1{font-size:34px}
  .jp-series-head__desc{font-size:14px;line-height:1.65}
  .jp-series-grid{grid-template-columns:1fr;gap:30px}
  .jp-card--series .jp-card__title{font-size:20px}
}

/* v0.5.9 — campaign copy block: larger title + localized short description.
   Desktop keeps the shared image on the left and language-specific copy on the right.
   Mobile keeps image-above/copy-below so Desktop image fallback can be evaluated first. */
.jp-slot__description{margin-top:10px;color:var(--jp-muted);font-size:14px;line-height:1.65;overflow-wrap:anywhere}
@media (min-width:768px){
  .jp-home .jp-slot:not(.jp-single-rail .jp-slot) .jp-slot__link,
  .jp-category-page .jp-slot:not(.jp-single-rail .jp-slot) .jp-slot__link{
    grid-template-columns:minmax(0,1.85fr) minmax(300px,.85fr);
    gap:32px;
  }
  .jp-home .jp-slot .jp-slot__body,
  .jp-category-page .jp-slot .jp-slot__body{
    padding:18px 8px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
  }
  .jp-home .jp-slot .jp-slot__title,
  .jp-category-page .jp-slot .jp-slot__title{
    font-size:clamp(24px,2vw,31px);
    line-height:1.2;
    letter-spacing:-.025em;
    font-weight:850;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  .jp-home .jp-slot .jp-slot__description,
  .jp-category-page .jp-slot .jp-slot__description{
    margin-top:12px;
    max-width:34ch;
    font-size:15px;
    line-height:1.65;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
  }
  .jp-single-page .jp-single-rail .jp-slot__description{display:none}
}
@media (max-width:767px){
  .jp-home .jp-slot__title,
  .jp-category-page .jp-slot__title{font-size:18px;line-height:1.3;white-space:normal}
  .jp-home .jp-slot__description,
  .jp-category-page .jp-slot__description{margin-top:7px;font-size:13px;line-height:1.6;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  .jp-single-page .jp-slot__description{font-size:12px;line-height:1.55;margin-top:6px}
}


/* v0.6.3 — Editorial Series Hub */
.jp-series-hub-page>.jp-container{max-width:1240px}
.jp-series-hub-head{padding:54px 0 24px;max-width:900px}
.jp-series-hub-head h1{font-size:clamp(36px,4.4vw,56px);line-height:1.08;letter-spacing:-.04em;margin:10px 0 0;color:var(--jp-navy)}
.jp-series-hub-head p{max-width:720px;margin:15px 0 0;color:var(--jp-muted);font-size:16px;line-height:1.7}
.jp-series-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:18px 0 28px;border-top:1px solid var(--jp-line)}
.jp-series-filters a{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border:1px solid var(--jp-line);border-radius:999px;text-decoration:none;color:var(--jp-ink);font-size:13px;font-weight:800;background:#fff}
.jp-series-filters a span{font-size:10px;color:var(--jp-muted);font-weight:850}
.jp-series-filters a:hover,.jp-series-filters a.is-current{background:var(--jp-navy);border-color:var(--jp-navy);color:#fff}
.jp-series-filters a.is-current span,.jp-series-filters a:hover span{color:rgba(255,255,255,.72)}
.jp-series-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 24px;padding-bottom:34px}
.jp-series-hub-card{min-width:0}
.jp-series-hub-card__link{display:block;text-decoration:none;color:inherit}
.jp-series-hub-card__media{aspect-ratio:16/5;overflow:hidden;background:var(--jp-surface);border-radius:8px}
.jp-series-hub-card__img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.jp-series-hub-card__link:hover .jp-series-hub-card__img{transform:scale(1.015)}
.jp-series-hub-card__body{padding-top:14px}
.jp-series-hub-card__meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--jp-blue);font-size:12px;font-weight:800}
.jp-series-hub-card__meta span+span:before{content:'·';margin-right:8px;color:var(--jp-muted)}
.jp-series-hub-card h2{margin:7px 0 0;font-size:24px;line-height:1.25;letter-spacing:-.025em;color:var(--jp-navy)}
.jp-series-hub-card__latest{margin:9px 0 0;color:var(--jp-muted);font-size:13px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jp-series-hub-card__latest strong{color:var(--jp-ink);font-weight:800;margin-right:4px}
@media(max-width:980px){.jp-series-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.jp-series-banner{margin:-4px 0 26px;border-radius:8px}.jp-series-menu-link{display:none}.jp-series-hub-page>.jp-container{padding-inline:18px}.jp-series-hub-head{padding:28px 0 20px}.jp-series-hub-head h1{font-size:34px}.jp-series-hub-head p{font-size:14px;line-height:1.65}.jp-series-filters{padding:14px 0 22px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.jp-series-filters::-webkit-scrollbar{display:none}.jp-series-filters a{flex:0 0 auto}.jp-series-hub-grid{grid-template-columns:1fr;gap:30px}.jp-series-hub-card h2{font-size:24px}}