/* ============================================
   notes — MASONRY UNCURATED FEED LAYOUT (2 Columns)
   ============================================ */

.thread-main {
    position: relative;
    padding-top: calc(var(--nav-h) + var(--space-12));
    padding-bottom: var(--space-24);
    background: var(--surface); 
    min-height: 100vh;
}

/* ---------- Hero & Filters ---------- */
.thread-hero {
    max-width: 980px; /* Constrained width to match the tighter feed */
    margin: 0 auto;
    padding: 0 var(--space-6) var(--space-10);
}

.thread-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    margin-bottom: var(--space-8);
    transition: color var(--dur-fast) var(--ease-out);
    text-transform: uppercase;
}

.thread-back-btn:hover { color: var(--accent); }
.thread-back-btn svg.lucide { width: 14px; height: 14px; }

.thread-hero-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 var(--space-3);
}

.thread-hero-desc {
    max-width: 65ch;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink-muted);
    margin-bottom: var(--space-6);
}

/* Filter Menu Styles */
.thread-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--surface-3);
}

.filter-btn {
    padding: 10px 16px; /* UX: Fitts's Law - raised from 6px vertical padding, this is a repeated-tap control */
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    color: var(--ink-soft);
    font-family: var(--sans);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}

.filter-btn:hover {
    background: var(--surface-2);
    border-color: var(--surface-3);
}

@media (hover: hover) and (pointer: fine) {
    /* UX: same Fitts's Law logic as .card-tag-btn and .filter-pill - a
       mouse is precise, so the 40px touch-sized pill reads as oversized
       clutter on desktop. Trimmed to a size proportionate to its job as a
       repeated-tap filter. */
    .filter-btn {
        padding: 6px 14px;
        min-height: 30px;
    }
}

.filter-btn.is-active {
    background: var(--ink);
    color: var(--white);
}

/* ---------- Feed shell (2 Column Masonry) ---------- */
.thread-feed {
    max-width: 980px; /* Reduced to ensure 2 columns stay focused */
    margin: 0 auto;
    padding: 0 var(--space-6);
    
    /* 2 Columns to avoid cognitive overload */
    column-count: 2;
    column-gap: var(--space-12); 
}

/* ---------- Individual Post ---------- */
.thread-post {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    display: inline-block;
    width: 100%;
    
    /* Generous bottom margin replaces borders/boxes as the visual separator */
    margin-bottom: var(--space-16);
}

/* Filtering: collapsed out of layout so column-count masonry rebalances
   correctly, instead of leaving gaps behind display:none placeholders. */
.thread-post.is-filtered-out {
    display: none;
}

/* The metadata acts as the "header" or starting point for each note */
.thread-post-meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-3);
}

.thread-post-meta .thread-post-location {
    color: var(--ink-muted);
    opacity: 0.6;
}

.thread-post-meta .thread-post-location::before {
    content: '·';
    margin-right: var(--space-3);
}

.thread-post-media {
    width: 80%; /* 8/10 Scale: Intentionally reduced image size to avoid overwhelming the view */
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: var(--space-4);
    background: var(--surface-3); 
}

.thread-post-media img,
.thread-post-media video {
    width: 100%;
    max-width: 1080px; 
    max-height: 1920px; 
    height: auto;
    display: block;
    object-fit: cover;
}

.thread-post-media + .thread-post-media {
    margin-top: var(--space-2);
}

.thread-post-caption {
    width: 85%; /* Keeps reading measure comfortable and aligned with smaller images */
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.thread-post-caption + .thread-post-caption {
    margin-top: var(--space-4);
}

.thread-post-caption strong {
    color: var(--ink);
    font-weight: 600;
}

.thread-post-quote {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1875rem; /* Clean, slightly smaller italic font */
    line-height: 1.5;
    color: var(--ink);
    /* Removed the blue left border entirely to blend naturally */
}

/* ============================================
   RESPONSIVE (Masonry to Instagram Mobile)
   ============================================ */

/* Mobile: Single column Instagram-style feed */
@media (max-width: 768px) {
    .thread-feed {
        column-count: 1;
        column-gap: 0;
        max-width: 540px; /* Constrains max width slightly for better reading */
    }
    
    .thread-main { padding-top: calc(var(--nav-h) + var(--space-6)); }
    .thread-hero { padding-bottom: var(--space-8); }
    
    .thread-hero-title { font-size: 2rem; }
    .thread-hero-desc { font-size: 1rem; }
    
    .thread-post { 
        margin-bottom: var(--space-12);
    }
    
    /* UX: full-bleed (100%) images with no height ceiling let a single tall
       photo dominate the entire viewport, which is exactly what the desktop
       80% rule above exists to avoid - it just forces more scrolling per
       post and makes the feed harder to scan quickly. A small inset plus a
       height cap keeps mobile feeling like a feed of photos rather than a
       stack of full-screen images, while still reading as "Instagram-style"
       rather than desktop's boxed-in card. */
    .thread-post-media {
        width: 94%;
    }

    .thread-post-media img,
    .thread-post-media video {
        max-height: 65vh;
        object-fit: cover;
    }
    
    .thread-post-caption {
        width: 94%; 
        font-size: 1rem; 
    }
    
    .thread-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--space-2);
        scrollbar-width: none; 
    }
    .thread-filters::-webkit-scrollbar { display: none; }
}