/* ==========================================================
   BILITON PUBLIC DESIGN SYSTEM
   SHARED PRODUCT GRADE MODULE V21.2.94
   ========================================================== */


/* HERO */
.blt-ds-product-grade .blt-grade-hero h1 {
    max-width: 850px;
}

.blt-ds-product-grade .blt-product-proof {
    display: flex;
    flex-wrap: wrap;
    gap: var(--blt-ds-space-2);
    margin-top: var(--blt-ds-hero-proof-gap);
}

.blt-ds-product-grade .blt-product-proof span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    background: rgba(5,35,55,.32);
    color: var(--blt-ds-white);
    font-size: 12px;
    font-weight: 800;
}


/* HEADINGS */
.blt-grade-heading {
    max-width: 880px;
}


/* COMPARISON TABLE */
.blt-grade-table-wrap {
    width: 100%;
    overflow: auto;
    border: var(--blt-ds-border);
    border-radius: var(--blt-ds-radius-lg);
    background: var(--blt-ds-white);
    box-shadow: var(--blt-ds-shadow-sm);
}

.blt-grade-table {
    width: 100%;
    min-width: 1240px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

.blt-grade-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 13px 10px;
    background: var(--blt-ds-navy-900);
    color: var(--blt-ds-white);
    text-align: center;
    white-space: nowrap;
}

.blt-grade-table th:first-child {
    left: 0;
    z-index: 3;
    text-align: left;
}

.blt-grade-table td {
    padding: 12px 10px;
    border-right: var(--blt-ds-border);
    border-bottom: var(--blt-ds-border);
    text-align: center;
    vertical-align: middle;
}

.blt-grade-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--blt-ds-white);
    color: var(--blt-ds-navy-900);
    text-align: left;
}

.blt-grade-table tr:nth-child(even) td {
    background: var(--blt-ds-soft);
}

.blt-grade-table tr:nth-child(even) td:first-child {
    background: var(--blt-ds-soft);
}

.blt-grade-table td:nth-last-child(2) {
    min-width: 235px;
    text-align: left;
}

.blt-grade-table a {
    color: var(--blt-ds-orange-600);
    font-weight: 900;
    white-space: nowrap;
}

.blt-grade-special {
    display: block;
    margin-top: 4px;
    color: var(--blt-ds-orange-600);
    font-size: 10px;
    font-weight: 900;
}

.blt-grade-table-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--blt-ds-space-3);
    margin-top: var(--blt-ds-space-5);
}


/* COMMON PROFILE */
.blt-grade-common {
    display: grid;
    grid-template-columns:
        minmax(280px,.7fr)
        minmax(500px,1.3fr);
    gap: var(--blt-ds-space-8);
    align-items: start;
}

.blt-grade-common > div:first-child h2 {
    margin: 0 0 var(--blt-ds-space-4);
    color: var(--blt-ds-navy-900);
    font-size: var(--blt-ds-h2);
    line-height: var(--blt-ds-line-heading);
}

.blt-grade-common > div:first-child > p:last-child {
    color: var(--blt-ds-muted);
    line-height: var(--blt-ds-line-body);
}

.blt-grade-spec-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: var(--blt-ds-space-4);
}

.blt-grade-spec-card {
    overflow: hidden;
    border: var(--blt-ds-border);
    border-radius: var(--blt-ds-radius-lg);
    background: var(--blt-ds-white);
}

.blt-grade-spec-card h3 {
    margin: 0;
    padding: var(--blt-ds-space-4);
    background: var(--blt-ds-navy-900);
    color: var(--blt-ds-white);
    font-size: 16px;
}

.blt-grade-spec-card table {
    width: 100%;
    border-collapse: collapse;
}

.blt-grade-spec-card td {
    padding: 10px 12px;
    border-bottom: var(--blt-ds-border);
    font-size: 13px;
}

.blt-grade-spec-card tr:last-child td {
    border-bottom: 0;
}

.blt-grade-spec-card td:last-child {
    text-align: right;
    color: var(--blt-ds-navy-900);
    font-weight: 900;
}


/* GRADE CARDS */
.blt-grade-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: var(--blt-ds-space-4);
}

.blt-grade-card {
    display: flex;
    flex-direction: column;
    padding: var(--blt-ds-space-5);
    border: var(--blt-ds-border);
    border-radius: var(--blt-ds-radius-lg);
    background: var(--blt-ds-white);
    box-shadow: var(--blt-ds-shadow-sm);
}

.blt-grade-code {
    padding-bottom: var(--blt-ds-space-3);
    border-bottom: 3px solid var(--blt-ds-orange-600);
    color: var(--blt-ds-navy-900);
    font-size: 23px;
    font-weight: 900;
}

.blt-grade-card dl {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: var(--blt-ds-space-2);
    margin: var(--blt-ds-space-4) 0;
}

.blt-grade-card dl > div {
    padding: 9px;
    border-radius: var(--blt-ds-radius-sm);
    background: var(--blt-ds-soft);
}

.blt-grade-card dt {
    color: var(--blt-ds-muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.blt-grade-card dd {
    margin: 4px 0 0;
    color: var(--blt-ds-navy-900);
    font-weight: 900;
}

.blt-grade-card > p {
    flex: 1;
    margin: 0 0 var(--blt-ds-space-4);
    color: var(--blt-ds-muted);
    font-size: 13px;
    line-height: 1.55;
}

.blt-grade-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--blt-ds-space-2);
}

.blt-grade-card__actions a {
    flex: 1;
    min-width: 120px;
    padding: 10px 12px;
    border: var(--blt-ds-border);
    border-radius: var(--blt-ds-radius-sm);
    color: var(--blt-ds-navy-900);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
}

.blt-grade-card__actions a:last-child {
    border-color: var(--blt-ds-orange-600);
    background: var(--blt-ds-orange-600);
    color: var(--blt-ds-white);
}


/* SUPPLY / DOCUMENTS */
.blt-grade-supply {
    display: grid;
    grid-template-columns:
        minmax(0,1fr)
        minmax(340px,.8fr);
    gap: var(--blt-ds-space-9);
    align-items: start;
}

.blt-grade-supply h2 {
    margin: 0 0 var(--blt-ds-space-4);
    color: var(--blt-ds-white);
    font-size: var(--blt-ds-h2);
    line-height: var(--blt-ds-line-heading);
}

.blt-grade-supply > div > p:not(.blt-kicker),
.blt-grade-supply li {
    color: rgba(255,255,255,.8);
    line-height: var(--blt-ds-line-body);
}

.blt-grade-supply ul {
    columns: 2;
    margin-bottom: 0;
    padding-left: 20px;
}

.blt-grade-docs {
    display: grid;
    gap: var(--blt-ds-space-3);
}

.blt-grade-docs > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--blt-ds-space-4);
    padding: var(--blt-ds-space-4);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--blt-ds-radius-md);
    background: rgba(255,255,255,.04);
    color: var(--blt-ds-white);
    text-decoration: none;
}

.blt-grade-docs > a:hover {
    border-color: var(--blt-ds-orange-600);
}

.blt-grade-docs span {
    color: var(--blt-ds-orange-500);
    font-weight: 900;
}


/* FAQ */
.blt-ds-product-grade .blt-faq-layout > div:first-child > p:last-child {
    color: var(--blt-ds-muted);
    line-height: var(--blt-ds-line-body);
}


/* RESPONSIVE */
@media (max-width: 980px) {

    .blt-grade-common,
    .blt-grade-supply {
        grid-template-columns: 1fr;
    }

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

}


@media (max-width: 700px) {

    .blt-grade-spec-grid,
    .blt-grade-grid {
        grid-template-columns: 1fr;
    }

    .blt-grade-supply ul {
        columns: 1;
    }

    .blt-grade-table-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .blt-grade-table-actions .blt-btn {
        width: 100%;
    }

}


/* BILITON_DESIGN_SYSTEM_PRODUCT_GRADE_V21_2_94 */

/* ==========================================================
   BILITON GRADE TABLE DESKTOP FIT V21.2.95
   Keep horizontal scrolling for smaller screens only.
   ========================================================== */

@media (min-width: 1100px) {

    .blt-grade-table {
        min-width: 100%;
        table-layout: auto;
    }

    .blt-grade-table th,
    .blt-grade-table td {
        padding-left: 8px;
        padding-right: 8px;
    }

    .blt-grade-table th {
        font-size: 11px;
    }

    .blt-grade-table td {
        font-size: 11.5px;
    }

    .blt-grade-table th:first-child,
    .blt-grade-table td:first-child {
        min-width: 114px;
    }

    .blt-grade-table td:nth-last-child(2) {
        min-width: 245px;
    }
}


/* BILITON_DESIGN_SYSTEM_PRODUCT_GRADE_V21_2_95 */

/* ==========================================================
   COATED GCC DESKTOP TABLE FIT V21.2.97
   Same Grade component; coated only needs one extra column.
   ========================================================== */

@media (min-width:1100px) {

    .blt-grade-table--coated {
        width:100%;
        min-width:100%;
        table-layout:fixed;
    }

    .blt-grade-table--coated th,
    .blt-grade-table--coated td {
        padding-left:7px;
        padding-right:7px;
        white-space:normal;
    }

    .blt-grade-table--coated th {
        font-size:10.5px;
        line-height:1.3;
    }

    .blt-grade-table--coated td {
        font-size:11.5px;
        line-height:1.35;
    }

    .blt-grade-table--coated th:nth-child(1),
    .blt-grade-table--coated td:nth-child(1) {
        width:11%;
    }

    .blt-grade-table--coated th:nth-child(2),
    .blt-grade-table--coated td:nth-child(2),
    .blt-grade-table--coated th:nth-child(3),
    .blt-grade-table--coated td:nth-child(3),
    .blt-grade-table--coated th:nth-child(4),
    .blt-grade-table--coated td:nth-child(4) {
        width:6%;
    }

    .blt-grade-table--coated th:nth-child(5),
    .blt-grade-table--coated td:nth-child(5),
    .blt-grade-table--coated th:nth-child(6),
    .blt-grade-table--coated td:nth-child(6) {
        width:8%;
    }

    .blt-grade-table--coated th:nth-child(7),
    .blt-grade-table--coated td:nth-child(7),
    .blt-grade-table--coated th:nth-child(8),
    .blt-grade-table--coated td:nth-child(8) {
        width:7%;
    }

    .blt-grade-table--coated th:nth-child(9),
    .blt-grade-table--coated td:nth-child(9) {
        width:31%;
        min-width:0;
        text-align:left;
    }

    .blt-grade-table--coated th:nth-child(10),
    .blt-grade-table--coated td:nth-child(10) {
        width:7%;
    }
}


/* BILITON_COATED_GRADE_TABLE_FIT_V21_2_97 */

/* ==========================================================
   COATED GCC TABLE TRUE DESKTOP FIT V21.2.98
   Widths include padding/borders.
   ========================================================== */

@media (min-width:1100px) {

    .blt-grade-table--coated {
        width:100% !important;
        min-width:0 !important;
        table-layout:fixed !important;
    }

    .blt-grade-table--coated th,
    .blt-grade-table--coated td {
        box-sizing:border-box;
        min-width:0 !important;
        padding-left:6px;
        padding-right:6px;
        overflow-wrap:anywhere;
    }

    .blt-grade-table--coated th:nth-child(1),
    .blt-grade-table--coated td:nth-child(1) {
        width:11%;
    }

    .blt-grade-table--coated th:nth-child(2),
    .blt-grade-table--coated td:nth-child(2) {
        width:5.5%;
    }

    .blt-grade-table--coated th:nth-child(3),
    .blt-grade-table--coated td:nth-child(3) {
        width:5.5%;
    }

    .blt-grade-table--coated th:nth-child(4),
    .blt-grade-table--coated td:nth-child(4) {
        width:6%;
    }

    .blt-grade-table--coated th:nth-child(5),
    .blt-grade-table--coated td:nth-child(5) {
        width:8%;
    }

    .blt-grade-table--coated th:nth-child(6),
    .blt-grade-table--coated td:nth-child(6) {
        width:8%;
    }

    .blt-grade-table--coated th:nth-child(7),
    .blt-grade-table--coated td:nth-child(7) {
        width:7%;
    }

    .blt-grade-table--coated th:nth-child(8),
    .blt-grade-table--coated td:nth-child(8) {
        width:7%;
    }

    .blt-grade-table--coated th:nth-child(9),
    .blt-grade-table--coated td:nth-child(9) {
        width:34%;
        min-width:0 !important;
        text-align:left;
    }

    .blt-grade-table--coated th:nth-child(10),
    .blt-grade-table--coated td:nth-child(10) {
        width:8%;
        text-align:center;
    }

    .blt-grade-table--coated td:nth-child(10) a {
        white-space:nowrap;
    }
}


/* BILITON_COATED_GRADE_TABLE_FINAL_FIT_V21_2_98 */