/**
 * Current Sponsors Component Styles
 * Logo-focused display using unified design system
 * 
 * @package CMSMGA
 * @version 6.0
 */

/* Main sponsors container */
.current-sponsors {
  width: 100%;
  position: relative;
}

/* Logo Grid Layout */
.sponsors-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 350px));
  gap: var(--space-8);
  margin-top: var(--space-16);
  animation: cmsmga-fadeInUp var(--transition-slow) ease-out;
  justify-content: center;
}

/* Individual sponsor logo cards */
.sponsor-logo-card {
  background: color-mix(in srgb, var(--color-primary-600) 8%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--color-white) 10%, transparent);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  transition: all var(--transition-medium) ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  min-height: 400px;
  width: 350px;
  display: flex;
  flex-direction: column;
}

.sponsor-logo-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    color-mix(in srgb, var(--color-white) 5%, transparent),
    color-mix(in srgb, var(--color-white) 2%, transparent)
  );
  pointer-events: none;
  z-index: 1;
}

.sponsor-logo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--color-primary-900) 20%, transparent);
  border-color: color-mix(in srgb, var(--color-accent-400) 30%, transparent);
  background: color-mix(in srgb, var(--color-primary-600) 12%, transparent);
}

/* Logo link wrapper */
.sponsor-logo-link {
  text-decoration: none;
  display: block;
  color: inherit;
}

/* Logo container */
.sponsor-logo-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
  height: 100%;
}

.sponsor-logo {
  width: 100%;
  max-width: 200px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  overflow: hidden;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary-900) 10%, transparent);
}

.sponsor-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

.sponsor-logo-placeholder {
  width: 100%;
  max-width: 200px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary-100), var(--color-primary-200));
  border-radius: var(--radius-lg);
  border: 2px dashed color-mix(in srgb, var(--color-primary-400) 50%, transparent);
}

.sponsor-initials {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-600);
}

/* Sponsor info section */
.sponsor-info {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sponsor-title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-inverse);
  margin-bottom: var(--space-2);
  line-height: var(--leading-tight);
}

/* Sponsor description */
.sponsor-description {
  color: color-mix(in srgb, var(--color-white) 85%, transparent);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-2);
  flex: 1;
}

/* Contact information section */
.sponsor-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--color-white) 15%, transparent);
}

.sponsor-contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.contact-icon {
  font-size: var(--text-base);
  opacity: 0.8;
  flex-shrink: 0;
}

.sponsor-website,
.sponsor-email,
.sponsor-phone {
  color: var(--color-accent-300);
  text-decoration: none;
  transition: color var(--transition-fast) ease;
  word-break: break-all;
}

.sponsor-website:hover,
.sponsor-email:hover,
.sponsor-phone:hover {
  color: var(--color-accent-200);
  text-decoration: underline;
}

.sponsor-level-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  background: color-mix(in srgb, var(--color-accent-400) 15%, transparent);
  color: var(--color-accent-100);
  border: 1px solid color-mix(in srgb, var(--color-accent-400) 30%, transparent);
}

/* Sponsor level variations */
.sponsor-logo-card.platinum .sponsor-level-badge {
  background: color-mix(in srgb, var(--color-neutral-300) 15%, transparent);
  color: var(--color-neutral-100);
  border-color: color-mix(in srgb, var(--color-neutral-300) 30%, transparent);
}

.sponsor-logo-card.gold .sponsor-level-badge {
  background: color-mix(in srgb, var(--color-accent-400) 15%, transparent);
  color: var(--color-accent-100);
  border-color: color-mix(in srgb, var(--color-accent-400) 30%, transparent);
}

.sponsor-logo-card.silver .sponsor-level-badge {
  background: color-mix(in srgb, var(--color-neutral-400) 15%, transparent);
  color: var(--color-neutral-100);
  border-color: color-mix(in srgb, var(--color-neutral-400) 30%, transparent);
}

.sponsor-logo-card.bronze .sponsor-level-badge {
  background: color-mix(in srgb, var(--color-warning-400) 15%, transparent);
  color: var(--color-warning-100);
  border-color: color-mix(in srgb, var(--color-warning-400) 30%, transparent);
}

/* No sponsors state */
.no-sponsors {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-16);
  background: color-mix(in srgb, var(--color-primary-600) 5%, transparent);
  border: 2px dashed color-mix(in srgb, var(--color-white) 20%, transparent);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(10px);
}

.no-sponsors-content {
  max-width: 500px;
  margin: 0 auto;
}

.no-sponsors-icon {
  font-size: var(--text-6xl);
  margin-bottom: var(--space-6);
  opacity: 0.8;
}

.no-sponsors-content h3 {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-inverse);
  margin-bottom: var(--space-4);
}

.no-sponsors-content p {
  color: color-mix(in srgb, var(--color-white) 85%, transparent);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
  font-size: var(--text-lg);
}

.no-sponsors-cta {
  margin-top: var(--space-6);
}

.sponsor-inquiry-link {
  color: var(--color-accent-300);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-fast) ease;
}

.sponsor-inquiry-link:hover {
  color: var(--color-accent-200);
  text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .sponsors-logo-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 320px));
    gap: var(--space-6);
  }
  
  .sponsor-logo-card {
    min-height: 380px;
    width: 320px;
  }
}

@media (max-width: 768px) {
  .sponsors-logo-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 280px));
    gap: var(--space-4);
  }
  
  .sponsor-logo-card {
    padding: var(--space-6);
    min-height: 360px;
    width: 280px;
  }
  
  .sponsor-logo {
    max-width: 160px;
    height: 100px;
  }
  
  .sponsor-logo-placeholder {
    max-width: 160px;
    height: 100px;
  }
  
  .sponsor-contact-item {
    font-size: var(--text-xs);
  }
  
  .no-sponsors {
    padding: var(--space-12);
  }
}

@media (max-width: 480px) {
  .sponsors-logo-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  .sponsor-logo-card {
    padding: var(--space-4);
    min-height: 320px;
    width: 100%;
  }
  
  .sponsor-logo,
  .sponsor-logo-placeholder {
    max-width: 140px;
    height: 80px;
  }
  
  .sponsor-title {
    font-size: var(--text-base);
  }
  
  .sponsor-description {
    font-size: var(--text-xs);
  }
  
  .sponsor-contact-item {
    font-size: var(--text-xs);
  }
  
  .contact-icon {
    font-size: var(--text-sm);
  }
  
  .no-sponsors {
    padding: var(--space-8);
  }
  
  .no-sponsors-content h3 {
    font-size: var(--text-xl);
  }
}