/*
 * Promo codes hub (/prop-firm-promo-codes/, inc/promo-hub.php). Lays out the
 * firm profile components and the /futures/ code cards (fh-deal, pf-code in
 * firm-profile.css) with ph- classes and the UI kit tokens. Approved mockup:
 * /mnt/project-files/promo-hub-2026-11/ (10 November 2026).
 */
.ph-page [hidden] { display: none !important; }
.ph-page .pf-title { text-wrap: balance; }
.ph-page .pf-intro { text-wrap: pretty; }

/* A firm with no logo shows its initials. */
.ph-mono,
.fh-deal__firm > .ph-mono { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-10); background: var(--ink); color: var(--white); font-family: var(--font-display); font-size: 15px; font-weight: 700; }

/* Ending soon, in the offer card slot */
.ph-page .ph-side__title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.ph-soon__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ph-soon__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.08)); }
.ph-soon__row:first-child { padding-top: 0; }
.ph-soon__firm { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); text-decoration: none; }
.ph-soon__firm img,
.ph-soon__firm .ph-mono { width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; background: var(--white); object-fit: contain; }
.ph-soon__firm .ph-mono { background: var(--ink); font-size: 13px; }
.ph-soon__firm > span { display: flex; flex-direction: column; min-width: 0; }
.ph-soon__firm b { font-size: 16px; line-height: 20px; }
.ph-soon__firm > span > span { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.ph-soon__firm:hover b { text-decoration: underline; }
.ph-soon__when { flex-shrink: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-2); }
.ph-soon__when.is-today { color: var(--orange); }

/* Our codes */
.ph-ours { align-self: flex-start; }

/* Filters and search */
.ph-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.ph-search input { width: 240px; height: 44px; padding: 0 16px; border: 1px solid var(--line, rgba(0, 0, 0, 0.12)); border-radius: 999px; background: var(--white); color: var(--ink); font: inherit; font-size: 15px; }
.ph-search input:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.ph-empty { margin: 8px 0 0; color: var(--ink-2); }

/* How to */
.ph-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ph-how__item { display: flex; gap: 14px; padding: 24px; }
.ph-how__n { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 700; }
.ph-page .ph-how h3 { margin: 2px 0 6px; color: var(--ink); font-family: var(--font-display); font-size: 18px; line-height: 24px; }
.ph-how p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 21px; }
.ph-sales { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1023px) {
  .ph-how,
  .ph-sales { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .ph-bar .spf-pill-tabs { flex-wrap: nowrap; width: 100%; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
  .ph-bar .spf-pill-tab { flex-shrink: 0; }
  .ph-search,
  .ph-search input { width: 100%; }
  .ph-how__item { padding: 20px; }
}

/* Dark mode (kept here, so tools/dark-css.mjs needs no rebuild) */
html[data-theme="dark"] .ph-mono,
html[data-theme="dark"] .ph-soon__firm .ph-mono { background: var(--orange); color: #fff; }
html[data-theme="dark"] .ph-soon__firm { color: var(--ink); }
html[data-theme="dark"] .ph-soon__firm img { background: var(--white); }
html[data-theme="dark"] .ph-search input { background: var(--surface-card); color: var(--ink); border-color: var(--line, rgba(255, 255, 255, 0.16)); }