/* ==========================================================
   Phrasebook Hub
   Modern landing page styling that matches the redesigned
   dictionary category system.
   ========================================================== */
#browse-dictionary { --jp-ph-ink: #1a1d1b; --jp-ph-text: #333333; --jp-ph-muted: #666666; --jp-ph-border: #d8ded7; --jp-ph-panel: #fafbf8; --jp-ph-panel-soft: #f4f7f2; --jp-ph-accent: #0a4f24; --jp-ph-accent-soft: #e9f3eb; --jp-ph-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); --jp-ph-radius: 12px; background: transparent; color: var(--jp-ph-text); font-family: var(--jp-font-ui, "Plus Jakarta Sans", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif); -webkit-font-smoothing: antialiased; overflow-x: hidden; padding: 1rem 0 3rem; }
#browse-dictionary, #browse-dictionary * { box-sizing: border-box; }
#browse-dictionary .jp-inner, #browse-dictionary .jp-phrasebook-shell, #browse-dictionary .jp-phrasebook-page__ad { width: min(1070px, calc(100% - 2rem)); margin-left: auto; margin-right: auto; }
#browse-dictionary .jp-phrasebook-shell { display: grid; gap: 1.15rem; min-width: 0; }
#browse-dictionary .jp-phrasebook-page__ad--bottom { margin-top: 1rem; }
/* ==========================================================
   Hero
   ========================================================== */
#browse-dictionary .jp-phrasebook-hero { display: grid; gap: .7rem; padding: .1rem 0 0; text-align: center; }
#browse-dictionary .jp-phrasebook-hero h1 { margin: 0; color: var(--jp-ph-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; }
#browse-dictionary .jp-phrasebook-summary { max-width: 52rem; margin: 0 auto; color: var(--jp-ph-muted); font-size: 1rem; line-height: 1.7; }
#browse-dictionary .jp-phrasebook-meta { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; width: fit-content; margin: 0 auto; color: #999; font-size: .84rem; font-weight: 700; }
#browse-dictionary .jp-phrasebook-meta strong { color: inherit; font-weight: 700; }
/* ==========================================================
   Featured Category
   ========================================================== */
#browse-dictionary .jp-phrasebook-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-ph-radius); background: #0a4f24; box-shadow: var(--jp-ph-shadow); color: #fff; }
#browse-dictionary .jp-phrasebook-featured__lead { display: grid; gap: .85rem; }
#browse-dictionary .jp-phrasebook-featured__card { display: grid; gap: .75rem; padding: 1.2rem; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--jp-ph-radius); background: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none; }
#browse-dictionary .jp-phrasebook-featured__card:hover { border-color: rgba(255, 255, 255, 0.18); text-decoration: none; }
#browse-dictionary .jp-phrasebook-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; }
#browse-dictionary .jp-phrasebook-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; }
#browse-dictionary .jp-phrasebook-featured__card p { margin: 0; color: rgba(255, 255, 255, 0.86); font-size: .95rem; font-weight: 800; }
#browse-dictionary .jp-phrasebook-featured__list { padding: 1rem; border: 1px solid #dce5de; border-radius: var(--jp-ph-radius); background: #f7faf4; color: var(--jp-ph-ink); }
#browse-dictionary .jp-phrasebook-featured__list-label { margin: 0 0 .75rem; color: var(--jp-ph-muted); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
#browse-dictionary .jp-phrasebook-featured__list ol { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
#browse-dictionary .jp-phrasebook-featured__list a { display: flex; align-items: flex-start; gap: .6rem; padding: .72rem .8rem; border: 1px solid #e3e9e3; border-radius: 10px; background: #fff; color: var(--jp-ph-ink); text-decoration: none; }
#browse-dictionary .jp-phrasebook-featured__list a:hover { border-color: #cfd8cf; text-decoration: none; }
/* ==========================================================
   Category Grid
   ========================================================== */
#browse-dictionary .jp-phrasebook-section { padding: 1rem; border: 1px solid var(--jp-ph-border); border-radius: var(--jp-ph-radius); background: var(--jp-ph-panel); box-shadow: var(--jp-ph-shadow); min-width: 0; }
#browse-dictionary .jp-phrasebook-section__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .95rem; }
#browse-dictionary .jp-phrasebook-section__head h2 { display: inline-flex; align-items: center; width: fit-content; margin: 0; padding: .32rem .75rem; border-radius: 999px; background: var(--jp-ph-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; }
#browse-dictionary .jp-phrasebook-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
#browse-dictionary .jp-phrasebook-category-card { overflow: hidden; margin: 0; border: 1px solid #e1e7df; border-radius: var(--jp-ph-radius); background: #fff; box-shadow: var(--jp-ph-shadow); }
#browse-dictionary .jp-phrasebook-category-card a { display: grid; gap: .75rem; padding: .9rem; justify-items: stretch; color: inherit; text-decoration: none; }
#browse-dictionary .jp-phrasebook-category-card__media { display: block; width: min(160px, 100%); aspect-ratio: 1 / 1; margin: 0 auto; border-radius: 16px; background: #edf2ec; overflow: hidden; }
#browse-dictionary .jp-phrasebook-category-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
#browse-dictionary .jp-phrasebook-category-card__body { display: grid; gap: .35rem; padding: 0 .1rem .05rem; align-content: start; }
#browse-dictionary .jp-phrasebook-category-card__body strong { color: var(--jp-ph-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; }
#browse-dictionary .jp-phrasebook-category-card__body span { color: var(--jp-ph-muted); font-size: .84rem; line-height: 1.45; }
#browse-dictionary .jp-phrasebook-category-card:hover { border-color: #cfd8cf; text-decoration: none; transform: translateY(-1px); }
#browse-dictionary .jp-phrasebook-load-more { display: grid; justify-items: center; gap: .45rem; margin-top: .9rem; }
#browse-dictionary .jp-phrasebook-load-more-error { display: none; margin: 0; color: #9a4b4b; font-size: .82rem; text-align: center; }
#browse-dictionary .jp-phrasebook-load-more .loading { display: none; width: 32px; margin: .2rem auto 0; }
#browse-dictionary .jp-phrasebook-load-more a.load-more { display: inline-flex; align-items: center; justify-content: center; min-width: 9rem; padding: .7rem 1.05rem; border-radius: 12px; background: var(--jp-green); color: #fff; font-size: .8rem; font-weight: 800; text-align: center; text-decoration: none; }
#browse-dictionary .jp-phrasebook-load-more a.load-more:hover { background: var(--jp-button-hover-blue); color: #fff; text-decoration: none; }
#browse-dictionary .jp-phrasebook-empty { margin: 0; padding: 1rem; border: 1px dashed #ccd7cd; border-radius: var(--jp-ph-radius); background: #fff; color: var(--jp-ph-muted); }
/* ==========================================================
   Support Stack
   ========================================================== */
#browse-dictionary .jp-phrasebook-support-stack { display: grid; gap: 1rem; margin-top: .15rem; }
#browse-dictionary .jp-phrasebook-support-stack .jp-bundle-tier { order: -1; }
#browse-dictionary .jp-phrasebook-support-card { display: grid; gap: .9rem; padding: 1rem; border: 1px solid var(--jp-ph-border); border-radius: var(--jp-ph-radius); background: var(--jp-ph-panel); box-shadow: var(--jp-ph-shadow); min-width: 0; }
#browse-dictionary .jp-phrasebook-support-card__head h2 { display: inline-flex; align-items: center; width: fit-content; margin: 0; padding: .32rem .75rem; border-radius: 999px; background: var(--jp-ph-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; }
#browse-dictionary .jp-phrasebook-support-card__copy { margin: 0; color: var(--jp-ph-muted); font-size: .92rem; line-height: 1.6; }
#browse-dictionary .jp-phrasebook-newsletter-shell { min-width: 0; }
#browse-dictionary .jp-phrasebook-letter-list { display: flex; gap: .45rem; flex-wrap: wrap; }
#browse-dictionary .jp-phrasebook-letter-list a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem; padding: .42rem .7rem; border: 1px solid #d8ded7; border-radius: 12px; background: #fff; color: var(--jp-ph-ink); font-size: .8rem; font-weight: 800; text-decoration: none; }
#browse-dictionary .jp-phrasebook-letter-list a:hover { border-color: #cfd8cf; color: var(--jp-green-dark); text-decoration: none; }
/* ==========================================================
   Responsive
   ========================================================== */
@media screen and (max-width: 900px) {
  #browse-dictionary .jp-phrasebook-featured, #browse-dictionary .jp-phrasebook-category-grid {
    grid-template-columns: 1fr;
  }
  #browse-dictionary .jp-phrasebook-section__head {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media screen and (max-width: 600px) {
  #browse-dictionary {
    padding-top: .75rem;
  }
  #browse-dictionary .jp-inner, #browse-dictionary .jp-phrasebook-shell, #browse-dictionary .jp-phrasebook-page__ad {
    width: min(1070px, calc(100% - 1.25rem));
  }
  #browse-dictionary .jp-phrasebook-hero h1 {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }
  #browse-dictionary .jp-phrasebook-featured__card {
    padding: 1rem;
  }
  #browse-dictionary .jp-phrasebook-category-grid {
    grid-template-columns: 1fr;
  }
  #browse-dictionary .jp-phrasebook-category-card a {
    justify-items: center;
  }
}