/* ============================================
   SPONSORS - Shared styles across all pages
   Used by: shared/_sponsors_section.html.erb
            shared/_sponsor_tier.html.erb
            shared/_sponsor_logo.html.erb
   ============================================ */

/* Section Container */
.sponsors-section {
  padding: var(--space-3xl) var(--space-md);
}

.sponsors-section h2 {
  font-size: 1.75rem;
  margin-bottom: var(--space-sm);
  text-align: center;
}

.sponsors-section > p {
  color: var(--color-text-light);
  text-align: center;
  margin-bottom: var(--space-xl);
}

/* Sponsor Tiers */
.sponsor-tier {
  margin-bottom: var(--space-xl);
}

.sponsor-tier:last-child {
  margin-bottom: 0;
}

.sponsor-tier-title {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-border);
}

/* Tier-specific colors */
.sponsor-tier-elite {
  color: var(--color-gold);
  border-color: var(--color-gold);
}

.sponsor-tier-premium {
  color: var(--color-blue);
  border-color: var(--color-blue);
}

.sponsor-tier-minimum,
.sponsor-tier-community {
  color: var(--color-text-light);
}

/* Logo Grid */
.sponsor-tier-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xl);
}

/* Individual Logo */
.sponsor-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.sponsor-logo:hover {
  transform: scale(1.05);
}

.sponsor-logo a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

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

/* Logo Sizes */
.sponsor-logo-large img {
  max-height: 80px;
  max-width: 200px;
}

.sponsor-logo-medium img {
  max-height: 60px;
  max-width: 160px;
}

.sponsor-logo-small img {
  max-height: 40px;
  max-width: 120px;
}

/* Logo Name */
.sponsor-logo-name {
  display: block;
  margin-top: var(--space-sm);
  font-size: 0.875rem;
  color: var(--color-text-light);
  text-align: center;
}

.sponsor-logo:hover .sponsor-logo-name {
  color: var(--color-primary);
}

/* Text-only Logo Fallback */
.sponsor-logo-text {
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text);
  transition: color 0.2s;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.sponsor-logo-text:hover {
  color: var(--color-primary);
}

.sponsor-logo-large .sponsor-logo-text {
  font-size: 1.5rem;
}

.sponsor-logo-medium .sponsor-logo-text {
  font-size: 1.25rem;
}

.sponsor-logo-small .sponsor-logo-text {
  font-size: 1rem;
}

/* Footer CTA */
.sponsors-footer {
  text-align: center;
  margin-top: var(--space-xl);
}

/* ============================================
   PAST SPONSORS - Optional styling
   ============================================ */

.past-sponsors-subsection {
  margin-top: var(--space-2xl);
}

.past-sponsors-grid {
  gap: var(--space-lg);
}

.past-sponsors-grid .sponsor-logo img {
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.2s;
}

.past-sponsors-grid .sponsor-logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* ============================================
   PAGE-SPECIFIC OVERRIDES
   ============================================ */

/* Sponsors page - dark background */
.current-sponsors {
  background: var(--color-gray-900);
}

/* Homepage sponsors section - dark background */
.home-sponsors {
  background: var(--color-gray-900);
}