/* T159: the calmer catalog. Compact scholarship cards (catalog + homepage), the category tiles,
   the category page, the live-only toggle and the sticky chip row on phones.
   Tokens come from app.css (:root); app.css itself is not edited. */

/* ---- compact card --------------------------------------------------------- */
.sc-grid { gap: 14px; }
.card.sc-card {
  gap: 5px; padding: 12px 14px; border-radius: var(--radius); min-height: 0;
}
a.card.sc-card { min-height: 0; }
a.card.sc-card:hover { transform: translateY(-2px); }
.sc-card h3 {
  margin: 2px 0 0; font-size: 1.02rem; line-height: 1.32;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-card .provider {
  font-size: .82rem; line-height: 1.45;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* At most 3 facts on one line: the date state, the amount, volunteering. */
.card-facts { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.card-facts > span {
  flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: .76rem; line-height: 1.4; padding: 2px 8px; border-radius: 999px;
}
.card-facts .date-pill { font-weight: 600; flex-shrink: 0; }
.card-facts .amount-badge { font-size: .78rem; padding: 2px 8px; flex-shrink: 0; }
.vol-fact { background: #f1eef4; color: var(--muted); font-weight: 500; }
.vol-fact.free { background: var(--ok-bg); color: #1f6f4d; font-weight: 600; }

/* A card the chat can file: a violet start-side border on a light violet card. */
.card.chat-card {
  background: var(--lilac-2); border-color: rgba(106, 79, 194, 0.22);
  border-inline-start: 4px solid var(--violet);
}
a.card.chat-card:hover { border-color: rgba(106, 79, 194, 0.4); border-inline-start-color: var(--violet-ink); }
.chat-card .hot-badge { font-size: .72rem; line-height: 1.3; padding: 2px 9px; box-shadow: none; }
.sc-card .card-actions { margin-top: 1px; padding-top: 2px; gap: 6px; }
.sc-card .card-actions .cta, .sc-card .card-actions .btn {
  min-height: 32px; padding: 5px 16px; font-size: .9rem;
}

/* ---- category tiles (the landing) ----------------------------------------- */
.cat-grid-wrap { margin: 0 0 18px; }
.cat-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 10px;
}
.cat-tile {
  display: flex; align-items: center; gap: 10px; height: 100%;
  padding: 10px 12px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-xs); color: var(--text);
  text-decoration: none; transition: border-color .2s, background .2s, transform .18s var(--ease);
}
.cat-tile:hover { color: var(--text); border-color: var(--violet-2); background: var(--lilac-2); transform: translateY(-1px); }
.cat-tile:focus-visible { outline: 2px solid var(--violet-ink); outline-offset: 2px; }
.cat-ico {
  flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px;
  border-radius: 11px; background: var(--lilac); color: var(--violet-ink);
}
.cat-label { flex: 1; min-width: 0; font-weight: 600; font-size: .92rem; line-height: 1.3; }
.cat-num {
  flex: none; font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--violet-ink);
  direction: ltr; unicode-bidi: isolate;
}
.cat-tile.cat-chat { background: var(--lilac-2); border-inline-start: 4px solid var(--violet); }
.cat-tile.cat-chat .cat-ico { background: var(--violet-ink); color: #fff; }

/* ---- a category's own page ------------------------------------------------ */
.cat-head .kicker { display: inline-flex; align-items: center; gap: 6px; }
.cat-head .page-sub { font-size: var(--step-0); }
.cat-count { margin: 8px 0 0; color: var(--text); font-weight: 600; font-size: var(--step--1); }

/* ---- the list's bar: the count and the live-only toggle -------------------- */
.list-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 14px; }
.list-bar .result-count { margin: 0; }
.all-toggle {
  display: inline-flex; align-items: center; gap: 8px; color: var(--muted);
  font-size: var(--step--1); font-weight: 500; text-decoration: none;
}
.all-toggle:hover { color: var(--violet-ink); }
.all-toggle .switch {
  position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px;
  background: #e4dff0; transition: background .2s;
}
.all-toggle .switch::after {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(35, 25, 55, 0.25);
  transition: inset-inline-start .2s var(--ease);
}
.all-toggle.on { color: var(--violet-ink); }
.all-toggle.on .switch { background: var(--violet-ink); }
.all-toggle.on .switch::after { inset-inline-start: 17px; }

.filters-toggles { border: 0; padding: 0; min-width: 0; }

/* ---- phones ---------------------------------------------------------------- */
@media (max-width: 720px) {
  /* The tiles scroll sideways inside their own box, 2 rows; the page never does. */
  .cat-grid-wrap {
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: -16px; padding: 2px 16px 6px; scroll-padding-inline: 16px;
  }
  .cat-grid-wrap::-webkit-scrollbar { display: none; }
  .cat-grid {
    grid-template-columns: none; grid-template-rows: repeat(2, auto);
    grid-auto-flow: column; grid-auto-columns: minmax(164px, 44vw); width: max-content;
  }
  .cat-grid li { scroll-snap-align: start; }
  .cat-grid-wrap { scroll-snap-type: x proximity; }
  .cat-tile { padding: 9px 10px; gap: 8px; }
  .cat-ico { width: 32px; height: 32px; border-radius: 10px; }
  .cat-label { font-size: .86rem; }
  /* The chips stay on screen over the list. */
  .active-filters {
    position: sticky; top: var(--topbar-h); z-index: 30;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: -16px; padding: 8px 16px;
    background: rgba(253, 250, 244, 0.92); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
    border-bottom: 1px solid var(--line);
  }
  .active-filters::-webkit-scrollbar { display: none; }
  .active-filters > * { flex: none; white-space: nowrap; }
  .sc-grid { gap: 10px; }
}

/* T164: a CAPTCHA form the extension fills (card span, detail-page link). */
.ext-badge { display: inline-flex; align-items: center; align-self: flex-start; width: fit-content; margin-top: 6px; padding: 2px 9px; border-radius: 999px; background: var(--lilac); color: var(--violet-ink); font-size: .72rem; font-weight: 600; line-height: 1.3; text-decoration: none; }

/* ---- T194: the benefit kind ------------------------------------------------ */
/* A paid role, a conditional loan, housing aid, a funded program or a prize says so: on the
   card next to the amount (never cut: the volunteering fact gives way first) and on the
   scholarship page under the title. A plain scholarship shows nothing. */
.kind-badge {
  display: inline-flex; align-items: center; white-space: nowrap;
  background: var(--warn-bg); color: var(--warn-ink); font-weight: 600; border-radius: 999px;
}
.card-facts .kind-badge { flex-shrink: 0; }
/* Four facts do not fit one line of a narrow card: they wrap to a second line, never cut. */
.card-facts.has-kind { flex-wrap: wrap; row-gap: 4px; }
.kind-line { margin: 0 0 8px; }
.kind-line .kind-badge { font-size: .85rem; line-height: 1.4; padding: 3px 12px; }

/* ---- T196: for members of an organization only ---------------------------- */
/* "לחברי ההסתדרות בלבד": the one condition that decides everything, so it is the card's first
   fact, on its own line over the others, and the first line under the scholarship page's title.
   The organization's name is the point: it wraps, never cut. */
.members-only {
  display: inline-block; align-self: flex-start; width: fit-content; max-width: 100%;
  white-space: normal; overflow-wrap: anywhere;
  font-size: .76rem; font-weight: 600; line-height: 1.4; padding: 2px 9px; border-radius: 8px;
  background: var(--bg-soft); color: var(--text); border: 1px solid var(--line-strong);
}
.members-line { margin: 0 0 8px; }
.members-line .members-only { font-size: .85rem; padding: 3px 12px; }