/**
 * ============================================================================
 * MUAADH BRAND — Brand showcase grid + tiles
 * ============================================================================
 *
 * Single source of truth for brand UI extracted from muaadh-frontend.css
 * in Phase 13 Wave 12 (band 13, 2026-05-13).
 *
 * Owns:
 *   - .muaadh-brands-grid (homepage brand grid)
 *   - .muaadh-brand-tile (individual brand card)
 *   - .muaadh-brand-img (logo placement)
 *
 * Loaded via layout-customer.blade.php.
 * ============================================================================
 */


/* ============================================================================
 * APPENDED (Phase 13 Wave 12 — 2026-05-13): rules pulled from muaadh-frontend.css
 * ============================================================================ */

.muaadh-brand-tile {
    width: calc(50% - 10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    background: var(--theme-card-bg);
    border-radius: var(--chassis-radius-lg);
    border: var(--chassis-border-normal) solid transparent;
    text-decoration: none;
    transition: var(--theme-transition);
    overflow: hidden;
}

.muaadh-brand-tile:hover {
    border-color: var(--theme-primary);
    transform: translateY(-5px);
    box-shadow: var(--chassis-shadow-card-hover);
}

.muaadh-brand-img {
    width: 100%;
    height: var(--size-img-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-bg-body);
    padding: var(--space-3);
}

.muaadh-brand-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform var(--chassis-duration-normal) ease;
}

.muaadh-brand-tile:hover .muaadh-brand-img img {
    transform: scale(1.05);
}

.muaadh-brand-name {
    font-size: var(--text-xs);
    font-weight: var(--theme-font-semibold);
    color: var(--theme-text-primary);
    text-align: center;
    width: 100%;
    padding: var(--space-3) 10px;
}

.muaadh-brand-summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px var(--space-3);
    background: var(--surface-elevated);
    margin-bottom: var(--space-3);
    border-radius: var(--radius-sm);
}

.muaadh-brand-summary__logo {
    width: var(--size-img-sm);
    height: var(--size-img-sm);
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.muaadh-brand-summary__avatar {
    width: var(--size-img-sm);
    height: var(--size-img-sm);
    border-radius: var(--chassis-radius-circle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-card);
    color: var(--text-muted);
}

.muaadh-brand-summary__name {
    font-weight: var(--theme-font-semibold);
    font-size: var(--text-sm);
    color: var(--text-primary);
}