/* ========================================
   Development Section
   ======================================== */

.development-section {
    position: relative;
    isolation: isolate;
    min-height: 925px;
    padding: var(--spacing-16, 60px) var(--spacing-24, 24px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.development-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 50%,
        rgba(0, 0, 0, 0.5) 90%
    );
}

.development-section__image {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.development-section__container {
    position: relative;
    z-index: 1;
    width: min(100%, 1280px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 280px;
}


/* ========================================
   Header
   ======================================== */

.development-section__header {
    padding: var(--space-6) var(--space-10);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-20, 20px);
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
}

.development-section__title {
    margin: 0;

    color: var(
        --color-foreground-on-image,
        var(--Foundation-White, #fff)
    );
    font-family: var(--font-family-sans, "Open Sans"), sans-serif;
    font-size: var(--font-size-40, 40px);
    font-weight: var(--font-weight-bold, 700);
    line-height: var(--line-height-48, 48px);
}

.development-section__description {
    width: min(442px, 100%);
    margin: 0;
    color: var(
        --color-foreground-on-image,
        var(--Foundation-White, #fff)
    );
    font-family: var(--font-family-sans, "Open Sans"), sans-serif;
    font-size: var(--font-size-18, 18px);
    font-weight: var(--font-weight-regular, 400);
    line-height: var(--line-height-28, 28px);
}


/* ========================================
   Cards
   ======================================== */

.development-section__grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--spacing-24, 24px);
}

.development-card {
    min-height: var(--min-height-150, 150px);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--spacing-10, 10px);
    background: var(--color-background, #fff);
    border-radius: var(--border-radius-20, 20px);
    overflow: hidden;
}


/* First row — 3 cards */

.development-card:nth-child(-n + 3) {
    grid-column: span 4;
}


/* Second row — 4 cards */

.development-card:nth-child(n + 4) {
    grid-column: span 3;
}


/* ========================================
   Card Number
   ======================================== */

.development-card__number {
    color: var(
        --color-accent-pink,
        var(--Pink-500, #E6007E)
    );
    font-family: Geist, sans-serif;
    font-size: var(--font-size-18, 18px);
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--line-height-1-4, 1.4);
}


/* ========================================
   Card Text
   ======================================== */

.development-card__text {
    flex: 1;
    width: 100%;
    margin: 0;
    color: var(
        --color-text-primary,
        var(--Foundation-Black, #000)
    );
    font-family: var(--font-family-sans, "Open Sans"), sans-serif;
    font-size: var(--font-size-14, 14px);
    font-weight: var(--font-weight-regular, 400);
    line-height: var(--line-height-20, 20px);
}


/* ========================================
   Responsive — Tablet
   ======================================== */

@media (max-width: 1100px) {

    .development-section {
        min-height: 780px;
    }

    .development-section__grid {
        width: 100vw;
        margin-right: calc((100% - 100vw) / 2);
        padding: 0 var(--spacing-24, 24px);
        display: flex;
        flex-wrap: nowrap;
        gap: var(--spacing-24, 24px);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .development-section__grid::-webkit-scrollbar {
        display: none;
    }

    .development-card {
        flex: 0 0 var(--card-width-tablet, 320px);
        width: var(--card-width-tablet, 320px);
        min-width: var(--card-width-tablet, 320px);
        min-height: var(--min-height-150, 150px);
        grid-column: auto !important;
        scroll-snap-align: start;
    }
}


/* ========================================
   Responsive — Mobile
   ======================================== */

@media (max-width: 640px) {

    .development-section {
        padding: var(--spacing-48, 48px) var(--spacing-16, 16px);
        min-height: 720px;
    }

    .development-section__header {
        padding: var(--spacing-20, 20px);
        border-radius: var(--border-radius-28, 28px);
    }

    .development-section__title {
        font-size: var(--font-size-32, 32px);
        line-height: var(--line-height-40, 40px);
    }

    .development-section__description {
        font-size: var(--font-size-16, 16px);
        line-height: var(--line-height-24, 24px);
    }

    .development-section__grid {
        width: 100vw;
        margin-left: calc((100% - 100vw) / 2);
        padding: 0 var(--spacing-16, 16px);
        display: flex;
        flex-wrap: nowrap;
        gap: var(--spacing-16, 16px);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .development-section__grid::-webkit-scrollbar {
        display: none;
    }

    .development-card {
        flex: 0 0 var(--card-width-mobile, 280px);

        width: var(--card-width-mobile, 280px);
        min-width: var(--card-width-mobile, 280px);
        min-height: var(--min-height-150, 150px);
        grid-column: auto !important;
        scroll-snap-align: start;
    }
}