/*
 * Category landing pages (xenword-theme)
 *
 * Boxed/centered container aligned to the 1180px site chrome (matches the front
 * page and masthead). The standard treatment is a post list + sidebar; the
 * sidebar reuses the `.article-sidebar` widget chrome from single.css.
 */

.cat {
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 20px 36px;
    box-sizing: border-box;
    background: #fff;
    color: #222;
}

/* ---- Masthead --------------------------------------------------------- */
.cat-masthead {
    text-align: center;
    padding: 18px 0 16px;
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: 26px;
}
.cat-masthead__title {
    margin: 0;
    font: 800 40px/1.1 Georgia, "Times New Roman", serif;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}
.cat-masthead__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.cat-chip {
    display: inline-block;
    padding: 4px 10px;
    background: #1a1a1a;
    color: #fff;
    font: 700 11px/1.3 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-radius: 2px;
}
.cat-chip:hover {
    background: var(--cat-color, #c0392b);
    color: #fff;
    text-decoration: none;
}
.cat-masthead__desc {
    max-width: 720px;
    margin: 14px auto 0;
    color: #555;
    font: 400 15px/1.6 Georgia, "Times New Roman", serif;
}

/* ---- Body: list + sidebar -------------------------------------------- */
.cat-body {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
}
.cat-body .content-area { flex: 1 1 0; min-width: 0; }

/* ---- Article list ---------------------------------------------------- */
.cat-list { margin: 0; }
.cat-item {
    display: flex;
    gap: 22px;
    padding: 22px 0;
    border-bottom: 1px solid #ededed;
    align-items: flex-start;
}
.cat-list > .cat-item:first-child { padding-top: 0; }

.cat-item__thumb {
    position: relative;
    flex: 0 0 300px;
    display: block;
    line-height: 0;
}
.cat-item__thumb img {
    width: 300px;
    height: 175px;
    object-fit: cover;
    display: block;
}
.cat-item__badge {
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--cat-color, #7a4fb5);
    color: #fff;
    font: 700 10px/1.4 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 3px 9px;
}

.cat-item__body { flex: 1 1 0; min-width: 0; }
.cat-item__title {
    margin: 0 0 6px;
    font: 700 22px/1.25 Georgia, "Times New Roman", serif;
}
.cat-item__title a { color: #1a1a1a; }
.cat-item__title a:hover { color: var(--cat-color, #c0392b); text-decoration: none; }
.cat-item__meta {
    font: italic 400 13px/1.4 Georgia, "Times New Roman", serif;
    color: #999;
    margin-bottom: 10px;
}
.cat-item__sep { margin: 0 4px; }
.cat-item__excerpt {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: #555;
}

/* ---- Pagination ------------------------------------------------------ */
.cat-body .pagination,
.cat-body .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 28px;
}
.cat-body .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #333;
    font-size: 14px;
    font-weight: 600;
}
.cat-body a.page-numbers:hover { border-color: var(--cat-color, #c0392b); color: var(--cat-color, #c0392b); text-decoration: none; }
.cat-body .page-numbers.current {
    background: #2f78c4;
    border-color: #2f78c4;
    color: #fff;
}
.cat-body .page-numbers.dots { border-color: transparent; }

/* ---- Bio sidebar (staff/author pages) -------------------------------- */
.bio-card {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-bottom: 24px;
}
.bio-card .bio-card__photo,
.bio-card .bio-card__text { padding: 0 !important; }

/* Default: a soft, LinkedIn-style circular headshot, centered and modest so it
   doesn't overwhelm the rail. */
.bio-card__photo {
    display: block;
    width: 150px;
    height: 150px;
    margin: 0 auto 16px;
    line-height: 0;
}
.bio-card__photo img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 4px solid #fff;
    box-shadow: 0 0 0 1px #e3e3e3, 0 3px 10px rgba(0, 0, 0, .12);
}

/* Scene photos (e.g. Loren's Mars-rover photo) stay full-width + rectangular. */
.bio-card--full .bio-card__photo {
    width: auto;
    height: auto;
    margin: 0 0 16px;
}
.bio-card--full .bio-card__photo img {
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: 0;
    border: none;
    box-shadow: none;
}
.bio-card__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}
.bio-card__text strong { color: #1a1a1a; }

/* "All About {Name}" links list */
.widget--about .bio-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.widget--about .bio-links li + li { margin-top: 10px; }
.widget--about .bio-links a {
    color: var(--xf-linkColor, #2f78c4);
    font-size: 14px;
    font-weight: 600;
}
.widget--about .bio-links a:hover { text-decoration: underline; }

/* Evidence-based "About" box (Politics rail) — plain bordered card, no title,
   matching the Community Profile widget below it. */
.evidence-about-box {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    margin-bottom: 28px;
    overflow: hidden;
}
.evidence-about-box__title {
    margin: 0;
    padding: 12px 18px;
    background: #f4f4f4;
    border-bottom: 1px solid #e0e0e0;
    font-size: 15px;
    font-weight: 600;
    color: #232629;
}
.evidence-about-box .evidence-about {
    margin: 0;
    padding: 16px 18px;
    font-size: 14px;
    line-height: 1.65;
    color: #333;
}

/* ---- Politics: evidence-based hero ----------------------------------- */
/* Dark ring-side band; the boxing logo (black PNG bg) blends into it. Bleeds to
   the container edges by offsetting the .cat padding (8px top / 20px sides). */
.cat-hero--politics {
    background: #0b0b0d;
    margin: -8px -20px 28px;
    padding: 30px 28px 24px;
    color: #fff;
    border-bottom: 3px solid #c0392b;
}
.cat-hero__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    max-width: 940px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.cat-hero__logo {
    width: 400px;
    max-width: 58%;
    height: auto;
    display: block;
}
.cat-hero__head {
    text-align: left;
    min-width: 240px;
    flex: 1 1 260px;
}
.cat-hero__eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 11px;
    border: 1px solid #b8860b;
    border-radius: 2px;
    background: rgba(214, 178, 0, .08);
    color: #f0c419;
    font: 700 11px/1 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.cat-hero__title {
    margin: 0 0 12px;
    font: 800 54px/1 Georgia, "Times New Roman", serif;
    color: #fff;
    letter-spacing: -0.01em;
}
.cat-hero__tagline {
    margin: 0;
    max-width: 430px;
    font: italic 400 19px/1.45 Georgia, "Times New Roman", serif;
    color: #d2d2d6;
}
.cat-hero__nav {
    justify-content: center;
    margin-top: 22px;
}
.cat-hero__nav .cat-chip {
    background: #2a2a2e;
}
.cat-hero__nav .cat-chip:hover {
    background: #c0392b;
}

@media (max-width: 760px) {
    .cat-hero__stage { gap: 18px; }
    .cat-hero__logo { width: 100%; max-width: 360px; }
    .cat-hero__head { text-align: center; flex-basis: 100%; }
    .cat-hero__tagline { margin-left: auto; margin-right: auto; }
    .cat-hero__title { font-size: 38px; }
}

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 980px) {
    .cat-body { flex-direction: column; gap: 0; }
    .cat-body .article-sidebar { width: 100%; }
}
@media (max-width: 600px) {
    .cat-masthead__title { font-size: 28px; }
    .cat-item { gap: 14px; }
    .cat-item__thumb { flex-basis: 120px; }
    .cat-item__thumb img { width: 120px; height: 80px; }
    .cat-item__title { font-size: 18px; }
    .cat-item__excerpt { display: none; }
}