/* ---------------------------------------------------------------------------
   The products grid on the home page.

   These are eight separate software platforms, each with its own name and its
   own colour. The template gave them eight identical white boxes with one
   arbitrarily darkened per row, which said "this one matters more" about a card
   chosen by position rather than by anything true.

   So: every card wears its product's colour on a rule across the top, and the
   only card that looks different is one that genuinely is - a platform still
   marked "Coming soon".

   Each card sets --accent inline from the database. Everything here reads it,
   so a colour changed in the admin panel changes the whole card.
   --------------------------------------------------------------------------- */

.our-services {
    --card-line: #e7e5e1;
    --card-muted: #6f6b66;
}

/* ---- section heading ---- */

.our-services .products-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--card-muted);
    margin-bottom: 14px;
}

    .our-services .products-eyebrow .eyebrow-mark {
        width: 8px;
        height: 8px;
        background: var(--primary-color);
    }

/* ---- the card ---- */

.our-services .product-card {
    position: relative;
    padding-top: 34px;
    border-color: var(--card-line);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

    /* The product's colour, across the top.

       ::after, not ::before. The template already owns ::before on
       .service-item and grows it from 0 to full height on hover to flood the
       card. Using the same pseudo-element meant hovering inflated this 4px rule
       into a full-bleed block of saturated colour, with the copy stranded on
       top of it - which is exactly what the text disappearing was. */
    .our-services .product-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--accent, var(--primary-color));
        transition: height .2s ease;
        z-index: 2;
    }

    /* The flood itself stays, but as a wash of the product's own colour rather
       than the template's near-black gradient - light enough that every word on
       the card is as readable hovered as it is at rest. */
    .our-services .product-card::before {
        background: color-mix(in srgb, var(--accent, #405189) 8%, #fff);
    }

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .our-services .product-card::before {
        background: #f4f3f1;
    }
}

    .our-services .product-card:hover,
    .our-services .product-card:focus-within {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(20, 19, 18, .10);
        border-color: var(--accent, var(--primary-color));
    }

        .our-services .product-card:hover::after,
        .our-services .product-card:focus-within::after {
            height: 7px;
        }

    /* The template turns the heading and body white on hover, for its dark
       flood. The flood is light now, so white text would vanish - these put the
       ink back. */
    .our-services .product-card:hover .service-title h3,
    .our-services .product-card:focus-within .service-title h3 {
        color: var(--accent-color);
    }

    .our-services .product-card:hover .service-content p,
    .our-services .product-card:focus-within .service-content p {
        color: var(--text-color);
    }

    /* The template inverts icon artwork to white on hover. A lettermark is
       type, not line art - there is nothing to invert. */
    .our-services .product-card:hover .icon-box img,
    .our-services .product-card:focus-within .icon-box img {
        filter: none;
    }

/* A platform not yet shipped. Held back on purpose: it is the one real
   difference between these cards, so it is the only one drawn. */
.our-services .product-card.is-upcoming {
    border-style: dashed;
    background: transparent;
}

    .our-services .product-card.is-upcoming::after {
        opacity: .45;
    }

/* ---- the mark ---- */

.our-services .icon-box {
    margin-bottom: 20px;
}

.our-services .product-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .4px;
    /* Tinted rather than solid. Eight saturated blocks in one row fight each
       other; at a tenth the strength they sit together and the names lead. */
    background: color-mix(in srgb, var(--accent, #405189) 12%, transparent);
    color: var(--accent, #405189);
    border: 1px solid color-mix(in srgb, var(--accent, #405189) 22%, transparent);
}

/* Older browsers with no color-mix still get a readable mark. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .our-services .product-mark {
        background: #f2f1ef;
        border-color: var(--card-line);
    }
}

/* ---- title, status, tagline ---- */

.our-services .product-card .service-title h3 {
    margin-bottom: 0;
}

.our-services .product-status {
    display: inline-block;
    margin: 8px 0 0;
    padding: 2px 10px;
    border-radius: 3px;
    font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    /* Set against the product's colour, not a generic green: "Live" means live
       for this product. */
    background: color-mix(in srgb, var(--accent, #405189) 12%, transparent);
    color: var(--accent, #405189);
}

    /* Not shipped yet reads as neutral, never as a brand statement. */
    .our-services .product-card.is-upcoming .product-status {
        background: #ecebe8;
        color: var(--card-muted);
    }

.our-services .product-tagline {
    margin: 10px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 600;
    color: var(--accent, #405189);
}

.our-services .product-card.is-upcoming .product-tagline {
    color: var(--card-muted);
}

.our-services .product-card .service-content p {
    margin-bottom: 0;
}

/* ---- the arrow ---- */

.our-services .product-card .service-btn a {
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.our-services .product-card:hover .service-btn a,
.our-services .product-card:focus-within .service-btn a {
    background: var(--accent, var(--primary-color));
    border-color: var(--accent, var(--primary-color));
    color: #fff;
}

/* ---- keyboard ---- */

.our-services a:focus-visible {
    outline: 2px solid var(--accent, var(--primary-color));
    outline-offset: 3px;
}

/* ---- motion ---- */

@media (prefers-reduced-motion: reduce) {
    .our-services .product-card,
    .our-services .product-card::before,
    .our-services .product-card::after,
    .our-services .product-card .service-btn a {
        transition: none;
    }

        .our-services .product-card:hover,
        .our-services .product-card:focus-within {
            transform: none;
        }
}

/* ---- narrow screens ---- */

@media (max-width: 767px) {
    .our-services .product-card {
        padding: 28px 24px 26px;
        padding-top: 30px;
    }

    .our-services .product-mark {
        width: 46px;
        height: 46px;
        font-size: 14px;
    }

    .our-services .icon-box {
        margin-bottom: 16px;
    }
}

/* ---- a module card names its suite ----

   The nine ERP modules share the ERP's colour, which groups them but does not
   explain them. This chip does: it says which suite the card belongs to and
   links to it. */

.our-services .product-parent-chip {
    display: inline-block;
    margin-bottom: 8px;
    padding: 2px 9px;
    border-radius: 3px;
    font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    text-decoration: none;
    background: color-mix(in srgb, var(--accent, #405189) 10%, transparent);
    color: var(--accent, #405189);
    border: 1px solid color-mix(in srgb, var(--accent, #405189) 20%, transparent);
    transition: background .15s ease, color .15s ease;
}

    .our-services .product-parent-chip:hover,
    .our-services .product-parent-chip:focus-visible {
        background: var(--accent, #405189);
        color: #fff;
    }

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .our-services .product-parent-chip {
        background: #f2f1ef;
        border-color: var(--card-line);
        color: var(--accent-color);
    }
}

@media (prefers-reduced-motion: reduce) {
    .our-services .product-parent-chip {
        transition: none;
    }
}