/* =========================================================
   CORTEX BLOG CATEGORY LIST (PUBLIC LAYOUT)
   Location : /blog/blog-article-list.css
   Purpose  : Styles ONLY for /blog/category/<slug>/ listing pages.
   Redesign : Compact horizontal rows with left thumbnail
   ========================================================= */


/* =========================================================
   TOKENS (SCOPED)
   ========================================================= */

.ctb-category-wrapper {
    --ctb-radius: 0;
    --ctb-inner-radius: 0;

    --ctb-border: none;
    --ctb-soft-border: none;

    --ctb-shadow-1: none;
    --ctb-shadow-2: none;

    --ctb-title-size: 1.75rem;
    --ctb-title-weight: 950;

    --ctb-subtext: rgba(255,255,255,0.45);

    --ctb-pill-font-size: .74rem;
    --ctb-pill-letter-spacing: .08em;
    --ctb-pill-pad-y: .46rem;
    --ctb-pill-pad-x: .85rem;

    --ctb-accent-width: 3px;

    --ctb-frame-bg: transparent;
    --ctb-frame-pad: 0;

    --ctb-row-hover: rgba(6,182,212,0.04);
    --ctb-row-focus: rgba(6,182,212,0.12);

    --ctb-cta-bg: transparent;
    --ctb-cta-bg-hover: transparent;

    --ctb-accent: var(--blog-category-color, #64748b);
}


/* =========================================================
   WRAPPER + SAFE IMAGE RULE
   ========================================================= */

.ctb-category-wrapper {
    padding-top: 2.75rem;
    padding-bottom: 3.25rem;
}

.ctb-category-wrapper img.img-responsive {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   HEADER CARD
   ========================================================= */

.ctb-category-header {
    position: relative;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid var(--ctb-accent);
    overflow: hidden;
    background: transparent;
    box-shadow: none;
    padding: 1.2rem 0;
}

/* Left accent rail (hidden - using bottom border instead) */
.ctb-category-header::before {
    display: none;
}

.ctb-category-title {
    margin: 0;
    font-size: var(--ctb-title-size);
    font-weight: var(--ctb-title-weight);
    letter-spacing: 0.01em;
    line-height: 1.12;
    color: #ffffff;
}

.ctb-category-title .ctb-category-title-slug {
    color: #ffffff;
}

.ctb-category-subhead {
    margin-top: .35rem;
    color: var(--ctb-subtext);
    font-size: .95rem;
}


/* =========================================================
   CATEGORY PILL (PUBLIC)
   ========================================================= */

.blog-category-badge.ctb-category-pill {
    margin-top: .85rem;
    display: inline-flex;
    align-items: center;

    padding: var(--ctb-pill-pad-y) var(--ctb-pill-pad-x);
    padding-left: calc(var(--ctb-pill-pad-x) + 0.7rem);

    border-radius: 999px;

    font-size: var(--ctb-pill-font-size);
    font-weight: 950;
    letter-spacing: var(--ctb-pill-letter-spacing);
    text-transform: uppercase;

    color: #ffffff;
    background: var(--blog-category-color, #64748b);
    line-height: 1;

    border: 1px solid rgba(255,255,255,0.22);
    box-shadow:
        0 10px 22px rgba(0,0,0,0.3),
        0 3px 10px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.10);

    position: relative;
    transform: translateZ(0);
}

/* Dot */
.blog-category-badge.ctb-category-pill::after {
    content: "";
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10);
    position: absolute;
    left: .6rem;
    top: 50%;
    transform: translateY(-50%);
}

/* Sheen */
.blog-category-badge.ctb-category-pill::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.22) 0%,
        rgba(255,255,255,0.06) 48%,
        rgba(0,0,0,0.08) 100%
    );
    pointer-events: none;
    opacity: 0.85;
}


/* =========================================================
   COUNT LINE
   ========================================================= */

.ctb-category-meta {
    margin-top: .85rem;
}

.ctb-category-count {
    color: var(--ctb-subtext);
}


/* =========================================================
   LIST GROUP - CLEAN, NO FRAME
   ========================================================= */

.ctb-category-list {
    border-radius: 0;
    border: none;
    padding: 0;
    overflow: visible;
    box-shadow: none;
    background: transparent;
}

/* =========================================================
   ROW ITEM - COMPACT HORIZONTAL
   ========================================================= */

.ctb-category-item {
    position: relative;
    display: block;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 0;
    padding: 0.85rem 1rem;
    margin: 0 0 -1px 0;
    background: #0f0f18;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.18s ease, padding-left 0.18s ease, box-shadow 0.18s ease;
}

.ctb-category-item:first-child {
    /* border already on all sides */
}

.ctb-category-item:last-child {
    margin-bottom: 0;
}

/* Zebra striping */
.ctb-category-item.ctb-row-odd  { background: #0a0a12 !important; }
.ctb-category-item.ctb-row-even { background: #0f0f18 !important; }

/* Left accent rail - appears on hover */
.ctb-category-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: 0;
    background: var(--ctb-accent);
    opacity: 0.95;
    transition: width 0.18s ease;
}

.ctb-category-item:hover::before,
.ctb-category-item:focus::before {
    width: 3px;
}

/* Hover - subtle bg + left accent shift */
.ctb-category-item:hover,
.ctb-category-item:focus {
    background: rgba(6,182,212,0.04) !important;
    transform: none;
    box-shadow: none;
    padding-left: 1.5rem;
}

.ctb-category-item:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px var(--ctb-row-focus);
}

/* Inner layout - explicit flex (no BS utilities) */
.ctb-item-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
}

.ctb-item-main {
    flex: 1 1 0%;
    min-width: 0;
}

/* Title */
.ctb-item-title {
    font-weight: 700;
    letter-spacing: 0;
    color: #ffffff;
    line-height: 1.3;
    font-size: 15px;
    margin-bottom: 2px;
}

/* Lead / excerpt */
.ctb-item-lead {
    font-size: 13px;
    color: rgba(255,255,255,0.45);
    line-height: 1.4;
    margin-top: 2px;
    margin-bottom: 2px;
}

/* Meta line */
.ctb-item-meta {
    color: rgba(255,255,255,0.35);
    font-size: 12px;
}

.ctb-meta-sep {
    margin: 0 .3rem;
    opacity: 0.5;
}


/* =========================================================
   CTA - MINIMAL TEXT LINK
   ========================================================= */

.ctb-item-cta {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    opacity: 0.7;
    font-weight: 600;
    letter-spacing: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    transition: opacity 0.18s ease;
    font-size: 13px;
    color: var(--ctb-accent, #64748b);
}

.ctb-read-text {
    font-size: 13px;
    font-weight: 600;
}

.ctb-category-item:hover .ctb-item-cta {
    opacity: 1;
    transform: none;
    background: transparent;
    border-color: transparent;
}


/* =========================================================
   EMPTY / ALERT BLOCK
   ========================================================= */

.ctb-category-alert {
    border-radius: 0;
    box-shadow: none;
}

/* =========================================================
   BACK TO BLOG LINK
   ========================================================= */

.ctb-category-wrapper .ctb-back-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-decoration: none;
    color: inherit;
    opacity: 0.92;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.ctb-category-wrapper .ctb-back-link:hover,
.ctb-category-wrapper .ctb-back-link:focus {
    opacity: 1;
    transform: translateX(-2px);
    text-decoration: none;
}

.ctb-category-wrapper .ctb-back-link:focus-visible {
    outline: 2px solid rgba(6,182,212,0.4);
    outline-offset: 3px;
    border-radius: 0;
}


/* =========================================================
   ARROW (BACK LINK)
   ========================================================= */

.ctb-category-wrapper .ctb-back-arrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 2.1rem;
    line-height: 0;
    font-size: 0;
    transform-origin: 50% 55%;
    transition: transform 0.18s ease;
}

.ctb-category-wrapper .ctb-back-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 28%;
    width: 34%;
    height: 2px;
    background: currentColor;
    transform: translateY(-50%);
}

.ctb-category-wrapper .ctb-back-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 28%;
    width: 0.62rem;
    height: 0.62rem;
    border-left: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: translateY(-50%) rotate(-45deg);
}

.ctb-category-wrapper .ctb-back-link:hover .ctb-back-arrow,
.ctb-category-wrapper .ctb-back-link:focus .ctb-back-arrow {
    transform: translateX(-3px);
}


/* =========================================================
   READ ARROW (→) - COMPACT
   ========================================================= */

.ctb-category-wrapper .ctb-read-arrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    line-height: 0;
    font-size: 0;
    transform-origin: 50% 55%;
    transition: transform 0.18s ease;
}

.ctb-category-wrapper .ctb-read-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 20%;
    width: 50%;
    height: 1.5px;
    background: currentColor;
    transform: translateY(-50%);
}

.ctb-category-wrapper .ctb-read-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20%;
    width: 0.4rem;
    height: 0.4rem;
    border-right: 1.5px solid currentColor;
    border-top: 1.5px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}

.ctb-category-wrapper .ctb-category-item:hover .ctb-read-arrow,
.ctb-category-wrapper .ctb-category-item:focus .ctb-read-arrow {
    transform: rotate(-45deg);
}


/* =========================================================
   THUMBNAIL - LEFT SIDE, COMPACT
   ========================================================= */

.ctb-item-thumb {
    width: 100px;
    height: 68px;
    border-radius: 0;
    overflow: hidden;
    background: #0a0a12;
    flex-shrink: 0;
    order: -1;
}

.ctb-thumb-img {
    width: 100px;
    height: 68px;
    object-fit: cover;
    border-radius: 0;
}

.ctb-item-right {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.ctb-thumb-img {
    display: block;
}

.ctb-category-pill-link,
.ctb-category-pill-link:hover,
.ctb-category-pill-link:focus,
.ctb-category-pill-link:active {
    text-decoration: none;
    color: inherit;
}

.ctb-category-pill-link {
    display: inline-flex;
}

/* "Written By" prefix */
.ctb-item-author .blog-author-prefix {
    font-weight: 400;
    color: rgba(255,255,255,0.35);
}


/* =========================================================
   RESPONSIVE (991px)
   ========================================================= */

@media (max-width: 991px) {
    .ctb-category-title {
        font-size: 1.45rem;
    }

    .ctb-category-header {
        padding: 1rem 0;
    }
}


/* =========================================================
   RESPONSIVE (767px)
   ========================================================= */

@media (max-width: 767px) {
    .ctb-category-wrapper {
        padding-top: 2rem;
        padding-bottom: 2.5rem;
    }

    .ctb-category-title {
        font-size: 1.3rem;
    }

    .ctb-category-item {
        padding: 0.6rem 0;
    }

    .ctb-item-inner {
        gap: 0.6rem;
    }

    .ctb-item-title {
        font-size: 14px;
    }

    .ctb-item-lead {
        font-size: 12px;
        display: none;
    }

    .ctb-item-meta {
        font-size: 11px;
    }

    .ctb-item-thumb {
        width: 70px;
        height: 48px;
    }

    .ctb-thumb-img {
        width: 70px;
        height: 48px;
    }

    .ctb-item-cta {
        font-size: 12px;
    }

    .ctb-read-text {
        font-size: 12px;
    }

    .ctb-read-arrow {
        width: 1rem;
        height: 1rem;
    }
}


/* =========================================================
   SMALL MOBILE (< 480px)
   ========================================================= */

@media (max-width: 479.98px) {
    .ctb-category-title {
        font-size: 1.2rem;
    }

    .ctb-item-title {
        font-size: 13px;
    }

    .ctb-item-cta {
        font-size: 11px;
    }

    .ctb-item-thumb {
        width: 56px;
        height: 40px;
    }

    .ctb-thumb-img {
        width: 56px;
        height: 40px;
    }
}