/* ============================================
   Project Showcase Design Lock
   Loaded after index.css so the art-gallery layout stays stable.
   ============================================ */

@media (min-width: 1025px) {
    .projects.vanilla-projects {
        position: relative !important;
        display: block !important;
        height: auto !important;
        min-height: auto !important;
        padding: clamp(112px, 13vh, 168px) var(--section-pad-x) clamp(128px, 16vh, 210px) !important;
        overflow: visible !important;
        background:
            radial-gradient(circle at 78% 8%, rgba(242, 210, 154, 0.11), transparent 24%),
            radial-gradient(circle at 10% 55%, rgba(86, 70, 45, 0.16), transparent 34%),
            linear-gradient(180deg, #08080d 0%, #11100f 46%, #07070b 100%) !important;
    }

    .projects.vanilla-projects::before {
        content: "SELECTED WORK" !important;
        position: absolute !important;
        top: clamp(88px, 10vw, 152px) !important;
        right: -0.14em !important;
        left: auto !important;
        z-index: 0 !important;
        font-family: var(--font-heading) !important;
        font-size: clamp(6rem, 15vw, 16rem) !important;
        line-height: 0.78 !important;
        color: rgba(255, 255, 255, 0.024) !important;
        white-space: nowrap !important;
        pointer-events: none !important;
        transform: translateY(var(--work-index-y, 0px)) !important;
    }

    .projects.vanilla-projects::after {
        display: none !important;
    }

    .projects.vanilla-projects .projects-header {
        position: relative !important;
        inset: auto !important;
        z-index: 3 !important;
        max-width: var(--max-width) !important;
        margin: 0 auto clamp(72px, 8vw, 124px) !important;
        mix-blend-mode: normal !important;
        pointer-events: auto !important;
    }

    .projects.vanilla-projects .projects-title {
        max-width: 8ch !important;
        font-size: clamp(4.6rem, 8.8vw, 9.6rem) !important;
        line-height: 0.86 !important;
        letter-spacing: 0 !important;
        color: rgba(255, 255, 255, 0.94) !important;
    }

    .projects.vanilla-projects .projects-count {
        font-size: clamp(4.4rem, 8.8vw, 9rem) !important;
        color: rgba(242, 210, 154, 0.34) !important;
    }

    .projects.vanilla-projects .projects-track-wrapper,
    .projects.vanilla-projects .projects-track {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        max-width: var(--max-width) !important;
        height: auto !important;
        margin: 0 auto !important;
        overflow: visible !important;
        transform: none !important;
    }

    .projects.vanilla-projects .projects-track {
        display: grid !important;
        gap: clamp(100px, 13vw, 180px) !important;
        perspective: 1400px !important;
    }

    .projects.vanilla-projects .project-card,
    .projects.vanilla-projects .project-card:nth-child(even),
    .projects.vanilla-projects .project-card.project-inspire,
    .projects.vanilla-projects .project-card.project-sajilo,
    .projects.vanilla-projects .project-card.project-suresh,
    .projects.vanilla-projects .project-card.project-skin,
    .projects.vanilla-projects .project-card.project-book {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        gap: clamp(24px, 3.8vw, 56px) !important;
        align-items: center !important;
        width: 100% !important;
        height: auto !important;
        min-height: clamp(640px, 82vh, 850px) !important;
        padding: clamp(30px, 4vw, 68px) 0 !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        isolation: isolate !important;
        clip-path: none !important;
    }

    .projects.vanilla-projects .project-card::before,
    .projects.vanilla-projects .project-card:nth-child(even)::before,
    .projects.vanilla-projects .project-inspire::before,
    .projects.vanilla-projects .project-sajilo::before {
        content: "" !important;
        position: absolute !important;
        inset: clamp(20px, 3.5vh, 44px) 4% clamp(20px, 3.5vh, 44px) 6% !important;
        z-index: -1 !important;
        border: 1px solid rgba(242, 210, 154, 0.18) !important;
        background:
            linear-gradient(120deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
            rgba(255, 255, 255, 0.018) !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.026), 0 54px 150px rgba(0, 0, 0, 0.36) !important;
        transform: skewX(-2.4deg) !important;
    }

    .projects.vanilla-projects .project-card::after,
    .projects.vanilla-projects .project-card:nth-child(even)::after {
        left: clamp(0px, 0.5vw, 8px) !important;
        right: auto !important;
        bottom: clamp(68px, 9vh, 112px) !important;
        z-index: 5 !important;
        opacity: 0.72 !important;
    }

    .projects.vanilla-projects .project-card-image,
    .projects.vanilla-projects .project-lab-visual {
        position: relative !important;
        grid-column: 1 / 8 !important;
        grid-row: 1 !important;
        justify-self: stretch !important;
        width: 100% !important;
        height: min(64vh, 640px) !important;
        min-height: 420px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 1px solid rgba(242, 210, 154, 0.22) !important;
        background:
            radial-gradient(circle at 24% 18%, rgba(242, 210, 154, 0.12), transparent 32%),
            linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.016)),
            #08080d !important;
        box-shadow: 0 52px 140px rgba(0, 0, 0, 0.5), 0 0 70px rgba(202, 168, 106, 0.06) !important;
        clip-path: none !important;
        transform: rotate(-0.45deg) translateY(-6px) !important;
        z-index: 1 !important;
    }

    .projects.vanilla-projects .project-card-content {
        position: relative !important;
        grid-column: 8 / 13 !important;
        grid-row: 1 !important;
        justify-self: stretch !important;
        align-self: center !important;
        width: 100% !important;
        max-width: none !important;
        min-height: auto !important;
        padding: clamp(28px, 3.2vw, 52px) !important;
        border: 1px solid rgba(255, 255, 255, 0.09) !important;
        border-left: 1px solid rgba(242, 210, 154, 0.74) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.09) !important;
        background:
            linear-gradient(135deg, rgba(9, 9, 14, 0.97), rgba(9, 9, 14, 0.86) 64%, rgba(42, 34, 23, 0.54)),
            rgba(9, 9, 14, 0.9) !important;
        box-shadow: 0 36px 110px rgba(0, 0, 0, 0.38), 0 0 55px rgba(202, 168, 106, 0.07) !important;
        backdrop-filter: blur(20px) saturate(1.08) !important;
        transform: none !important;
        z-index: 4 !important;
    }

    .projects.vanilla-projects .project-card:nth-child(even) .project-card-image,
    .projects.vanilla-projects .project-card:nth-child(even) .project-lab-visual,
    .projects.vanilla-projects .project-card.project-inspire .project-card-image,
    .projects.vanilla-projects .project-card.project-sajilo .project-card-image {
        grid-column: 6 / 13 !important;
        clip-path: none !important;
        transform: rotate(0.45deg) translateY(-6px) !important;
    }

    .projects.vanilla-projects .project-card:nth-child(even) .project-card-content,
    .projects.vanilla-projects .project-card.project-inspire .project-card-content,
    .projects.vanilla-projects .project-card.project-sajilo .project-card-content {
        grid-column: 1 / 6 !important;
        border-left: 1px solid rgba(255, 255, 255, 0.09) !important;
        border-right: 1px solid rgba(242, 210, 154, 0.74) !important;
    }

    .projects.vanilla-projects .project-card-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
        filter: saturate(1.06) contrast(1.04) brightness(0.94) !important;
        transform: none !important;
    }

    .projects.vanilla-projects .project-card.project-inspire .project-card-image img,
    .projects.vanilla-projects .project-card.project-sajilo .project-card-image img {
        object-fit: contain !important;
        object-position: center center !important;
    }

    .projects.vanilla-projects .project-card-title,
    .projects.vanilla-projects .project-card.project-inspire .project-card-title,
    .projects.vanilla-projects .project-card.project-sajilo .project-card-title {
        max-width: 100% !important;
        margin-bottom: clamp(18px, 2vw, 28px) !important;
        font-size: clamp(2.45rem, 4.05vw, 5.15rem) !important;
        line-height: 0.96 !important;
        letter-spacing: 0 !important;
        color: rgba(255, 250, 240, 0.96) !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        text-wrap: balance !important;
    }

    .projects.vanilla-projects .project-card-featured .project-card-title {
        font-size: clamp(2.35rem, 3.55vw, 4.8rem) !important;
    }

    .projects.vanilla-projects .project-card-content {
        overflow: visible !important;
    }

    .projects.vanilla-projects .project-card-lab .project-lab-visual {
        padding: clamp(30px, 4vw, 58px) !important;
        overflow: hidden !important;
    }

    .projects.vanilla-projects .project-lab-visual .lab-word {
        font-size: clamp(3.4rem, 7vw, 8.4rem) !important;
        line-height: 0.88 !important;
        letter-spacing: 0.01em !important;
        white-space: nowrap !important;
    }

    .projects.vanilla-projects .lab-skin .lab-word-main,
    .projects.vanilla-projects .lab-book .lab-word-main {
        top: 17% !important;
        left: 10% !important;
        right: auto !important;
        transform: none !important;
    }

    .projects.vanilla-projects .lab-skin .lab-word-side,
    .projects.vanilla-projects .lab-book .lab-word-side {
        top: 41% !important;
        left: 10% !important;
        right: auto !important;
        transform: none !important;
    }

    .projects.vanilla-projects .lab-book .lab-word-low {
        top: 65% !important;
        left: 10% !important;
        right: auto !important;
        transform: none !important;
    }

    .projects.vanilla-projects .project-card-desc {
        max-width: 520px !important;
        font-size: clamp(0.98rem, 1.08vw, 1.16rem) !important;
        line-height: 1.62 !important;
        color: rgba(255, 255, 255, 0.68) !important;
    }

    .projects.vanilla-projects .project-card-tags {
        gap: 10px !important;
        margin-bottom: clamp(24px, 2.4vw, 36px) !important;
    }

    .projects.vanilla-projects .project-tag {
        border-color: rgba(242, 210, 154, 0.38) !important;
        background: rgba(0, 0, 0, 0.18) !important;
        color: rgba(242, 210, 154, 0.88) !important;
    }

    .projects.vanilla-projects .project-card-number,
    .projects.vanilla-projects .project-card.project-inspire .project-card-number,
    .projects.vanilla-projects .project-card.project-sajilo .project-card-number {
        top: auto !important;
        right: clamp(34px, 5vw, 82px) !important;
        bottom: clamp(22px, 4vh, 48px) !important;
        left: auto !important;
        z-index: 0 !important;
        font-size: clamp(8rem, 17vw, 18rem) !important;
        line-height: 0.72 !important;
        color: rgba(255, 255, 255, 0.043) !important;
        transform: none !important;
    }

    .projects.vanilla-projects .project-card:nth-child(even) .project-card-number,
    .projects.vanilla-projects .project-card.project-inspire .project-card-number,
    .projects.vanilla-projects .project-card.project-sajilo .project-card-number {
        left: clamp(34px, 5vw, 82px) !important;
        right: auto !important;
    }

    .projects.vanilla-projects .projects-scroll-rail {
        position: sticky !important;
        top: 28vh !important;
        left: auto !important;
        right: auto !important;
        z-index: 8 !important;
        width: 1px !important;
        height: 44vh !important;
        margin: 0 0 -44vh clamp(4px, 1.2vw, 16px) !important;
        background: rgba(255, 255, 255, 0.1) !important;
        transform: none !important;
    }

    .projects.vanilla-projects .projects-scroll-fill {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        transform: scaleY(0);
        transform-origin: center top !important;
        background: linear-gradient(180deg, rgba(242, 210, 154, 0.15), rgba(242, 210, 154, 0.95), rgba(255, 255, 255, 0.76)) !important;
        box-shadow: 0 0 22px rgba(242, 210, 154, 0.42) !important;
    }
}

@media (min-width: 1025px) and (max-width: 1240px) {
    .projects.vanilla-projects .project-card,
    .projects.vanilla-projects .project-card:nth-child(even) {
        grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    }

    .projects.vanilla-projects .project-card-image,
    .projects.vanilla-projects .project-lab-visual {
        grid-column: 1 / 7 !important;
    }

    .projects.vanilla-projects .project-card-content {
        grid-column: 6 / 11 !important;
    }

    .projects.vanilla-projects .project-card:nth-child(even) .project-card-image,
    .projects.vanilla-projects .project-card:nth-child(even) .project-lab-visual,
    .projects.vanilla-projects .project-card.project-inspire .project-card-image,
    .projects.vanilla-projects .project-card.project-sajilo .project-card-image {
        grid-column: 5 / 11 !important;
    }

    .projects.vanilla-projects .project-card:nth-child(even) .project-card-content,
    .projects.vanilla-projects .project-card.project-inspire .project-card-content,
    .projects.vanilla-projects .project-card.project-sajilo .project-card-content {
        grid-column: 1 / 6 !important;
    }
}

@media (max-width: 1024px) {
    .projects.vanilla-projects {
        height: auto !important;
        min-height: auto !important;
        padding: clamp(84px, 12vh, 124px) var(--section-pad-x) clamp(96px, 12vh, 140px) !important;
        overflow: hidden !important;
    }

    .projects.vanilla-projects .projects-header,
    .projects.vanilla-projects .projects-track-wrapper,
    .projects.vanilla-projects .projects-track {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        max-width: var(--max-width) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: visible !important;
        transform: none !important;
    }

    .projects.vanilla-projects .projects-track {
        display: grid !important;
        gap: clamp(56px, 9vw, 92px) !important;
    }

    .projects.vanilla-projects .project-card,
    .projects.vanilla-projects .project-card:nth-child(even),
    .projects.vanilla-projects .project-card.project-inspire,
    .projects.vanilla-projects .project-card.project-sajilo {
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        overflow: visible !important;
    }

    .projects.vanilla-projects .project-card-image,
    .projects.vanilla-projects .project-lab-visual,
    .projects.vanilla-projects .project-card:nth-child(even) .project-card-image,
    .projects.vanilla-projects .project-card:nth-child(even) .project-lab-visual,
    .projects.vanilla-projects .project-card.project-inspire .project-card-image,
    .projects.vanilla-projects .project-card.project-sajilo .project-card-image {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 10 !important;
        clip-path: none !important;
        transform: none !important;
    }

    .projects.vanilla-projects .project-card-content,
    .projects.vanilla-projects .project-card:nth-child(even) .project-card-content,
    .projects.vanilla-projects .project-card.project-inspire .project-card-content,
    .projects.vanilla-projects .project-card.project-sajilo .project-card-content {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: calc(100% - 24px) !important;
        margin: -18px auto 0 !important;
        padding: clamp(24px, 7vw, 36px) !important;
        border: 1px solid rgba(242, 210, 154, 0.24) !important;
        transform: none !important;
        z-index: 4 !important;
    }

    .projects.vanilla-projects .project-card-title {
        max-width: 100% !important;
        font-size: clamp(2.35rem, 11vw, 4.3rem) !important;
        overflow-wrap: break-word !important;
    }

    .projects.vanilla-projects .project-card-image img {
        object-fit: contain !important;
    }

    .projects.vanilla-projects .projects-scroll-rail {
        display: none !important;
    }
}