/* ==========================================================
   TrackDayCTRL
   Landing Page v1.0
   Feature Cards – Responsive Foundation
   ========================================================== */

.features {
    width: 100%;

    padding-block:
        clamp(2.5rem, 5vw, 4rem)
        clamp(1rem, 2.5vw, 2rem);
}


/* ==========================================================
   Section container
   ========================================================== */

.features-container {
    width: min(
        calc(100% - (var(--page-gutter) * 2)),
        var(--container-max)
    );

    margin-inline: auto;
}


/* ==========================================================
   Section divider
   ========================================================== */

.features-heading {
    display: grid;
    grid-template-columns:
        minmax(2.5rem, 1fr)
        auto
        minmax(2.5rem, 1fr);

    align-items: center;

    gap: clamp(1rem, 2vw, 2rem);

    width: 100%;

    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}


.features-heading-line {
    display: block;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(115, 152, 52, 0.12),
            var(--green)
        );
}


.features-heading-line:last-child {
    background:
        linear-gradient(
            90deg,
            var(--green),
            rgba(115, 152, 52, 0.12)
        );
}


.features-title {
    margin: 0;

    color: #d7dce0;

    font-family: "Rajdhani", sans-serif;
    font-size: clamp(1.1rem, 1.5vw, 1.45rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.035em;

    text-align: center;
    text-transform: uppercase;

    white-space: nowrap;
}


/* ==========================================================
   Feature cards
   ========================================================== */

.features-grid {
    display: grid;

    grid-template-columns:
        repeat(
            6,
            minmax(0, 1fr)
        );

    gap: clamp(0.75rem, 1.1vw, 1rem);
}


.feature-card {
    min-width: 0;
    min-height: clamp(15rem, 18vw, 17rem);

    display: flex;
    flex-direction: column;

    padding:
        clamp(1.2rem, 1.7vw, 1.6rem)
        clamp(1rem, 1.5vw, 1.4rem);

    background:
        linear-gradient(
            145deg,
            rgba(15, 18, 21, 0.92),
            rgba(5, 7, 9, 0.96)
        );

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: clamp(0.5rem, 0.7vw, 0.7rem);

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}


.feature-card:hover {
    transform: translateY(-0.25rem);

    border-color: rgba(115, 152, 52, 0.7);

    box-shadow:
        0 0.875rem 2rem rgba(0, 0, 0, 0.35),
        0 0 1.25rem rgba(115, 152, 52, 0.08);
}


/* ==========================================================
   Icon
   ========================================================== */

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    min-height: clamp(2rem, 2.6vw, 2.5rem);

    margin-bottom: clamp(0.8rem, 1.3vw, 1.1rem);

    color: var(--green);

    font-size: clamp(1.55rem, 2vw, 2rem);
}


/* ==========================================================
   Card heading
   ========================================================== */

.feature-card h3 {
    margin:
        0
        0
        clamp(0.6rem, 1vw, 0.85rem);

    color: var(--text);

    font-family: "Rajdhani", sans-serif;
    font-size: clamp(1rem, 1.2vw, 1.3rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: 0.015em;

    text-transform: uppercase;
}


/* ==========================================================
   Card description
   ========================================================== */

.feature-card p {
    margin: 0;

    color: var(--muted);

    font-size: clamp(0.75rem, 0.78vw, 0.86rem);
    line-height: 1.65;
}


/* ==========================================================
   Medium desktop

   Six cards remain in one row while they still have enough
   room to preserve the approved overview.
   ========================================================== */

@media (max-width: 82rem) {

    .features-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap: clamp(1rem, 2vw, 1.5rem);
    }


    .feature-card {
        min-height: clamp(13.5rem, 22vw, 15rem);
    }

}


/* ==========================================================
   Tablet
   ========================================================== */

@media (max-width: 52rem) {

    .features-heading {
        grid-template-columns:
            minmax(1.5rem, 1fr)
            auto
            minmax(1.5rem, 1fr);

        gap: clamp(0.75rem, 2.5vw, 1.25rem);
    }


    .features-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: clamp(0.9rem, 3vw, 1.25rem);
    }


    .feature-card {
        min-height: auto;
    }

}

/* ==========================================================
   Mobile

   Preserve the approved desktop composition:
   six cards in one horizontal row.
   ========================================================== */

@media (max-width: 36rem) {

    .features {
        padding-block:
            clamp(1.5rem, 5vw, 2rem)
            clamp(0.75rem, 3vw, 1rem);
    }


    .features-container {
        width: calc(100% - 1rem);
    }


    .features-heading {
        grid-template-columns:
            minmax(1rem, 1fr)
            auto
            minmax(1rem, 1fr);

        gap: clamp(0.4rem, 1.5vw, 0.7rem);

        margin-bottom: clamp(0.8rem, 3vw, 1.1rem);
    }


    .features-heading-line {
        display: block;
    }


    .features-title {
        max-width: none;

        margin-inline: 0;

        font-size: clamp(0.62rem, 2.6vw, 0.82rem);
        line-height: 1;

        white-space: nowrap;
    }


    .features-grid {
        grid-template-columns:
            repeat(
                6,
                minmax(0, 1fr)
            );

        gap: clamp(0.18rem, 0.8vw, 0.35rem);
    }


    .feature-card {
        width: auto;
        min-width: 0;
        min-height: 0;

        padding:
            clamp(0.35rem, 1.4vw, 0.5rem)
            clamp(0.3rem, 1.2vw, 0.5rem);

        border-radius: clamp(0.22rem, 0.8vw, 0.35rem);
    }


    .feature-icon {
        min-height: clamp(0.8rem, 3vw, 1rem);

        margin-bottom: clamp(0.25rem, 1vw, 0.4rem);

        font-size: clamp(0.65rem, 2.8vw, 0.9rem);
    }


    .feature-card h3 {
        margin:
            0
            0
            clamp(0.25rem, 1vw, 0.4rem);

        font-size: clamp(0.38rem, 1.65vw, 0.5rem);
        line-height: 1.08;
        letter-spacing: 0.01em;
    }


    .feature-card p {
        font-size: clamp(0.3rem, 1.3vw, 0.4rem);
        line-height: 1.3;
    }

}
/* ==========================================================
   Touch devices

   Avoid leaving cards visually raised after touch.
   ========================================================== */

@media (hover: none) {

    .feature-card:hover {
        transform: none;

        border-color: rgba(255, 255, 255, 0.22);

        box-shadow: none;
    }

}

.features-explore { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 2rem; color: var(--green); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

@media (max-width: 48rem) {
    .features { padding-block: 3rem; }
    .features-container { width: calc(100% - 2rem); }
    .features-heading { grid-template-columns: 1fr; margin-bottom: 1.5rem; }
    .features-heading-line { display: none; }
    .features-title { font-size: clamp(1.7rem, 8vw, 2.4rem); line-height: 1.05; white-space: normal; }
    .features-grid { grid-template-columns: 1fr; gap: 0.85rem; }
    .feature-card { min-height: 0; padding: 1.35rem; border-radius: 0.8rem; }
    .feature-icon { min-height: 2rem; margin-bottom: 0.7rem; font-size: 1.35rem; }
    .feature-card h3 { margin-bottom: 0.55rem; font-size: 1.25rem; line-height: 1.1; }
    .feature-card p { font-size: 0.9rem; line-height: 1.55; }
    .features-explore { margin-top: 1.5rem; }
}

/* At exactly 48rem the mobile rule above also matches; tablet wins here. */
@media (min-width: 48rem) and (max-width: 52rem) {
    .features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}