/* Блок «Сообщества» — DUROV MUSIC LAB */

.communities-section {
  background:  #0a0a0a;
  padding:     64px clamp(12px, 1.2vw, 20px) 68px;
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  border-top:  1px solid rgba(255, 255, 255, 0.04);
}

.communities-section__header {
  text-align:    left;
  margin-bottom: 40px;
  padding:       0 clamp(8px, 1vw, 28px);
}

.communities-section__tag {
  font-size:      clamp(16px, 1.35vw, 20px);
  font-weight:    700;
  letter-spacing: 0.14em;
  color:          rgba(201, 168, 76, 0.85);
  margin-bottom:  20px;
  display:        flex;
  align-items:    center;
  justify-content: flex-start;
  gap:            16px;
}
.communities-section__tag::before {
  content:     '';
  width:       36px;
  height:      2px;
  background:  rgba(201, 168, 76, 0.7);
  flex-shrink: 0;
}

.communities-section__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size:   clamp(26px, 3vw, 36px);
  font-weight: 400;
  color:       #fff;
  line-height: 1.2;
  margin:      0 0 12px;
  max-width:   640px;
}

.communities-section__subtitle {
  font-size:   clamp(15px, 1.1vw, 17px);
  color:       rgba(255, 255, 255, 0.50);
  line-height: 1.6;
  max-width:   560px;
  margin:      0;
}

.communities-section__grid {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:                   clamp(20px, 2.2vw, 32px);
  width:                 100%;
  max-width:             none;
  margin:                0;
  padding:               0 clamp(8px, 1vw, 28px);
  align-items:           stretch;
}

.community-card {
  position:        relative;
  background:      #111;
  border:          1px solid rgba(255, 255, 255, 0.07);
  border-radius:   10px;
  padding:         28px 28px 24px;
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  text-align:      left;
  text-decoration: none;
  overflow:        hidden;
  min-height:      100%;
  transition:      transform 0.25s, border-color 0.25s;
}
.community-card:hover { transform: translateY(-4px); }

.community-card__glow {
  position:       absolute;
  top:            -40%;
  left:           30%;
  transform:      translateX(-50%);
  width:          140%;
  height:         120%;
  border-radius:  50%;
  opacity:        0;
  transition:     opacity 0.3s;
  pointer-events: none;
}
.community-card:hover .community-card__glow { opacity: 1; }

.community-card--stefany:hover { border-color: rgba(232, 60, 168, 0.40); }
.community-card--stefany .community-card__glow {
  background: radial-gradient(circle, rgba(232,60,168,0.18) 0%, rgba(232,60,168,0) 60%);
}
.community-card--kant:hover { border-color: rgba(201, 168, 76, 0.40); }
.community-card--kant .community-card__glow {
  background: radial-gradient(circle, rgba(201,168,76,0.18) 0%, rgba(201,168,76,0) 60%);
}
.community-card--max:hover { border-color: rgba(77, 142, 255, 0.40); }
.community-card--max .community-card__glow {
  background: radial-gradient(circle, rgba(77,142,255,0.20) 0%, rgba(77,142,255,0) 60%);
}

.community-card__icon {
  width:           54px;
  height:          54px;
  border-radius:   14px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   18px;
  position:        relative;
  z-index:         2;
  flex-shrink:     0;
}
.community-card__icon svg { width: 28px; height: 28px; }
.community-card__icon-text {
  font-size:      18px;
  font-weight:    800;
  letter-spacing: 0.02em;
}
.community-card--stefany .community-card__icon { background: rgba(232,60,168,0.12); color: #e83ca8; }
.community-card--kant    .community-card__icon { background: rgba(201,168,76,0.12); color: #c9a84c; }
.community-card--max     .community-card__icon { background: rgba(77,142,255,0.14);  color: #4d8eff; }

.community-card__platform {
  font-size:      clamp(11px, 0.85vw, 12px);
  letter-spacing: 0.24em;
  margin-bottom:  8px;
  position:       relative;
  z-index:        2;
  width:          100%;
}
.community-card--stefany .community-card__platform { color: rgba(232,60,168,0.70); }
.community-card--kant    .community-card__platform { color: rgba(201,168,76,0.70); }
.community-card--max     .community-card__platform { color: rgba(77,142,255,0.80); }

.community-card__name {
  font-size:     clamp(17px, 1.3vw, 19px);
  font-weight:   600;
  color:         #fff;
  line-height:   1.3;
  margin-bottom: 8px;
  position:      relative;
  z-index:       2;
  width:         100%;
  min-height:    calc(2 * 1.3em);
}
.community-card__accent { color: #4d8eff; }

.community-card__desc {
  font-size:     clamp(13px, 1vw, 14px);
  color:         rgba(255, 255, 255, 0.42);
  line-height:   1.5;
  margin-bottom: 24px;
  position:      relative;
  z-index:       2;
  width:         100%;
  display:       block;
  flex:          1 1 auto;
}

.community-card__btn {
  width:          100%;
  padding:        13px;
  border-radius:  4px;
  font-size:      clamp(12px, 0.95vw, 14px);
  letter-spacing: 0.18em;
  font-weight:    700;
  border:         none;
  cursor:         pointer;
  transition:     opacity 0.2s, transform 0.1s;
  position:       relative;
  z-index:        2;
  text-align:     center;
  margin-top:     auto;
  align-self:     stretch;
}
.community-card__btn:hover { opacity: 0.85; }
.community-card:active .community-card__btn { transform: scale(0.98); }
.community-card--stefany .community-card__btn { background: #e83ca8; color: #0a0a0a; }
.community-card--kant    .community-card__btn { background: #c9a84c; color: #0a0a0a; }
.community-card--max     .community-card__btn { background: #4d8eff; color: #fff; }

.community-card__badge {
  position:       absolute;
  top:            14px;
  right:          14px;
  font-size:      clamp(9px, 0.75vw, 10px);
  letter-spacing: 0.18em;
  padding:        4px 8px;
  border-radius:  3px;
  background:     rgba(77, 142, 255, 0.15);
  color:          #4d8eff;
  z-index:        3;
  font-weight:    700;
}

@media (max-width: 1100px) {
  .communities-section__grid {
    gap: clamp(16px, 2vw, 24px);
  }
}

@media (max-width: 900px) {
  .communities-section__grid {
    grid-template-columns: 1fr;
    max-width:             520px;
  }
}

@media (max-width: 768px) {
  .communities-section { padding: 48px clamp(12px, 1.2vw, 20px) 52px; }
  .communities-section__grid {
    max-width: none;
  }
}