/*
 * Admin panel form layout rules that Filament's grid cannot express.
 * Published by `php artisan filament:assets` (run on every Vapor build) and
 * registered in AppServiceProvider.
 */

/*
 * Edit Conference > CEU certificate settings: one column (Content, Images,
 * Signature) until the viewport reaches 1440px, then Content + Images take
 * two thirds beside the Signature card. Filament's responsive grid only knows
 * Tailwind's breakpoints (xl 1280px, 2xl 1536px), so the threshold lives here.
 *
 * Filament renders a Grid's extra attributes on a wrapper div; the real grid
 * (`.fi-sc.fi-grid`) is that wrapper's child, and each item sits in a
 * `.fi-grid-col`. The selectors carry enough class levels to beat Filament's
 * own `.fi-grid`, `.lg:fi-grid-cols` and `.fi-grid-col` rules regardless of
 * stylesheet order.
 */
.ceu-certificate-grid > .fi-sc.fi-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.ceu-certificate-grid > .fi-sc.fi-grid > .fi-grid-col {
    grid-column: span 1 / span 1;
}

@media (min-width: 1440px) {
    .ceu-certificate-grid > .fi-sc.fi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ceu-certificate-grid > .fi-sc.fi-grid > .fi-grid-col:first-child {
        grid-column: span 2 / span 2;
    }
}