/* =========================================================
   BLOG INDEX  (src/styles/blog.css)
   ---------------------------------------------------------
   The /blog listing: category filter rail, the featured post,
   and the card grid. The card component (.bl-card) also backs
   the "Keep reading" rail at the foot of an article, which is
   why it lives here rather than in blog-article.css.

   Page chrome — the fixed-nav offset, the dark gradient
   backdrop and the title lockup — is inherited from
   .support-flow / .support-head (support-header.css), the same
   as FAQ, Video Tutorials and Contact. Nothing is redefined.

   Defensive notes: m072224.css sets global
     p, li { line-height: 2.2rem; font-size: 1.2rem;
             letter-spacing: .03rem; color: var(--c3) }
     a     { color: var(--c4) }
     h1/h2/h3 { uppercase / oversized / --c4 }
   Every text rule below therefore pins line-height, size,
   tracking and color explicitly. Class selectors (0,1,0)
   out-rank those element rules (0,0,1), so this is only a
   matter of stating the value, never of !important.
   ========================================================= */

/* ── Head lockup ───────────────────────────────────────── */
/* "The Titan Blog" is a name, not a label, so it keeps its own
   casing. Scoped to the index so every other .support-head__title
   (FAQ, Owner's Manual, Contact) stays uppercase. */
.blog-index-page .support-head__title {
    text-transform: none;
}

/* ── Shell ─────────────────────────────────────────────── */
.bl-shell {
    max-width: 76rem;
    margin: 0 auto;
    padding: 0 1.5rem clamp(4rem, 8vw, 6rem);
}

/* The head lockup supplies the gap below itself. */
.support-flow .bl-shell {
    padding-top: 0;
}

/* ── Category filter rail ──────────────────────────────── */
.bl-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 0 clamp(2.25rem, 4vw, 3.25rem);
    padding: 0;
    list-style: none;
}

.bl-filters__item {
    /* beats the global `li` rule */
    line-height: 1;
    font-size: inherit;
    letter-spacing: normal;
    color: inherit;
    list-style: none;
}

.bl-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--tv-cta-ghost-border, rgba(255, 255, 255, 0.14));
    border-radius: var(--theme-radius-pill, 999px);
    background: var(--tv-cta-ghost-bg, rgba(255, 255, 255, 0.04));
    color: var(--theme-text-muted, #c4c6cc);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
}

/* The rail is rendered as <button>s — reset the global button rule
   (uppercase 1.25rem, margin-top: 2rem) that would otherwise apply. */
button.bl-filter {
    margin-top: 0;
    font-size: 0.78rem;
    font-weight: 500;
}

.bl-filter:hover,
.bl-filter:focus-visible {
    border-color: var(--tv-cta-ghost-border-hover, rgba(255, 255, 255, 0.3));
    background: var(--tv-cta-ghost-bg-hover, rgba(255, 255, 255, 0.075));
    color: var(--theme-text-strong, #ffffff);
}

.bl-filter:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.28);
    outline-offset: 3px;
}

.bl-filter__count {
    color: var(--theme-text-soft, #989ba3);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

/* The active pill reads by contrast rather than colour — a brighter border
   and a lifted surface against the ghost pills beside it. */
.bl-filter[aria-pressed="true"] {
    border-color: rgba(255, 255, 255, 0.34);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.07) 100%);
    color: var(--theme-text-strong, #ffffff);
}

.bl-filter[aria-pressed="true"] .bl-filter__count {
    color: var(--theme-text-main-soft-3, rgba(255, 255, 255, 0.9));
}

/* ── Section label above the grid ──────────────────────── */
.bl-rule {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: clamp(2.75rem, 5vw, 4rem) 0 clamp(1.5rem, 2.6vw, 2rem);
}

.bl-rule__label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--theme-text-muted, #c4c6cc);
    white-space: nowrap;
}

.bl-rule__line {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, var(--theme-border, rgba(255, 255, 255, 0.1)) 0%, rgba(255, 255, 255, 0) 100%);
}

/* ── Grid ──────────────────────────────────────────────── */
.bl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.bl-card.is-hidden {
    display: none;
}

/* The grid holds a copy of the featured post so the category counts stay
   honest. It stays hidden while the featured slot above is showing — which
   is also the correct no-JS state — and returns once a filter is active. */
.bl-card.is-featured-dupe {
    display: none;
}

.bl-grid.is-filtered .bl-card.is-featured-dupe:not(.is-hidden) {
    display: flex;
}

/* ── Card ──────────────────────────────────────────────── */
.bl-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.09));
    border-radius: var(--theme-radius-md, 1rem);
    background: var(--theme-surface-white-04, rgba(255, 255, 255, 0.04));
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.bl-card:hover {
    transform: translateY(-3px);
    border-color: var(--theme-border-strong, rgba(255, 255, 255, 0.18));
    box-shadow: var(--theme-shadow-card, 0 14px 34px rgba(0, 0, 0, 0.34));
}

.bl-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #0b0b0c;
}

.bl-card__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 420ms ease;
}

.bl-card:hover .bl-card__img {
    transform: scale(1.035);
}

.bl-card__pill {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    padding: 0.32rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--theme-radius-pill, 999px);
    background: rgba(10, 10, 10, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--theme-text-main-soft, rgba(255, 255, 255, 0.94));
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.bl-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 1.25rem 1.35rem 1.4rem;
}

.bl-card__title {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.005em;
    text-transform: none;
    color: var(--theme-text-strong, #ffffff);
}

.bl-card__link {
    color: inherit;
    text-decoration: none;
}

/* The whole card is clickable, but only the title is a real link — so the
   focus ring lands somewhere sensible for keyboard users. */
.bl-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.bl-card {
    position: relative;
}

.bl-card__link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.4);
    outline-offset: 3px;
    border-radius: 2px;
}

.bl-card__excerpt {
    margin: 0;
    font-size: 0.93rem;
    font-weight: 300;
    line-height: 1.62;
    letter-spacing: 0.005em;
    color: var(--theme-text-muted, #c4c6cc);
}

.bl-card__meta {
    margin: 0.15rem 0 0;
    font-size: 0.76rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme-text-soft, #989ba3);
}

.bl-card__dot {
    margin: 0 0.4rem;
}

.bl-card__cta {
    margin-top: auto;
    padding-top: 0;
}

/* .bl-card__cta is a <span> styled by cta.css — it is decorative here
   because the card already has a real link. Keep it out of the a11y tree
   and let pointer events fall through to the card link. */
.bl-card__cta {
    pointer-events: none;
}

.bl-card__body > .bl-card__cta {
    margin-top: 0.85rem;
}

/* ── Featured card ─────────────────────────────────────── */
.bl-feature {
    margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}

.bl-card--feature {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: stretch;
}

.bl-card--feature .bl-card__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 21rem;
}

.bl-card--feature .bl-card__body {
    justify-content: center;
    gap: 0.75rem;
    padding: clamp(1.75rem, 3.2vw, 2.75rem);
}

.bl-card--feature .bl-card__title {
    font-size: clamp(1.55rem, 2.6vw, 2.05rem);
    font-weight: 300;
    line-height: 1.22;
    letter-spacing: -0.02em;
}

.bl-card--feature .bl-card__excerpt {
    font-size: 1rem;
    line-height: 1.7;
}

/* ── Rail card (related posts, foot of an article) ─────── */
.bl-card--rail .bl-card__media {
    aspect-ratio: 16 / 9;
}

.bl-card--rail .bl-card__body {
    gap: 0.45rem;
    padding: 1rem 1.1rem 1.15rem;
}

.bl-card--rail .bl-card__title {
    font-size: 1.02rem;
}

.bl-card--rail .bl-card__excerpt {
    font-size: 0.87rem;
    line-height: 1.55;
}

/* ── Related section (rendered on the article page) ────── */
.bl-related {
    padding: clamp(3rem, 6vw, 4.5rem) 1.5rem clamp(4rem, 8vw, 6rem);
    border-top: 1px solid var(--theme-divider, rgba(255, 255, 255, 0.08));
}

.bl-related__inner {
    max-width: 76rem;
    margin: 0 auto;
    text-align: center;
}

.bl-related__title {
    position: relative;
    margin: 0 0 clamp(1.75rem, 3.4vw, 2.5rem);
    padding-bottom: 0.9rem;
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--theme-text-strong, #ffffff);
}

.bl-related__title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 4rem;
    height: 0.2rem;
    border-radius: var(--theme-radius-pill, 999px);
    background: linear-gradient(
        90deg,
        var(--theme-accent, #aa0000) 0%,
        var(--theme-accent-deep, #8f0000) 58%,
        transparent 100%
    );
}

.bl-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.35rem;
    text-align: left;
}

/* ── Empty state (a filter matched nothing) ────────────── */
.bl-empty {
    padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
    text-align: center;
}

.bl-empty__text {
    margin: 0;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 0.01em;
    color: var(--theme-text-muted, #c4c6cc);
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
    .bl-grid,
    .bl-related__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bl-card--feature {
        grid-template-columns: 1fr;
    }

    .bl-card--feature .bl-card__media {
        aspect-ratio: 16 / 9;
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .bl-shell {
        padding: 0 1rem clamp(3rem, 8vw, 4rem);
    }

    .bl-grid,
    .bl-related__grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .bl-filters {
        /* A wrapped rail of 6 pills eats the whole screen on a phone —
           scroll it horizontally instead. */
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: -1rem;
        padding-inline: 1rem;
    }

    .bl-filters::-webkit-scrollbar {
        display: none;
    }

    .bl-filters__item {
        flex: 0 0 auto;
    }

    .bl-related {
        padding-inline: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bl-card,
    .bl-card__img {
        transition: none;
    }

    .bl-card:hover {
        transform: none;
    }

    .bl-card:hover .bl-card__img {
        transform: none;
    }
}