@charset "UTF-8";
/* ============================================================
   Reusable "Apply now" band (bcfc-apply-band)
   Rendered by Views/Partials/PagePatterns/_ApplyBand.cshtml.

   These are DEFAULTS ONLY. Every class name in ApplyBandModel is a
   parameter, so a comp that passes its own names (the finance detail
   pages pass .apply / .apply-copy / .apply-form) never matches any rule
   here and keeps its own CSS untouched.

   Tokens come from bcfc-comp.css / _variables.scss with literal
   fallbacks, so the band still renders correctly if a page opts in
   without being wrapped in .bcfc-comp.
   ============================================================ */
.bcfc-apply-band {
  margin: 44px auto 0;
  max-width: var(--comp-wrap, 1200px);
  padding-inline: var(--comp-gutter, 1.5rem);
}

.bcfc-apply-band__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
  padding: clamp(26px, 3vw, 44px);
  background: var(--bcfc-surface-raised, var(--bcfc-surface, #fff));
  border: 1px solid var(--bcfc-border, #e7edf3);
  border-radius: 20px;
  box-shadow: 0 4px 18px rgba(20, 45, 70, 0.06);
}

/* Three columns only when an editor has actually uploaded an image — the
   two-column shape stays the default so adding the field to a doctype
   changes no existing page. */
.bcfc-apply-band__grid.has-media {
  grid-template-columns: 1fr minmax(0, 0.8fr) 1fr;
}

.bcfc-apply-band__copy > :first-child {
  margin-top: 0;
}

.bcfc-apply-band__copy p {
  color: var(--bcfc-ink, var(--bcfc-text-muted, #48515b));
  line-height: 1.7;
}

/* ---- numbered steps ---- */
.bcfc-apply-band__steps {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.bcfc-apply-band__steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.96875rem;
  line-height: 1.6;
  color: var(--bcfc-ink, var(--bcfc-text, #232a31));
}

.bcfc-apply-band__steps .n {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.875rem;
  font-weight: 800;
  background: var(--bcfc-blue, #004a98);
  color: #fff;
}

/* ---- image column ---- */
.bcfc-apply-band__media {
  align-self: stretch;
  min-height: 220px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bcfc-surface-sunken, var(--bcfc-surface-alt, #f4f7fa));
}

.bcfc-apply-band__media img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  display: block;
}

/* ---- CTA fallback, when the band renders buttons instead of a form ---- */
.bcfc-apply-band__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-self: center;
}

/* ---- responsive ----
   The image is the first thing to go: on a phone it pushes the form below
   two screens of scroll, and the form is the point of the band. */
@media (max-width: 1024px) {
  .bcfc-apply-band__grid.has-media {
    grid-template-columns: 1fr 1fr;
  }
  .bcfc-apply-band__grid.has-media .bcfc-apply-band__media {
    display: none;
  }
}
@media (max-width: 768px) {
  .bcfc-apply-band__grid,
  .bcfc-apply-band__grid.has-media {
    grid-template-columns: 1fr;
  }
}