/* =========================================================
   GROWTH PLANNER - THREE COLUMN INPUT LAYOUT
========================================================= */

.growth-planner-columns {

    display: grid;

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

    gap: 24px;

    width: 100%;
}


/* =========================================================
   GROWTH PLANNER - INPUT COLUMN
========================================================= */

.growth-planner-column {

    min-width: 0;

}


/* =========================================================
   GROWTH PLANNER - COLUMN HEADER
========================================================= */

.growth-planner-column-header {

    margin-bottom: 20px;

}


.growth-planner-column-header h3 {

    margin-top: 0;

    margin-bottom: 6px;

    color: var(--color-primary);

    font-size: var(--font-size-md);

}


.growth-planner-column-header p {

    margin: 0;

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

    font-size: var(--font-size-sm);

    line-height: 1.5;

}


/* =========================================================
   GROWTH PLANNER - COLUMN DIVIDER
========================================================= */

.growth-planner-column + .growth-planner-column {

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

    padding-left: 24px;

}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 1000px) {

    .growth-planner-columns {

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

    }

    .growth-planner-column:nth-child(3) {

        grid-column:
            1 / -1;

        border-left: none;

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

        padding-left: 0;

        padding-top: 24px;

    }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 700px) {

    .growth-planner-columns {

        grid-template-columns: 1fr;

    }

    .growth-planner-column {

        border-left: none !important;

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

        padding-left: 0 !important;

        padding-top: 24px;

    }

    .growth-planner-column:first-child {

        border-top: none;

        padding-top: 0;

    }

}