/* Section 1 */
.c-programs-banner {
    padding-block: var(--space-l-xl);
}

.c-programs-banner__inner {
    display: flex;
    box-sizing: border-box;
    border-radius: 20px;
    background-size: cover;
    align-items: flex-end;
    background-size: cover;
    background-position:right center;
    background-image: url("../assets/loan-programs/top-banner.png");
    padding-inline:var(--space-m-xl);
    min-height: min(570px, 50vh);
}

.c-programs-banner__heading {
    text-wrap: unset;
}
.c-programs-banner__heading span {
    display:block;
}

.c-programs-banner__columns {
    padding-block: var(--space-m-xl);
    min-width:min(450px, 100%);
    box-sizing: border-box;
}

@media(max-width: 768px) {
    .c-programs-banner__columns {
        flex-basis:auto;
        margin-inline:auto;
    }

    .c-programs-banner__heading span {
        display:unset;
    }

    .c-programs-banner__inner {
        --color-overlay: rgb(from var(--pine) r g b / .5);
        background-image: linear-gradient( var(--color-overlay), var(--color-overlay) ), url("../assets/loan-programs/top-banner.png");
    }
}

/* Section 2 */
.c-programs {
    background:var(--white);
}
.c-programs__buttons {
    display:flex;
    justify-content: center;
    flex-wrap:wrap;
    column-gap: var(--space-m);
    row-gap:var(--space-xs);
    margin-block:var(--space-m) var(--space-m-xl);
}

.c-programs__container {
    display:flex;
    flex-wrap:wrap;
    align-items: stretch;
    justify-content: center;
    gap:var(--space-m);
}

.c-program {
    flex: 0 1 calc(33% - (var(--space-m)/1.5));
    min-width: 325px;
    position: relative;
    perspective: 1000px;
    filter:drop-shadow(0px 3px 3px rgba(0,0,0,.3));
    min-height:min(300px, 28vh);
    cursor: pointer;
}
.c-program__container {
  display:grid;
  grid-template-areas:"card-face";
  width: 100%;
  height:100%;
  transition: transform 0.5s ease-in-out;
  transform-style: preserve-3d;
}
.c-program__front,
.c-program__back {
    grid-area: card-face;
    width:100%;
    height:100%;
    backface-visibility: hidden;

    border-radius: var(--space-s);
    color: var(--black);
}
.c-program__front {
    z-index: 2;
     transform: rotateY(0deg); 
     background: var(--powder);
}
.c-program__back {
    transform: rotateY(180deg);
    background: var(--corporategreen);
}

.c-program__teaser, 
.c-program__title,
.c-program__title {
    transition:.5s ease-in-out;
}
.c-program__front .c-program__teaser, 
.c-program__front .c-program__title {
    color:var(--corporategreen);
}
.c-program__back .c-program__title, 
.c-program__back .c-program__summary {
    color:var(--powder);
}
.c-program:last-child:nth-child(odd) {
    /* Last item */
}

.c-program__line {
    display: block;
    width:100%;
    height:2px;
    background:var(--pine);
    margin: 0 auto var(--space-s);
    transition:.5s ease-in-out;
}

@media (hover:hover) {
    .c-program:hover .c-program__container  {
        transform: rotateY(180deg);
    }
}

@media(max-width: 1024px) {
    .c-program {
        flex-grow:1;
        max-width:min( calc(66% - var(--space-m)), 100vw );
    }
}

@media(max-width: 500px) {
    .c-program {
        max-width:100%;
    }
}

.c-program__inner {
    padding:var(--space-m);
    display: grid;
    width:100%;
    height:100%;
    box-sizing: border-box;
}
.c-program__front .c-program__inner {
    text-align: center;
    align-items: center;
}
.c-program__back .c-program__inner {
    align-content: flex-start;
}

.c-program__button {
    display: block;
    margin-inline:auto 0;
    align-self: flex-end;
    justify-self: flex-end;
}
.c-program--style-a .c-program__inner {
    height: auto;
}
.c-program--style-b .c-program__inner {
    text-align: center;
    justify-items: center;
    align-items: flex-end;
}
.c-program__bottom {
    width:100%;
}

#see-more {
    margin-block-start:var(--space-l-xl);
    display: block;
    margin-inline:auto;
}

/* Section 3 */
.c-programs-faq {
    background:var(--white);
    padding-block:var(--space-l-xl);
}
.c-programs-faq__wrapper {
    gap:4%;
}
.c-programs-faq__column {
    flex-basis: calc( 50% - (4% / 2) );
}
.c-programs-faq__img {
    padding-inline:var(--space-s);
}
.c-programs-faq__item {
    width:100%;
    text-align:start;
    position: relative;
    filter:drop-shadow(0px 3px 6px rgba(0,0,0,.3));
    transition:transform .5s ease-in-out;
}
.c-programs-faq-item__top {
    color:var(--corporategreen);
    display:flex;
    justify-content: space-between;
    align-items:center;
    background:var(--powder);
    padding:var(--space-xs) var(--space-s);
    border-start-start-radius:var(--border-radius);
    border-start-end-radius:var(--border-radius);
    border-end-start-radius:0;
    border-end-end-radius:0;
    column-gap:var(--space-2xs);
    cursor: pointer;
}
.c-programs-faq-item__arrow {
    display:block;
    margin-top:0;
    transition: .5s ease-in-out;
}
.c-programs-faq-item__arrow svg {
    transform:rotate(-180deg);
    transition: .5s ease-in-out;
}

@media (hover:hover) {
  .c-programs-faq__item:hover {
    transform:scale(1.05);
  }
}

.c-programs-faq-item__body {
    margin-block-start:calc( var(--border-radius) * -1);
    overflow:auto;
    max-height:300px;
    height:auto;
    background:var(--powder);
    border-end-start-radius:var(--border-radius);
    border-end-end-radius:var(--border-radius);
    transition:max-height .5s ease-in-out;
}

.c-programs-faq-item__inner {
    padding:var(--space-m);
    width:100%;
    height:100%;
    box-sizing: border-box;
}

.c-programs-faq__item.js-is-closed .c-programs-faq-item__top {
    border-end-start-radius:var(--border-radius);
    border-end-end-radius:var(--border-radius);
}
.c-programs-faq__item.js-is-closed .c-programs-faq-item__body {
    max-height:0;
}
.c-programs-faq__item.js-is-closed .c-programs-faq-item__arrow svg {
    transform:rotate(0deg);
}

.c-programs-faq__btn {
    margin-block-start:var(--space-m);
    margin-inline:auto;
}

/* Bottom Nav Changes */
.c-apply-now {
    display:flex;
    background:var(--fire);
    color:var(--white);
    justify-content: unset;
}
.c-apply-now__content,
.c-apply-now__scroller {
    width:100%;
}
.c-apply-now__scroller {
    overflow-x:auto;
}
.c-apply-now__wrapper {
    display:grid;
    column-gap:0;
    row-gap:var(--space-2xs-m);
    width:100%;
    min-width:800px;
    grid-template-areas:
    "text form"
    "legal legal";
    grid-template-columns: 1fr 3fr;
    grid-row-gap: 0;
    align-items: center;
}
.js-is-closed .c-apply-now__scroller {
  opacity: 0;
  transition: .5s ease-in-out;
}

.c-apply-now__col--text {
    grid-area:text;
    font-size:calc( var(--step-1) * .75 )
}
.c-apply-now__col--form {
    grid-area:form;
}
.c-apply-now__col--legal {
    grid-area:legal;
}

.c-apply-now__col--buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-s);
}
.c-apply-now__button-link, .c-apply-now__button {
    display: inline-flex;
    flex-grow: 1;
}

.c-program-form__form {
    display: flex;
    align-items: center;
    column-gap:var(--space-2xs);
    padding: var(--space-2xs);
    margin-block:var(--space-m) 0;
}

.c-program-form__checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:var(--space-xs);
  row-gap: var(--space-3xs); /* or even 4px for tighter layout */
  margin-block-end:var(--space-s);
}

.c-program-form--checkbox {
    background: unset;
    border-radius: unset;
    box-shadow: unset;
    margin-block:var(--space-3xs);
}

.c-program-form__grid {
    display:grid;
    gap: var(--space-2xs);
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow:row;
}
.c-program-form__row {
    background-color:var(--white);
    border-radius:5px;
    grid-column: span 3;
}
.c-program-form__row--1 {
    grid-column: span 1;
    width:220px;
}
.cf-turnstile-container {
    --max-width:220;
}

.o-privacy-form__label {
    color:#9D9D9C;
    font-size:var(--step--2);
    margin-inline-start: var(--space-xs);
    margin-block-end:var(--space-xs);
    font-style: italic;
    font-weight: 900;
}
.o-privacy-form__label span,
.c-program-form--checkbox span {
    color:red;
}
.o-privacy-form__input, .o-privacy-form__select {
    border:none;
    outline:none;
    padding:0;
    font-size:var(--step--1);
}
.o-privacy-form__input-wrapper {
    display:flex;
    align-items: center;
    flex-wrap:wrap;
    padding:var(--space-2xs);
    padding-block-end:0;
}
form input[type="radio"], form input[type="checkbox"], .c-program-form--checkbox {
    margin-inline-start:var(--space-xs);
    color:var(--black);
    font-size:var(--step--1);
}
form input[type="radio"] {
    width:1em;
    height:1em;
    accent-color: var(--corporategreen);
}

.just-validate-error-label {
    margin-block-start:var(--space-3xs);
    font-style: italic;
}

#c-program-form__button--submit {
}

.c-program-form__label {
    font-size:calc( var(--step-1) * .8 );
    margin-block:var(--space-2xs) 0;
    grid-column: span 4;
    text-wrap:unset;
}

.o-privacy-form__button {
    margin-inline:auto 0;
}

.o-privacy-form__dislaimer {
    margin-block:var(--space-3xs);
    color:var(--white);
    font-size:var(--step--2);
}

.c-program-form__label--checklist {
  margin:0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  grid-column: span 1;
}

@media (max-width: 1200px) {
    .c-apply-now__wrapper {
        grid-template-areas:
        "text  text"
        "form  form"
        "legal legal";
    }
    .c-program-form__form {
        margin-block-start:0;
    }
    .c-apply-now__col--form {
        width:min-content;
    }
    .c-apply-now__col--text {
        margin-block-start:var(--space-m);
    }
    .c-apply-now__col--legal {
        width:80%;
    }
}