/**
 * DISCORAK - Styles Features
 * Dimensions exactes original - cards 314x326px
 */

/* ============================================================
   SECTION INTRO
   ============================================================ */
#intro {
    width:      100%;
    padding:    4rem 15%;
    text-align: center;
}

.intro-text {
    font-size:      1.1rem;
    color:          var(--text-secondary);
    max-width:      800px;
    margin:         0 auto;
    line-height:    1.7;
    white-space:    nowrap;
}

/* ============================================================
   SECTION FEATURES
   ============================================================ */
#features {
    width:      100%;
    padding:    4rem 15% 5rem;
}

#features .section-title {
    display:        block;
    width:          100%;
    text-align:     center;
    font-family:    var(--font-logo);
    font-size:      2.5rem;
    font-weight:    800;
    color:          #ffffff;
    margin-bottom:  0.75rem;
    white-space:    nowrap;
}

#features .section-subtitle {
    display:        block;
    width:          100%;
    text-align:     center;
    font-size:      1rem;
    color:          #8892a4;
    margin-bottom:  3rem;
    white-space:    nowrap;
}

/* ============================================================
   GRILLE CARDS 3x2
   ============================================================ */
.features-grid {
    display:                grid;
    grid-template-columns:  repeat(3, 314px);
    gap:                    24px;
    list-style:             none;
    justify-content:        center;
}

/* ============================================================
   CARD FEATURE - 314x326px
   ============================================================ */
.feature-card {
    width:          314px;
    background:     #111827;
    border:         1px solid rgba(255, 255, 255, 0.08);
    border-radius:  16px;
    padding:        2rem;
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            1.2rem;
    transition:     var(--transition);
    box-sizing:     border-box;
}

.feature-card:hover {
    border-color:   rgba(255, 255, 255, 0.15);
    box-shadow:     0 8px 30px rgba(0, 0, 0, 0.4);
    transform:      translateY(-3px);
}

/* ============================================================
   ICONE CARRE COLORE
   ============================================================ */
.feature-icon {
    width:              48px;
    height:             48px;
    border-radius:      10px;
    display:            inline-flex;
    align-items:        center;
    justify-content:    center;
    font-size:          1.2rem;
}

.feat-cyan   { background: #0d3d3d; color: #00f5ff; }
.feat-music  { background: linear-gradient(135deg, #2d1060, #4a1060); color: #f472b6; }
.feat-yellow { background: #3d2e00; color: #ffe600; }
.feat-green  { background: #0a3d1f; color: #00ff88; }
.feat-pink   { background: #3d0d2a; color: #ff006e; }
.feat-purple { background: #2a0d3d; color: #bf00ff; }

/* ============================================================
   TITRE ET DESCRIPTION CARD
   ============================================================ */
.feature-title {
    font-family:    var(--font-primary);
    font-size:      1rem;
    font-weight:    700;
    color:          #ffffff;
    line-height:    1.3;
}

.feature-desc {
    font-size:      0.88rem;
    color:          #8892a4;
    line-height:    1.7;
    text-align: justify;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    .features-grid {
        grid-template-columns: repeat(2, 314px);
    }

    #intro,
    #features {
        padding: 3rem 5%;
    }

    #features .section-title,
    #features .section-subtitle,
    .intro-text {
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 314px;
    }

    #intro,
    #features {
        padding: 3rem 1.5rem;
    }

    .feature-card {
        width:  100%;
        height: auto;
    }
}