/* ======================================================
   HERO PENGURANGAN
====================================================== */

.subtraction-hero {
    background:
        radial-gradient(
            circle at 86% 18%,
            rgba(37, 99, 235, 0.11),
            transparent 31%
        ),
        radial-gradient(
            circle at 12% 88%,
            rgba(15, 118, 110, 0.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #f8fbff,
            #ffffff
        );
}


.subtraction-hero-card {
    min-height: 420px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 38px;

    color: #ffffff;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    border-radius:
        var(--radius-extra-large);

    box-shadow:
        var(--shadow-large);
}


.subtraction-hero-label {
    margin-bottom: 30px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 0.72rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.09em;
}


.subtraction-hero-objects {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 30px;
}


.subtraction-hero-objects span {
    width: 34px;
    height: 34px;

    display: block;

    background:
        rgba(255, 255, 255, 0.94);

    border-radius: 50%;
}


.subtraction-hero-objects
.object-removed {
    opacity: 0.35;

    background: transparent;

    border:
        2px dashed
        rgba(255, 255, 255, 0.65);
}


.subtraction-hero-equation {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;
}


.subtraction-hero-equation span,
.subtraction-hero-equation strong {
    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    background:
        rgba(255, 255, 255, 0.12);

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    border-radius: 14px;

    font-size: 1.45rem;
    font-weight: 900;
}


.subtraction-hero-equation strong {
    color:
        var(--color-primary-dark);

    background: #ffffff;
}


.subtraction-hero-equation small {
    font-size: 1.2rem;

    font-weight: 850;
}


.subtraction-hero-card p {
    margin-bottom: 0;

    color:
        rgba(255, 255, 255, 0.77);

    font-size: 0.82rem;
}



/* ======================================================
   APERSEPSI
====================================================== */

.subtraction-intro-visual {
    min-height: 350px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 35px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0f766e,
            #059669
        );
}


.orange-demo {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 10px;

    margin-bottom: 28px;
}


.orange-demo span {
    width: 38px;
    height: 38px;

    display: block;

    background: #ffffff;

    border-radius: 50%;
}


.orange-demo
.orange-removed {
    opacity: 0.32;

    background: transparent;

    border:
        2px dashed
        rgba(255, 255, 255, 0.75);
}


.subtraction-intro-equation {
    margin-bottom: 8px;

    font-size: 2.5rem;

    font-weight: 900;
}


.subtraction-intro-label {
    color:
        rgba(255, 255, 255, 0.75);

    font-size: 0.75rem;
}



/* ======================================================
   CONCEPT
====================================================== */

.subtraction-concept-section {
    background:
        var(--color-background);
}


.subtraction-concept-demo {
    max-width: 950px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 160px;

    align-items: center;

    gap: 22px;

    margin:
        0 auto 28px;

    padding: 32px;

    background:
        var(--color-background-soft);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-extra-large);
}


.subtraction-concept-box {
    min-height: 190px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background: #ffffff;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-medium);
}


.subtraction-concept-label {
    margin-bottom: 20px;

    color:
        var(--color-text-muted);

    font-size: 0.67rem;
    font-weight: 750;
}


.subtraction-concept-dots {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 8px;

    margin-bottom: 18px;
}


.subtraction-concept-dots span {
    width: 27px;
    height: 27px;

    background:
        var(--color-primary);

    border-radius: 50%;
}


.removed-dots span {
    background:
        #cbd5e1;
}


.subtraction-concept-box > strong {
    color:
        var(--color-primary);

    font-size: 1.6rem;
}


.subtraction-sign {
    color:
        var(--color-text-muted);

    font-size: 1.7rem;
    font-weight: 900;
}


.subtraction-result-box {
    min-height: 190px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    border-radius:
        var(--radius-medium);
}


.subtraction-result-box span {
    margin-bottom: 8px;

    color:
        rgba(255, 255, 255, 0.73);

    font-size: 0.7rem;
}


.subtraction-result-box strong {
    font-size: 3rem;
}



/* ======================================================
   SYMBOL
====================================================== */

.subtraction-symbol-section {
    background:
        var(--color-background-soft);
}


.subtraction-symbol-wrapper {
    display: grid;

    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(450px, 1.2fr);

    align-items: center;

    gap: 70px;
}


.subtraction-symbol-content h2 {
    margin-bottom: 18px;

    font-size:
        clamp(
            2.2rem,
            4vw,
            3.5rem
        );

    letter-spacing:
        -0.04em;
}


.subtraction-symbol-content p {
    color:
        var(--color-text-muted);
}


.subtraction-symbol-demo {
    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr;

    align-items: center;

    gap: 12px;

    padding: 28px;

    background: #ffffff;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-large);

    box-shadow:
        var(--shadow-small);
}


.subtraction-symbol-demo > div {
    min-height: 130px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    background:
        var(--color-background-soft);

    border-radius:
        var(--radius-medium);
}


.subtraction-symbol-demo strong {
    color:
        var(--color-primary);

    font-size: 2.2rem;
}


.subtraction-symbol-demo span {
    margin-top: 5px;

    color:
        var(--color-text-muted);

    font-size: 0.68rem;
}


.subtraction-symbol-demo small {
    color:
        var(--color-text-muted);

    font-size: 1.5rem;

    font-weight: 900;
}


.subtraction-symbol-demo
.symbol-result {
    color: #ffffff;

    background:
        var(--color-primary);
}


.subtraction-symbol-demo
.symbol-result strong,
.subtraction-symbol-demo
.symbol-result span {
    color: #ffffff;
}



/* ======================================================
   INTERACTIVE
====================================================== */

.subtraction-interactive-section {
    color: #ffffff;

    background:
        #0f172a;
}


.subtraction-interactive-section
.section-eyebrow {
    color: #93c5fd;
}


.subtraction-interactive-section
.section-header p {
    color: #94a3b8;
}


.subtraction-activity-card {
    max-width: 900px;

    margin-inline: auto;

    padding: 32px;

    background:
        rgba(255, 255, 255, 0.06);

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius:
        var(--radius-extra-large);
}


.subtraction-builder {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 22px;

    margin-bottom: 25px;
}


.subtraction-builder-box {
    min-height: 270px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 24px;

    background: #ffffff;

    border-radius:
        var(--radius-large);
}


.subtraction-builder-objects {
    min-height: 85px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 16px;
}


.subtraction-builder-dot {
    width: 29px;
    height: 29px;

    display: block;

    background:
        var(--color-primary);

    border-radius: 50%;
}


.remove-builder-objects
.subtraction-builder-dot {
    background:
        #94a3b8;
}


.subtraction-builder-box > strong {
    margin-bottom: 18px;

    color:
        var(--color-primary);

    font-size: 2.2rem;
}


.subtraction-builder-sign {
    color: #ffffff;

    font-size: 2rem;

    font-weight: 900;
}


.subtraction-action {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 24px;
}


.subtraction-reset-button {
    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.08);

    border-color:
        rgba(255, 255, 255, 0.16);
}



/* ======================================================
   RESULT
====================================================== */

.subtraction-result {
    display: none;

    padding: 30px;

    color:
        var(--color-text);

    background: #ffffff;

    border-radius:
        var(--radius-large);

    text-align: center;
}


.subtraction-result.show {
    display: block;
}


.subtraction-result-label {
    display: block;

    margin-bottom: 22px;

    color:
        var(--color-text-muted);

    font-size: 0.7rem;
    font-weight: 850;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}


.subtraction-result-groups {
    display: grid;

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

    gap: 15px;

    margin-bottom: 24px;
}


.subtraction-result-groups > div {
    min-height: 130px;

    padding: 18px;

    background:
        var(--color-background-soft);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-medium);
}


.subtraction-result-groups
> div > span {
    display: block;

    margin-bottom: 18px;

    color:
        var(--color-text-muted);

    font-size: 0.68rem;

    font-weight: 750;
}


.remaining-objects,
.taken-objects {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;
}


.remaining-dot,
.taken-dot {
    width: 27px;
    height: 27px;

    display: block;

    border-radius: 50%;
}


.remaining-dot {
    background:
        var(--color-primary);
}


.taken-dot {
    background:
        #cbd5e1;
}


.subtraction-result-equation {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    margin-bottom: 14px;

    font-size: 1.4rem;
    font-weight: 800;
}


.subtraction-result-equation strong {
    color:
        var(--color-primary);

    font-size: 2rem;
}


.subtraction-result > p {
    margin-bottom: 0;

    color:
        var(--color-text-muted);
}



/* ======================================================
   EXAMPLE
====================================================== */

.subtraction-example-section {
    background:
        var(--color-background-soft);
}


.subtraction-worked-card {
    padding: 30px;

    background: #ffffff;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-large);

    box-shadow:
        var(--shadow-small);
}


.worked-story {
    margin-bottom: 22px;
}


.worked-story-label {
    display: block;

    margin-bottom: 8px;

    color:
        var(--color-primary);

    font-size: 0.67rem;
    font-weight: 850;

    text-transform: uppercase;
    letter-spacing: 0.07em;
}


.worked-story p {
    margin-bottom: 0;

    color:
        var(--color-text-secondary);

    font-size: 0.9rem;
}


.subtraction-cookie-demo {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 24px;

    padding: 32px;

    background: #fff7ed;

    border-radius:
        var(--radius-medium);
}


.subtraction-cookie-demo span {
    width: 38px;
    height: 38px;

    display: block;

    background:
        #f59e0b;

    border-radius: 50%;
}


.subtraction-cookie-demo
.cookie-removed {
    opacity: 0.30;

    background: transparent;

    border:
        2px dashed #f59e0b;
}


/* REUSE WORKED STEPS */

.worked-addition-steps {
    display: grid;

    gap: 10px;
}


.worked-addition-steps > div {
    display: grid;

    grid-template-columns:
        38px 1fr;

    align-items: center;

    gap: 13px;

    padding: 13px;

    background:
        var(--color-background-soft);

    border-radius: 10px;
}


.worked-addition-steps span {
    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    color:
        var(--color-primary);

    background:
        var(--color-primary-light);

    border-radius: 50%;

    font-size: 0.7rem;
    font-weight: 850;
}


.worked-addition-steps p {
    margin-bottom: 0;

    color:
        var(--color-text-secondary);

    font-size: 0.82rem;
}



/* ======================================================
   STRATEGIES
====================================================== */

.subtraction-strategy-section {
    background:
        var(--color-background);
}


.subtraction-strategy-grid {
    display: grid;

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

    gap: 20px;
}


.subtraction-strategy-card {
    padding: 26px;

    background: #ffffff;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-large);

    box-shadow:
        var(--shadow-small);
}


.strategy-number {
    display: block;

    margin-bottom: 26px;

    color:
        var(--color-primary);

    font-size: 0.68rem;
    font-weight: 850;
}


.subtraction-strategy-visual {
    min-height: 110px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 22px;

    padding: 18px;

    color:
        var(--color-primary);

    background:
        var(--color-primary-light);

    border-radius:
        var(--radius-medium);

    font-size: 1rem;
    font-weight: 850;
}


.subtraction-strategy-card h3 {
    margin-bottom: 10px;

    font-size: 1.02rem;
}


.subtraction-strategy-card p {
    margin-bottom: 0;

    color:
        var(--color-text-muted);

    font-size: 0.82rem;
}



/* ======================================================
   NUMBER LINE
====================================================== */

.subtraction-numberline-section {
    background:
        var(--color-background-soft);
}


.subtraction-numberline-wrapper {
    display: grid;

    grid-template-columns:
        minmax(0, 0.7fr)
        minmax(500px, 1.3fr);

    align-items: center;

    gap: 70px;
}


.subtraction-numberline-content h2 {
    margin-bottom: 18px;

    font-size:
        clamp(
            2.2rem,
            4vw,
            3.5rem
        );

    letter-spacing:
        -0.04em;
}


.subtraction-numberline-content p {
    color:
        var(--color-text-muted);
}


.subtraction-numberline-card {
    overflow: hidden;

    padding: 35px 25px;

    background: #ffffff;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-large);

    box-shadow:
        var(--shadow-small);
}


.subtraction-jump-labels {
    display: flex;

    justify-content: center;

    gap: 35px;

    margin-bottom: 14px;
}


.subtraction-jump-labels span {
    color:
        var(--color-primary);

    font-size: 0.7rem;
    font-weight: 850;
}


.subtraction-number-line {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(11, 1fr);

    min-width: 520px;

    margin-bottom: 25px;
}


.subtraction-number-line::before {
    content: "";

    position: absolute;

    left: 2%;
    right: 2%;
    top: 50%;

    height: 3px;

    background:
        #cbd5e1;

    transform:
        translateY(-50%);
}


.subtraction-number-line span {
    position: relative;

    z-index: 2;

    width: 33px;
    height: 33px;

    display: grid;

    place-items: center;

    margin-inline: auto;

    color:
        var(--color-text-muted);

    background: #ffffff;

    border:
        2px solid
        #e2e8f0;

    border-radius: 50%;

    font-size: 0.7rem;
    font-weight: 800;
}


.subtraction-number-line
.subtract-start {
    color:
        var(--color-primary);

    border-color:
        var(--color-primary);
}


.subtraction-number-line
.subtract-step {
    color:
        #c2410c;

    border-color:
        #f97316;
}


.subtraction-number-line
.subtract-result {
    color: #ffffff;

    background:
        var(--color-primary);

    border-color:
        var(--color-primary);
}


.subtraction-numberline-card p {
    margin-bottom: 0;

    color:
        var(--color-text-muted);

    text-align: center;

    font-size: 0.8rem;
}



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

@media (max-width: 1024px) {

    .subtraction-symbol-wrapper,
    .subtraction-numberline-wrapper {
        grid-template-columns:
            1fr;

        gap: 45px;
    }


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

}



@media (max-width: 860px) {

    .subtraction-concept-demo {
        grid-template-columns:
            1fr;

        max-width: 650px;
    }


    .subtraction-sign {
        transform:
            rotate(90deg);

        text-align: center;
    }

}



@media (max-width: 600px) {

    .subtraction-hero-card {
        min-height: 360px;

        padding: 25px;
    }


    .subtraction-symbol-demo {
        grid-template-columns:
            1fr;

        text-align: center;
    }


    .subtraction-builder {
        grid-template-columns:
            1fr;
    }


    .subtraction-builder-sign {
        transform:
            rotate(90deg);

        text-align: center;
    }


    .subtraction-activity-card {
        padding: 20px;
    }


    .subtraction-action {
        flex-direction: column;
    }


    .subtraction-action .button {
        width: 100%;
    }


    .subtraction-result-groups {
        grid-template-columns:
            1fr;
    }


    .subtraction-strategy-grid {
        grid-template-columns:
            1fr;
    }


    .subtraction-numberline-card {
        overflow-x: auto;
    }

}