/* Theme-only presentation for the existing Debt Calculator plugin. */
.jkd-plugin-calculator {
    padding: 56px 20px 80px;
}

.debt-calculator-hero {
    width: min(1400px, 100%);
    margin: 0 auto 48px;
    padding: 8px 0 48px;
    border-bottom: 1.5px solid #1b1b1b;
    display: grid;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    gap: 64px;
    align-items: center;
}

.debt-calculator-hero-copy {
    max-width: 580px;
}

.debt-calculator-kicker,
.debt-calculator-bento-index {
    color: #b54f1f;
    font: 700 12px/1.2 'IBM Plex Mono', monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.debt-calculator-hero-copy h1 {
    margin: 14px 0 20px;
    color: #1b1b1b;
    font: 700 clamp(42px, 5.5vw, 76px)/.98 'Bricolage Grotesque', sans-serif;
    letter-spacing: -.045em;
}

.debt-calculator-hero-copy > p:not(.debt-calculator-kicker):not(.debt-calculator-hero-note) {
    max-width: 540px;
    margin: 0;
    color: #4a4a4a;
    font: 17px/1.65 'Work Sans', sans-serif;
}

.debt-calculator-hero-note {
    max-width: 500px;
    margin: 24px 0 0;
    padding-top: 18px;
    border-top: 1px dashed #8a8a8d;
    color: #4a4a4a;
    font: 14px/1.6 'Work Sans', sans-serif;
}

.debt-calculator-hero-note strong {
    color: #1b1b1b;
}

.debt-calculator-bento {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    grid-template-rows: repeat(2, minmax(150px, auto));
    gap: 14px;
}

.debt-calculator-bento-card {
    min-width: 0;
    padding: 24px;
    border: 1.5px solid #1b1b1b;
    background: #fffcf3;
    box-shadow: 4px 5px 0 rgba(0, 0, 0, .07);
}

.debt-calculator-bento-card--tall {
    grid-row: 1 / span 2;
    background: #9bd7da;
}

.debt-calculator-bento-card--warm {
    background: #d05f27;
    color: #fff;
}

.debt-calculator-bento-card--warm .debt-calculator-bento-index {
    color: #ffde8a;
}

.debt-calculator-bento-art {
    display: block;
    width: min(100%, 240px);
    height: auto;
    margin: 24px auto 10px;
    overflow: visible;
}

.debt-bento-slip {
    transform-box: fill-box;
    transform-origin: center;
}

.debt-bento-slip--back {
    animation: debt-bento-gather-back 5s ease-in-out infinite;
}

.debt-bento-slip--middle {
    animation: debt-bento-gather-middle 5s ease-in-out .15s infinite;
}

.debt-bento-slip--front {
    animation: debt-bento-gather-front 5s ease-in-out .3s infinite;
}

.debt-bento-check {
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
    animation: debt-bento-check 5s ease-in-out infinite;
}

@keyframes debt-bento-gather-back {
    0%, 15% { transform: translate(-16px, -12px) rotate(-7deg); }
    38%, 78% { transform: translate(0, 0) rotate(0); }
    100% { transform: translate(-16px, -12px) rotate(-7deg); }
}

@keyframes debt-bento-gather-middle {
    0%, 20% { transform: translate(-10px, -7px) rotate(-4deg); }
    43%, 78% { transform: translate(0, 0) rotate(0); }
    100% { transform: translate(-10px, -7px) rotate(-4deg); }
}

@keyframes debt-bento-gather-front {
    0%, 25% { transform: translate(-5px, -3px) rotate(-2deg); }
    48%, 78% { transform: translate(0, 0) rotate(0); }
    100% { transform: translate(-5px, -3px) rotate(-2deg); }
}

@keyframes debt-bento-check {
    0%, 42% { stroke-dashoffset: 32; opacity: 0; }
    54%, 82% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 32; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .debt-bento-slip,
    .debt-bento-check {
        animation: none;
    }

    .debt-bento-check {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

.debt-calculator-bento-card h2 {
    margin: 18px 0 10px;
    color: inherit;
    font: 700 clamp(21px, 2.3vw, 31px)/1.06 'Bricolage Grotesque', sans-serif;
    letter-spacing: -.03em;
}

.debt-calculator-bento-card p {
    margin: 0;
    color: inherit;
    font: 14px/1.55 'Work Sans', sans-serif;
    opacity: .86;
}

.jkd-plugin-calculator .debt-calculator-container {
    max-width: 1400px;
}

.jkd-plugin-calculator .detailed-results.visible {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.jkd-plugin-calculator .detailed-results .result-section {
    min-width: 0;
    height: 100%;
    margin: 0 !important;
    padding: 18px !important;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}

.jkd-plugin-calculator .result-section h3 {
    min-height: 48px;
    margin-bottom: 12px !important;
    padding-bottom: 9px !important;
    font-size: 18px;
    line-height: 1.18;
}

.jkd-plugin-calculator .result-section-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
}

.jkd-plugin-calculator .result-section-info,
.jkd-plugin-calculator .result-section-payments {
    min-width: 0;
    flex-basis: auto;
}

.jkd-plugin-calculator .method-explanation {
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.45;
}

.jkd-plugin-calculator .payment-data {
    margin-bottom: 0;
}

.jkd-plugin-calculator .payment-data dt,
.jkd-plugin-calculator .payment-data dd {
    margin-bottom: 8px;
    font-size: 11px;
}

.jkd-plugin-calculator .payment-data dt {
    width: 58%;
}

.jkd-plugin-calculator .payment-data dd {
    width: 42%;
    font-weight: 700;
}

.jkd-plugin-calculator .cta-section {
    margin-top: auto;
    padding: 12px;
    border-radius: 0;
    display: block;
}

.jkd-plugin-calculator .cta-title {
    display: block;
    margin: 0 0 9px;
    font-size: 12px;
    line-height: 1.25;
}

.jkd-plugin-calculator .cta-button,
.jkd-plugin-calculator .apply-btn {
    width: 100%;
}

.jkd-plugin-calculator .apply-btn {
    margin: 0;
    padding: 9px 12px;
    font-size: 12px;
}

@media (max-width: 980px) {
    .jkd-plugin-calculator .detailed-results.visible {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .jkd-plugin-calculator {
        padding-top: 36px;
    }

    .debt-calculator-hero {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-bottom: 36px;
    }

    .debt-calculator-hero-copy h1 {
        font-size: clamp(40px, 13vw, 60px);
    }

    .debt-calculator-bento {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .debt-calculator-bento-card--tall {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .jkd-plugin-calculator .detailed-results.visible {
        grid-template-columns: 1fr;
    }
}