/* ==========================================================
   Dictionary Category Hub
   Single-column category layout with solid surfaces and
   compact discovery cards.
   ========================================================== */
#jp_category_main { --jp-cat-ink: #1a1d1b; --jp-cat-text: #333333; --jp-cat-muted: #666666; --jp-cat-border: #d8ded7; --jp-cat-panel: #fafbf8; --jp-cat-panel-soft: #f3f7f1; --jp-cat-accent: #0a4f24; --jp-cat-accent-soft: #e9f3eb; --jp-cat-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); --jp-cat-radius: 12px; background: transparent; color: var(--jp-cat-text); font-family: var(--jp-font-ui, "Plus Jakarta Sans", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif); -webkit-font-smoothing: antialiased; padding: 1rem 0 3rem; overflow-x: hidden; }
#jp_category_main, #jp_category_main * { box-sizing: border-box; }
#jp_category_main .jp-inner, #jp_category_main .jp-category-shell, #jp_category_main .jp-category-page__ad { width: min(1070px, calc(100% - 2rem)); margin-left: auto; margin-right: auto; }
#jp_category_main .jp-category-shell { display: grid; gap: 1.15rem; padding-bottom: 0.25rem; min-width: 0; }
#jp_category_main .jp-category-section, #jp_category_main .jp-category-media-card, #jp_category_main .jp-category-featured { min-width: 0; }
#jp_category_main .jp-category-page__ad--bottom { margin-top: 1rem; }
/* ==========================================================
   Hero
   ========================================================== */
#jp_category_main .jp-category-hero { display: grid; gap: .7rem; padding: .15rem 0 .2rem; text-align: center; }
#jp_category_main .jp-category-crumbs { display: flex; justify-content: center; }
#jp_category_main .jp-category-crumbs nav { color: var(--jp-cat-muted); font-size: .82rem; }
#jp_category_main .jp-category-crumbs a { color: var(--jp-green); text-decoration: none; }
#jp_category_main .jp-category-crumbs a:hover { color: var(--jp-green-dark); text-decoration: underline; }
#jp_category_main .jp-category-kicker, #jp_category_main .jp-category-section-kicker { display: inline-flex; align-items: center; width: fit-content; margin: 0 auto; padding: .28rem .7rem; border-radius: 999px; background: var(--jp-cat-accent-soft); color: var(--jp-green-dark); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
#jp_category_main .jp-category-hero h1 { margin: 0; color: var(--jp-cat-ink); font-family: var(--jp-font-display, "Montserrat", "Plus Jakarta Sans", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 900; letter-spacing: -.04em; line-height: 1.05; }
#jp_category_main .jp-category-hero h1 em { color: var(--jp-green-dark); font-style: normal; }
#jp_category_main .jp-category-summary { max-width: 52rem; margin: 0 auto; color: var(--jp-cat-muted); font-size: 1rem; line-height: 1.7; }
#jp_category_main .jp-category-meta { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; width: fit-content; margin: 0 auto; padding: 0; border-radius: 0; background: transparent; color: #999; font-size: .84rem; font-weight: 700; }
#jp_category_main .jp-category-meta strong { color: inherit; font-weight: 700; }
#jp_category_main .jp-category-featured__card, #jp_category_main .jp-category-featured__list a, #jp_category_main .jp-category-article-card a, #jp_category_main .jp-category-quiz-card a, #jp_category_main .jp-category-category-card { font-family: var(--jp-font-ui, "Plus Jakarta Sans", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif); }
/* ==========================================================
   Trending
   ========================================================== */
#jp_category_main .jp-category-featured { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(270px, .85fr); gap: 1rem; padding: 1rem; border: 1px solid #1f6a3f; border-radius: var(--jp-cat-radius); background: #0a4f24; box-shadow: var(--jp-cat-shadow); color: #fff; }
#jp_category_main .jp-category-featured__lead { display: grid; gap: .85rem; }
#jp_category_main .jp-category-featured__card { display: grid; gap: .75rem; padding: 1.2rem; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--jp-cat-radius); background: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none; }
#jp_category_main .jp-category-featured__card:hover { border-color: rgba(255, 255, 255, 0.18); text-decoration: none; }
#jp_category_main .jp-category-featured__label { display: inline-flex; align-items: center; width: fit-content; padding: .28rem .68rem; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
#jp_category_main .jp-category-featured__card h2 { margin: 0; font-family: var(--jp-font-display, "Montserrat", "Plus Jakarta Sans", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif); font-size: clamp(1.75rem, 3vw, 2.7rem); font-weight: 900; letter-spacing: -.04em; line-height: 1.06; }
#jp_category_main .jp-category-featured__card p { margin: 0; color: rgba(255, 255, 255, 0.86); font-size: .95rem; font-weight: 800; }
#jp_category_main .jp-category-featured__list { padding: 1rem; border: 1px solid #dce5de; border-radius: var(--jp-cat-radius); background: #f7faf4; color: var(--jp-cat-ink); }
#jp_category_main .jp-category-featured__list-label { margin: 0 0 .75rem; color: var(--jp-cat-muted); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
#jp_category_main .jp-category-featured__list ol { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
#jp_category_main .jp-category-featured__list a { display: flex; gap: .6rem; align-items: flex-start; padding: .72rem .8rem; border: 1px solid #e3e9e3; border-radius: 10px; background: #fff; color: var(--jp-cat-ink); text-decoration: none; }
#jp_category_main .jp-category-featured__list a:hover { border-color: #cfd8cf; text-decoration: none; }
#jp_category_main .jp-category-featured__list a span { color: var(--jp-green); font-weight: 800; }
/* ==========================================================
   Shared Section Shell
   ========================================================== */
#jp_category_main .jp-category-section, #jp_category_main .jp-category-media-card { padding: 1rem; border: 1px solid var(--jp-cat-border); border-radius: var(--jp-cat-radius); background: var(--jp-cat-panel); box-shadow: var(--jp-cat-shadow); }
#jp_category_main .jp-category-section__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .95rem; }
#jp_category_main .jp-category-section__head h2 { display: inline-flex; align-items: center; width: fit-content; margin: 0; padding: .32rem .75rem; border-radius: 999px; background: var(--jp-cat-accent-soft); color: var(--jp-green-dark); font-family: var(--jp-font-display, "Montserrat", "Plus Jakarta Sans", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif); font-size: .76rem; font-weight: 800; letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
#jp_category_main .jp-category-link { color: var(--jp-green); font-size: .82rem; font-weight: 800; text-decoration: none; }
#jp_category_main .jp-category-link:hover { color: var(--jp-green-dark); text-decoration: underline; }
#jp_category_main .jp-category-section__footer { display: flex; justify-content: flex-end; margin-top: .95rem; }
/* ==========================================================
   Latest Words
   ========================================================== */
#jp_category_main .jp-category-word-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
#jp_category_main .words-preview .item { width: auto; margin: 0; border: 1px solid #e1e7df; border-radius: var(--jp-cat-radius); overflow: hidden; background: #fff; box-shadow: var(--jp-cat-shadow); }
#jp_category_main .words-preview .item a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: .9rem; height: 100%; color: inherit; text-decoration: none; }
#jp_category_main .words-preview .item.jp-category-word-card--no-media a { grid-template-columns: minmax(0, 1fr); }
#jp_category_main .jp-category-word-card__media { display: block; aspect-ratio: 1 / 1; background: #edf2ec; }
#jp_category_main .jp-category-word-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
#jp_category_main .jp-category-word-card__body { display: grid; gap: .35rem; padding: .95rem .95rem .95rem 0; align-content: start; }
#jp_category_main .words-preview .item.jp-category-word-card--no-media a { display: block; width: 100%; }
#jp_category_main .words-preview .item.jp-category-word-card--no-media .jp-category-word-card__body { display: block; width: 100%; min-width: 0; padding: .95rem; }
#jp_category_main .words-preview .item .text-sec h5 { margin: 0; color: var(--jp-cat-ink); font-family: var(--jp-font-display, "Montserrat", "Plus Jakarta Sans", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif); font-size: 1rem; font-weight: 900; line-height: 1.2; }
#jp_category_main .words-preview .item .text-sec p { margin: .5em 0 0; color: var(--jp-cat-muted); font-size: .86rem; line-height: 1.5; }
#jp_category_main .words-preview .item .text-sec p em { display: block; margin: 0 0 .2rem; color: var(--jp-green-dark); font-size: .72rem; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
#jp_category_main .words-preview .item span.link { display: block; margin-top: .1rem; padding: 0; background: transparent; color: var(--jp-green); font-size: .78rem; font-weight: 800; text-align: right; }
#jp_category_main .words-preview .item:hover { border-color: #cfd8cf; text-decoration: none; }
#jp_category_main .jp-category-empty { margin: 0; padding: 1rem; border: 1px dashed #ccd7cd; border-radius: var(--jp-cat-radius); background: #fff; color: var(--jp-cat-muted); }
/* ==========================================================
   Video
   ========================================================== */
#jp_category_main .jp-category-media-card--video { display: grid; gap: .95rem; background: #1a1d1b; border-color: rgba(255, 255, 255, 0.08); color: #fff; }
#jp_category_main .jp-category-media-card--video .jp-category-link, #jp_category_main .jp-category-media-card--video .jp-category-section-kicker { color: #fff; }
#jp_category_main .jp-category-media-card--video .jp-category-link:hover { color: #fff; }
#jp_category_main .jp-category-video-embed { aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--jp-cat-radius); background: #000; }
#jp_category_main .jp-category-video-embed youtube-embed { display: block; width: 100%; height: 100%; }
/* ==========================================================
   Articles
   ========================================================== */
#jp_category_main .jp-category-media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
#jp_category_main .jp-category-article-card { overflow: hidden; border: 1px solid var(--jp-cat-border); border-radius: var(--jp-cat-radius); background: #fff; box-shadow: var(--jp-cat-shadow); }
#jp_category_main .jp-category-article-card a { display: grid; color: inherit; text-decoration: none; }
#jp_category_main .jp-category-article-card__media { aspect-ratio: 16 / 10; background: #edf2ec; }
#jp_category_main .jp-category-article-card__media--empty { background: linear-gradient(180deg, #f4f7f3 0%, #e9f0e8 100%); }
#jp_category_main .jp-category-article-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
#jp_category_main .jp-category-article-card__body { display: grid; gap: .35rem; padding: .95rem; align-content: start; }
#jp_category_main .jp-category-article-card__body strong { color: var(--jp-cat-ink); font-family: var(--jp-font-display, "Montserrat", "Plus Jakarta Sans", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif); font-size: 1rem; font-weight: 900; line-height: 1.25; }
#jp_category_main .jp-category-article-card__body p { margin: 0; color: var(--jp-cat-muted); font-size: .84rem; line-height: 1.55; }
#jp_category_main .jp-category-article-card__body span { color: var(--jp-green); font-size: .78rem; font-weight: 800; }
/* ==========================================================
   Quizzes
   ========================================================== */
#jp_category_main .jp-category-quiz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
#jp_category_main .jp-category-quiz-card { overflow: hidden; border: 1px solid var(--jp-cat-border); border-radius: var(--jp-cat-radius); background: #fff; box-shadow: var(--jp-cat-shadow); }
#jp_category_main .jp-category-quiz-card a { display: grid; color: inherit; text-decoration: none; }
#jp_category_main .jp-category-quiz-card__media { aspect-ratio: 16 / 10; background: #edf2ec; }
#jp_category_main .jp-category-quiz-card__media--empty { background: linear-gradient(180deg, #f4f7f3 0%, #e9f0e8 100%); }
#jp_category_main .jp-category-quiz-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
#jp_category_main .jp-category-quiz-card__body { display: grid; gap: .35rem; padding: .95rem; align-content: start; }
#jp_category_main .jp-category-quiz-card__body strong { color: var(--jp-cat-ink); font-family: var(--jp-font-display, "Montserrat", "Plus Jakarta Sans", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif); font-size: 1rem; font-weight: 900; line-height: 1.25; }
#jp_category_main .jp-category-quiz-card__body p { margin: 0; color: var(--jp-cat-muted); font-size: .84rem; line-height: 1.55; }
#jp_category_main .jp-category-quiz-card__body span { color: var(--jp-green); font-size: .78rem; font-weight: 800; }
/* ==========================================================
   Browse Categories
   ========================================================== */
#jp_category_main .jp-category-section--browse { background: #f7faf4; border-color: #dce5de; color: var(--jp-cat-ink); }
#jp_category_main .jp-category-section--browse .jp-category-link, #jp_category_main .jp-category-section--browse .jp-category-section-kicker { color: var(--jp-green-dark); }
#jp_category_main .jp-category-section--browse .jp-category-link:hover { color: var(--jp-green); }
#jp_category_main .jp-category-category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; width: 100%; max-width: 100%; min-width: 0; }
#jp_category_main .jp-category-category-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e0e6e0; border-radius: var(--jp-cat-radius); background: #fff; color: var(--jp-cat-ink); text-decoration: none; box-shadow: var(--jp-cat-shadow); }
#jp_category_main .jp-category-category-card__media { aspect-ratio: 1 / 1; background: #edf2ec; }
#jp_category_main .jp-category-category-card__media--empty { background: linear-gradient(180deg, #f4f7f3 0%, #e9f0e8 100%); }
#jp_category_main .jp-category-category-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
#jp_category_main .jp-category-category-card__body { display: grid; gap: .25rem; padding: .8rem; }
#jp_category_main .jp-category-category-card__body strong { font-family: var(--jp-font-display, "Montserrat", "Plus Jakarta Sans", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif); font-size: .95rem; font-weight: 900; line-height: 1.2; }
#jp_category_main .jp-category-category-card__body span { color: var(--jp-cat-muted); font-size: .78rem; }
/* ==========================================================
   Responsive
   ========================================================== */
@media screen and (max-width: 900px) {
  #jp_category_main .jp-category-featured, #jp_category_main .jp-category-media-grid, #jp_category_main .jp-category-quiz-grid, #jp_category_main .jp-category-word-grid {
    grid-template-columns: 1fr;
  }
  #jp_category_main .jp-category-section__head {
    align-items: flex-start;
    flex-direction: column;
  }
  #jp_category_main .jp-category-article-card, #jp_category_main .jp-category-quiz-card, #jp_category_main .words-preview .item {
    width: 100%;
  }
}
@media screen and (max-width: 600px) {
  #jp_category_main {
    padding-top: .75rem;
  }
  #jp_category_main .jp-inner, #jp_category_main .jp-category-shell, #jp_category_main .jp-category-page__ad {
    width: min(1070px, calc(100% - 1.25rem));
  }
  #jp_category_main .jp-category-hero h1 {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }
  #jp_category_main .jp-category-word-grid, #jp_category_main .jp-category-media-grid, #jp_category_main .jp-category-quiz-grid {
    grid-template-columns: 1fr;
  }
  #jp_category_main .words-preview .item a {
    grid-template-columns: 88px minmax(0, 1fr);
  }
  #jp_category_main .words-preview .item .text-sec {
    padding-right: .9rem;
  }
  #jp_category_main .jp-category-featured__card {
    padding: 1rem;
  }
  #jp_category_main .jp-category-category-grid {
    grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  }
}