Team Members Grid

<?php
if ( ! function_exists( 'scseed_team_grid_shortcode' ) ) {

    function scseed_team_grid_shortcode( $atts ) {
        $atts = shortcode_atts( array( 'columns' => '3' ), $atts, 'scseed_team_grid' );
        $cols = max( 1, min( 6, intval( $atts['columns'] ) ) );

        $members = apply_filters( 'scseed_team_members', array(
            array(
                'name'      => 'Sarah Johnson',
                'role'      => 'Chief Executive Officer',
                'bio'       => 'Sarah leads with 15 years of experience in product strategy and growth.',
                'image_url' => '',
                'social'    => array( 'linkedin' => '#', 'twitter' => '#' ),
            ),
            array(
                'name'      => 'Marcus Lee',
                'role'      => 'Head of Engineering',
                'bio'       => 'Marcus architects scalable systems and mentors the engineering team.',
                'image_url' => '',
                'social'    => array( 'linkedin' => '#' ),
            ),
            array(
                'name'      => 'Priya Patel',
                'role'      => 'Lead Designer',
                'bio'       => 'Priya crafts beautiful, user-centred interfaces across all platforms.',
                'image_url' => '',
                'social'    => array( 'twitter' => '#' ),
            ),
            array(
                'name'      => 'Tom Rivera',
                'role'      => 'Marketing Director',
                'bio'       => 'Tom drives brand strategy and customer acquisition across channels.',
                'image_url' => '',
                'social'    => array( 'linkedin' => '#', 'email' => '[email protected]' ),
            ),
        ) );

        ob_start();
        ?>
        <div class="scseed-tg-grid" style="--scseed-tg-cols:<?php echo esc_attr( $cols ); ?>">
            <?php foreach ( $members as $member ) :
                $name  = ! empty( $member['name'] )  ? $member['name']  : 'Team Member';
                $role  = ! empty( $member['role'] )  ? $member['role']  : '';
                $bio   = ! empty( $member['bio'] )   ? $member['bio']   : '';
                $img   = ! empty( $member['image_url'] ) ? $member['image_url'] : '';
                $social = isset( $member['social'] ) && is_array( $member['social'] ) ? $member['social'] : array();
                $initial = mb_strtoupper( mb_substr( $name, 0, 1 ) );
            ?>
            <div class="scseed-tg-card">
                <div class="scseed-tg-photo">
                    <?php if ( $img ) : ?>
                        <img src="<?php echo esc_url( $img ); ?>" alt="<?php echo esc_attr( $name ); ?>" loading="lazy">
                    <?php else : ?>
                        <div class="scseed-tg-initials" aria-hidden="true"><?php echo esc_html( $initial ); ?></div>
                    <?php endif; ?>
                </div>
                <div class="scseed-tg-info">
                    <h3><?php echo esc_html( $name ); ?></h3>
                    <?php if ( $role ) : ?><p class="scseed-tg-role"><?php echo esc_html( $role ); ?></p><?php endif; ?>
                    <?php if ( $bio )  : ?><p class="scseed-tg-bio"><?php echo esc_html( $bio ); ?></p><?php endif; ?>
                </div>
                <?php if ( ! empty( $social ) ) : ?>
                <div class="scseed-tg-social">
                    <?php if ( ! empty( $social['linkedin'] ) ) : ?>
                        <a href="<?php echo esc_url( $social['linkedin'] ); ?>" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">in</a>
                    <?php endif; ?>
                    <?php if ( ! empty( $social['twitter'] ) ) : ?>
                        <a href="<?php echo esc_url( $social['twitter'] ); ?>" target="_blank" rel="noopener noreferrer" aria-label="Twitter">X</a>
                    <?php endif; ?>
                    <?php if ( ! empty( $social['email'] ) ) : ?>
                        <a href="mailto:<?php echo esc_attr( $social['email'] ); ?>" aria-label="Email">@</a>
                    <?php endif; ?>
                </div>
                <?php endif; ?>
            </div>
            <?php endforeach; ?>
        </div>
        <?php
        return ob_get_clean();
    }
    add_shortcode( 'scseed_team_grid', 'scseed_team_grid_shortcode' );
}

.scseed-tg-grid {
    display: grid;
    grid-template-columns: repeat(var(--scseed-tg-cols, 3), 1fr);
    gap: 1.5rem;
}

.scseed-tg-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    text-align: center;
    transition: box-shadow 0.2s ease;
    background: #ffffff;
}

.scseed-tg-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.scseed-tg-photo img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.scseed-tg-initials {
    height: 200px;
    background: linear-gradient(135deg, #7c5cff, #b794f4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
}

.scseed-tg-info {
    padding: 1.25rem 1rem 1rem;
}

.scseed-tg-info h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    color: #111111;
}

.scseed-tg-role {
    font-size: 0.8rem;
    color: #7c5cff;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.scseed-tg-bio {
    font-size: 0.8rem;
    color: #666666;
    line-height: 1.5;
    margin: 0;
}

.scseed-tg-social {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1rem 1rem;
}

.scseed-tg-social a {
    display: inline-flex;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    align-items: center;
    justify-content: center;
    color: #555555;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.scseed-tg-social a:hover {
    background: #7c5cff;
    color: #ffffff;
    border-color: #7c5cff;
}

@media (max-width: 600px) {
    .scseed-tg-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 400px) {
    .scseed-tg-grid {
        grid-template-columns: 1fr;
    }
}