/**
 * ALTRONIX — Projects Showcase (horizontal scroll carousel)
 */

.altronix-projects {
    padding-block: var(--space-24) var(--space-16);
    background: var(--color-bg-secondary);
    border-block-start: 1px solid var(--color-border-subtle);
    overflow: hidden;
}

/* ── Header — centered ─────────────────────────────────────── */
.altronix-projects__head {
    text-align: center;
    padding-inline: var(--space-6);
    margin-block-end: var(--space-10);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.altronix-projects__tag {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent-blue);
}

.altronix-projects__title {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.05;
}

.altronix-projects__title-accent { color: var(--color-accent-orange); }


/* ── Carousel track ────────────────────────────────────────── */
.altronix-projects__track-wrap {
    overflow: hidden;
    padding-block: var(--space-2) var(--space-6);
    cursor: grab;
}

.altronix-projects__track-wrap.is-dragging { cursor: grabbing; }

.altronix-projects__track {
    display: flex;
    gap: var(--space-4);
    width: max-content;
    will-change: transform;
}

/* ── Card ──────────────────────────────────────────────────── */
.altronix-projects__card {
    position: relative;
    inline-size: 340px;
    block-size: 480px;
    border-radius: 20px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.altronix-projects__card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}

/* BG */
.altronix-projects__card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform var(--duration-slow) var(--ease-out);
}
.altronix-projects__card:hover .altronix-projects__card-bg { transform: scale(1.06); }

.altronix-projects__card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(5,8,20,1) 0%,
        rgba(5,8,20,0.85) 35%,
        rgba(5,8,20,0.4) 60%,
        rgba(5,8,20,0.1) 100%
    );
}

/* Corner brackets — top left + top right + bottom right */
.altronix-projects__card-corners {
    position: absolute;
    inset: var(--space-4);
    z-index: 3;
    pointer-events: none;
}

.altronix-projects__corner {
    position: absolute;
    inline-size: 16px;
    block-size: 16px;
    border-color: rgba(0,166,251,0.5);
    border-style: solid;
    transition: border-color var(--duration-base) var(--ease-out);
}

.altronix-projects__card:hover .altronix-projects__corner { border-color: var(--color-accent-blue); }
.altronix-projects__card--orange:hover .altronix-projects__corner { border-color: var(--color-accent-orange); }

.altronix-projects__corner--tl { inset-block-start: 0; inset-inline-start: 0; border-width: 2px 0 0 2px; }
.altronix-projects__corner--tr { inset-block-start: 0; inset-inline-end: 0; border-width: 2px 2px 0 0; }
.altronix-projects__corner--br { inset-block-end: 0; inset-inline-end: 0; border-width: 0 2px 2px 0; }

/* Number badge */
.altronix-projects__card-num {
    position: absolute;
    inset-block-start: var(--space-5);
    inset-inline-start: var(--space-5);
    z-index: 4;
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 4px 8px;
}

/* Category chip */
.altronix-projects__card-cat {
    position: absolute;
    inset-block-start: var(--space-5);
    inset-inline-end: var(--space-5);
    z-index: 4;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent-blue);
    background: rgba(0,166,251,0.12);
    border: 1px solid rgba(0,166,251,0.25);
    border-radius: 6px;
    padding: 4px 10px;
}
.altronix-projects__card--orange .altronix-projects__card-cat {
    color: var(--color-accent-orange);
    background: rgba(255,107,26,0.12);
    border-color: rgba(255,107,26,0.25);
}

/* Content */
.altronix-projects__card-content {
    position: relative;
    z-index: 3;
    margin-block-start: auto;
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.altronix-projects__card-title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.25;
}

/* Description hidden by default, revealed on hover */
.altronix-projects__card-desc {
    font-size: var(--fs-xs);
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
    margin: 0;
    max-block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-block-size var(--duration-slow) var(--ease-out),
        opacity var(--duration-base) var(--ease-out);
}

.altronix-projects__card:hover .altronix-projects__card-desc {
    max-block-size: 80px;
    opacity: 1;
}

/* Tags always visible */
.altronix-projects__card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-block-start: var(--space-1);
}

.altronix-projects__card-tags span {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    padding: 2px 8px;
    letter-spacing: 0.02em;
}

/* Accent bottom line */
.altronix-projects__card-accent {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    block-size: 3px;
    inline-size: 0;
    background: var(--gradient-accent);
    z-index: 4;
    transition: inline-size var(--duration-slow) var(--ease-out);
}
.altronix-projects__card--orange .altronix-projects__card-accent {
    background: linear-gradient(90deg, var(--color-accent-orange), var(--color-accent-blue));
}
.altronix-projects__card:hover .altronix-projects__card-accent { inline-size: 100%; }

/* ── Footer ────────────────────────────────────────────────── */
.altronix-projects__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-6);
    padding-inline: var(--space-6);
    padding-block-start: var(--space-10);
    margin-block-start: var(--space-10);
    margin-inline: auto;
    border-block-start: 1px solid var(--color-border-subtle);
    max-inline-size: 680px;
}

.altronix-projects__desc {
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.7;
}

.altronix-projects__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-3);
    padding-inline: var(--space-8);
    background: transparent;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: var(--fs-sm);
    text-decoration: none;
    white-space: nowrap;
    transition:
        border-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        background var(--duration-fast) var(--ease-out);
}
.altronix-projects__cta:hover {
    border-color: var(--color-accent-blue);
    color: var(--color-accent-blue);
    background: rgba(0,166,251,0.06);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 767px) {
    .altronix-projects {
        padding-block: var(--space-12) var(--space-8);
    }

    .altronix-projects__head { padding-inline: var(--space-4); }
    .altronix-projects__title { font-size: var(--fs-2xl); }
    .altronix-projects__footer { padding-inline: var(--space-4); }

    .altronix-projects__track-wrap {
        cursor: default;
    }

    .altronix-projects__card {
        inline-size: 75vw;
        max-inline-size: 280px;
        block-size: 400px;
    }

    /* Description toujours visible sur mobile (pas de hover) */
    .altronix-projects__card-desc {
        max-block-size: 80px !important;
        opacity: 1 !important;
    }

    /* Accent line visible par défaut */
    .altronix-projects__card-accent {
        inline-size: 40% !important;
    }


}

@media (prefers-reduced-motion: reduce) {
    .altronix-projects__card,
    .altronix-projects__card-bg,
    .altronix-projects__card-accent { transition: none; }
}