@layer components {
    /* 
     * Base Table Component
     * Uses logical properties, CSS variables, and 'ch' units for scalable formatting.
     */
    .table {
        inline-size: 100%;
        border-collapse: collapse;
        text-align: left;
        font-size: var(--text-normal);
        background-color: var(--white);
    }

    .table :where(th, td) {
        /* Logical padding: left/right uses spacing tokens, top/bottom uses 'ch' for text-scaling */
        padding: var(--space-3);
        
        /* Logical border: only bottom border for rows */
        border-block-end: var(--border-subtle);
    }

    /* Header specific styling */
    .table th {
        font-size: var(--text-small);
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.05em; /* A bit of breathing room for uppercase text */
        
        /* Aligning headers to bottom in case of multi-line titles */
        vertical-align: bottom;
        background-color: var(--gray-surface);
    }

    .table td {
        vertical-align: top;
    }

    /* Helper for small images (e.g. thumbnails) inside tables */
    .table-img {
        inline-size: 4rem; 
        border-radius: var(--radius-sm);
    }

    /* Remove bottom border from the very last row to keep it visually clean */
    .table tbody tr:last-child :where(th, td) {
        border-block-end: none;
    }

    /* Responsive wrapper for horizontal scrolling on small screens */
    .table-container {
        inline-size: 100%;
        overflow-x: auto;
        /* Smooth scrolling on iOS */
        -webkit-overflow-scrolling: touch;
    }
}