/**
 * Solutions: link grid, use case directory, solutions hub, and a layout fix for nearly empty
 * industry, role and use case pages. Loaded on every Knowledge Hub view by inc/bd-solutions.php.
 */

/* ---------------------------------------------------------------- link grid */
.hp-kb-linkgrid-wrap {
    padding-block: 64px;
}

.hp-kb-linkgrid-wrap + .hp-kb-linkgrid-wrap {
    border-top: 1px solid var(--hp-line);
}

.hp-kb-linkgrid__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.hp-kb-linkgrid__intro {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.hp-kb-linkgrid__head .hp-h2 {
    font-size: var(--bd-h2-size);
    line-height: var(--bd-h2-lh);
    letter-spacing: var(--bd-h2-track);
    font-weight: var(--bd-heading-weight);
}

.hp-kb-linkgrid__text {
    margin: 0;
    font-size: var(--bd-body-size);
    color: var(--hp-ink-muted);
}

.hp-kb-linkgrid__head .hp-btn {
    flex: none;
}

.hp-kb-linkgrid__more {
    margin: 0;
}

.hp-kb-linkgrid__list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: minmax(0, 1fr);
}

.hp-kb-linkgrid__list > li {
    display: flex;
    min-width: 0;
}

@media (min-width: 721px) {
    .hp-kb-linkgrid--c2 .hp-kb-linkgrid__list,
    .hp-kb-linkgrid--c3 .hp-kb-linkgrid__list,
    .hp-kb-linkgrid--c4 .hp-kb-linkgrid__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1101px) {
    .hp-kb-linkgrid--c3 .hp-kb-linkgrid__list,
    .hp-kb-linkgrid--c4 .hp-kb-linkgrid__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1501px) {
    .hp-kb-linkgrid--c4 .hp-kb-linkgrid__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.hp-kb-linkgrid__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 16px 18px;
    border: 1px solid var(--hp-line);
    border-radius: 6px;
    background: var(--hp-white);
    color: var(--hp-ink);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.hp-kb-linkgrid__item:hover,
.hp-kb-linkgrid__item:focus-visible {
    border-color: var(--hp-coral);
    box-shadow: 0 6px 18px rgb(3 9 37 / .06);
}

.hp-kb-linkgrid__item:focus-visible {
    outline: 2px solid var(--hp-coral);
    outline-offset: 2px;
}

.hp-kb-linkgrid__kicker {
    font-family: var(--bd-font-mono);
    font-size: var(--bd-eyebrow-size);
    letter-spacing: var(--bd-eyebrow-track);
    text-transform: uppercase;
    color: var(--hp-coral);
    font-weight: var(--bd-eyebrow-weight);
}

.hp-kb-linkgrid__name {
    font-family: var(--hp-font-display);
    font-size: var(--bd-body-size);
    font-weight: var(--bd-heading-weight);
    line-height: 1.2;
}

.hp-kb-linkgrid__arrow {
    display: inline-block;
    color: var(--hp-coral);
    transition: transform .15s ease;
}

.hp-kb-linkgrid__item:hover .hp-kb-linkgrid__arrow {
    transform: translateX(3px);
}

.hp-kb-linkgrid__desc {
    font-size: var(--bd-small-size);
    line-height: 1.5;
    color: var(--hp-ink-muted);
}

/* Inside a document block the list is never wider than two columns. */
.hp-kb-block .hp-kb-linkgrid__list {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 721px) {
    .hp-kb-block .hp-kb-linkgrid__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.hp-kb-linkgrid-block .hp-kb-linkgrid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ------------------------------------------------------ use case directory */
.hp-kb-usecasegrid {
    align-items: stretch;
}

.hp-kb-usecasecard .hp-kb-card__summary {
    flex: 1 1 auto;
}

/* ------------------------------------------------------------ solutions hub */
.hp-kb-solhub__close {
    padding-block: 56px 88px;
    border-top: 1px solid var(--hp-line);
}

/* ------------------------------------------------ nearly empty document pages */
/* Without an "On this page" list the content must not fall into the 220px column. */
.hp-kb-body__grid--one,
.hp-kb-industry .hp-kb-body__grid:not(:has(> .hp-kb-toc)),
.hp-kb-role .hp-kb-body__grid:not(:has(> .hp-kb-toc)),
.hp-kb-usecase .hp-kb-body__grid:not(:has(> .hp-kb-toc)) {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
}

.hp-kb-body__grid--one .hp-kb-content,
.hp-kb-industry .hp-kb-body__grid:not(:has(> .hp-kb-toc)) .hp-kb-content,
.hp-kb-role .hp-kb-body__grid:not(:has(> .hp-kb-toc)) .hp-kb-content,
.hp-kb-usecase .hp-kb-body__grid:not(:has(> .hp-kb-toc)) .hp-kb-content {
    width: 100%;
    max-width: 960px;
}

@media (max-width: 720px) {
    .hp-kb-linkgrid-wrap {
        padding-block: 44px;
    }

    .hp-kb-linkgrid__head {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-kb-linkgrid__item,
    .hp-kb-linkgrid__arrow {
        transition: none;
    }

    .hp-kb-linkgrid__item:hover .hp-kb-linkgrid__arrow {
        transform: none;
    }
}

/* Use case hero card: labels are words, not numbers. */
.hp-kb-usecase .hp-kb-glance .hp-kb-idcard__facts > div {
    grid-template-columns: 96px minmax(0, 1fr);
}

@media (max-width: 720px) {
    .hp-kb-usecase .hp-kb-glance .hp-kb-idcard__facts > div {
        grid-template-columns: 84px minmax(0, 1fr);
    }
}

/* Link grid: the arrow sits at the end of the first line and never drops onto a line of its own. */
.hp-kb-linkgrid__name {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.hp-kb-linkgrid__arrow {
    flex: none;
}

/* Use case card: product tags on their own row, the link label on one line. */
.hp-kb-usecasecard .hp-kb-card__foot {
    flex-wrap: wrap;
}

.hp-kb-usecasecard .hp-kb-card__tags {
    margin-top: 0;
}

.hp-kb-usecasecard .hp-kb-card__cta {
    margin-left: auto;
    white-space: nowrap;
}

/* Solutions hub: guidance text from the page itself (print nothing when the page has no text). */
.hp-kb-solhub__guide {
    background: #fff;
    padding-block: clamp(40px, 6vw, 72px);
}
.hp-kb-solhub__prose {
    max-width: 760px;
}
.hp-kb-solhub__prose h2 {
    font-family: var(--hp-font-display, 'Forza', sans-serif);
    font-size: clamp(22px, 2.4vw, 30px);
    margin: 0 0 12px;
    color: #11193f;
}
.hp-kb-solhub__prose h3 {
    font-size: 17px;
    margin: 24px 0 6px;
    color: #11193f;
}
.hp-kb-solhub__prose p {
    margin: 0 0 12px;
    line-height: 1.65;
}

/* An odd last card in a two-column metrics grid spans both columns, so no row ends in an empty cell. */
@media (min-width: 700px) {
    .hp-kb-metrics__grid > .hp-kb-metric:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* Same for the two-column link grid: an odd last card spans the row. */
@media (min-width: 700px) {
    .hp-kb-linkgrid--c2 > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* ------------------------------------------------ directory card gradients
   Layered radial lights on navy black (#000313) and ink (#11193f), with deep blue, wine and coral.
   Angle, light positions and the leading hue come from the slug (see bd_card_art), so neighbours differ.
   Grain is an inline SVG noise. Hover: the light drifts once and the border warms to coral. No looping motion. */
.hp-kb-directory .hp-kb-gc.hp-kb-gc {
    --c1: 255 82 71;
    --c2: 36 52 128;
    --c3: 110 22 58;
    --a1: .5;
    --a2: .7;
    --a3: .55;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / .1);
    border-radius: 8px;
    background: linear-gradient(var(--ang, 135deg), #000313 0%, #070b24 100%);
    box-shadow: none;
    color: #fff;
}

.hp-kb-gc--0 { --c1: 255 82 71;  --c2: 36 52 128;  --c3: 110 22 58; --a1: 0.2; --a2: 0.14; --a3: 0.1; }
.hp-kb-gc--1 { --c1: 40 62 170;  --c2: 255 82 71;  --c3: 96 20 54;  --a1: 0.14; --a2: 0.2; --a3: 0.1; }
.hp-kb-gc--2 { --c1: 128 28 70;  --c2: 30 44 118;  --c3: 255 82 71; --a1: 0.12; --a2: 0.12; --a3: 0.22; }
.hp-kb-gc--3 { --c1: 52 72 176;  --c2: 120 26 66;  --c3: 255 82 71; --a1: 0.14; --a2: 0.1; --a3: 0.2; }
.hp-kb-gc--4 { --c1: 170 40 80;  --c2: 17 25 63;   --c3: 44 66 170; --a1: 0.14; --a2: 0.1; --a3: 0.12; }
.hp-kb-gc--5 { --c1: 255 82 71;  --c2: 128 28 70;  --c3: 28 42 120; --a1: 0.2; --a2: 0.1; --a3: 0.12; }

.hp-kb-gc::before,
.hp-kb-gc::after {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

/* The lights: three radial pools, one wide soft wash. */
.hp-kb-gc::before {
    inset: -18%;
    background:
        radial-gradient(34% 38% at var(--lx, 10%) var(--ly, 10%), rgb(var(--c1) / var(--a1)) 0%, transparent 72%),
        radial-gradient(36% 40% at var(--mx, 90%) var(--my, 85%), rgb(var(--c2) / var(--a2)) 0%, transparent 74%),
        radial-gradient(22% 26% at var(--nx, 50%) var(--ny, 50%), rgb(var(--c3) / var(--a3)) 0%, transparent 70%);
    transition: transform .7s ease;
}

/* Grain, plus a quiet scrim on the lower half so text keeps contrast. */
.hp-kb-gc::after {
    inset: 0;
    background:
        linear-gradient(180deg, rgb(0 3 19 / 0) 40%, rgb(0 3 19 / .3) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: auto, 160px 160px;
    opacity: .28;
}

.hp-kb-directory .hp-kb-gc.hp-kb-gc:hover,
.hp-kb-directory .hp-kb-gc.hp-kb-gc:focus-within {
    border-color: rgb(255 82 71 / .7);
    box-shadow: 0 20px 44px rgb(0 3 19 / .35);
}

.hp-kb-gc:hover::before,
.hp-kb-gc:focus-within::before {
    transform: translate(var(--sx, 14px), var(--sy, -10px)) scale(1.06);
}

/* Text on the gradient. */
.hp-kb-directory .hp-kb-gc .hp-kb-card__name,
.hp-kb-directory .hp-kb-gc .hp-kb-rolecard__title,
.hp-kb-directory .hp-kb-gc .hp-kb-rolecard__cta {
    color: #fff;
}

.hp-kb-directory .hp-kb-gc .hp-kb-card__summary,
.hp-kb-directory .hp-kb-gc .hp-kb-rolecard__summary,
.hp-kb-directory .hp-kb-gc .hp-kb-rolecard__jobs {
    color: #dfe3f2;
}

.hp-kb-directory .hp-kb-gc .hp-kb-card__aka,
.hp-kb-directory .hp-kb-gc .hp-kb-rolecard__audience {
    color: #ffb4ad;
}

.hp-kb-directory .hp-kb-gc .hp-kb-rolecard__jobs {
    border-top-color: rgb(255 255 255 / .16);
}

.hp-kb-directory .hp-kb-gc:hover .hp-kb-rolecard__cta,
.hp-kb-directory .hp-kb-gc:hover .hp-kb-card__cta {
    color: #ff7a70;
}

.hp-kb-directory .hp-kb-gc .hp-kb-tag {
    border-radius: 6px;
    border-color: rgb(255 255 255 / .22);
    background: rgb(0 3 19 / .35);
    color: #eef0fa;
}

/* Footer: pinned to the bottom of the card; tags above, the link always on its own line. */
.hp-kb-directory .hp-kb-gc .hp-kb-card__foot {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 14px;
    margin-top: auto;
    border-top-color: rgb(255 255 255 / .16);
}

.hp-kb-directory .hp-kb-gc .hp-kb-card__tags {
    margin: 0;
    align-content: flex-start;
    min-height: 60px;
}

.hp-kb-directory .hp-kb-gc .hp-kb-card__cta {
    margin-left: 0;
    white-space: nowrap;
}

.hp-kb-directory .hp-kb-gc .hp-kb-card__summary {
    flex: 1 1 auto;
}

/* Column counts that never leave a half-empty last row: 16 use cases and 12 industries, 9 roles. */
.hp-kb-usecasegrid,
.hp-kb-industries {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

@media (max-width: 1280px) {
    .hp-kb-usecasegrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hp-kb-industries {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .hp-kb-industries {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .hp-kb-directory .hp-kb-gc .hp-kb-card__tags {
        min-height: 0;
    }

    .hp-kb-usecasegrid,
    .hp-kb-industries {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-kb-gc::before {
        transition: none;
    }

    .hp-kb-gc:hover::before,
    .hp-kb-gc:focus-within::before {
        transform: none;
    }
}