/* Feature Stories-specific layout and progressive reveal.
 * Card appearance is intentionally provided by beca_feature_cards/feature_cards
 * through the shared bfc-* classes used in the Twig template.
 */
.bfs-section {
  --bfs-primary: #135AD5;
  --bfs-accent: #07A5F6;
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: var(--bfs-margin-top, 0);
  margin-bottom: var(--bfs-margin-bottom, 0);
  padding-top: var(--bfs-pad-top, 4rem);
  padding-bottom: var(--bfs-pad-bottom, 4rem);
  background: var(--bfs-bg, #fff);
  font-family: "Open Sans", sans-serif;
}

.bfs-section *,
.bfs-section *::before,
.bfs-section *::after { box-sizing: border-box; }

.bfs-inner {
  width: min(100%, var(--bfc-container, 1240px));
  max-width: var(--bfc-container, 1240px);
  margin-inline: auto;
  padding-inline: 0 !important;
}

.bfs-header-bottom { margin-top: 1rem; }

/* bfc-grid supplies the exact Feature Cards grid. */
.bfs-card--hidden { display: none !important; }
.bfs-empty { margin: 0; color: #5b6472; }

/* The full Feature Story card is always the CTA surface. */
.bfs-card,
.bfs-card * { cursor: pointer; }

@media (max-width: 1279px) {
  .bfs-inner { width: calc(100% - 2rem); }
}

@media (max-width: 640px) {
  .bfs-inner { width: calc(100% - 1.25rem); }
  .bfs-header-bottom { align-items: flex-start; flex-direction: column; }
}

/* ==========================================================================
   View More / View All CTA
   The complete visual treatment and icon animation come directly from the
   beca_feature_cards .bfc-card-cta implementation. Only native button reset
   and header placement are defined here.
   ========================================================================== */
.bfs-view-cta {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

@media (max-width: 640px) {
  .bfs-view-cta { align-self: flex-start; }
}

/* Match the perceived pill expansion pace of the Feature Cards CTA.
 * The Stories control has a shorter label, so its background reaches full
 * width sooner at the inherited 400ms duration. A slightly longer width
 * transition preserves the same visual expansion pace. */
.bfs-view-cta.bfc-card-cta::before {
  transition: width 500ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 300ms ease;
}