/**
 * Knowledge Hub: "How to defend" playbooks, landing page and the "How to respond" block on module pages.
 */

/* ------------------------------------------------------------ landing */

.hp--white {
    background: var(--hp-white);
    color: var(--hp-ink);
}

/* Quick jump bar under the hero: one chip per alert area. 8px corners, no pills. */
.hp-defendhub__jump {
    padding-block: 20px;
    border-bottom: 1px solid var(--hp-line);
    background: var(--hp-white);
}

.hp-defendhub__jumplist {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp-defendhub__jumplist > li {
    flex: 1 1 200px;
    min-width: 0;
}

.hp-defendhub__jumplink {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--hp-line);
    border-radius: 6px;
    background: var(--hp-paper);
    color: var(--hp-ink);
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease;
}

.hp-defendhub__jumplink:hover {
    border-color: var(--hp-coral);
    background: var(--hp-white);
}

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

.hp-defendhub__jumpicon {
    flex: none;
    color: var(--hp-coral);
}

.hp-defendhub__jumpname {
    font-family: var(--hp-font-display);
    font-size: 17px;
    font-weight: 500;
}

.hp-defendhub__jumpn {
    margin-left: auto;
    font-family: var(--hp-font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--hp-ink-soft);
}

/* Group: an icon tile, the title and a count, then the cards. Backgrounds alternate paper and white. */
.hp-defendhub__group {
    padding-block: 64px 24px;
}

.hp-defendhub__group + .hp-defendhub__group {
    padding-top: 64px;
}

.hp-defendhub__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
}

.hp-defendhub__tile {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background: linear-gradient(135deg, #000313 0%, #11193f 100%);
    color: var(--hp-coral);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1);
}

.hp-defendhub__headtext {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 720px;
}

.hp-defendhub__count {
    padding: 6px 12px;
    border: 1px solid var(--hp-line-strong);
    border-radius: 6px;
    font-family: var(--hp-font-mono);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hp-ink-muted);
    white-space: nowrap;
}

/* The row count comes from --cols (see bd_defend_columns), so no row ends with a lone card. */
.hp-defendhub__grid {
    --gap: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

/* Dark gradient card: the same recipe as the use case cards (navy black, ink, deep blue, wine, coral). */
.hp-defendhub__card {
    --c1: 255 82 71;
    --c2: 36 52 128;
    --c3: 110 22 58;
    --a1: .2;
    --a2: .14;
    --a3: .1;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex: 1 1 calc((100% - (var(--cols, 3) - 1) * var(--gap)) / var(--cols, 3));
    flex-direction: column;
    gap: 12px;
    min-width: min(100%, 260px);
    padding: 24px;
    border: 1px solid rgb(255 255 255 / .1);
    border-radius: 8px;
    background: linear-gradient(var(--ang, 135deg), #000313 0%, #070b24 100%);
    color: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.hp-defendhub__card--1 { --c1: 40 62 170;  --c2: 255 82 71; --c3: 96 20 54;  --a1: .14; --a2: .2;  --a3: .1; }
.hp-defendhub__card--2 { --c1: 128 28 70;  --c2: 30 44 118; --c3: 255 82 71; --a1: .12; --a2: .12; --a3: .22; }
.hp-defendhub__card--3 { --c1: 52 72 176;  --c2: 120 26 66; --c3: 255 82 71; --a1: .14; --a2: .1;  --a3: .2; }
.hp-defendhub__card--4 { --c1: 170 40 80;  --c2: 17 25 63;  --c3: 44 66 170; --a1: .14; --a2: .1;  --a3: .12; }
.hp-defendhub__card--5 { --c1: 255 82 71;  --c2: 128 28 70; --c3: 28 42 120; --a1: .2;  --a2: .1;  --a3: .12; }

.hp-defendhub__card::before,
.hp-defendhub__card::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.hp-defendhub__card::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;
}

.hp-defendhub__card::after {
    inset: 0;
    background: linear-gradient(180deg, rgb(0 3 19 / 0) 40%, rgb(0 3 19 / .3) 100%);
}

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

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

.hp-defendhub__cardtop {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.hp-defendhub__cardicon {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgb(255 255 255 / .2);
    border-radius: 6px;
    background: rgb(0 3 19 / .4);
    color: #ff8a82;
}

.hp-defendhub__kicker {
    margin: 0;
    min-width: 0;
    font-family: var(--hp-font-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #ffb4ad;
    overflow-wrap: anywhere;
}

.hp-defendhub__name {
    margin: 0;
    font-family: var(--hp-font-display);
    font-size: var(--bd-card-size);
    font-weight: var(--bd-heading-weight);
    line-height: var(--bd-card-lh);
    letter-spacing: var(--bd-card-track);
    color: #fff;
}

.hp-defendhub__link {
    color: inherit;
    text-decoration: none;
}

.hp-defendhub__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.hp-defendhub__link:focus-visible {
    outline: 0;
}

.hp-defendhub__link:focus-visible::after {
    outline: 2px solid var(--hp-coral);
    outline-offset: -4px;
}

.hp-defendhub__line {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--bd-small-size, 14px);
    line-height: 1.55;
    color: #dfe3f2;
    overflow-wrap: anywhere;
}

.hp-defendhub__cta {
    padding-top: 14px;
    border-top: 1px solid rgb(255 255 255 / .16);
    font-weight: 600;
    font-size: var(--bd-small-size, 14px);
    color: #fff;
}

.hp-defendhub__card:hover .hp-defendhub__cta {
    color: #ff7a70;
}

/* "Every playbook has the same shape": a numbered row of six. */
.hp-defendhub__how {
    padding-block: 64px 88px;
}

/* beats `.hp-kb-group + .hp-kb-group { padding-top: 0 }` so the heading is not glued to the cards above */
.hp-kb-group.hp-defendhub__how {
    padding-block: 72px 88px;
}

.hp-defendhub__shape {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: shape;
}

.hp-defendhub__shape li {
    position: relative;
    padding: 18px 20px 18px 62px;
    border: 1px solid var(--hp-line);
    border-radius: 8px;
    background: var(--hp-paper);
    font-size: var(--bd-small-size, 14px);
    line-height: 1.55;
    color: var(--hp-ink-muted);
    counter-increment: shape;
}

.hp-defendhub__shape li::before {
    content: counter(shape);
    position: absolute;
    top: 18px;
    left: 18px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: var(--hp-navy-900);
    font-family: var(--hp-font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--hp-white);
}

.hp-defendhub__shape strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--hp-font-display);
    font-size: 16px;
    font-weight: 500;
    color: var(--hp-ink);
}

.hp-defendhub__note {
    max-width: 760px;
    margin: 24px 0 0;
    font-size: var(--bd-small-size, 14px);
    line-height: 1.6;
    color: var(--hp-ink-soft);
}

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

@media (max-width: 1100px) {
    .hp-defendhub__grid .hp-defendhub__card {
        flex-basis: calc((100% - var(--gap)) / 2);
    }

    .hp-defendhub__grid[style*="--cols:1"] .hp-defendhub__card {
        flex-basis: 100%;
    }
}

@media (max-width: 720px) {
    .hp-defendhub__group {
        padding-top: 48px;
    }

    .hp-defendhub__head {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 16px;
    }

    .hp-defendhub__tile {
        width: 48px;
        height: 48px;
    }

    .hp-defendhub__count {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .hp-defendhub__grid .hp-defendhub__card {
        flex-basis: 100%;
    }

    .hp-defendhub__jumplist > li {
        flex-basis: calc(50% - 5px);
    }

    .hp-defendhub__jumpn {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-defendhub__card,
    .hp-defendhub__card::before,
    .hp-defendhub__jumplink {
        transition: none;
    }

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

/* ------------------------------------------------------------ playbook */

.hp-kb-defend .hp-kb-prose ol,
.hp-kb-defend .hp-kb-prose ul {
    overflow-wrap: anywhere;
}

.hp-defend-related {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp-defend-related a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 14px 16px;
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-radius-md);
    background: var(--hp-white);
    color: var(--hp-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.hp-defend-related a:hover {
    border-color: var(--hp-coral);
}

.hp-defend-related a:focus-visible {
    outline: 2px solid var(--hp-coral);
    outline-offset: 2px;
}

.hp-defend-related__kind {
    font-family: var(--bd-font-mono, monospace);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hp-ink-soft);
}

.hp-defend-related__label {
    font-family: var(--hp-font-display);
    font-size: 16px;
    font-weight: 500;
}

.hp-defend-legal {
    margin: 0 0 24px;
    padding-top: 16px;
    border-top: 1px solid var(--hp-line);
    font-size: 13px;
    line-height: 1.6;
    color: var(--hp-ink-soft);
}

/* --------------------------------------------- "How to respond" on module pages (self-contained colours) */

.hp-defend-respond {
    padding: 8px 20px 56px;
    background: #f6f8f9;
}

.hp-defend-respond__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 40px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px 28px;
    border: 1px solid #dfe4ea;
    border-radius: 8px;
    background: #fff;
    color: #030925;
}

.hp-defend-respond__head {
    flex: 0 1 300px;
}

.hp-defend-respond__kicker {
    margin: 0 0 6px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #ff5247;
}

.hp-defend-respond__title {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 500;
}

.hp-defend-respond__list {
    display: flex;
    flex: 1 1 360px;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp-defend-respond__list a {
    display: inline-block;
    padding: 9px 14px;
    border: 1px solid #c6cdd7;
    border-radius: 6px;
    color: #030925;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
}

.hp-defend-respond__list a:hover {
    border-color: #ff5247;
}

.hp-defend-respond__list a:focus-visible {
    outline: 2px solid #ff5247;
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .hp-defend-respond {
        padding-inline: 16px;
    }
}

/* ------------------------------------------------------------ playbook: glance card, timeline, checklist */

/* "On this page" stays in view while the long page scrolls. */
.hp-kb-defend .hp-kb-body__grid {
    align-items: start;
}

.hp-kb-defend .hp-kb-toc {
    position: sticky;
    top: calc(var(--bd4-top, 0px) + 112px);
    max-height: calc(100vh - 136px);
    overflow-y: auto;
}

.hp-defend-glance__icon {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    border: 1px solid rgb(255 255 255 / .18);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(255 82 71 / .18), transparent);
    color: var(--hp-coral);
}

.hp-defend-glance .hp-kb-idcard__code {
    max-width: calc(100% - 32px);
    text-align: right;
}

/* The steps become a timeline: a rail, one node per step, the owner as a label above the action. */
.hp-kb-defend .blog-detail-content.blog-detail-content .bdb--steps {
    padding: 28px 28px 8px;
    border: 1px solid var(--hp-line);
    background: var(--hp-white);
}

.hp-defend-section--timeline .bdb__title,
.hp-defend-section--checklist .bdb__title {
    margin-bottom: 20px;
    font-family: var(--hp-font-mono);
    font-size: var(--bd-eyebrow-size);
    letter-spacing: var(--bd-eyebrow-track);
    text-transform: uppercase;
    color: var(--hp-coral);
}

.hp-kb-defend .blog-detail-content.blog-detail-content .bdb--steps .bdb-steps__item {
    padding: 0 0 28px 64px;
    border-top: 0;
}

.hp-kb-defend .blog-detail-content.blog-detail-content .bdb--steps .bdb-steps__item:first-child {
    padding-top: 0;
}

.hp-kb-defend .blog-detail-content.blog-detail-content .bdb--steps .bdb-steps__item::before {
    top: 0;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 6px;
    background: linear-gradient(135deg, #000313 0%, #11193f 100%);
    box-shadow: 0 0 0 4px var(--hp-white);
    color: var(--hp-white);
}

.hp-kb-defend .blog-detail-content.blog-detail-content .bdb--steps .bdb-steps__item:first-child::before {
    top: 0;
    background: var(--hp-coral);
}

.hp-kb-defend .blog-detail-content.blog-detail-content .bdb--steps .bdb-steps__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 44px;
    bottom: 4px;
    left: 19px;
    width: 2px;
    background: repeating-linear-gradient(180deg, var(--hp-line-strong) 0 6px, transparent 6px 10px);
}

.hp-defend-owner {
    display: block;
    width: fit-content;
    margin-bottom: 6px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #eaeff6;
    font-family: var(--hp-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hp-ink);
}

/* The checklist: one scannable tile per question, two columns when there is room. */
.hp-kb-defend .blog-detail-content.blog-detail-content .bdb--checklist {
    padding: 0;
    border: 0;
    background: transparent;
}

.hp-kb-defend .blog-detail-content.blog-detail-content .bdb--checklist .bdb-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.hp-kb-defend .blog-detail-content.blog-detail-content .bdb--checklist .bdb-steps__item,
.hp-kb-defend .blog-detail-content.blog-detail-content .bdb--checklist .bdb-steps__item:first-child {
    padding: 18px 18px 18px 56px;
    border: 1px solid var(--hp-line);
    border-radius: 8px;
    background: var(--hp-white);
}

.hp-kb-defend .blog-detail-content.blog-detail-content .bdb--checklist .bdb-steps__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.hp-kb-defend .blog-detail-content.blog-detail-content .bdb--checklist .bdb-steps__item::before,
.hp-kb-defend .blog-detail-content.blog-detail-content .bdb--checklist .bdb-steps__item:first-child::before {
    top: 18px;
    left: 18px;
    margin: 0;
    width: 24px;
    height: 24px;
}

.hp-kb-defend .blog-detail-content.blog-detail-content .bdb--checklist .bdb-steps__item::after,
.hp-kb-defend .blog-detail-content.blog-detail-content .bdb--checklist .bdb-steps__item:first-child::after {
    top: 25px;
    left: 24px;
}

.hp-kb-defend .blog-detail-content.blog-detail-content .bdb--checklist .bdb-steps__title {
    font-size: 16px;
    line-height: 1.4;
}

.hp-kb-defend .blog-detail-content.blog-detail-content .bdb--checklist .bdb-steps__text {
    font-size: var(--bd-small-size, 14px);
}

@media (max-width: 1100px) {
    .hp-kb-defend .hp-kb-toc {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 720px) {
    .hp-kb-defend .blog-detail-content.blog-detail-content .bdb--steps {
        padding: 22px 18px 4px;
    }

    .hp-kb-defend .blog-detail-content.blog-detail-content .bdb--steps .bdb-steps__item {
        padding-left: 54px;
    }

    .hp-kb-defend .blog-detail-content.blog-detail-content .bdb--checklist .bdb-steps {
        grid-template-columns: minmax(0, 1fr);
    }
}