/* Shared styles of the product pages (Products_*.razor): lead text, overview cards, pills, figures, reference quote,
   logos, process steps. Class prefix pp- (product page). */

.pp-lead {
    max-width: 44rem;
    margin: 0 auto var(--lx-space-md) auto;
    text-align: center;
    font-size: 1.02em;
    line-height: 1.65;
    color: var(--lx-text-muted);
}

/* jump targets (#lxg, #lxpdm): stop below the fixed page header */
.pp-anchor {
    scroll-margin-top: 60px;
}

/* overview: two product cards */
.pp-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lx-space-md);
}

.pp-overviewCard {
    display: flex;
    align-items: center;
    gap: var(--lx-space-md);
    padding: var(--lx-space-md);
    color: var(--lx-text);
    text-decoration: none;
    background-color: var(--lx-surface);
    border-radius: var(--lx-radius);
    box-shadow: var(--lx-shadow-card);
    border-top: 4px solid var(--lx-blue);
    transition: box-shadow var(--lx-transition), transform var(--lx-transition);
}

    .pp-overviewCard:hover {
        color: var(--lx-text);
        box-shadow: var(--lx-shadow-card-hover);
        transform: translateY(-3px);
    }

        .pp-overviewCard:hover .pp-overviewMore {
            text-decoration: underline;
        }

.pp-overviewLogo {
    flex: none;
    width: 96px;
    height: 96px;
    object-fit: contain;
}

/* instead of a logo: icon in a tinted square */
.pp-overviewIcon {
    flex: none;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: var(--lx-blue-text);
    background-color: color-mix(in srgb, var(--lx-blue-text) 12%, transparent);
}

.pp-overviewLogoWide {
    width: 140px;
}

.pp-overviewName {
    font-family: Lato, arial;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--lx-lxg-text);
}

.pp-overviewText {
    margin: 4px 0 8px 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--lx-text-muted);
}

.pp-overviewMore {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--lx-blue-text);
}

/* claims and use cases as pills */
.pp-claims {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 var(--lx-space-lg) 0;
    padding: 0;
    list-style: none;
}

    .pp-claims li {
        padding: 6px 16px;
        font-size: 0.74rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        color: white;
        background: linear-gradient(135deg, var(--lx-blue-dark), var(--lx-blue-section));
        border-radius: 999px;
    }

.pp-claimsLight {
    margin-bottom: 0;
}

    .pp-claimsLight li {
        color: var(--lx-blue-text);
        background: color-mix(in srgb, var(--lx-blue-text) 12%, transparent);
        letter-spacing: 0;
        font-weight: 500;
    }

.pp-toolsFigure {
    margin: var(--lx-space-lg) auto 0 auto;
    max-width: 820px;
    text-align: center;
}

    .pp-toolsFigure img {
        width: 100%;
        height: auto;
    }

    .pp-toolsFigure figcaption {
        margin-top: 8px;
        font-size: 0.7rem;
        line-height: 1.5;
        color: var(--lx-text-muted);
    }

.pp-useCases {
    margin-top: var(--lx-space-lg);
    text-align: center;
}

.pp-useCasesTitle {
    margin-bottom: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--lx-text);
}

/* key figures: four in a row, two on phones */
.pp-figures {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-items: center;
}

@media (max-width: 760px) {
    .pp-figures {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* reference quote */
.pp-reference {
    display: flex;
    align-items: center;
    gap: var(--lx-space-md);
    margin: var(--lx-space-lg) 0 0 0;
    padding: var(--lx-space-md);
    background-color: var(--lx-surface);
    border-radius: var(--lx-radius);
    box-shadow: var(--lx-shadow-card);
    border-left: 4px solid var(--lx-blue);
}

.pp-referenceLogo {
    flex: none;
    width: 96px;
    height: 78px;
    object-fit: contain;
    border-radius: var(--lx-radius-sm);
}

.pp-reference blockquote {
    margin: 0;
}

    .pp-reference blockquote p {
        margin: 0 0 12px 0;
        font-size: 0.9rem;
        font-style: italic;
        line-height: 1.55;
        color: var(--lx-text);
    }

    .pp-reference footer {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.7rem;
        color: var(--lx-text-muted);
    }

        .pp-reference footer b {
            display: block;
            color: var(--lx-text);
        }

.pp-referencePhoto {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
}

.pp-usedBy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 16px;
    margin-top: var(--lx-space-md);
    font-size: 0.72rem;
    color: var(--lx-text-muted);
}

    .pp-usedBy img {
        height: 44px;
        width: auto;
        max-width: 120px;
        padding: 4px;
        object-fit: contain;
        background-color: white;
        border-radius: var(--lx-radius-sm);
        box-shadow: var(--lx-shadow-card);
    }

/* project steps with connecting line */
.pp-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--lx-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.pp-step {
    position: relative;
    text-align: center;
}

    /* line to the next step */
    .pp-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 22px;
        left: calc(50% + 30px);
        right: calc(-50% + 30px - var(--lx-space-md));
        height: 2px;
        background-color: color-mix(in srgb, var(--lx-blue-text) 30%, transparent);
    }

    .pp-step h4 {
        margin: 12px 0 4px 0;
        font-size: 0.86rem;
        font-weight: 700;
        color: var(--lx-text);
    }

    .pp-step p {
        margin: 0;
        font-size: 0.72rem;
        line-height: 1.5;
        color: var(--lx-text-muted);
    }

.pp-stepNumber {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    font-weight: 700;
    color: white;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lx-blue-dark), var(--lx-blue-section));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@media (max-width: 760px) {
    .pp-overview {
        grid-template-columns: minmax(0, 1fr);
    }

    .pp-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .pp-step:not(:last-child)::after {
            display: none;
        }

    .pp-reference {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 460px) {
    .pp-overviewCard {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* logos (e.g. products of partners): white cards, also white in dark mode */
.pp-logos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--lx-space-sm);
    margin: var(--lx-space-lg) 0 0 0;
    padding: 0;
    list-style: none;
}

    .pp-logos li {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 110px;
        padding: var(--lx-space-sm);
        background-color: white;
        border-radius: var(--lx-radius);
        box-shadow: var(--lx-shadow-card);
        transition: box-shadow var(--lx-transition), transform var(--lx-transition);
    }

        .pp-logos li:hover {
            box-shadow: var(--lx-shadow-card-hover);
            transform: translateY(-2px);
        }

    /* links around the logos: full width, so logos without intrinsic size (SVG, width: 100%) get a width */
    .pp-logos a {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .pp-logos img {
        max-width: 100%;
        max-height: 90px;
        width: auto;
        height: auto;
        object-fit: contain;
    }


@media (max-width: 760px) {
    .pp-logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}