/**
 * Club Manager Pro Public Styles
 * Following Material UI and Tailwind principles for modern UI/UX
 * Version 3.0.0.2
 */

/* Base Styles */
.cmp-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    color: #333;
}

/* Material UI and Tailwind Utility Classes */
/* Flexbox utilities */
.cmp-flex { display: flex; }
.cmp-flex-col { flex-direction: column; }
.cmp-items-center { align-items: center; }
.cmp-justify-center { justify-content: center; }

/* Grid utilities */
.cmp-grid { display: grid; }
.cmp-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cmp-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cmp-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cmp-gap-2 { gap: 0.5rem; }
.cmp-gap-4 { gap: 1rem; }

/* Spacing utilities */
.cmp-p-3 { padding: 0.75rem; }
.cmp-p-4 { padding: 1rem; }
.cmp-mt-1 { margin-top: 0.25rem; }
.cmp-mt-4 { margin-top: 1rem; }
.cmp-mb-4 { margin-bottom: 1rem; }
.cmp-block { display: block; }

/* Typography */
.cmp-text-sm { font-size: 0.875rem; }
.cmp-text-xl { font-size: 1.25rem; }
.cmp-text-5xl { font-size: 3rem; }
.cmp-font-medium { font-weight: 500; }
.cmp-font-bold { font-weight: 700; }
.cmp-text-primary { color: #1a73e8; }
.cmp-text-gray-400 { color: #9ca3af; }
.cmp-text-gray-600 { color: #4b5563; }

/* Appearance */
.cmp-bg-white { background-color: #ffffff; }
.cmp-rounded { border-radius: 0.375rem; }
.cmp-shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }

/* Material elevation */
.cmp-elevation-1 { box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12); }
.cmp-elevation-2 { box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); }
.cmp-elevation-3 { box-shadow: 0 3px 3px -2px rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12); }

/* Hover utilities */
.hover\:cmp-elevation-3:hover { box-shadow: 0 3px 3px -2px rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12); }

/* Background gradients */
.cmp-bg-gradient-to-t { background-image: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); }

/* Card Styles */
.cmp-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 24px;
    margin-bottom: 24px;
    transition: box-shadow 0.3s ease;
}

.cmp-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.cmp-card-header {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e0e0e0;
}

.cmp-card-title {
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 8px 0;
    color: #1a73e8;
}

.cmp-card-subtitle {
    font-size: 16px;
    color: #5f6368;
    margin: 0;
}

/* Team Grid */
.cmp-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.cmp-team-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
}

.cmp-team-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.cmp-team-card-header {
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.cmp-team-badge {
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #fff;
    padding: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.cmp-team-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.cmp-team-card-body {
    padding: 48px 16px 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.cmp-team-name {
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 8px 0;
    text-align: center;
    color: #3c4043;
}

.cmp-team-details {
    margin-top: auto;
}

.cmp-team-detail {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
    color: #5f6368;
}

.cmp-team-detail-icon {
    margin-right: 8px;
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Responsive Styles */
@media screen and (max-width: 600px) {
    .cmp-team-grid {
        grid-template-columns: 1fr;
    }
}