/* SCD-463-mobile — Contributors listing page styles.
 *
 * The desktop/mobile variants both render at all viewports, and these media
 * queries hide whichever one doesn't fit the screen — same pattern as
 * _HeaderDesktop / _HeaderMobile.
 */

/* Desktop gutter. Figma draws 112px on the 1440 frame (1216 content). Held as
   that ratio so it eases down on narrower laptops instead of snapping to 48px
   the moment the viewport drops below 1440 — the jump is what read as
   "margins much tighter than the design" in QA (SCD-496). */
.contributors-listing,
.cl-hero, .cl-featured, .cl-all, .cl-related, .cl-cta {
    --cl-gutter: clamp(48px, 7.78vw, 112px);
}
.cl-hero__container,
.cl-featured__container,
.cl-all__container,
.cl-related__container,
.cl-cta__container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--cl-gutter);
}

.cl-hero--desktop { display: block; }
.cl-hero--mobile  { display: none; }
@media (max-width: 768px) {
    .cl-hero--desktop { display: none; }
    .cl-hero--mobile  { display: flex; }
}

/* Hero — shared building blocks (Figma frame 1386:14256). */
/* Figma 1521:10867 — Brand/25 #F6F9FF section bg. */
.cl-hero { background: #F6F9FF; }

.cl-hero__copy { max-width: 645px; }
/* Eyebrow — teal #2FB8A9, 20/28 Inter Regular, 28×28 icon + 12px gap. */
.cl-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 32px;
    color: #2FB8A9;
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
.cl-hero__eyebrow-icon { width: 28px; height: 28px; display: block; }
/* Heading — Display lg/Semibold: 48/60, weight 600, tracking -0.96. */
.cl-hero__heading {
    font-size: 48px;
    line-height: 60px;
    font-weight: 600;
    letter-spacing: -0.96px;
    color: #000000;
    margin: 0 0 32px;
}
/* Body — Text xl/Regular: 20/30, Gray/8 #595959. */
.cl-hero__lead {
    font-size: 20px;
    line-height: 30px;
    color: #595959;
    margin: 0 0 32px;
    max-width: 645px;
}
.cl-hero__ctas {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
/* Buttons — Text md/Semibold 16/24, px20 py12, radius 8, Shadow/xs. */
.cl-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    transition: background 120ms ease-out, color 120ms ease-out;
}
.cl-hero__cta--primary {
    background: #465DA6;
    border-color: #465DA6;
    color: #FFFFFF;
}
.cl-hero__cta--primary:hover { background: #38489E; color: #FFFFFF; }
.cl-hero__cta--secondary {
    background: #FFFFFF;
    color: #414651;
    border-color: #D5D7DA;
}
.cl-hero__cta--secondary:hover { border-color: #465DA6; color: #465DA6; }

/* Stat tiles — shared visual; layout switches between grid (desktop)
   and horizontal scroller (mobile) via the `--grid` / `--scroller`
   modifier set below. */
.cl-hero__stats {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cl-hero__stat {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 16px 20px;
    text-align: center;
    min-width: 0;
}
.cl-hero__stat-value {
    display: block;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    color: #1F2533;
}
.cl-hero__stat-label {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 20px;
    color: #6B7280;
}

/* Hero — DESKTOP variant */
/* Section: 112px gutters, 48px vertical pad, 32px gap, 1216 content. */
.cl-hero--desktop { padding: 48px 0; }
.cl-hero--desktop .cl-hero__container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--cl-gutter);
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.cl-hero--desktop .cl-hero__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    width: 100%;
}
/* Design widths are the flex basis, not a floor. 645 + 48 + 488 needs a 1181
   content box, which the gutter only leaves above ~1416px, so both columns
   have to shrink below that or the illustration spills into the gutter. */
.cl-hero--desktop .cl-hero__copy {
    flex: 1 1 645px;
    max-width: 645px;
    min-width: 0;
}
/* Illustration — Figma 1521:10879 exported 2× (976×600) and rendered at
   its design size 488×300. Photo + pinstriped folder backing + angular
   notches + the two glass badges are all baked into this single asset. */
.cl-hero--desktop .cl-hero__illustration {
    flex: 0 1 488px;
    min-width: 0;
}
/* Fluid below the design width; the 488x300 attrs on the img hold the ratio. */
.cl-hero--desktop .cl-hero__illustration-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Stats band — Figma 1521:10917: a 1216-wide glass strip,
   rgba(255,255,255,0.7) + 25px blur, 1px white border, radius 8.
   Four 216-wide tiles with 104px side insets and 48px gaps
   (1216 = 104 + 4×216 + 3×48 + 104) → space-between inside the
   104px padding reproduces that exactly and stays edge-balanced
   instead of clustering when the CMS container is wider. */
.cl-hero--desktop .cl-hero__stats {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    max-width: 1216px;
    margin: 0 auto;
    padding: 32px 104px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid #FFFFFF;
    border-radius: 8px;
}
/* 216 is the design width, not a floor. Shrinking keeps all four tiles on one
   row below 1440 instead of dropping Reads to a second line. */
.cl-hero--desktop .cl-hero__stat {
    flex: 0 1 216px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 0;
    text-align: center;
}
.cl-hero--desktop .cl-hero__stat-value {
    font-size: 36px;
    line-height: 44px;
    font-weight: 600;
    letter-spacing: -0.72px;
    color: #262626;
}
/* Figma 1521:10920 — Text xl/Regular, Gray/8. Was 500/#BFBFBF. */
.cl-hero--desktop .cl-hero__stat-label {
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: #595959;
    margin: 0;
}

@media (max-width: 1280px) {
    .cl-hero--desktop .cl-hero__row { gap: 32px; }
    /* Tighter insets so the four tiles stay on one row, as on the SL25 page.
       The 104px Figma insets only fit the band at 1440. */
    .cl-hero--desktop .cl-hero__stats { gap: 24px; padding: 32px 48px; }
}

/* Hero — MOBILE variant */
/* Figma 1410:10046 — bg #F6F9FF, 16px gutters, pt24/pb32, 24px gap. */
.cl-hero--mobile {
    padding: 24px 16px 32px;
    flex-direction: column;
    gap: 24px;
}
.cl-hero--mobile .cl-hero__copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: none;
}
.cl-hero--mobile .cl-hero__eyebrow {
    margin: 0;
    gap: 8px;
    font-size: 12px;
    line-height: 20px;
}
.cl-hero--mobile .cl-hero__eyebrow-icon { width: 16px; height: 16px; }
.cl-hero--mobile .cl-hero__heading {
    font-size: 30px;
    line-height: 38px;
    font-weight: 700;
    letter-spacing: 0;
    color: #262626;
    margin: 0;
}
.cl-hero--mobile .cl-hero__lead {
    font-size: 14px;
    line-height: 22px;
    color: #595959;
    margin: 0;
    max-width: none;
}
.cl-hero--mobile .cl-hero__ctas {
    display: flex;
    gap: 12px;
    margin: 0;
}
.cl-hero--mobile .cl-hero__cta {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 20px;
}
/* Illustration — same baked asset as desktop (same 1.627 ratio),
   full-width; the 358×220 Figma box is just a scaled crop. */
.cl-hero--mobile .cl-hero__illustration { width: 100%; }
.cl-hero--mobile .cl-hero__illustration-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Horizontal stat scroller (Figma 1410:10056 — 272-wide glass tiles,
   user pans horizontally). Edge-to-edge bleed past the 16px gutter. */
.cl-hero--mobile .cl-hero__stats--scroller {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px; /* snap aligns to the padding box, so without this the first card lands at 0 and eats the gutter */
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 -16px;
    padding: 0 16px;
}
.cl-hero--mobile .cl-hero__stats--scroller::-webkit-scrollbar { display: none; }
.cl-hero--mobile .cl-hero__stat {
    flex: 0 0 auto;
    width: 272px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 0;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid #F6F9FF;
    border-radius: 8px;
    text-align: center;
}
.cl-hero--mobile .cl-hero__stat-value {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: #262626;
}
.cl-hero--mobile .cl-hero__stat-label {
    font-size: 14px;
    line-height: 22px;
    color: #8C8C8C;
}

/* Featured Experts — viewport gates */
.cl-featured--desktop { display: block; }
.cl-featured--mobile  { display: none; }
@media (max-width: 768px) {
    .cl-featured--desktop { display: none; }
    .cl-featured--mobile  { display: flex; }
}

/* Featured Experts — shared building blocks (Figma frame 1387:3329; card frame 1387:3334 = 256×226). */
/* Figma 1521:10930 — header gap 20 (title→subtitle), section gap 36
   (header→grid via grid margin). */
.cl-featured__header {
    margin-bottom: 36px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.cl-featured__title {
    font-size: 36px;
    line-height: 44px;
    font-weight: 600;
    letter-spacing: -0.72px;
    color: rgba(0, 0, 0, 0.88);
    margin: 0;
}
.cl-featured__subtitle {
    margin: 0;
    color: #595959;
    font-size: 20px;
    line-height: 30px;
}
.cl-featured__empty {
    color: #595959;
    font-size: 20px;
    line-height: 30px;
}

/* Card — Figma 1521:10935: white, 1px rgba(0,0,0,.06) border,
   0 6px 8px rgba(0,0,0,.07) shadow, radius 8, padding 16, 12px gap. */
.cl-featured-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.07);
    min-width: 0;
    list-style: none;
}
.cl-featured-card__avatar {
    position: relative;
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: visible;
    background: #F4F5FA;
    border: 1px solid #F4F4F4;
}
.cl-featured-card__avatar img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.cl-featured-card__avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #EEF1FB;
    color: #465DA6;
    font-weight: 600;
    font-size: 20px;
}
.cl-featured-card__verified {
    position: absolute;
    right: -6px;
    bottom: -7px;
    width: 26px;
    height: 26px;
    line-height: 0;
}
.cl-featured-card__verified svg { width: 26px; height: 26px; }
/* The card stacks: avatar | (name+org+role) | tags — each an even 12px
   apart via the card's gap, so children carry no extra margins. */
.cl-featured-card__name {
    display: block;
    color: #000000;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    text-decoration: none;
    margin: 0;
}
.cl-featured-card__name:hover { color: #465DA6; }
.cl-featured-card__org {
    margin: 8px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #262626;
    font-size: 14px;
    line-height: 22px;
    max-width: 100%;
    overflow: hidden;
}
.cl-featured-card__org span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cl-featured-card__org-icon { width: 14px; height: 14px; display: block; flex: 0 0 auto; }
.cl-featured-card__role {
    margin: 8px 0 0;
    color: #8C8C8C;
    font-size: 14px;
    line-height: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cl-featured-card__tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.cl-featured-card__tag {
    background: #EBF1FF;
    color: #465DA6;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}
/* Figma 1521:10990 — neutral "+N" overflow pill. */
.cl-featured-card__tag--more {
    background: #FFFFFF;
    color: #414651;
    border: 1px solid #DBDBE1;
}

/* Featured Experts — DESKTOP variant */
/* Figma 1521:10930 — section py 48, white bg, 1216 content (112 gutter). */
.cl-featured--desktop { padding: 48px 0; background: #FFFFFF; }
.cl-featured__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
}

/* Featured Experts — MOBILE variant */
.cl-featured--mobile { padding: 24px 0; background: #FFFFFF; }
.cl-featured--mobile .cl-featured__header { padding: 0 16px; }
.cl-featured__scroller {
    list-style: none;
    padding: 0 16px;
    margin: 0;
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px; /* snap aligns to the padding box, so without this the first card lands at 0 and eats the gutter */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.cl-featured__scroller::-webkit-scrollbar { display: none; }
.cl-featured__scroller .cl-featured-card {
    flex: 0 0 auto;
    width: 256px;
    scroll-snap-align: start;
}

/* Figma 1410:10073 — section px16/py24, 20px gap, header gap 4, title
   Bold 20/28, subtitle 12/20 #8C8C8C. The lazy fragment emits
   .cl-featured__grid; on mobile render it as a 256-wide scroller. */
.cl-featured--mobile {
    flex-direction: column;
    gap: 20px;
}
.cl-featured--mobile .cl-featured__header {
    margin: 0;
    gap: 4px;
}
.cl-featured--mobile .cl-featured__title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
}
.cl-featured--mobile .cl-featured__subtitle {
    font-size: 12px;
    line-height: 20px;
    color: #8C8C8C;
}
/* Figma 1410:10077 — first card at 16px, row bleeds past the right edge.
   The section has no horizontal padding, so the 16px padding here IS the
   gutter; any margin on top of it double-counts. */
.cl-featured--mobile .cl-featured__grid {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px; /* snap aligns to the padding box, so without this the first card lands at 0 and eats the gutter */
    scrollbar-width: none;
    padding: 0 16px;
    margin: 0;
}
.cl-featured--mobile .cl-featured__grid::-webkit-scrollbar { display: none; }
.cl-featured--mobile .cl-featured-card {
    flex: 0 0 auto;
    width: 256px;
    scroll-snap-align: start;
}
/* Card scales down on mobile: 40 avatar, 14/22 name, 12/20 org+role,
   12/18 pills (px8 py2). */
.cl-featured--mobile .cl-featured-card__avatar,
.cl-featured--mobile .cl-featured-card__avatar img,
.cl-featured--mobile .cl-featured-card__avatar-fallback {
    width: 40px;
    height: 40px;
}
.cl-featured--mobile .cl-featured-card__avatar-fallback { font-size: 16px; }
.cl-featured--mobile .cl-featured-card__verified,
.cl-featured--mobile .cl-featured-card__verified svg {
    width: 18px;
    height: 18px;
    right: -5px;
    bottom: -5px;
}
.cl-featured--mobile .cl-featured-card__name {
    font-size: 14px;
    line-height: 22px;
}
.cl-featured--mobile .cl-featured-card__org,
.cl-featured--mobile .cl-featured-card__role {
    font-size: 12px;
    line-height: 20px;
}
.cl-featured--mobile .cl-featured-card__tag {
    font-size: 12px;
    line-height: 18px;
    padding: 2px 8px;
}

/* All Contributors — viewport gates */
.cl-all--desktop { display: block; }
.cl-all--mobile  { display: none; }
@media (max-width: 768px) {
    .cl-all--desktop { display: none; }
    .cl-all--mobile  { display: block; }
}

/* All Contributors — shared bits */
/* Figma 1521:11009 — the All Contributors section is bg-white. */
.cl-all { background: #FFFFFF; }
.cl-all__header { margin-bottom: 16px; }
.cl-all__title {
    font-size: 24px; line-height: 32px;
    font-weight: 600; color: #1F2533;
    margin: 0;
}

/* Filter / sort row */
.cl-all__filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    position: relative;
}
.cl-all__filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #1F2533;
    cursor: pointer;
}
.cl-all__filter-btn:hover { border-color: #465DA6; color: #465DA6; }
.cl-all__sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    padding: 6px 12px;
}
.cl-all__sort-label { font-size: 13px; color: #6B7280; }
.cl-all__sort-select {
    border: 0;
    background: transparent;
    font-size: 14px;
    color: #1F2533;
    cursor: pointer;
    appearance: none;
    padding-right: 16px;
    background-image: linear-gradient(45deg, transparent 50%, #6B7280 50%), linear-gradient(135deg, #6B7280 50%, transparent 50%);
    background-position: calc(100% - 8px) 50%, calc(100% - 4px) 50%;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
}

.cl-all__filter-panel {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 16px;
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.cl-all__filter-panel[hidden] { display: none; }
.cl-all__filter-group { border: 0; padding: 0; margin: 0; }
.cl-all__filter-group legend {
    font-size: 13px; font-weight: 600; color: #1F2533;
    margin-bottom: 6px; padding: 0;
}
.cl-all__filter-group select {
    width: 100%;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    color: #1F2533;
    background: #FFFFFF;
}
.cl-all__filter-verified {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    grid-column: 1 / -1;
    color: #1F2533;
    font-size: 13px;
}

/* List card grid + loading state */
[data-cl-all-container] { transition: opacity 120ms ease-out; }
[data-cl-all-container].is-loading { opacity: 0.6; pointer-events: none; }

.cl-all__cards {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.cl-all--mobile .cl-all__cards { grid-template-columns: minmax(0, 1fr); }
.cl-all__empty {
    padding: 24px;
    text-align: center;
    color: #6B7280;
    background: #FFFFFF;
    border: 1px dashed #D5D7DA;
    border-radius: 12px;
}

/* List card visuals (Figma frame 1389:6048 — 358×200) */
.cl-list-card {
    list-style: none;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cl-list-card__top {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    align-items: start;
}
.cl-list-card__avatar {
    position: relative;
    display: block;
    width: 40px; height: 40px;
    border-radius: 8px;
    overflow: visible;
    background: #F4F5FA;
}
.cl-list-card__avatar img {
    width: 40px; height: 40px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
.cl-list-card__avatar-fallback {
    display: flex;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 8px;
    background: #EEF1FB;
    color: #465DA6;
    font-weight: 600;
}
.cl-list-card__verified {
    position: absolute;
    right: -3px; bottom: -3px;
    width: 18px; height: 18px;
    line-height: 0;
}
.cl-list-card__body { min-width: 0; }
.cl-list-card__name {
    color: #1F2533;
    font-size: 15px; line-height: 22px;
    font-weight: 600;
    text-decoration: none;
}
.cl-list-card__name:hover { color: #465DA6; }
.cl-list-card__org {
    margin: 4px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 18px;
    color: #4B5563;
}
.cl-list-card__org-icon { width: 14px; height: 14px; display: block; }
.cl-list-card__role {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 18px;
    color: #6B7280;
}
.cl-list-card__tags {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cl-list-card__tag {
    background: #EAF8F6;
    color: #269387;
    padding: 2px 10px;
    border-radius: 16px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
}
.cl-list-card__divider {
    height: 1px;
    background: #E5E7EB;
}
.cl-list-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.cl-list-card__location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6B7280;
    font-size: 13px;
}
.cl-list-card__location-icon { width: 12px; height: 12px; display: block; }
.cl-list-card__follow {
    background: transparent;
    color: #1F2533;
    border: 1px solid #D5D7DA;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.cl-list-card__follow:hover {
    border-color: #465DA6;
    color: #465DA6;
}

/* Pagination */
.cl-all__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
}
.cl-all__page, .cl-all__page-arrow {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #1F2533;
    cursor: pointer;
    width: 36px; height: 36px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cl-all__page:hover, .cl-all__page-arrow:hover { background: #EEF1FB; color: #465DA6; }
.cl-all__page--active {
    background: #465DA6;
    color: #FFFFFF;
}
.cl-all__page--active:hover { background: #38489E; color: #FFFFFF; }
.cl-all__page-arrow[disabled] {
    color: #C9CBD1;
    cursor: not-allowed;
    background: transparent;
}
.cl-all__page-ellipsis { color: #6B7280; padding: 0 4px; }

/* All Contributors — DESKTOP padding */
.cl-all--desktop { padding: 48px 0; }

/* All Contributors — MOBILE padding + tighter rhythm */
.cl-all--mobile {
    padding: 24px 16px;
}
@media (max-width: 768px) {
    .cl-all__title { font-size: 20px; line-height: 28px; }
    .cl-all__filter-panel { grid-template-columns: 1fr; }
}
.cl-all--mobile .cl-all__title { font-weight: 700; }

/* Figma 1410:10179 — the mobile contributor card is the desktop card
   scaled down: 40 avatar, 14/22 name, 12/20 org+role, 12/18 pills.
   Frame (radius 14, #D9D9D9, shadow, p16, gap12) + footer unchanged. */
.cl-all--mobile .cl-all__cards {
    grid-template-columns: 1fr;
    gap: 16px;
}
.cl-all--mobile .cl-card__avatar,
.cl-all--mobile .cl-card__avatar-img,
.cl-all--mobile .cl-card__avatar-fallback {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
}
.cl-all--mobile .cl-card__avatar-fallback { font-size: 16px; }
.cl-all--mobile .cl-card__verified {
    width: 18px;
    height: 18px;
    right: -5px;
    bottom: -5px;
}
.cl-all--mobile .cl-card__name {
    font-size: 14px;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.88);
}
.cl-all--mobile .cl-card__org,
.cl-all--mobile .cl-card__role {
    font-size: 12px;
    line-height: 20px;
}
.cl-all--mobile .cl-card__tag {
    font-size: 12px;
    line-height: 18px;
    padding: 2px 8px;
}

/* Articles + Multimedia related carousels — viewport gates */
.cl-related--desktop { display: block; }
.cl-related--mobile  { display: none; }
@media (max-width: 768px) {
    .cl-related--desktop { display: none; }
    .cl-related--mobile  { display: block; }
}

/* Figma 1521:11250 / 1521:11302 — bg-white, pt 48 / pb 72, 1216 content
   (112 gutter), centered, 36px gap title→grid. */
.cl-related { background: #FFFFFF; }
.cl-related--desktop { padding: 48px 0 72px; }
.cl-related--mobile  { padding: 24px 0; }
.cl-related--desktop .cl-related__container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--cl-gutter);
}
.cl-related__header { margin-bottom: 36px; }
.cl-related--mobile .cl-related__header { padding: 0 16px; }
.cl-related__title {
    font-size: 36px;
    line-height: 44px;
    font-weight: 600;
    letter-spacing: -0.72px;
    color: rgba(0, 0, 0, 0.88);
    margin: 0;
}
.cl-related__empty {
    color: #6B7280;
    font-size: 14px;
    padding: 24px 16px;
}

.cl-related__grid {
    display: grid;
    /* Figma 1521:11252 — 4 cards (280 wide) per row, 32px gaps. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin-bottom: 16px;
}
.cl-related__scroller {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px; /* snap aligns to the padding box, so without this the first card lands at 0 and eats the gutter */
    padding: 0 16px;
    scrollbar-width: none;
}
.cl-related__scroller::-webkit-scrollbar { display: none; }
.cl-related__scroller > * {
    flex: 0 0 auto;
    width: 280px;
    scroll-snap-align: start;
}
/* Figma 1521:11301 — white outline button, centered under the grid. */
.cl-related__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
    padding: 12px 20px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    color: #414651;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    text-decoration: none;
}
.cl-related--mobile .cl-related__cta { margin: 0 auto; }
.cl-related__cta:hover { border-color: #465DA6; color: #465DA6; }

/* "Category Post" card — Figma 1521:11253. */
.cl-post { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cl-post__media {
    position: relative;
    display: block;
    height: 208px;
    border-radius: 8px;
    overflow: hidden;
    background: #EEF1F6;
}
.cl-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-post__media-ph { display: block; width: 100%; height: 100%; background: #EEF1F6; }
.cl-post__badge {
    position: absolute;
    left: 8px;
    top: 8px;
    background: #EAF8F6;
    color: #269387;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 16px;
}
.cl-post__body { display: flex; flex-direction: column; }
.cl-post__title { margin: 0; }
.cl-post__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #1C1C1C;
    text-decoration: none;
}
.cl-post__title a:hover { color: #465DA6; }
.cl-post__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 20px;
}
.cl-post__author { color: #000000; }
.cl-post__date { color: rgba(0, 0, 0, 0.45); }
.cl-post__dot {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    flex: 0 0 auto;
}

/* Share Expertise CTA — viewport gates */
.cl-cta--desktop { display: block; }
.cl-cta--mobile  { display: none; }
@media (max-width: 768px) {
    .cl-cta--desktop { display: none; }
    .cl-cta--mobile  { display: block; }
}

.cl-cta {
    background: #1D2545; /* network navy from network.css palette */
    color: #FFFFFF;
}
.cl-cta--desktop { padding: 64px 0; }
.cl-cta--mobile  { padding: 32px 16px; }
.cl-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
    gap: 48px;
    align-items: center;
}
.cl-cta__title {
    font-size: 32px; line-height: 40px;
    font-weight: 700;
    margin: 0 0 12px;
    color: #FFFFFF;
}
.cl-cta--mobile .cl-cta__title { font-size: 24px; line-height: 32px; }
.cl-cta__body {
    margin: 0 0 24px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    line-height: 24px;
}
/* Same box as every other primary button (.cl-hero__cta, .cl-sheet__btn,
   .evl-btn) and as the Subscribe button beside it: 8px radius and the xs
   shadow. It was a 999px pill, so colour alone did not make it match (SCD-526). */
.cl-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    transition: background 120ms ease-out, color 120ms ease-out;
}
.cl-cta__btn--primary {
    background: #465DA6;
    border-color: #465DA6;
    color: #FFFFFF;
}
.cl-cta__btn--primary:hover { background: #38489E; border-color: #38489E; color: #FFFFFF; }

.cl-cta__newsletter {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;
}
.cl-cta--mobile .cl-cta__newsletter { margin-top: 24px; }

/* The button sat too close to the paragraph above it (SCD-526). */
.cl-cta--mobile .cl-cta__btn { margin-top: 24px; }
.cl-cta__newsletter-label {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
}
.cl-cta__newsletter-row {
    display: flex;
    gap: 8px;
}
.cl-cta__newsletter-input {
    flex: 1 1 auto;
    min-width: 0;
    background: #FFFFFF;
    color: #1F2533;
    border: 0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
}
.cl-cta__newsletter-submit {
    flex: 0 0 auto;
    white-space: nowrap;
    background: #FFFFFF;
    color: #1D2545;
    border: 0;
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}
.cl-cta__newsletter-submit:hover { background: #EEF1FB; }

@media (max-width: 768px) {
    .cl-cta__inner { grid-template-columns: 1fr; gap: 0; }
}


/* All Contributors — lazy-load skeleton (shown until JS swaps in the
   real list from /api/contributors/list). */
@keyframes cl-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.cl-skel {
    display: block;
    background-color: #eef0f6;
    background-image: linear-gradient(90deg, #eef0f6 0%, #f7f8fb 50%, #eef0f6 100%);
    background-size: 400px 100%;
    background-repeat: no-repeat;
    animation: cl-shimmer 1.2s ease-in-out infinite;
    border-radius: 6px;
}
.cl-skel--avatar { width: 40px; height: 40px; border-radius: 8px; flex: 0 0 auto; }
.cl-skel--line { height: 12px; margin: 6px 0; }
.cl-skel--w60 { width: 60%; }
.cl-skel--w50 { width: 50%; }
.cl-skel--w40 { width: 40%; }
.cl-skel--w30 { width: 30%; }
.cl-skel--pill { width: 84px; height: 32px; border-radius: 999px; flex: 0 0 auto; }
.cl-list-card--skeleton { pointer-events: none; }
.cl-all__cards--skeleton { margin: 0; }

/* Articles / Multimedia lazy-load skeleton — reuses the .cl-related__grid
   4-col layout; each cell is a thumb block + three text lines. */
.cl-skel--thumb { width: 100%; height: 160px; border-radius: 8px; }
.cl-related-card--skeleton {
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}
.cl-related__grid--skeleton { margin-bottom: 16px; }

/* The Articles/Multimedia fragment emits .cl-related__grid for both
   variants; on mobile let it scroll horizontally like the old scroller. */
/* Figma 1410:10330 — mobile Article/Multimedia: 239-wide horizontal
   scroller; card image 158 tall, badge 12/20 (px8 py2), title 14/22,
   meta 12/20. Section header/title/CTA scale to the mobile design. */
@media (max-width: 768px) {
    /* Figma 1447:1009 — same 16px gutter as Featured; see the note there. */
    .cl-related--mobile .cl-related__grid {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px; /* snap aligns to the padding box, so without this the first card lands at 0 and eats the gutter */
        scrollbar-width: none;
        padding: 0 16px;
        /* Keep a gap above the Browse button; a bare margin:0 here wiped the
           desktop margin-bottom and left the cards touching it (SCD-526). */
        margin: 0 0 24px;
    }
    .cl-related--mobile .cl-related__grid::-webkit-scrollbar { display: none; }
    .cl-related--mobile .cl-related__grid > * {
        flex: 0 0 auto;
        width: 239px;
        scroll-snap-align: start;
    }
    .cl-related--mobile .cl-related__title {
        font-size: 20px;
        line-height: 28px;
        font-weight: 700;
    }
    .cl-related--mobile .cl-post__media { height: 158px; }
    .cl-related--mobile .cl-post__badge {
        font-size: 12px;
        line-height: 20px;
        font-weight: 400;
        padding: 2px 8px;
    }
    .cl-related--mobile .cl-post__title a {
        font-size: 14px;
        line-height: 22px;
    }
    .cl-related--mobile .cl-post__meta {
        font-size: 12px;
        line-height: 20px;
    }
}
.cl-all__loading {
    text-align: center;
    color: #6B7280;
    font-size: 14px;
    margin: 16px 0 0;
}
[data-cl-all-container] { min-height: 200px; }

/* All Contributors — DESKTOP 1:1 (Figma 1521:11009)
   [240 sidebar] — 52 gap — [924 main: sort bar + 2-col grid + pager] */
/* Figma 1521:11009 — py 72, 1216 content (112 gutter), centered. */
.cl-all--desktop { padding: 72px 0; }
.cl-all--desktop .cl-all__container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--cl-gutter);
}
.cl-all--desktop .cl-all__header { margin-bottom: 32px; }
.cl-all--desktop .cl-all__title {
    font-size: 36px;
    line-height: 44px;
    font-weight: 600;
    letter-spacing: -0.72px;
    color: #000000;
    margin: 0;
}
.cl-all__layout {
    display: flex;
    align-items: flex-start;
    gap: 52px;
}
.cl-all__main { flex: 1 1 0; min-width: 0; }

/* ---- Filter sidebar (1521:11010) ---- */
.cl-filter {
    width: 240px;
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.cl-filter__title {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #8C8C8C;
    margin: 0;
    height: 44px;
    display: flex;
    align-items: center;
}
.cl-filter__scroll {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-height: 396px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #9A9A9A #E8E8E8;
}
.cl-filter__scroll::-webkit-scrollbar { width: 8px; }
.cl-filter__scroll::-webkit-scrollbar-track { background: #E8E8E8; border-radius: 100px; }
.cl-filter__scroll::-webkit-scrollbar-thumb { background: #9A9A9A; border-radius: 100px; }
.cl-filter__group { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cl-filter__legend {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #1F2533;
    padding: 0;
    margin: 0 0 4px;
}
.cl-filter__row {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.cl-filter__row input { position: absolute; opacity: 0; width: 0; height: 0; }
.cl-filter__box {
    width: 20px; height: 20px;
    flex: 0 0 auto;
    border: 1px solid #D5D7DA;
    border-radius: 6px;
    background: #FFFFFF;
    position: relative;
}
.cl-filter__row input:checked + .cl-filter__box {
    background: #465DA6;
    border-color: #465DA6;
}
.cl-filter__row input:checked + .cl-filter__box::after {
    content: "";
    position: absolute;
    left: 6px; top: 2.5px;
    width: 5px; height: 9px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.cl-filter__row input:focus-visible + .cl-filter__box {
    outline: 2px solid #465DA6;
    outline-offset: 2px;
}
.cl-filter__label {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #414651;
}

/* ---- Sort bar (1521:11032) ---- */
.cl-sortbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 24px;
}
.cl-sortbar__control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    padding: 10px 14px;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
}
.cl-sortbar__label { font-size: 14px; color: #8C8C8C; }
.cl-sortbar__select {
    border: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #414651;
    cursor: pointer;
    appearance: none;
    padding-right: 18px;
    background-image: linear-gradient(45deg, transparent 50%, #414651 50%), linear-gradient(135deg, #414651 50%, transparent 50%);
    background-position: calc(100% - 9px) 50%, calc(100% - 5px) 50%;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
}

/* ---- 2-col card grid (924, 2 cards, 32 gap) ---- */
.cl-all--desktop .cl-all__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---- Contributor card (1521:11039) ---- */
.cl-card {
    list-style: none;
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 14px;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.07);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.cl-card__head { display: flex; gap: 16px; align-items: flex-start; }
.cl-card__avatar {
    position: relative;
    width: 56px; height: 56px;
    flex: 0 0 56px;
    display: block;
}
.cl-card__avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 1px solid #F4F4F4;
    background: #EEF1FB;
    color: #465DA6;
    font-size: 20px;
    font-weight: 600;
}
.cl-card__verified {
    position: absolute;
    right: -6px; bottom: -7px;
    width: 26px; height: 26px;
    display: block;
}
.cl-card__id { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cl-card__name {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #000000;
    text-decoration: none;
}
.cl-card__name:hover { color: #465DA6; }
.cl-card__org {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    line-height: 22px;
    color: #262626;
    overflow: hidden;
}
.cl-card__org-icon { width: 14px; height: 14px; flex: 0 0 auto; display: block; }
.cl-card__org span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cl-card__role {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: #8C8C8C;
}
.cl-card__divider { height: 1px; background: #D9D9D9; width: 100%; }
.cl-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.cl-card__loc {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    line-height: 22px;
    color: #8C8C8C;
    min-width: 0;
}
.cl-card__follow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    padding: 10px 16px;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: #414651;
    cursor: pointer;
}
.cl-card__follow img { width: 20px; height: 20px; display: block; }
.cl-card__follow:hover { border-color: #465DA6; color: #465DA6; }

/* Followed state — matches the profile pages' secondary "Following" button. */
.cl-card__follow--following { color: #414651; background: #FFFFFF; }
.cl-card__follow--following:hover { border-color: #D92D20; color: #D92D20; }
.cl-card__follow:disabled { opacity: .6; cursor: default; }

/* Avatar photo (Figma 1521:11042/11043) — 56 circle, 1px #F4F4F4 ring. */
.cl-card__avatar-img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #F4F4F4;
    display: block;
}
/* Topic pills (Figma 1521:11055) — #EBF1FF/#465DA6, 14/20 Medium,
   px12 py4, radius 16, wrap, 8px gap; neutral "+N" overflow pill. */
.cl-card__tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}
.cl-card__tag {
    background: #EBF1FF;
    color: #465DA6;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}
.cl-card__tag--more {
    background: #FFFFFF;
    color: #414651;
    border: 1px solid #DBDBE1;
}
.cl-card__loc-icon { width: 12px; height: 12px; flex: 0 0 auto; display: block; }
.cl-card__loc span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .cl-all__layout { flex-direction: column; gap: 32px; }
    .cl-filter { width: 100%; flex: none; }
    .cl-filter__scroll { max-height: none; }
    .cl-all--desktop .cl-all__cards { grid-template-columns: 1fr; }
}

/* Section backgrounds. Every Contributors-listing section the design
   specifies is bg-white (Featured 1521:10930, All 1521:11009, Article
   by Contributors 1521:11250, Multimedia 1521:11302); the hero reads
   as light Brand/25 #F6F9FF (set on .cl-hero). The Ellipse 261 pastel
   wash never reaches these frames in the canonical desktop design, so
   no section carries it — keeping them clean white per Figma. */

/* Featured Experts lazy-load skeleton helper */
.cl-featured__loading {
    text-align: center;
    color: #6B7280;
    font-size: 14px;
    margin: 16px 0 0;
}
.cl-featured-card--skeleton { pointer-events: none; gap: 8px; }


/* Hover image zoom (real hover devices only). */
.cl-post__media img { transition: transform .4s ease; }
@media (hover: hover) {
    .cl-post:hover .cl-post__media img { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    .cl-post__media img { transition: none; }
    .cl-post:hover .cl-post__media img { transform: none; }
    .cl-skel { animation: none !important; }
}

/* =================================================================
   Interaction & accessibility enhancements
   ================================================================= */

/* Keyboard focus ring on interactive elements missing one (brand #465DA6). */
.cl-hero__cta:focus-visible,
.cl-featured-card__name:focus-visible,
.cl-all__filter-btn:focus-visible,
.cl-all__sort-select:focus-visible,
.cl-all__filter-group select:focus-visible,
.cl-list-card__name:focus-visible,
.cl-list-card__follow:focus-visible,
.cl-all__page:focus-visible,
.cl-all__page-arrow:focus-visible,
.cl-related__cta:focus-visible,
.cl-post__title a:focus-visible,
.cl-cta__btn:focus-visible,
.cl-cta__newsletter-input:focus-visible,
.cl-cta__newsletter-submit:focus-visible,
.cl-sortbar__select:focus-visible,
.cl-card__name:focus-visible,
.cl-card__follow:focus-visible {
    outline: 2px solid #465DA6;
    outline-offset: 2px;
}

/* Pressed feedback (non-motion). */
.cl-hero__cta:active,
.cl-post__title a:active,
.cl-cta__btn--primary:active {
    filter: brightness(0.96);
}

/* Light/ghost controls darken by one step instead. */
.cl-all__filter-btn:active,
.cl-related__cta:active,
.cl-card__follow:active { background: #F0F0F0; }
.cl-list-card__follow:active { background: rgba(0, 0, 0, 0.04); }
.cl-all__page:active,
.cl-all__page-arrow:active,
.cl-cta__newsletter-submit:active { background: #E4E8F5; }

/* =================================================================
   Mobile bottom sheets (SCD-526, Figma 2040:33900).
   ================================================================= */

/* Only rendered inside .cl-all--mobile, which is hidden above 768px. */
.cl-all__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cl-all__filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #EBF1FF;
    color: #465DA6;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
}
.cl-all__filter-count[hidden] { display: none; }
.cl-all__sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 9px 14px;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    background: #FFFFFF;
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
    color: #1C1C1C;
}
.cl-all__sort-prefix { color: #8C8C8C; white-space: nowrap; }

/* Truncate rather than wrap, so the row keeps one height (SCD-526 4.1). */
.cl-all__sort-value {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.cl-sheet { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; }
.cl-sheet[hidden] { display: none; }
.cl-sheet__scrim { position: absolute; inset: 0; background: rgba(21, 28, 50, 0.5); }
.cl-sheet__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-height: 80vh;
    padding: 16px 8px;
    background: #FFFFFF;
    border-radius: 8px 8px 0 0;
    animation: cl-sheet-up 0.3s ease;
}
@keyframes cl-sheet-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.cl-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    flex: 0 0 auto;
}
.cl-sheet__title {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.88);
}
.cl-sheet__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #262626;
    cursor: pointer;
}
.cl-sheet__body { overflow-y: auto; flex: 1 1 auto; }
.cl-sheet__group + .cl-sheet__group { margin-top: 8px; }
.cl-sheet__group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 46px;
    padding: 12px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
    color: #262626;
    cursor: pointer;
}
.cl-sheet__chevron { transition: transform 150ms ease; }
.cl-sheet__group-head[aria-expanded="false"] .cl-sheet__chevron { transform: rotate(-90deg); }
.cl-sheet__group-head[aria-expanded="false"] + .cl-sheet__group-body { display: none; }
.cl-sheet__opt {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 12px;
    border-bottom: 1px solid #F0F0F0;
    border-radius: 4px;
    cursor: pointer;
}

/* The real input drives state, .cl-sheet__box is what gets painted. */
.cl-sheet__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.cl-sheet__box {
    position: relative;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 1px solid #D5D7DA;
    border-radius: 4px;
    background: #FFFFFF;
}
.cl-sheet__opt input:checked + .cl-sheet__box { background: #465DA6; border-color: #465DA6; }
.cl-sheet__opt input:checked + .cl-sheet__box::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.cl-sheet__opt input:focus-visible + .cl-sheet__box { outline: 2px solid #465DA6; outline-offset: 2px; }
.cl-sheet__opt-label { font-size: 14px; line-height: 22px; color: #262626; }
.cl-sheet__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    padding: 0 8px;
}
.cl-sheet__btn {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
}
.cl-sheet__btn--ghost { background: #FFFFFF; border: 1px solid #D5D7DA; color: #414651; }
.cl-sheet__btn--primary { background: #465DA6; border: 1px solid #465DA6; color: #FFFFFF; }
.cl-sheet__btn:focus-visible { outline: 2px solid #465DA6; outline-offset: 2px; }
.cl-sheet__sort-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 22px;
    color: #262626;
    cursor: pointer;
}
.cl-sheet__sort-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.cl-sheet__tick { visibility: hidden; color: #465DA6; flex: 0 0 auto; }
.cl-sheet__sort-opt:has(input:checked) { background: #EBF1FF; color: #465DA6; font-weight: 600; }
.cl-sheet__sort-opt:has(input:checked) .cl-sheet__tick { visibility: visible; }
.cl-sheet__sort-opt:has(input:focus-visible) { outline: 2px solid #465DA6; outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
    .cl-sheet__panel { animation: none; }
    .cl-sheet__chevron { transition: none; }
}