/* Rendered rich-text file attachments. Loaded after blog/application.css and
   scoped to --rendered so authoring Lexxy editors keep their own styles. */

.lexxy-content--rendered {
    .attachment__file-card {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-block: 1rem;
        padding: 0.85rem;
        border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
        border-radius: var(--standard-border-radius);
        background: color-mix(in srgb, var(--accent-bg) 72%, transparent);
    }

    .attachment__file-icon {
        flex: 0 0 auto;
        min-width: 3.25rem;
        padding: 0.35rem 0.45rem;
        border: 1px solid var(--border);
        border-radius: var(--standard-border-radius);
        background: var(--bg);
        color: var(--text-light);
        font-size: 0.78rem;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
    }

    .attachment__file-details {
        flex: 1 1 auto;
        min-width: 0;
    }

    .attachment__file-name {
        overflow-wrap: anywhere;
        color: var(--text);
        font-weight: 700;
        line-height: 1.3;
    }

    .attachment__file-meta {
        margin-top: 0.2rem;
        color: var(--text-light);
        font-size: 0.92rem;
    }

    .attachment__file-actions {
        display: flex;
        flex: 0 1 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.45rem;
    }

    .attachment__file-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.5rem;
        padding: 0.45rem 0.7rem;
        border: 1px solid var(--accent);
        border-radius: var(--standard-border-radius);
        color: var(--accent);
        font-size: 0.92rem;
        font-weight: 700;
        line-height: 1.2;
        text-decoration: none;
    }

    .attachment__file-action:hover {
        background: color-mix(in srgb, var(--accent) 12%, transparent);
    }

    .attachment__file-action:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    @media (max-width: 600px) {
        .attachment__file-card {
            align-items: flex-start;
            flex-wrap: wrap;
        }

        .attachment__file-actions {
            width: 100%;
            justify-content: flex-start;
        }
    }
}