/* Course catalog for state/local gov. Reuses styles.css tokens (navy #003e75,
   red #d21437, Public Sans, .wrap, .btn) and adds the faceted-search layout. */
.catalog-body { background: #fff; }
.cat-main { min-height: 60vh; }

/* Head + search */
.cat-head { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2, #013e75) 100%); color: #fff; padding: 40px 0 30px; }
.cat-head h1 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.cat-sub { color: rgba(255,255,255,.9); font-size: 16px; line-height: 1.6; max-width: 74ch; margin: 12px 0 22px; }
/* Owner 2026-08-06: "add a small amount of space under the header before the
   search bar. It's cramped up there." The intro copy sat 22px off the search
   box, which read as one continuous block rather than a heading and the control
   under it. */
.cat-searchbar { position: relative; max-width: 640px; margin-top: 16px; }
.cat-search-i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: #7a8aa0; pointer-events: none; }
#cat-q { width: 100%; box-sizing: border-box; padding: 15px 44px 15px 46px; border: 0; border-radius: 10px; font-size: 16px; font-family: inherit; box-shadow: 0 6px 24px rgba(0,0,0,.18); text-overflow: ellipsis; }
#cat-q:focus-visible { outline: 3px solid #d21437; outline-offset: 2px; }
.cat-q-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; background: #eef2f8; color: #455160; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; }

/* Layout: sticky filter rail + results */
.cat-layout { display: grid; grid-template-columns: 264px 1fr; gap: 32px; align-items: start; padding-top: 28px; padding-bottom: 56px; }
.cat-filters { position: sticky; top: 84px; border: 1px solid var(--line); border-radius: 12px; padding: 6px 18px 14px; background: #fff; }
.cat-filter-head { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 0 6px; border-bottom: 1px solid var(--line); }
.cat-filter-head h2 { font-size: 15px; font-weight: 800; color: var(--navy); margin: 0; }
.cat-clear { border: 0; background: none; color: var(--accent, #015eb4); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; }
.cat-facet { padding: 14px 0; border-bottom: 1px solid var(--line); }
.cat-facet:last-child { border-bottom: 0; }
.cat-facet h3 { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6a7688; margin: 0 0 10px; }
.facet-list { display: grid; gap: 3px; max-height: 340px; overflow-y: auto; }
.facet-opt { display: grid; grid-template-columns: 15px 1fr auto; align-items: center; gap: 9px; padding: 6px 6px; border-radius: 7px; cursor: pointer; font-size: 13.5px; color: var(--ink, #1d2333); line-height: 1.3; }
.facet-opt:hover { background: #f2f6fc; }
.facet-opt input { width: 15px; height: 15px; accent-color: #015eb4; flex: none; }
.facet-opt span { flex: 1; line-height: 1.3; }
.facet-opt .facet-n { color: #93a0b3; font-size: 12px; font-variant-numeric: tabular-nums; justify-self: end; padding-left: 8px; }

/* Results */
.cat-results-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.cat-count { font-size: 14px; color: var(--muted, #4a5568); font-weight: 600; margin: 0; }
.cat-count strong { color: var(--navy); }
.cat-sort { font-size: 13px; color: #6a7688; display: flex; align-items: center; gap: 8px; }
.cat-sort select { font-family: inherit; font-size: 13.5px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink, #1d2333); cursor: pointer; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cat-chip { display: inline-flex; align-items: center; gap: 6px; background: #eaf1fb; color: var(--navy); border: 1px solid #cfe0f5; border-radius: 50em; padding: 4px 6px 4px 12px; font-size: 12.5px; font-weight: 600; }
.cat-chip button { border: 0; background: none; color: var(--navy); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }

.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cc { display: flex; flex-direction: column; gap: 9px; border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 16px; text-decoration: none; color: var(--ink, #1d2333); background: #fff; transition: border-color .14s, box-shadow .14s; }
.cc:hover { border-color: var(--accent, #015eb4); box-shadow: 0 8px 24px rgba(1,94,180,.12); text-decoration: none; }
.cc-desc { font-size: 13.8px; color: var(--muted, #4a5568); line-height: 1.55; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(3 * 1.55em); }
.cc-name { font-size: 15.5px; font-weight: 700; color: var(--navy); line-height: 1.28; margin: 0; }
.cc-pills { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.cc-pill { background: #eef2f8; color: #2b3a4d; border-radius: 50em; padding: 3px 10px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cc-pill.sp { background: #e7f3ec; color: #1c6b3e; }
.cc-go { color: var(--accent, #015eb4); font-weight: 700; font-size: 13.5px; margin-top: auto; padding-top: 2px; }
.cc-go::after { content: " \2192"; }
.cat-empty { text-align: center; padding: 60px 20px; color: var(--muted, #4a5568); }
.cat-empty .btn { margin-top: 14px; }

.cat-filter-toggle { display: none; }

/* Footer */
.cat-ft { background: #fff; border-top: 1px solid var(--line); padding: 22px 0 30px; }
.cat-ft p { margin: 0; font-size: 13px; color: var(--muted, #4a5568); }
.cat-ft-note { margin-top: 5px !important; font-size: 12.5px; }
.cat-ft-note a { color: var(--accent, #015eb4); }

@media (max-width: 1000px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  .cat-layout { grid-template-columns: 1fr; }
  .cat-filter-toggle { display: inline-flex; align-items: center; gap: 8px; align-self: start; background: var(--navy); color: #fff; border: 0; border-radius: 9px; padding: 11px 18px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
  .cat-filters { display: none; position: static; }
  .cat-filters.open { display: block; }
}
@media (max-width: 560px) { .cat-grid { grid-template-columns: 1fr; } .cat-results-bar { flex-wrap: wrap; } }

/* Category glyph chips on catalog cards (same system as the LP tiles) */
.cc .tg-ai{--tg-c:#4338ca;--tg-hi:#a5b4fc;--tg-deep:#312e81;--tg-shadow:rgba(67,56,202,.28);color:#4338ca}
.cc .tg-audit{--tg-c:#0d9488;--tg-hi:#5eead4;--tg-deep:#115e59;--tg-shadow:rgba(13,148,136,.28);color:#0d9488}
.cc .tg-lead{--tg-c:#1d4ed8;--tg-hi:#93c5fd;--tg-deep:#1e3a8a;--tg-shadow:rgba(29,78,216,.28);color:#1d4ed8}
.cc .tg-fin{--tg-c:#059669;--tg-hi:#6ee7b7;--tg-deep:#065f46;--tg-shadow:rgba(5,150,105,.28);color:#059669}
.cc .tg-acq{--tg-c:#475569;--tg-hi:#cbd5e1;--tg-deep:#1e293b;--tg-shadow:rgba(71,85,105,.28);color:#475569}
.cc .tg-hr{--tg-c:#d97706;--tg-hi:#fcd34d;--tg-deep:#92400e;--tg-shadow:rgba(217,119,6,.28);color:#d97706}
.cc .tg-grants{--tg-c:#7c3aed;--tg-hi:#c4b5fd;--tg-deep:#4c1d95;--tg-shadow:rgba(124,58,237,.28);color:#7c3aed}
.cc .tg-comm{--tg-c:#db2777;--tg-hi:#f9a8d4;--tg-deep:#831843;--tg-shadow:rgba(219,39,119,.28);color:#db2777}
.cc .tg-pm{--tg-c:#ea580c;--tg-hi:#fdba74;--tg-deep:#7c2d12;--tg-shadow:rgba(234,88,12,.28);color:#ea580c}
.cc .tg-data{--tg-c:#0284c7;--tg-hi:#7dd3fc;--tg-deep:#075985;--tg-shadow:rgba(2,132,199,.28);color:#0284c7}
.cc .tg-writing{--tg-c:#0369a1;--tg-hi:#7dd3fc;--tg-deep:#0c4a6e;--tg-shadow:rgba(3,105,161,.28);color:#0369a1}
.cc .tg-budget{--tg-c:#0d9488;--tg-hi:#5eead4;--tg-deep:#115e59;--tg-shadow:rgba(13,148,136,.28);color:#0d9488}
.cc .tg-excel{--tg-c:#16a34a;--tg-hi:#86efac;--tg-deep:#14532d;--tg-shadow:rgba(22,163,74,.28);color:#16a34a}
.cc .tg-recruit{--tg-c:#0891b2;--tg-hi:#67e8f9;--tg-deep:#155e75;--tg-shadow:rgba(8,145,178,.28);color:#0891b2}
.cc .tg-mediation{--tg-c:#d97706;--tg-hi:#fcd34d;--tg-deep:#78350f;--tg-shadow:rgba(217,119,6,.28);color:#d97706}
.cc .tg-it{--tg-c:#a21caf;--tg-hi:#f0abfc;--tg-deep:#701a75;--tg-shadow:rgba(162,28,175,.28);color:#a21caf}
.cc .tg-property{--tg-c:#4d7c0f;--tg-hi:#bef264;--tg-deep:#365314;--tg-shadow:rgba(77,124,15,.28);color:#4d7c0f}
.cc .tg-other{--tg-c:#64748b;--tg-hi:#cbd5e1;--tg-deep:#334155;--tg-shadow:rgba(100,116,139,.28);color:#64748b}
.cc .tg-design{--tg-c:#c026d3;--tg-hi:#f0abfc;--tg-deep:#701a75;--tg-shadow:rgba(192,38,211,.28);color:#c026d3}
.cc .tg-office{--tg-c:#0e7490;--tg-hi:#67e8f9;--tg-deep:#164e63;--tg-shadow:rgba(14,116,144,.28);color:#0e7490}
.cc .tile-glyph { margin-bottom: 2px; flex: none; }

/* Federal-catalog pointer under the hero copy */
.cat-fed-note { margin: 10px 0 22px; font-size: 14px; color: rgba(255,255,255,.85); }
.cat-fed-note a { color: #fff; text-decoration: underline; font-weight: 600; }

/* Popular-search chips */
.cat-popular { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: 13px; color: rgba(255,255,255,.75); }
.cat-popular button { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; border-radius: 50em; padding: 5px 13px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .14s; }
.cat-popular button:hover { background: rgba(255,255,255,.18); }

/* Group-training CTA band */
.cat-cta { background: linear-gradient(160deg, var(--navy) 0%, #013e75 100%); color: #fff; padding: 34px 0; margin-top: 24px; }
.cat-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.cat-cta h2 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; margin: 0 0 6px; }
.cat-cta p { margin: 0; color: rgba(255,255,255,.88); font-size: 14.5px; max-width: 62ch; }

/* Footer with ACCET */
.cat-ft-grid { display: flex; align-items: flex-start; gap: 18px; }
.accet-logo { flex: none; width: 103px; height: auto; margin-top: 2px; }
@media (max-width: 560px) { .cat-ft-grid { flex-direction: column; } }

/* Visual variant (/catalog-new): storefront-style photo cards */
.cat-visual .cc.vc { padding: 0; overflow: hidden; gap: 0; }
/* The card photo is a real <img loading="lazy"> rather than a background, so
   only the cards near the viewport fetch one. Three layers inside .vc-img:
   photo (0), category scrim (1), glyph (2). No overflow:hidden here - the
   glyph deliberately hangs 18px below the box - but the photo is inset:0 so
   it can never exceed it either. */
.vc-img { position: relative; display: block; height: 132px; background: #eef2f8; }
.vc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border: 0; z-index: 0; }
.vc-img::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(var(--tile-rgb), .14), rgba(12, 27, 60, .5)); }
.vc-img .tile-glyph { position: absolute; z-index: 2; left: 14px; bottom: -18px; width: 40px; height: 40px; box-shadow: 0 3px 10px rgba(8,14,40,.28), inset 0 1px 0 rgba(255,255,255,.9); }
.vc-cat { position: absolute; right: 12px; bottom: 10px; color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-shadow: 0 1px 4px rgba(8,14,40,.55); }
.vc-body { display: flex; flex-direction: column; gap: 8px; padding: 26px 16px 14px; flex: 1; }


.cc-next { font-size: 12.5px; color: #365e8d; font-weight: 600; }
.cc-next b { color: var(--navy); }
.cc-pill.va { background: #eef4ff; color: #16418f; }

/* 16px on touch devices: iOS Safari auto-zooms the page when a control with a
   smaller font takes focus, so tapping Sort re-scaled the whole catalog. The
   13.5px desktop size is kept for pointer devices, which do not auto-zoom. */
@media (hover: none) and (pointer: coarse) {
  .cat-sort select { font-size: 16px; }
}

/* ------------------------------------------------------------------
   Phone layout for the catalog head and the filter facets.
   ------------------------------------------------------------------ */

/* The facet list is capped at 340px with an overlay scrollbar, which on a
   phone hides 8 of the 17 categories (including the largest, Leadership &
   Management) behind a nested scroller that renders no visible affordance.
   The filter panel is already its own collapsible section on small screens,
   so there is nothing to gain from a second scroll region inside it. */
@media (max-width: 860px) {
  .facet-list { max-height: none; overflow-y: visible; }
}

/* At 320x568 the nav plus the head fill 97.6% of the first screen, so the
   page opens with zero courses, no result count and no Filters button in
   view. Tightening the head's vertical rhythm brings the controls up. */
@media (max-width: 560px) {
  .cat-head { padding: 22px 0 18px; }
  .cat-sub { font-size: 15px; margin: 8px 0 14px; }
  .cat-fed-note { margin: 8px 0 14px; font-size: 13px; }
  /* Smaller than the desktop 16px: the gap has to breathe without pushing the
     search box off a phone's first screen, which is the whole reason this
     block's rhythm was tightened here in the first place. */
  .cat-searchbar { margin-top: 10px; }
  .cat-popular { margin-top: 10px; }
}

/* "Show N more" under the grid. Full width on phones so it is an obvious,
   easily-hit control rather than a link-sized target at the end of a long
   scroll. */
.cat-more { display: block; width: 100%; margin: 18px 0 0; padding: 14px 18px; font: inherit; font-weight: 700; font-size: 15px; color: var(--navy); background: #fff; border: 1px solid var(--border-strong, #7e8ba0); border-radius: 10px; cursor: pointer; transition: background .14s, border-color .14s; }
.cat-more:hover { background: #eef3fb; }
.cat-more:focus-visible { outline: 3px solid var(--accent-2, #0178e2); outline-offset: 2px; }
.cat-more[hidden] { display: none; }

/* Sticky "Show N courses" inside the mobile filter panel. Desktop keeps the
   filter rail beside the results, where every change is already visible, so
   this is phone-only. The wrapper carries a white band and bleeds to the panel
   edges (the panel's own padding is 6px 18px 14px) so facet rows do not show
   through around the button. */
.cat-apply-wrap { display: none; }
@media (max-width: 860px) {
  .cat-apply-wrap { display: block; position: sticky; bottom: 0; z-index: 2; margin: 10px -18px -14px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -8px 16px -8px rgba(8, 28, 64, .22); }
  .cat-apply { display: block; width: 100%; padding: 13px 18px; font: inherit; font-weight: 700; font-size: 15px; color: #fff; background: var(--navy); border: 0; border-radius: 9px; cursor: pointer; }
  .cat-apply:focus-visible { outline: 3px solid var(--accent-2, #0178e2); outline-offset: 2px; }
}

/* The search field spends 90px of its 272px width on icon chrome at 320,
   leaving 182px and truncating the placeholder. Tighten both insets on a
   phone; the icon and clear button move in to match. */
@media (max-width: 560px) {
  .cat-search-i { left: 12px; }
  #cat-q { padding-left: 38px; padding-right: 40px; }
  .cat-q-clear { right: 8px; }
}

/* "Skip to results" landed #results under the 66px sticky header because it
   had no scroll offset of its own. */
#results { scroll-margin-top: 74px; }