/* ============================================================================
   Post List Component
   Universal styling for post lists across the site

   Usage contexts:
   - Recent posts sidebar
   - User profile post lists (heralded/authored)
   - Herald leaderboards (future)
   - Top posts lists (future)
   - Search results (future)
   ============================================================================ */

/* Post List Container */
.post-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Post Item Base Styles */
.post-item {
    display: block;
    margin-bottom: var(--spacing-2);
    text-decoration: none;
    color: var(--color-text-primary);
    position: relative;

    /* Card foundation */
    border: 1px solid transparent;
    border-radius: var(--radius-base);
    padding: var(--spacing-3);
    box-sizing: border-box;

    /* Default white background - can be overridden by context */
    background-color: var(--color-white);
    background-clip: padding-box;  /* Critical for gradient border technique */
}

/* Prevent underline on hover - aurora border effect is sufficient */
.post-item:hover,
.post-item:focus {
    text-decoration: none;
}

/* Post Item Focus State */
.post-item:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Prevent outline when clicking (mouse users) */
.post-item:focus:not(:focus-visible) {
    outline: none;
}

/* Post Title */
.post-title {
    font-family: var(--font-family-headings);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-2);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;  /* Truncate to 2 lines */
    -webkit-box-orient: vertical;
    line-height: 1.4;
    word-break: break-word;
}

/* Post Metadata Base */
.post-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-family: var(--font-family-mono);
}

/* Author/Date Line - Horizontal flex layout with truncation */
.post-author-date {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;  /* Allow flex children to shrink below content size */
    flex-wrap: nowrap;  /* Ensure items stay on one line */
}

.author-name {
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Flexbox properties - use natural width, but shrink if timestamp needs space */
    flex: 0 1 auto;
    min-width: 0;  /* Allow flex item to shrink below content size */
}

/* Timestamp styling - ensure it always shows in full */
.post-author-date .timestamp {
    white-space: nowrap;  /* Prevent timestamp from wrapping */
    flex-shrink: 0;       /* Never shrink the timestamp */
}

/* Herald Line Styling (SVT Protocol ownership display) */
.post-herald-line {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 2px;
    min-width: 0;  /* Allow flex children to shrink below content size */
    flex-wrap: nowrap;  /* Ensure items stay on one line */
}

.post-herald-line .eth-value {
    margin-left: auto;
}

.herald-label {
    color: var(--color-text-muted);
    font-family: var(--font-family-mono);
    flex-shrink: 0;  /* Keep label intact */
}

.herald-name {
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;  /* Allow shrinking inside laurel-wrap inline-flex */
    /* Gradient applied via .eth-address-aurora class */
}

/* Prevent underlines on metadata elements when parent link is hovered */
a.post-item:hover .author-name,
a.post-item:hover .herald-name,
a.post-item:hover .timestamp,
a.post-item:hover .eth-value {
    text-decoration: none;
}

/* ETH value styling - ensure it never wraps and stays intact */
.eth-value {
    white-space: nowrap;  /* Prevent "XXX ETH" from wrapping */
    flex-shrink: 0;       /* Never shrink the ETH value */
}

/* Profile heralded posts: author/date + val on same row */
.profile-post-list .post-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.profile-val-right {
    margin-left: auto;
    flex-shrink: 0;
}

/* Separator dots - prevent them from shrinking */
.post-herald-line > span:not(.herald-label):not(.herald-name):not(.eth-value):not(.laurel-wrap) {
    flex-shrink: 0;
}

/* Pin indicator - positioned in top-right corner, aligned with title */
.pinned .post-title {
    overflow: visible;  /* Allow pin indicator to extend beyond title bounds */
}

.pinned .post-title::after {
    content: '📌';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 14px;
    z-index: 3;
}

/* No Posts Message */
.no-posts {
    margin: var(--spacing-3) 0;
    color: var(--color-text-secondary);
    font-style: italic;
}