/* Resource variant of the guide: version badge, download, citation, framework strip, diagram, change log. */

/* Framework strip: no panel, ruled above and below. */
.hp-res-frameworks {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 24px;
    padding: 14px 0;
    border-top: 1px solid var(--hp-line);
    border-bottom: 1px solid var(--hp-line);
}

.hp-res-frameworks__label {
    margin: 0;
    font-family: var(--bd-font-mono);
    font-size: var(--bd-eyebrow-size);
    letter-spacing: var(--bd-eyebrow-track);
    text-transform: uppercase;
    color: var(--hp-ink-soft);
}

.hp-res-frameworks__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp-res-frameworks__list li {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: var(--bd-small-size);
    color: var(--hp-ink-muted);
}

.hp-res-frameworks__list strong {
    color: var(--hp-ink);
    font-family: var(--hp-font-display);
}

.hp-res-frameworks__list a {
    text-decoration: none;
    border-bottom: 1px solid var(--hp-coral);
}

/* Diagram: white card with a licence line. */
.hp-res-diagram {
    margin: 0;
    padding: 16px;
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-radius-md);
    background: var(--hp-white);
}

.hp-res-diagram img {
    display: block;
    width: 100%;
    height: auto;
}

.hp-res-diagram figcaption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--hp-line);
    font-size: var(--bd-small-size);
    color: var(--hp-ink-muted);
}

.hp-res-diagram__caption { color: var(--hp-ink); }
.hp-res-diagram__licence a { color: inherit; text-decoration: underline; }

/* Shared small type */
.hp-res-kicker {
    margin: 0 0 8px;
    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-res-title {
    margin: 0 0 8px;
    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: var(--hp-white);
}

.hp-res-title--small { color: var(--hp-ink); font-size: 20px; }

.hp-res-text {
    max-width: 56ch;
    margin: 0;
    font-size: var(--bd-body-size);
    line-height: 1.6;
    color: var(--hp-on-dark-muted);
}

/* Download: deep blue ground. */
.hp-res-download {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border-radius: var(--hp-radius-card);
    background: radial-gradient(70% 60% at 0% 0%, var(--hp-navy-600) 0%, rgb(19 28 74 / 0) 70%), var(--hp-navy-900);
    color: var(--hp-on-dark);
}

.hp-res-download__files {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: none;
}

.hp-res-download__files li { display: flex; align-items: center; gap: 12px; }
.hp-res-download__files .hp-btn { min-width: 150px; justify-content: center; }
.hp-res-download__size { font-size: var(--bd-small-size); color: var(--hp-on-dark-soft); }

/* Citation: sand card, monospace line. */
.hp-res-cite {
    padding: 22px 24px;
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-radius-md);
    background: var(--hp-paper);
}

.hp-res-cite__text {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 6px;
    background: var(--hp-white);
    box-shadow: 0 0 0 1px var(--hp-line) inset;
    font-family: var(--bd-font-mono);
    font-size: 13px;
    line-height: 1.6;
    color: var(--hp-ink);
    overflow-wrap: anywhere;
    user-select: all;
}

/* Change log: ruled list, no panel. */
.hp-res-changelog__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--hp-line);
}

.hp-res-changelog__list li {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hp-line);
    font-size: var(--bd-body-size);
}

.hp-res-changelog__ver { font-family: var(--bd-font-mono); font-size: 13px; color: var(--hp-ink-muted); }

/* Version badge in the hero */
.hp-kb-hero__badges .hp-res-badge {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid rgb(255 255 255 / .28);
    border-radius: 8px;
    font-family: var(--bd-font-mono);
    font-size: 13px;
    color: var(--hp-on-dark);
}

/* Never break a word in the middle, on any width. */
.hp-kb-guide--resource .hp-kb-prose table th,
.hp-kb-guide--resource .hp-kb-prose table td {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
}

/* Templates are mostly tables and lists to fill in. */
.hp-kb-guide--resource .hp-kb-prose table { width: 100%; }
.hp-kb-guide--resource .hp-kb-prose .hp-kb-table td:first-child { white-space: normal; }

@media (max-width: 720px) {
    .hp-res-download { flex-direction: column; align-items: flex-start; padding: 22px; }
    .hp-res-download__files { width: 100%; }
    .hp-res-changelog__list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .hp-kb-guide--resource .hp-kb-prose table,
    .hp-kb-guide--resource .hp-kb-prose .hp-kb-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .hp-kb-guide--resource .hp-kb-prose table th,
    .hp-kb-guide--resource .hp-kb-prose table td { min-width: 120px; }
    .hp-kb-guide--resource .hp-kb-prose table th:first-child,
    .hp-kb-guide--resource .hp-kb-prose table td:first-child { min-width: 96px; }
}

@media print {
    .hp-res-download, .hp-res-cite button { display: none !important; }
}

/* On wide screens tables use the full content column, a little wider than the text. */
@media (min-width: 1200px) {
    .hp-kb-guide--resource .hp-kb-prose table {
        width: calc(100% + 170px);
        max-width: calc(100vw - 460px);
    }
}