/* TSS All Categories — Slice 11. Depends on tss-foundation + tss-chrome + tss-home. */

.tss-ac-shell { background: #F8FAFB; }
.tss-ac-main  { display: block; }

/* Parent theme's h1/h2/h3 rules inherit a font-family onto nested <span>s
   that defeats the plain .tss-serif-i class, so it must be forced — same
   workaround used by tss-about.css and tss-faq.css. */
.tss-all-categories-page .tss-serif-i {
    font-family: var(--font-serif-i, "Instrument Serif", Georgia, serif) !important;
    font-style: italic !important;
    font-weight: 400 !important;
}
.tss-ac-h1 .tss-serif-i { color: #5EEAD4; }
.tss-ac-cta-h .tss-serif-i { color: var(--mute, #6B7A8C); }

/* Hero */
.tss-ac-hero {
    position: relative;
    padding: 64px 48px 36px;
    background: linear-gradient(135deg, #0E2A47 0%, #15445F 55%, #115E59 100%);
    color: #fff;
    /* Do NOT clip — autocomplete dropdown needs to paint below the search bar
       and over the popular-strip / toolbar. overflow:hidden here would chop
       the dropdown at the hero's bottom edge. */
    z-index: 5;
}
.tss-ac-hero::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 28px 28px; opacity: 0.55; pointer-events: none;
}
.tss-ac-hero-inner { position: relative; max-width: 1200px; margin: 0 auto; }
.tss-ac-crumb { display: flex; gap: 8px; align-items: center; font-size: 13px; opacity: 0.85; margin-bottom: 18px; }
.tss-ac-crumb a { color: #5EEAD4; text-decoration: none; }
.tss-ac-crumb a:hover { text-decoration: underline; }
.tss-ac-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: #5EEAD4; }
.tss-ac-h1 { margin: 8px 0 12px; font-size: 56px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; color: #fff; }
.tss-ac-lede { margin: 0 0 32px; font-size: 17px; opacity: 0.85; max-width: 620px; line-height: 1.55; color: #fff; }

/* The hero search wrapper carries `.tss-home-hero-search` so all the
   home-page search-bar styling (pill, dropdown z-index, autocomplete list,
   .pac-container, label sizing, max-width:802px) applies here too. The
   only thing we tweak per-page is the gap below stats. */

/* Stats row */
.tss-ac-stats { display: flex; gap: 36px; margin-top: 24px; align-items: baseline; flex-wrap: wrap; }
.tss-ac-stat { display: flex; gap: 8px; align-items: baseline; font-size: 13px; opacity: 0.85; color: #fff; }
.tss-ac-stat strong { font-size: 22px; font-weight: 600; color: #5EEAD4; }

/* Popular strip */
.tss-ac-popular { padding: 28px 48px; background: #fff; border-bottom: 1px solid #E8ECF1; }
.tss-ac-popular-inner { max-width: 1280px; margin: 0 auto; }
.tss-ac-popular-lbl { font-size: 11px; font-weight: 700; color: #6B7A8C; letter-spacing: 0.14em; margin-bottom: 14px; }
.tss-ac-popular-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.tss-ac-pill { padding: 8px 14px; background: #F8FAFB; border: 1px solid #E8ECF1; border-radius: 999px; font-size: 13px; font-weight: 500; color: #2A3F5A; display: inline-flex; gap: 8px; align-items: center; text-decoration: none; transition: 0.15s; }
.tss-ac-pill:hover { border-color: #14B8A6; color: #115E59; }
.tss-ac-pill-ct { color: #94A3B5; font-size: 11px; font-weight: 500; }

/* Sticky toolbar */
.tss-ac-toolbar { position: sticky; top: 0; z-index: 4; background: #fff; border-bottom: 1px solid #E8ECF1; padding: 14px 48px; }
.tss-ac-toolbar-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tss-ac-filter { display: inline-flex; align-items: center; gap: 8px; background: #F8FAFB; border: 1px solid #E8ECF1; border-radius: 8px; padding: 6px 10px; min-width: 260px; }
.tss-ac-filter-icon { color: #6B7A8C; display: inline-flex; }
.tss-ac-filter-input { flex: 1; border: 0; background: transparent; outline: none; font: inherit; font-size: 13px; padding: 4px 0; color: #0E2A47; }
.tss-ac-view-toggle { display: inline-flex; gap: 2px; padding: 3px; background: #F8FAFB; border-radius: 8px; }
.tss-ac-view-toggle button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 6px; background: transparent; border: 0; color: #6B7A8C; cursor: pointer; transition: 0.15s; }
.tss-ac-view-toggle button:hover { color: #0E2A47; }
.tss-ac-view-toggle button.is-active { background: #fff; color: #0E2A47; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.tss-ac-view-toggle button .tss-icon { display: block; }

/* Cards */
.tss-ac-content { padding: 48px 48px 64px; max-width: 1280px; margin: 0 auto; }
.tss-ac-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1099px) { .tss-ac-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 899px)  { .tss-ac-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 559px)  { .tss-ac-grid { grid-template-columns: 1fr; } }

.tss-ac-card { display: block; position: relative; background: #fff; border: 1px solid #E8ECF1; border-radius: 14px; padding: 22px; transition: all 0.2s; }
.tss-ac-card:hover { border-color: #14B8A6; transform: translateY(-2px); box-shadow: 0 16px 32px -16px rgba(20,184,166,0.25); }
.tss-ac-card:hover .tss-ac-card-arrow { transform: translateX(4px); color: #0D9488; }
.tss-ac-card-link { display: block; color: inherit; text-decoration: none; }
.tss-ac-card-link:hover, .tss-ac-card-link:focus { color: inherit; text-decoration: none; }
.tss-ac-card-icon { width: 42px; height: 42px; border-radius: 10px; background: #ECFDF8; color: #0D9488; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.tss-ac-card-title { display: block; font-size: 15.5px; font-weight: 600; color: #0E2A47; margin-bottom: 4px; letter-spacing: -0.005em; }
.tss-ac-card-count { display: block; font-size: 12px; color: #6B7A8C; margin-bottom: 14px; }
.tss-ac-card-subs { display: flex; flex-wrap: wrap; gap: 4px; }
.tss-ac-sub { font-size: 11.5px; color: #2A3F5A; background: #F8FAFB; padding: 3px 8px; border-radius: 5px; font-weight: 500; text-decoration: none; transition: 0.15s; }
.tss-ac-sub:hover { background: #ECFDF8; color: #0D9488; text-decoration: none; }
.tss-ac-sub-more { color: #0D9488; background: transparent; font-weight: 600; padding-left: 4px; }
.tss-ac-sub-more:hover { background: transparent; color: #0D9488; }
.tss-ac-card-arrow { position: absolute; top: 22px; right: 22px; color: #94A3B5; transition: 0.2s; }

/* JS-driven hide on filter mismatch */
.tss-ac-hide { display: none !important; }
.tss-ac-empty { text-align: center; color: #6B7A8C; padding: 32px 0; font-size: 14px; }

/* List view */
.tss-ac-grid.is-list-mode { grid-template-columns: 1fr; }
.tss-ac-grid.is-list-mode .tss-ac-card { padding: 16px 22px; }
.tss-ac-grid.is-list-mode .tss-ac-card-link { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center; }
.tss-ac-grid.is-list-mode .tss-ac-card-icon { margin-bottom: 0; }
.tss-ac-grid.is-list-mode .tss-ac-card-title { margin-bottom: 2px; }
.tss-ac-grid.is-list-mode .tss-ac-card-count { margin-bottom: 0; }
.tss-ac-grid.is-list-mode .tss-ac-card-subs { margin-top: 8px; }
.tss-ac-grid.is-list-mode .tss-ac-card-arrow { right: 22px; top: 50%; transform: translateY(-50%); }

/* CTA */
.tss-ac-cta { padding: 64px 48px; background: #F8FAFB; border-top: 1px solid #E8ECF1; }
.tss-ac-cta-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.tss-ac-cta-eyebrow { font-size: 11px; font-weight: 700; color: #0D9488; letter-spacing: 0.14em; margin-bottom: 14px; }
.tss-ac-cta-h { margin: 0 0 12px; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: #0E2A47; }
.tss-ac-cta-p { color: #6B7A8C; margin: 0 auto 22px; max-width: 480px; font-size: 15px; line-height: 1.55; }
.tss-ac-cta-actions { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* Mobile hero */
@media (max-width: 767px) {
    .tss-ac-hero { padding: 40px 20px 32px; }
    .tss-ac-h1 { font-size: 34px; }
    .tss-ac-lede { font-size: 15px; }
    .tss-ac-popular, .tss-ac-toolbar { padding-left: 20px; padding-right: 20px; }
    .tss-ac-toolbar-inner { flex-direction: column; align-items: stretch; }
    .tss-ac-filter { min-width: 0; }
    .tss-ac-content { padding: 28px 20px 48px; }
    .tss-ac-cta { padding: 40px 20px; }
}