/* =====================================================
   DARX CAPITAL: BLOG EXTRAS (loaded after blog-style.css)
   Reusable pieces for blog articles: data tables,
   step-by-step boxes and the borrowing calculator.
   Uses the colour tokens defined in style.css.
===================================================== */

/* Lets wide content (tables) scroll inside the article instead of
   stretching the page layout on small screens */
.blog-layout > * {
    min-width: 0;
}


/* ================= TABLES ================= */

.table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 22px 0 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.data-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 15px;
}

.data-table th,
.data-table td {
    padding: 13px 16px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.data-table th {
    background: var(--navy);
    color: var(--white);
    font-weight: 600;
    font-size: 14px;
}

.data-table tbody tr:nth-child(even) {
    background: var(--cream);
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table td:not(:first-child) {
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
}


/* ================= STEP-BY-STEP BOX ================= */

.steps-box {
    margin: 22px 0 26px;
    padding: 8px 24px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.steps-box > div {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.steps-box > div:last-child {
    border-bottom: 0;
}

.steps-box span {
    flex: none;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--gold);
    color: var(--navy);
    font-weight: 700;
    font-size: 13px;
}

.steps-box p {
    margin: 2px 0 0;
    color: var(--text);
}


/* ================= BROKER CALL-OUT ================= */

.broker-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 24px 0 28px;
    padding: 20px 24px;
    background: var(--navy);
    border-radius: var(--radius-sm);
}

.blog-article .broker-callout p {
    margin: 0;
    color: #c3cbd8;
    font-size: 15px;
}

.blog-article .broker-callout p strong {
    color: var(--white);
}

.blog-article .broker-callout a {
    flex: none;
    padding: 11px 20px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--navy);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}

.blog-article .broker-callout a:hover {
    background: var(--gold-light);
    color: var(--navy);
}

@media (max-width: 600px) {
    .broker-callout {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px;
    }
}


/* ================= BORROWING CALCULATOR ================= */

.borrow-calc {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 18px;
    margin: 24px 0 12px;
}

.borrow-calc-inputs,
.borrow-calc-results {
    border-radius: var(--radius);
    padding: 26px;
}

.borrow-calc-inputs {
    background: var(--cream);
    border: 1px solid var(--line);
}

.borrow-calc-inputs label {
    display: block;
    margin-bottom: 14px;
}

.borrow-calc-inputs label span {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

.borrow-calc-inputs input,
.borrow-calc-inputs select {
    width: 100%;
    padding: 11px 13px;
    font-size: 15px;
    color: var(--navy);
    background: var(--white);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
}

.borrow-calc-inputs input:focus,
.borrow-calc-inputs select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(201, 164, 92, .18);
}

.borrow-calc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.borrow-calc-row label {
    margin-bottom: 0;
}

.borrow-calc-results {
    background: var(--navy);
    color: #c3cbd8;
    display: flex;
    flex-direction: column;
}

.borrow-calc-label {
    margin: 0;
    font-size: 13px;
    color: #9aa6ba;
}

.borrow-calc-big {
    margin: 4px 0 18px;
    font-family: var(--font-head);
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--gold-light);
}

.borrow-calc-results dl {
    margin: 0 0 14px;
}

.borrow-calc-results dl div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: 14px;
}

.borrow-calc-results dt {
    color: #9aa6ba;
}

.borrow-calc-results dd {
    margin: 0;
    font-weight: 700;
    color: var(--white);
    text-align: right;
    white-space: nowrap;
}

.borrow-calc-note {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.6;
    color: #c3cbd8;
}

.blog-article .borrow-calc-btn {
    margin-top: auto;
    display: block;
    padding: 13px 18px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--navy);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.blog-article .borrow-calc-btn:hover {
    background: var(--gold-light);
    color: var(--navy);
}

.calc-disclaimer {
    font-size: 13px !important;
    color: var(--muted) !important;
}


/* ================= RESPONSIVE ================= */

@media (max-width: 900px) {
    .borrow-calc {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .borrow-calc-inputs,
    .borrow-calc-results {
        padding: 20px 16px;
    }

    .borrow-calc-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .borrow-calc-row label {
        margin-bottom: 14px;
    }

    .steps-box {
        padding: 4px 16px;
    }

    .data-table {
        font-size: 14px;
    }

    .data-table th,
    .data-table td {
        padding: 11px 12px;
    }
}