/* =========================================================
   PRODUCTS PAGE
========================================================= */

.products-container {
    width: min(1200px, calc(100% - 60px));
    margin: 0 auto;
}

/* =========================================================
   PRODUCT AREA — full-screen carousel hero

   No separate intro/heading: the carousel itself fills the
   first viewport on load, straight onto a plain white
   field, with the header floating transparently on top of
   it. Scrolling past it lands straight on the footer.
========================================================= */

.products-list {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 110px 0 70px;
    overflow: hidden;
    background: #fff;
    color: var(--dark-blue);
}

.products-list .products-container {
    position: relative;
    z-index: 1;
    width: min(1200px, calc(100% - 60px));
}


/* =========================================================
   PRODUCTS GRID — all products shown side by side
========================================================= */

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
}

.product-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

    /* Soft shadow pool in place of a hard box — the
       product appears to float above the surface rather
       than sit inside a panel. */
    .product-card-media::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
            ellipse at center,
            rgba(27,61,95,.1) 0%,
            rgba(27,61,95,.04) 35%,
            transparent 70%
        );
        pointer-events: none;
        /* Safari/WebKit sometimes rasterizes a radial-gradient
           on an absolutely positioned element incorrectly on
           first paint (a hard edge instead of a smooth fade),
           only self-correcting after a repaint (e.g. pinch-
           zoom). Forcing its own GPU compositing layer from
           the start avoids that incorrect first rasterization. */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    .product-card-media img {
        position: relative;
        width: 78%;
        height: 78%;
        object-fit: contain;
        filter: drop-shadow(0 22px 34px rgba(27,61,95,.26));
    }

    .product-card-media-placeholder {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 70%;
        height: 70%;
        color: rgba(27,61,95,.45);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: .2em;
        text-transform: uppercase;
    }

.product-card-body h2 {
    margin: 0 0 12px;
    color: var(--dark-blue);
    font-size: clamp(19px, 1.6vw, 23px);
    font-weight: 300;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.product-card-body p {
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.product-card-cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--dark-blue);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: gap .3s ease, opacity .25s ease, color .25s ease;
}

    .product-card-cta span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid rgba(27,61,95,.3);
        font-size: 13px;
        transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
    }

.product-card-cta:hover {
    gap: 20px;
}

    .product-card-cta:hover span {
        background: var(--dark-blue);
        border-color: var(--dark-blue);
        color: var(--white);
        transform: translateX(3px);
    }

.product-card-cta--disabled {
    color: var(--muted);
    cursor: default;
}

    .product-card-cta--disabled span {
        border-color: rgba(27,61,95,.15);
    }


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .products-grid {
        gap: 40px;
    }
}


@media (max-width: 900px) {

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px 36px;
    }
}


@media (max-width: 760px) {

    .products-container {
        width: calc(100% - 40px);
    }

    .products-list {
        padding: 100px 0 110px;
    }
}


@media (max-width: 600px) {

    .products-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .product-card-media {
        aspect-ratio: 16 / 11;
    }
}


@media (max-width: 500px) {

    .products-container {
        width: calc(100% - 36px);
    }
}