/* Creation slide final layout lock.
   Loaded after index.css so older responsive overrides cannot move these panels. */

@media (min-width: 760px) {
    .home-process-section--creation .home-process-head {
        margin-bottom: clamp(0.9rem, 2.1vh, 1.55rem) !important;
    }

    .home-process-layout--creation {
        --creation-panel-size: clamp(18rem, 51vh, 31rem);
        display: grid !important;
        grid-template-columns: minmax(14rem, 0.72fr) minmax(0, 1.28fr) !important;
        align-items: stretch !important;
        max-width: min(100%, 76rem) !important;
    }

    .home-process-layout--creation > .home-process-visual--browser {
        display: block !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: var(--creation-panel-size) !important;
        aspect-ratio: auto !important;
        align-self: stretch !important;
        justify-self: stretch !important;
    }

    .home-process-layout--creation > .home-process-grid--creation {
        display: grid !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: var(--creation-panel-size) !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        align-self: stretch !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 0.35fr) minmax(0, 0.65fr) !important;
        gap: clamp(0.65rem, 1.1vw, 1rem) !important;
    }

    .home-process-grid--creation > .home-process-card--creation {
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .home-process-grid--creation > .home-process-card--creation:first-child {
        align-items: center !important;
        padding: clamp(0.9rem, 1.65vw, 1.6rem) !important;
    }

    .home-process-grid--creation > .home-tech-stack-card {
        padding: clamp(0.85rem, 1.5vw, 1.45rem) !important;
        gap: clamp(0.42rem, 0.8vh, 0.68rem) !important;
    }

    .home-tech-stack-intro {
        font-size: clamp(0.68rem, 0.8vw, 0.88rem) !important;
        line-height: 1.32 !important;
    }

    .home-tech-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: clamp(0.38rem, 0.62vw, 0.55rem) !important;
    }

    .home-tech-stack span {
        min-height: clamp(2.35rem, 5.4vh, 3rem) !important;
        padding: clamp(0.38rem, 0.68vw, 0.58rem) !important;
        font-size: clamp(0.5rem, 0.66vw, 0.66rem) !important;
        line-height: 1.18 !important;
    }

    .home-architecture-points {
        gap: clamp(0.28rem, 0.5vw, 0.45rem);
        margin-top: clamp(0.45rem, 1vh, 0.85rem);
    }

    .home-architecture-points span {
        padding: 0.25rem 0.48rem;
        font-size: clamp(0.5rem, 0.58vw, 0.62rem);
    }
}

@media (min-width: 1181px) {
    .home-process-layout--creation {
        --creation-panel-size: clamp(25rem, 56vh, 32rem);
        grid-template-columns: minmax(22rem, var(--creation-panel-size)) minmax(0, 1fr) !important;
    }

    .home-tech-stack {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 900px) and (max-width: 1180px) {
    .home-process-layout--creation {
        --creation-panel-size: clamp(24rem, 67vh, 28rem);
    }

    .home-process-layout--creation > .home-process-grid--creation {
        grid-template-rows: minmax(0, 0.32fr) minmax(0, 0.68fr) !important;
    }
}

@media (min-width: 900px) {
    .home-tech-stack {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 760px) and (max-width: 899px) {
    .home-tech-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}