/* Engage Dynamic Intake Component v1.0 */

:root{
  --ec-navy:#07182c;
  --ec-gold:#d6aa2c;
  --ec-cream:#f7f3e9;
  --ec-ink:#0d1b31;
  --ec-muted:#4d596b;
}


/* =========================================================
   PAGE LAYOUT
   ========================================================= */

.page-engage .engage-split{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);
  gap:clamp(2.5rem,5vw,5.5rem);
  align-items:start;
}


.page-engage .engage-opportunities{
  min-width:0;
}


.page-engage .engage-inquiry{
  position:sticky;
  top:7.5rem;
  min-width:0;
}


.page-engage .engage-selector-intro{
  max-width:720px;
}


/* =========================================================
   SELECTOR CARDS
   ========================================================= */

.page-engage .engage-card-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}


.page-engage .engage-option-card{
  position:relative;

  display:flex;
  flex-direction:column;

  min-height:190px;

  padding:1.55rem 1.45rem 3.1rem;

  text-align:left;

  background:#fff;

  border:1px solid rgba(7,24,44,.14);
  border-radius:14px;

  box-shadow:0 10px 24px rgba(7,24,44,.06);

  cursor:pointer;
  overflow:hidden;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}


.page-engage .engage-option-card:hover,
.page-engage .engage-option-card:focus-visible{
  transform:translateY(-2px);

  border-color:var(--ec-gold);

  box-shadow:0 16px 34px rgba(7,24,44,.12);

  outline:none;
}


.page-engage .engage-option-copy strong{
  display:block;

  margin-bottom:.55rem;

  color:var(--ec-ink);

  font-family:Georgia,'Times New Roman',serif;
  font-size:1.27rem;
  font-weight:500;
  line-height:1.22;
}


.page-engage .engage-option-copy small{
  display:block;

  color:var(--ec-muted);

  font-size:.84rem;
  line-height:1.55;
}


.page-engage .engage-option-action{
  position:absolute;

  right:1.15rem;
  bottom:1rem;

  color:var(--ec-ink);

  font-size:.76rem;
  font-weight:800;
}


.page-engage .engage-selected-ribbon{
  position:absolute;

  top:10px;
  right:-34px;

  width:118px;

  padding:.28rem 0;

  background:var(--ec-gold);
  color:var(--ec-navy);

  font-size:.56rem;
  font-weight:800;
  letter-spacing:.12em;

  text-align:center;

  transform:rotate(42deg);

  opacity:0;
  visibility:hidden;
}


/* =========================================================
   SELECTED STATE
   ========================================================= */

.page-engage .engage-option-card.is-selected,
.page-engage .engage-option-card[aria-expanded="true"]{
  border-color:var(--ec-gold);

  background:
    linear-gradient(
      135deg,
      #fff 0%,
      #fffaf0 100%
    );

  box-shadow:0 16px 34px rgba(7,24,44,.13);
}


.page-engage .engage-option-card.is-selected
.engage-selected-ribbon,
.page-engage .engage-option-card[aria-expanded="true"]
.engage-selected-ribbon{
  opacity:1;
  visibility:visible;
}


.page-engage .engage-option-card.is-selected
.engage-option-action,
.page-engage .engage-option-card[aria-expanded="true"]
.engage-option-action{
  color:var(--ec-gold);
}


/* =========================================================
   FORM PLACEHOLDER
   ========================================================= */

.page-engage .engage-form-placeholder{
  padding:2.4rem 2rem;

  text-align:center;

  background:#fff;

  border:1px solid rgba(7,24,44,.12);
  border-top:3px solid var(--ec-gold);

  border-radius:14px;

  box-shadow:0 12px 28px rgba(7,24,44,.07);
}


.page-engage .engage-placeholder-mark{
  display:grid;
  place-items:center;

  width:48px;
  height:48px;

  margin:0 auto 1rem;

  border:1px solid var(--ec-gold);
  border-radius:50%;

  color:var(--ec-gold);

  font-family:Georgia,'Times New Roman',serif;
  font-size:1.8rem;
}


.page-engage .engage-form-placeholder h3{
  margin-bottom:.55rem;
}


/* =========================================================
   DYNAMIC FORM PANEL
   ========================================================= */

.page-engage .engage-dynamic-panel[hidden]{
  display:none!important;
}


.page-engage .engage-dynamic-panel{
  width:100%;
  margin:0;

  background:var(--ec-cream);
}


.page-engage .engage-form-status{
  display:flex;
  align-items:center;
  gap:.45rem;

  margin-bottom:1.25rem;
  padding-bottom:1rem;

  border-bottom:1px solid rgba(7,24,44,.12);
}


.page-engage .engage-form-status-label{
  color:var(--ec-muted);

  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;

  text-transform:uppercase;
}


.page-engage #engage-selected-title{
  color:var(--ec-navy);
}


/* =========================================================
   DYNAMIC FIELDS
   ========================================================= */

.page-engage .engage-specific-fields{
  display:grid;
  gap:.72rem;

  padding:1rem 0 .25rem;
}


.page-engage .engage-field-group{
  display:grid;
  gap:.28rem;
}


.page-engage .engage-field-help{
  display:block;

  margin-top:.2rem;

  color:#697386;

  font-size:.72rem;
  line-height:1.45;
}


.page-engage .engage-check-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.5rem .9rem;

  margin-top:.35rem;
}


.page-engage .engage-check-option{
  display:flex;
  align-items:flex-start;
  gap:.55rem;

  margin:0;

  font-weight:500;
}


.page-engage .engage-check-option input{
  width:auto;

  margin-top:.28rem;
}


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

@media(max-width:1050px){

  .page-engage .engage-split{
    grid-template-columns:1fr;
  }


  .page-engage .engage-inquiry{
    position:static;
  }

}


@media(max-width:680px){

  .page-engage .engage-card-grid{
    grid-template-columns:1fr;
  }


  .page-engage .engage-option-card{
    min-height:165px;
  }


  .page-engage .engage-check-grid{
    grid-template-columns:1fr;
  }

}


@media(prefers-reduced-motion:reduce){

  .page-engage .engage-option-card{
    transition:none!important;
  }

}