/* ========================================
   SOCIAL BUTTONS PRIORITY SIZING
   Buttons nach Wichtigkeit sortiert:
   - Größte: Populärste (Facebook, Twitter, Instagram, WhatsApp, Discord)
   - Mittel: Wichtige (Reddit, YouTube, Twitch, TikTok, LinkedIn)
   - Kleinste: Weniger populäre (Telegram, Pinterest, Snapchat, Mastodon, Bluesky, Threads, Email)
   ======================================== */

/* ========================================
   1. GRÖSSTEN - Populärste (Tier 1)
   Facebook, Twitter, Instagram, WhatsApp, Discord
   ======================================== */

.social-share-grid .social-button[data-platform="Facebook"],
.social-share-grid .social-button[data-platform="Twitter"],
.social-share-grid .social-button[data-platform="Instagram"],
.social-share-grid .social-button[data-platform="WhatsApp"],
.social-share-grid .social-button[data-platform="Discord"] {
  width: 90px;
  height: 90px;
  min-width: 90px;
  min-height: 90px;
  max-width: 90px;
  max-height: 90px;
}

.social-share-grid .social-button[data-platform="Facebook"] svg,
.social-share-grid .social-button[data-platform="Twitter"] svg,
.social-share-grid .social-button[data-platform="Instagram"] svg,
.social-share-grid .social-button[data-platform="WhatsApp"] svg,
.social-share-grid .social-button[data-platform="Discord"] svg {
  width: 40px;
  height: 40px;
}

.social-share-grid .social-button[data-platform="Facebook"] .social-label,
.social-share-grid .social-button[data-platform="Twitter"] .social-label,
.social-share-grid .social-button[data-platform="Instagram"] .social-label,
.social-share-grid .social-button[data-platform="WhatsApp"] .social-label,
.social-share-grid .social-button[data-platform="Discord"] .social-label {
  font-size: 0.7rem;
}

/* ========================================
   2. MITTEL - Wichtige (Tier 2)
   Reddit, YouTube, Twitch, TikTok, LinkedIn
   ======================================== */

.social-share-grid .social-button[data-platform="Reddit"],
.social-share-grid .social-button[data-platform="YouTube"],
.social-share-grid .social-button[data-platform="Twitch"],
.social-share-grid .social-button[data-platform="TikTok"],
.social-share-grid .social-button[data-platform="LinkedIn"] {
  width: 80px;
  height: 80px;
  min-width: 80px;
  min-height: 80px;
  max-width: 80px;
  max-height: 80px;
}

.social-share-grid .social-button[data-platform="Reddit"] svg,
.social-share-grid .social-button[data-platform="YouTube"] svg,
.social-share-grid .social-button[data-platform="Twitch"] svg,
.social-share-grid .social-button[data-platform="TikTok"] svg,
.social-share-grid .social-button[data-platform="LinkedIn"] svg {
  width: 36px;
  height: 36px;
}

.social-share-grid .social-button[data-platform="Reddit"] .social-label,
.social-share-grid .social-button[data-platform="YouTube"] .social-label,
.social-share-grid .social-button[data-platform="Twitch"] .social-label,
.social-share-grid .social-button[data-platform="TikTok"] .social-label,
.social-share-grid .social-button[data-platform="LinkedIn"] .social-label {
  font-size: 0.65rem;
}

/* ========================================
   3. KLEINSTE - Weniger populäre (Tier 3)
   Telegram, Pinterest, Snapchat, Mastodon, Bluesky, Threads, Email
   ======================================== */

.social-share-grid .social-button[data-platform="Telegram"],
.social-share-grid .social-button[data-platform="Pinterest"],
.social-share-grid .social-button[data-platform="Snapchat"],
.social-share-grid .social-button[data-platform="Mastodon"],
.social-share-grid .social-button[data-platform="Bluesky"],
.social-share-grid .social-button[data-platform="Threads"],
.social-share-grid .social-button[data-platform="E-Mail"],
.social-share-grid .social-button[data-platform="Email"] {
  width: 70px;
  height: 70px;
  min-width: 70px;
  min-height: 70px;
  max-width: 70px;
  max-height: 70px;
}

.social-share-grid .social-button[data-platform="Telegram"] svg,
.social-share-grid .social-button[data-platform="Pinterest"] svg,
.social-share-grid .social-button[data-platform="Snapchat"] svg,
.social-share-grid .social-button[data-platform="Mastodon"] svg,
.social-share-grid .social-button[data-platform="Bluesky"] svg,
.social-share-grid .social-button[data-platform="Threads"] svg,
.social-share-grid .social-button[data-platform="E-Mail"] svg,
.social-share-grid .social-button[data-platform="Email"] svg {
  width: 32px;
  height: 32px;
}

.social-share-grid .social-button[data-platform="Telegram"] .social-label,
.social-share-grid .social-button[data-platform="Pinterest"] .social-label,
.social-share-grid .social-button[data-platform="Snapchat"] .social-label,
.social-share-grid .social-button[data-platform="Mastodon"] .social-label,
.social-share-grid .social-button[data-platform="Bluesky"] .social-label,
.social-share-grid .social-button[data-platform="Threads"] .social-label,
.social-share-grid .social-button[data-platform="E-Mail"] .social-label,
.social-share-grid .social-button[data-platform="Email"] .social-label {
  font-size: 0.6rem;
}

/* ========================================
   4. RESPONSIVE ANPASSUNGEN
   ======================================== */

@media (max-width: 768px) {
  /* Tier 1 - Größte */
  .social-share-grid .social-button[data-platform="Facebook"],
  .social-share-grid .social-button[data-platform="Twitter"],
  .social-share-grid .social-button[data-platform="Instagram"],
  .social-share-grid .social-button[data-platform="WhatsApp"],
  .social-share-grid .social-button[data-platform="Discord"] {
    width: 75px;
    height: 75px;
    min-width: 75px;
    min-height: 75px;
    max-width: 75px;
    max-height: 75px;
  }

  /* Tier 2 - Mittel */
  .social-share-grid .social-button[data-platform="Reddit"],
  .social-share-grid .social-button[data-platform="YouTube"],
  .social-share-grid .social-button[data-platform="Twitch"],
  .social-share-grid .social-button[data-platform="TikTok"],
  .social-share-grid .social-button[data-platform="LinkedIn"] {
    width: 65px;
    height: 65px;
    min-width: 65px;
    min-height: 65px;
    max-width: 65px;
    max-height: 65px;
  }

  /* Tier 3 - Kleinste */
  .social-share-grid .social-button[data-platform="Telegram"],
  .social-share-grid .social-button[data-platform="Pinterest"],
  .social-share-grid .social-button[data-platform="Snapchat"],
  .social-share-grid .social-button[data-platform="Mastodon"],
  .social-share-grid .social-button[data-platform="Bluesky"],
  .social-share-grid .social-button[data-platform="Threads"],
  .social-share-grid .social-button[data-platform="E-Mail"],
  .social-share-grid .social-button[data-platform="Email"] {
    width: 55px;
    height: 55px;
    min-width: 55px;
    min-height: 55px;
    max-width: 55px;
    max-height: 55px;
  }
}

@media (max-width: 480px) {
  /* Tier 1 - Größte */
  .social-share-grid .social-button[data-platform="Facebook"],
  .social-share-grid .social-button[data-platform="Twitter"],
  .social-share-grid .social-button[data-platform="Instagram"],
  .social-share-grid .social-button[data-platform="WhatsApp"],
  .social-share-grid .social-button[data-platform="Discord"] {
    width: 65px;
    height: 65px;
    min-width: 65px;
    min-height: 65px;
    max-width: 65px;
    max-height: 65px;
  }

  /* Tier 2 - Mittel */
  .social-share-grid .social-button[data-platform="Reddit"],
  .social-share-grid .social-button[data-platform="YouTube"],
  .social-share-grid .social-button[data-platform="Twitch"],
  .social-share-grid .social-button[data-platform="TikTok"],
  .social-share-grid .social-button[data-platform="LinkedIn"] {
    width: 55px;
    height: 55px;
    min-width: 55px;
    min-height: 55px;
    max-width: 55px;
    max-height: 55px;
  }

  /* Tier 3 - Kleinste */
  .social-share-grid .social-button[data-platform="Telegram"],
  .social-share-grid .social-button[data-platform="Pinterest"],
  .social-share-grid .social-button[data-platform="Snapchat"],
  .social-share-grid .social-button[data-platform="Mastodon"],
  .social-share-grid .social-button[data-platform="Bluesky"],
  .social-share-grid .social-button[data-platform="Threads"],
  .social-share-grid .social-button[data-platform="E-Mail"],
  .social-share-grid .social-button[data-platform="Email"] {
    width: 45px;
    height: 45px;
    min-width: 45px;
    min-height: 45px;
    max-width: 45px;
    max-height: 45px;
  }
}