/* ============================================================
   BLOG — post index, archives, single post
   Loaded on is_home() / is_archive() / is_single().

   Self-contained: the blog uses its own left-aligned .tr-blog-hero
   rather than the centered .tr-page-hero from pages.css, so nothing
   here depends on that template.
   ============================================================ */

/* ============================================================
   PAGE WASH
   ------------------------------------------------------------
   The atmospheric tint lives on the page wrapper, not on the
   hero. .tr-page-hero paints its wash inside itself and clips
   it with overflow:hidden, so the gradient gets cut off flat
   mid-fade at the hero's bottom edge — against an identical
   ivory below, that edge reads as a hard seam.

   Spanning the wrapper means there is no section boundary for
   the gradient to hit, and the mask guarantees it resolves to
   fully transparent regardless of where sections start or end.
   ============================================================ */

.tr-blog-page {
    position: relative;
    background: var(--mv-color-ivory);
    isolation: isolate;

    /* Site content width — matches the header pill and footer (1420px content
       box with 24px gutters). --tr-blog-shell is that plus both gutters, for
       elements that carry their own horizontal padding. Those MUST also set
       box-sizing:border-box — this theme is content-box globally, so otherwise
       max-width caps the content and the gutters get added on top, leaving the
       box 48px wider than the card grid. */
    --tr-blog-max: 1420px;
    --tr-blog-gutter: 24px;
    --tr-blog-shell: calc(var(--tr-blog-max) + (var(--tr-blog-gutter) * 2));

    /* Reading measure for body copy. Deliberately far narrower than the shell:
       at ~18px, 720px is already ~80 characters per line, the top of the
       comfortable range. Widening this to the shell would wreck legibility. */
    --tr-blog-measure: 720px;
}

.tr-blog-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 920px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 85% 60% at 82% -10%, var(--tr-cel-soft) 0%, transparent 62%),
        radial-gradient(ellipse 65% 50% at 8% 12%, var(--tr-lav-soft) 0%, transparent 62%),
        radial-gradient(ellipse 45% 35% at 55% 30%, var(--tr-lime-wash) 0%, transparent 70%);
    /* Hard guarantee that the wash ends in nothing, not in an edge */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
}

/* ============================================================
   HERO — left-aligned operations log
   ============================================================ */

.tr-blog-hero {
    position: relative;
    padding-top: calc(var(--mv-header-top) + var(--mv-header-height) + 24px + 56px);
    padding-bottom: 0;
    text-align: left;
}

.tr-blog-hero__inner {
    box-sizing: border-box;
    max-width: var(--tr-blog-shell);
    margin: 0 auto;
    padding: 0 var(--tr-blog-gutter);
}

/* Mono path label — echoes the terminal sections elsewhere on the site */
.tr-blog-hero__label {
    display: inline-block;
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-sm);
    letter-spacing: 0.04em;
    color: var(--tr-text-tertiary);
    text-decoration: none;
    margin-bottom: 18px;
}

.tr-blog-hero__prompt {
    color: var(--mv-color-indigo);
    opacity: 0.7;
}

/* Breadcrumb segments. Vertical padding is cancelled by negative margin so the
   hit area clears the 24px minimum without shifting the label. */
.tr-blog-hero__crumb {
    display: inline-block;
    padding: 6px 0;
    margin: -6px 0;
    color: var(--tr-text-tertiary);
    text-decoration: none;
    transition: color 0.2s var(--tr-ease-out);
}

a.tr-blog-hero__crumb:hover,
a.tr-blog-hero__crumb:focus-visible {
    color: var(--mv-color-indigo);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tr-blog-hero__crumb--current {
    color: var(--tr-text-caption);
}

.tr-blog-hero__slash {
    color: var(--tr-text-caption);
    opacity: 0.6;
    padding: 0 2px;
}

.tr-blog-hero__headline {
    font-family: var(--tr-font-display);
    font-weight: var(--tr-weight-heading);
    /* Slightly tighter than --tr-size-h1: this is a header, not a landing hero */
    font-size: clamp(38px, 5.4vw, 64px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--tr-text-primary);
    max-width: 16ch;
    margin: 0;
}

.tr-blog-hero__sub {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-lg);
    line-height: var(--tr-leading-body-lg);
    color: var(--tr-text-tertiary);
    max-width: 54ch;              /* keeps the measure readable, not full-bleed */
    margin: 20px 0 0;
}

/* Status readout — doubles as the hero → grid transition, replacing the
   hard-edged seam with a deliberate hairline. */
.tr-blog-hero__status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
    padding-top: 16px;
    border-top: 1px solid var(--tr-ev-subtle);
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-xs);
    letter-spacing: var(--tr-tracking-caps-sm);
    text-transform: uppercase;
    color: var(--tr-text-caption);
}

.tr-blog-hero__count {
    color: var(--mv-color-indigo);
}

.tr-blog-hero__dot {
    opacity: 0.5;
}

/* Post hero: headline can run wider, no subhead to balance it */
.tr-blog-hero--post .tr-blog-hero__headline {
    max-width: 20ch;
}

/* ── Listing shell ─────────────────────────────────────────── */

.tr-blog-listing {
    padding: var(--tr-space-section-sm) var(--tr-blog-gutter) var(--tr-space-section-lg);
}

.tr-blog-listing__inner {
    max-width: var(--tr-blog-max);
    margin: 0 auto;
}

/* ── Card grid ─────────────────────────────────────────────── */

.tr-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--tr-space-gap-lg);
}

/* ── Card ──────────────────────────────────────────────────── */

.tr-blog-card {
    position: relative;              /* anchor for the stretched title link */
    display: flex;
    flex-direction: column;
    background: var(--mv-bg-surface);
    border: 1px solid var(--tr-ev-border);
    border-radius: var(--tr-radius-md);
    overflow: hidden;
    transition: transform 0.3s var(--tr-ease-spring),
                box-shadow 0.3s var(--tr-ease-out),
                border-color 0.3s var(--tr-ease-out);
}

.tr-blog-card:hover,
.tr-blog-card:focus-within {
    transform: translateY(-4px);
    border-color: var(--tr-ind-border);
    box-shadow: var(--tr-shadow-card-hover);
}

/* Thumbnail */

.tr-blog-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--tr-ev-subtle);
}

.tr-blog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s var(--tr-ease-spring);
}

.tr-blog-card:hover .tr-blog-card__img {
    transform: scale(1.04);
}

/* Fallback when a post has no featured image */
.tr-blog-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at 30% 30%, var(--tr-lime-subtle) 0%, transparent 60%),
        linear-gradient(150deg, var(--mv-color-evergreen) 0%, #0A1F0D 100%);
}

.tr-blog-card__placeholder-mark {
    font-family: var(--tr-font-mono);
    font-size: 2rem;
    color: var(--mv-color-lime);
    opacity: 0.35;
    letter-spacing: 0.1em;
}

/* Body */

.tr-blog-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 22px 22px;
    flex: 1;
}

.tr-blog-card__cat {
    position: relative;
    z-index: 2;                      /* stays clickable above the stretched link */
    align-self: flex-start;
    /* Padding cancelled by equal negative margin: grows the hit area past the
       24px minimum (WCAG 2.5.8) without moving the label. The 7px of downward
       growth stays inside the 10px flex gap, so it never steals clicks from
       the title link. */
    padding: 7px 0;
    margin: -7px 0;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-caps);
    text-transform: uppercase;
    color: var(--mv-color-indigo);
    text-decoration: none;
    transition: color 0.2s var(--tr-ease-out);
}

.tr-blog-card__cat:hover {
    text-decoration: underline;
}

.tr-blog-card__title {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h5);
    font-weight: var(--tr-weight-heading);
    line-height: var(--tr-leading-h5);
    color: var(--tr-text-primary);
    margin: 0;
}

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

/* Stretched hit area — makes the whole card clickable without nesting <a> */
.tr-blog-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.tr-blog-card:hover .tr-blog-card__title,
.tr-blog-card__link:focus-visible {
    color: var(--mv-color-indigo);
}

.tr-blog-card__excerpt {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary);
    margin: 0;
}

.tr-blog-card__date {
    margin-top: auto;
    padding-top: 6px;
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-xs);
    letter-spacing: var(--tr-tracking-caps-sm);
    text-transform: uppercase;
    color: var(--tr-text-caption);
}

/* ── Empty state ───────────────────────────────────────────── */

.tr-blog-empty {
    text-align: center;
    padding: var(--tr-space-section-md) 0;
    color: var(--tr-text-tertiary);
}

.tr-blog-empty h2 {
    font-family: var(--tr-font-display);
    color: var(--tr-text-primary);
    margin: 0 0 10px;
}

/* ── Pagination ────────────────────────────────────────────── */

.tr-blog-listing .navigation.pagination {
    margin-top: var(--tr-space-section-sm);
}

.tr-blog-listing .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.tr-blog-listing .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;                /* WCAG 2.5.5 touch target */
    padding: 0 12px;
    border: 1px solid var(--tr-ev-border);
    border-radius: var(--tr-radius-sm);
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    color: var(--tr-text-secondary);
    text-decoration: none;
    transition: background 0.2s var(--tr-ease-out),
                color 0.2s var(--tr-ease-out),
                border-color 0.2s var(--tr-ease-out);
}

.tr-blog-listing .page-numbers:hover {
    border-color: var(--mv-color-indigo);
    color: var(--mv-color-indigo);
}

.tr-blog-listing .page-numbers.current {
    background: var(--mv-color-evergreen);
    border-color: var(--mv-color-evergreen);
    color: var(--mv-color-ivory);
}

.tr-blog-listing .page-numbers.dots {
    border: none;
    min-width: 0;
    padding: 0 4px;
}

/* ============================================================
   SINGLE POST
   ============================================================ */

/* Featured image. No negative pull-up: the hero no longer ends in a hard
   edge to straddle, so it simply follows the status hairline. */
.tr-post-featured {
    box-sizing: border-box;
    max-width: var(--tr-blog-shell);
    margin: 0 auto;
    padding: 0 var(--tr-blog-gutter);
}

.tr-post-featured__inner {
    margin: var(--tr-space-gap-lg) 0 0;
    border-radius: var(--tr-radius-md);
    overflow: hidden;
    box-shadow: var(--tr-shadow-card);
}

.tr-post-featured__img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Post body ─────────────────────────────────────────────── */

/* No opaque background — the page wash sits behind and should show through.
   Same shell as the hero so the text column's left edge lines up with the
   headline rather than floating centered against a left-aligned hero. */
.tr-post-body {
    box-sizing: border-box;
    max-width: var(--tr-blog-shell);
    margin: 0 auto;
    padding: var(--tr-space-section-sm) var(--tr-blog-gutter) var(--tr-space-section-lg);
}

.tr-post-content {
    max-width: var(--tr-blog-measure);
    margin: 0 auto 0 0;             /* left-aligned to the hero, not centered */
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-lg);
    line-height: var(--tr-leading-relaxed);
    color: var(--tr-text-secondary);
}

/* Editor output — Paul writes in Gutenberg, so style the block defaults */

.tr-post-content > * + * {
    margin-top: 1.5em;
}

.tr-post-content h2,
.tr-post-content h3,
.tr-post-content h4 {
    font-family: var(--tr-font-display);
    font-weight: var(--tr-weight-heading);
    color: var(--tr-text-primary);
    margin-top: 2em;
    margin-bottom: 0.6em;
}

.tr-post-content h2 { font-size: var(--tr-size-h3); line-height: var(--tr-leading-h3); }
.tr-post-content h3 { font-size: var(--tr-size-h4); line-height: var(--tr-leading-h4); }
.tr-post-content h4 { font-size: var(--tr-size-h5); line-height: var(--tr-leading-h5); }

.tr-post-content a {
    color: var(--mv-color-indigo);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tr-post-content ul,
.tr-post-content ol {
    padding-left: 1.4em;
}

.tr-post-content li + li {
    margin-top: 0.5em;
}

.tr-post-content img,
.tr-post-content figure img {
    max-width: 100%;
    height: auto;
    border-radius: var(--tr-radius-sm);
    display: block;
}

.tr-post-content figcaption {
    margin-top: 8px;
    font-size: var(--tr-size-sm);
    color: var(--tr-text-caption);
    text-align: center;
}

.tr-post-content blockquote {
    margin-left: 0;
    margin-right: 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--mv-color-celadon);
    font-size: var(--tr-size-body-lg);
    line-height: var(--tr-leading-body-lg);
    color: var(--tr-text-primary);
}

.tr-post-content code {
    font-family: var(--tr-font-mono);
    font-size: 0.9em;
    background: var(--tr-ev-subtle);
    padding: 2px 6px;
    border-radius: 4px;
}

.tr-post-content pre {
    background: var(--mv-color-evergreen);
    color: var(--mv-color-ivory);
    padding: 20px;
    border-radius: var(--tr-radius-sm);
    overflow-x: auto;               /* long lines scroll rather than break layout */
}

.tr-post-content pre code {
    background: none;
    padding: 0;
    color: inherit;
}

.tr-post-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tr-size-body-sm);
}

.tr-post-content th,
.tr-post-content td {
    border: 1px solid var(--tr-ev-border);
    padding: 10px 12px;
    text-align: left;
}

.tr-post-content hr {
    border: none;
    border-top: 1px solid var(--mv-hairline);
    margin: 2.5em 0;
}

/* ── Tags ──────────────────────────────────────────────────── */

.tr-post-tags {
    max-width: var(--tr-blog-measure);
    margin: var(--tr-space-gap-lg) auto 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: var(--tr-size-body-sm);
}

.tr-post-tags__label {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-caps);
    text-transform: uppercase;
    color: var(--tr-text-caption);
    margin-right: 4px;
}

.tr-post-tags a {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--tr-ev-border);
    border-radius: 100px;
    color: var(--tr-text-secondary);
    text-decoration: none;
    transition: border-color 0.2s var(--tr-ease-out), color 0.2s var(--tr-ease-out);
}

.tr-post-tags a:hover {
    border-color: var(--mv-color-indigo);
    color: var(--mv-color-indigo);
}

/* ── Prev / next ───────────────────────────────────────────── */

.tr-post-nav {
    max-width: none;
    margin: var(--tr-space-section-sm) 0 0;
    padding-top: var(--tr-space-gap-lg);
    border-top: 1px solid var(--mv-hairline);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tr-space-gap-md);
}

.tr-post-nav__link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid var(--tr-ev-border);
    border-radius: var(--tr-radius-md);
    text-decoration: none;
    transition: border-color 0.2s var(--tr-ease-out), transform 0.2s var(--tr-ease-spring);
}

.tr-post-nav__link:hover {
    border-color: var(--mv-color-indigo);
    transform: translateY(-2px);
}

/* Sits right when it is the only child, so prev/next never collapse together */
.tr-post-nav__link--next:only-child {
    grid-column: 2;
}

.tr-post-nav__label {
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-xs);
    letter-spacing: var(--tr-tracking-caps-sm);
    text-transform: uppercase;
    color: var(--tr-text-caption);
}

.tr-post-nav__link--next {
    text-align: right;
}

.tr-post-nav__title {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h6);
    line-height: var(--tr-leading-h6);
    color: var(--tr-text-primary);
}

/* ── Back link ─────────────────────────────────────────────── */

.tr-post-back {
    max-width: var(--tr-blog-measure);
    margin: var(--tr-space-gap-lg) auto 0 0;
    text-align: left;
}

.tr-post-back__link {
    display: inline-block;
    padding: 11px 4px;              /* 44px effective touch target */
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    color: var(--mv-color-indigo);
    text-decoration: none;
}

.tr-post-back__link:hover {
    text-decoration: underline;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .tr-blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .tr-blog-grid {
        grid-template-columns: 1fr;
        gap: var(--tr-space-gap-md);
    }

    .tr-blog-hero {
        padding-top: calc(var(--mv-header-top) + var(--mv-header-height) + 24px + 32px);
    }

    .tr-blog-hero__headline,
    .tr-blog-hero--post .tr-blog-hero__headline {
        max-width: none;          /* let it use the full column on narrow screens */
    }

    .tr-blog-hero__sub {
        margin-top: 16px;
    }

    .tr-blog-hero__status {
        margin-top: 28px;
    }

    .tr-blog-page::before {
        height: 620px;            /* shorter viewport, shorter wash */
    }

    .tr-post-content {
        font-size: var(--tr-size-body);
    }

    /* Stack prev/next so neither is squeezed to an unreadable width */
    .tr-post-nav {
        grid-template-columns: 1fr;
    }

    .tr-post-nav__link--next,
    .tr-post-nav__link--next:only-child {
        grid-column: 1;
        text-align: left;
    }
}