/* =========================================================
   SINN - SINGLE PRODUCT UNDERCARRIAGE
   Shortcode: [sinn_product_undercarriage]
   ========================================================= */


/* =========================================================
   1. MODULE ROOT
   ========================================================= */

.sinn-uc {
    --uc-black: #101315;
    --uc-yellow: #ffc500;
    --uc-ivory: #f4f5f2;

    --uc-black-72: rgba(16, 19, 21, .72);
    --uc-black-68: rgba(16, 19, 21, .68);
    --uc-black-54: rgba(16, 19, 21, .54);
    --uc-black-42: rgba(16, 19, 21, .42);
    --uc-black-24: rgba(16, 19, 21, .24);
    --uc-black-16: rgba(16, 19, 21, .16);
    --uc-black-14: rgba(16, 19, 21, .14);
    --uc-black-12: rgba(16, 19, 21, .12);
    --uc-black-09: rgba(16, 19, 21, .09);

    box-sizing: border-box;

    width: min(1440px, calc(100% - 64px));
    max-width: 1440px;

    margin: 26px auto 0;
    padding: 30px;

    color: var(--uc-black);

    background:
        linear-gradient(
            180deg,
            rgba(16, 19, 21, .058),
            rgba(16, 19, 21, .026)
        ),
        var(--uc-ivory);

    border: 1px solid var(--uc-black-24);
    border-left: 5px solid var(--uc-black);
    border-radius: 7px;

    box-shadow:
        0 12px 28px rgba(16, 19, 21, .055),
        0 2px 7px rgba(16, 19, 21, .035);

    font-family:
        Inter,
        "Helvetica Neue",
        "Segoe UI",
        Arial,
        sans-serif;
}


.sinn-uc *,
.sinn-uc *::before,
.sinn-uc *::after {
    box-sizing: border-box;
}


/* =========================================================
   2. KICKER
   ========================================================= */

.sinn-uc__kicker {
    display: inline-flex;
    align-items: center;

    min-height: 28px;

    margin: 0 0 14px;
    padding: 7px 11px;

    color: var(--uc-yellow);
    background: var(--uc-black);

    border-radius: 2px;

    font-size: 11px;
    line-height: 1;
    font-weight: 900;

    letter-spacing: .07em;
    text-transform: uppercase;
}


/* =========================================================
   3. MAIN TITLE
   ========================================================= */

.sinn-uc__title {
    margin: 0 0 16px;

    color: var(--uc-black);

    font-size: clamp(30px, 2.35vw, 35px);
    line-height: 1.12;
    font-weight: 780;

    letter-spacing: -.018em;
}


/* =========================================================
   4. INTRO
   ========================================================= */

.sinn-uc__intro {
    max-width: 92ch;

    margin: 0 0 24px;

    color: var(--uc-black-72);

    font-size: 16px;
    line-height: 1.70;
    font-weight: 400;
}


/* =========================================================
   5. CONFIGURATION CARDS
   ========================================================= */

.sinn-uc__cards {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

    margin: 20px 0 26px;
}


.sinn-uc__card {
    position: relative;

    min-width: 0;

    padding: 22px 22px 18px;

    background: var(--uc-ivory);

    border: 1px solid var(--uc-black-14);
    border-top: 3px solid var(--uc-black);
    border-radius: 4px;
}


.sinn-uc__card::after {
    content: "";

    position: absolute;

    top: -3px;
    right: 0;

    width: 72px;
    height: 3px;

    background: var(--uc-yellow);
}


.sinn-uc__card-title {
    margin: 0 0 10px;

    color: var(--uc-black);

    font-size: 16px;
    line-height: 1.42;
    font-weight: 780;
}


.sinn-uc__card-description,
.sinn-uc__card-application {
    margin: 0 0 8px;

    color: var(--uc-black-68);

    font-size: 14px;
    line-height: 1.65;
    font-weight: 400;
}

.sinn-uc__card-description strong {
    color: var(--uc-black);
    font-weight: 700;
}


.sinn-uc__card-application {
    margin-bottom: 0;
}


/* =========================================================
   6. WIDTH COMPARISON COPY
   ========================================================= */

.sinn-uc__width-copy {
    padding-top: 4px;

    margin: 0 0 14px;
}


.sinn-uc__width-title {
    margin: 0 0 8px;

    color: var(--uc-black);

    font-size: 16px;
    line-height: 1.42;
    font-weight: 780;
}


.sinn-uc__width-intro {
    margin: 0;

    color: var(--uc-black-68);

    font-size: 14px;
    line-height: 1.62;
    font-weight: 400;
}


/* =========================================================
   7. ENGINEERING DRAWING PANEL
   ========================================================= */

.sinn-uc__drawing {
    width: 100%;

    margin: 20px 0;

    overflow: hidden;

    background: var(--uc-ivory);

    border: 1px solid var(--uc-black-24);

    box-shadow:
        0 8px 18px rgba(16, 19, 21, .045);
}


/* =========================================================
   8. DRAWING BLACK HEADER
   ========================================================= */

.sinn-uc__drawing-head {
    min-height: 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 8px 14px;

    background: var(--uc-black);

    border-bottom: 1px solid rgba(244, 245, 242, .10);
}


.sinn-uc__drawing-title {
    color: var(--uc-ivory);

    font-size: 13px;
    line-height: 1.25;
    font-weight: 760;

    letter-spacing: .01em;
    text-transform: uppercase;
}


.sinn-uc__drawing-subtitle {
    color: var(--uc-yellow);

    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;

    letter-spacing: .055em;
    text-transform: uppercase;

    text-align: right;
}


/* =========================================================
   9. DRAWING META
   ========================================================= */

.sinn-uc__drawing-meta {
    min-height: 30px;

    display: block;

    padding: 7px 14px;

    overflow: hidden;

    color: var(--uc-black-54);
    background: var(--uc-ivory);

    border-bottom: 1px solid var(--uc-black-12);

    font-size: 11px;
    line-height: 1.4;
    font-weight: 600;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* =========================================================
   10. SVG SCROLL AREA
   ========================================================= */

.sinn-uc__svg-scroll {
    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    background: var(--uc-ivory);

    -webkit-overflow-scrolling: touch;

    overscroll-behavior-inline: contain;
}


.sinn-uc__svg {
    display: block;

    width: 100%;
    height: auto;

    min-width: 920px;

    background: var(--uc-ivory);
}


/* =========================================================
   11. DRAWING NOTE / FIGCAPTION
   ========================================================= */

.sinn-uc__drawing-note {
    margin: 0;

    padding: 8px 12px;

    color: rgba(16, 19, 21, .66);
    background: var(--uc-ivory);

    border-top: 1px solid var(--uc-black-12);

    font-size: 12px;
    line-height: 1.45;
    font-weight: 400;
}


/* =========================================================
   12. TABLE WRAPPER
   ========================================================= */

.sinn-uc__table-wrap {
    width: 100%;

    margin-top: 20px;

    overflow-x: auto;

    background: var(--uc-ivory);

    border: 1px solid var(--uc-black-16);
    border-radius: 3px;

    -webkit-overflow-scrolling: touch;
}


.sinn-uc__table {
    width: 100%;

    min-width: 1180px;

    table-layout: fixed;

    border-collapse: collapse;

    color: var(--uc-black);

    background: var(--uc-ivory);
}


/* =========================================================
   13. TABLE CAPTION
   ========================================================= */

.sinn-uc__table caption {
    caption-side: top;

    padding: 12px 14px;

    color: var(--uc-black-54);
    background: transparent;

    border-bottom: 1px solid var(--uc-black-09);

    font-size: 12px;
    line-height: 1.5;
    font-weight: 700;

    text-align: left;
}


/* =========================================================
   14. TABLE HEAD
   ========================================================= */

.sinn-uc__table thead th {
    padding: 12px;

    color: var(--uc-black);

    background: rgba(16, 19, 21, .11);

    border-bottom: 1px solid var(--uc-black-16);

    font-size: 14px;
    line-height: 1.45;
    font-weight: 800;

    text-align: left;
    vertical-align: top;
}


/* =========================================================
   15. TABLE BODY
   ========================================================= */

.sinn-uc__table tbody th,
.sinn-uc__table tbody td {
    padding: 12px;

    color: var(--uc-black-68);

    background: transparent;

    border-bottom: 1px solid var(--uc-black-09);

    font-size: 14px;
    line-height: 1.55;
    font-weight: 400;

    text-align: left;
    vertical-align: top;

    overflow-wrap: normal;
    word-break: normal;
}


.sinn-uc__table tbody th {
    color: var(--uc-black);
    background: rgba(16, 19, 21, .045);

    font-weight: 800;
}


.sinn-uc__table tbody strong {
    color: var(--uc-black);
    font-weight: 700;
}


.sinn-uc__table tbody tr:last-child th,
.sinn-uc__table tbody tr:last-child td {
    border-bottom: 0;
}


/* Original column proportions */

.sinn-uc__table th:nth-child(1),
.sinn-uc__table td:nth-child(1) {
    width: 11%;
}

.sinn-uc__table th:nth-child(2),
.sinn-uc__table td:nth-child(2) {
    width: 16%;
}

.sinn-uc__table th:nth-child(3),
.sinn-uc__table td:nth-child(3) {
    width: 16%;
}

.sinn-uc__table th:nth-child(4),
.sinn-uc__table td:nth-child(4) {
    width: 14%;
}

.sinn-uc__table th:nth-child(5),
.sinn-uc__table td:nth-child(5) {
    width: 25%;
}

.sinn-uc__table th:nth-child(6),
.sinn-uc__table td:nth-child(6) {
    width: 18%;
}


/* =========================================================
   16. TECHNICAL NOTE
   ========================================================= */

.sinn-uc__technical-note {
    margin: 14px 0 0;

    padding: 12px 14px;

    color: var(--uc-black-68);
    background: rgba(255, 197, 0, .07);

    border-left: 3px solid var(--uc-yellow);

    font-size: 14px;
    line-height: 1.55;
    font-weight: 400;
}


.sinn-uc__technical-note strong {
    color: var(--uc-black);
    font-weight: 800;
}


/* =========================================================
   17. CONFIGURATION LOGIC
   ========================================================= */

.sinn-uc__logic {
    margin: 12px 0 0;

    padding-top: 12px;

    color: var(--uc-black-68);

    border-top: 1px solid var(--uc-black-09);

    font-size: 14px;
    line-height: 1.58;
    font-weight: 400;
}


.sinn-uc__logic strong {
    color: var(--uc-black);
    font-weight: 800;
}


/* =========================================================
   18. TABLET <= 990
   ========================================================= */

@media (max-width: 990px) {

    .sinn-uc {
        width: calc(100% - 48px);

        padding: 26px 24px;
    }


    .sinn-uc__cards {
        grid-template-columns: 1fr;
    }


    .sinn-uc__drawing-head {
        align-items: flex-start;
        flex-direction: column;

        gap: 4px;
    }


    .sinn-uc__drawing-subtitle {
        text-align: left;
    }


    .sinn-uc__svg {
        width: 920px;
        min-width: 920px;
    }


    .sinn-uc__svg-scroll::after {
        content: "Swipe horizontally to view the full width comparison";

        display: block;

        position: sticky;
        left: 0;

        width: 100%;

        padding: 8px 12px;

        color: var(--uc-black-54);
        background: var(--uc-ivory);

        border-top: 1px solid var(--uc-black-12);

        font-size: 11px;
        line-height: 1.4;
    }

}


/* =========================================================
   19. MOBILE LANDSCAPE <= 766
   ========================================================= */

@media (max-width: 766px) {

    .sinn-uc {
        width: calc(100% - 32px);

        margin-top: 22px;

        padding: 20px;
    }


    .sinn-uc__title {
        font-size: 28px;
    }


    .sinn-uc__intro {
        font-size: 15px;
        line-height: 1.65;
    }


    .sinn-uc__card {
        padding: 18px 16px 15px;
    }


    .sinn-uc__drawing {
        margin-top: 16px;
    }


    .sinn-uc__drawing-head {
        padding: 12px 14px;
    }


    .sinn-uc__drawing-meta {
        padding: 9px 12px;

        white-space: normal;
        text-overflow: clip;
    }


    .sinn-uc__width-intro,
    .sinn-uc__card-description,
    .sinn-uc__card-application {
        font-size: 14px;
    }

}


/* =========================================================
   20. MOBILE PORTRAIT <= 477
   ========================================================= */

@media (max-width: 477px) {

    .sinn-uc {
        width: calc(100% - 24px);

        padding: 18px 16px;
    }


    .sinn-uc__kicker {
        font-size: 10px;
    }


    .sinn-uc__card::after {
        width: 56px;
    }


    .sinn-uc__drawing-title {
        font-size: 12px;
    }


    .sinn-uc__drawing-subtitle {
        font-size: 9px;
    }

}