/* ============================================================
   ClariMoney — scroll rows + hub "start here" blocks
   Loaded after calculators.css on the /calculators hub.
   ============================================================ */

/* ── scroll row (arrows + fades) ── */
.sr { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; }
.sr-viewport { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.sr-track { display: flex; align-items: center; gap: 10px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.sr-track::-webkit-scrollbar { display: none; }
.sr-track.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.sr-track.is-dragging a { pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .sr.is-scrollable .sr-track { cursor: grab; } }

.sr-viewport::before, .sr-viewport::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 36px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .18s;
}
.sr-viewport::before { left: 0;  background: linear-gradient(90deg, #fff 20%, rgba(255,255,255,0)); }
.sr-viewport::after  { right: 0; background: linear-gradient(270deg, #fff 20%, rgba(255,255,255,0)); }
.sr-viewport.has-left::before, .sr-viewport.has-right::after { opacity: 1; }

.sr-btn {
  display: none; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(15,43,92,.16); background: #fff; color: #0F2B5C; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(15,43,92,.1); cursor: pointer; transition: background .15s, opacity .15s, transform .15s;
}
.sr-btn:hover:not(:disabled) { background: #E9F0FA; transform: scale(1.06); }
.sr-btn:disabled { opacity: .3; cursor: default; box-shadow: none; }
.sr-btn:focus-visible { outline: 2px solid #0284C7; outline-offset: 2px; }
/* arrows are for mouse users; touch users swipe */
@media (hover: hover) and (pointer: fine) { .sr.is-scrollable .sr-btn { display: inline-flex; } }

/* make the chips comfortable to hit */
.mp-chip { min-height: 38px; padding: 8px 16px; font-size: .82rem; }
.fb-btn { min-height: 38px; }

/* the sticky category bar must sit BELOW the sticky site header */
.fb { top: var(--header-h, 68px); }

/* ── "Pick up where you left off" ── */
.rc-bar { background: #FFFBF2; border-bottom: 1px solid rgba(201,125,16,.18); }
.rc-bar[hidden] { display: none; }
.rc-inner { display: flex; align-items: center; gap: 14px; padding: 10px 0; flex-wrap: wrap; }
.rc-label { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: #C97D10; }
.rc-list { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid rgba(201,125,16,.3); font-size: .82rem; font-weight: 600; color: #0F2B5C; transition: border-color .15s, transform .15s; }
.rc-chip:hover { border-color: #C97D10; transform: translateY(-1px); }
.rc-chip svg { width: 15px; height: 15px; color: #C97D10; }

/* ── Start here: goal cards ── */
.gl-sec { background: #fff; padding: 26px 0 22px; border-bottom: 1px solid rgba(15,43,92,.09); scroll-margin-top: calc(var(--header-h, 68px) + 8px); }
.gl-head h2 { font-size: 1.25rem; font-weight: 700; color: #0F2B5C; letter-spacing: -.01em; }
.gl-head p { font-size: .9rem; color: #718096; margin: 4px 0 16px; }
.gl-grid { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.gl-card {
  display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 16px; border-radius: 16px;
  background: #F5F7FB; border: 1.5px solid transparent; color: #1A202C; text-decoration: none;
  transition: transform .18s, border-color .18s, background .18s, box-shadow .18s;
}
.gl-card:hover { transform: translateY(-3px); background: #fff; border-color: #1E4A7A; box-shadow: 0 12px 24px -12px rgba(15,43,92,.3); }
.gl-card:focus-visible { outline: 2px solid #0284C7; outline-offset: 2px; }
.gl-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #0F2B5C; color: #fff; }
.gl-txt { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.gl-txt strong { font-size: 1rem; font-weight: 700; color: #0F2B5C; }
.gl-txt small { font-size: .8rem; color: #718096; line-height: 1.4; }
.gl-count { font-size: .72rem; font-weight: 700; color: #0284C7; }
@media (max-width: 1000px) { .gl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .gl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gl-card { padding: 14px; }
  .gl-grid li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ── "Popular" badge: a small star on the card icon (never inside the category pill) ── */
.pc-ico { position: relative; overflow: visible; }
.pc-hot {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: .68rem; line-height: 1; font-weight: 700;
  color: #0F2B5C; background: #F8B042; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(15,43,92,.2);
}

/* ── Card header must never overflow on small screens ── */
.pc-top { min-width: 0; }
.pc-usecase { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-foot { gap: 8px; min-width: 0; }
.pc-tag { flex-shrink: 0; }
@media (max-width: 480px) {
  .pc { padding: 1.25rem 1.1rem 1.1rem; }
  .pc-ico { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) { .sr-track { scroll-behavior: auto; } .gl-card, .rc-chip, .sr-btn { transition: none; } }