/* Module wrapper: enforce "no padding/margin on top" as requested */
.bbfhc--module {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border: none;
}

/* Shared */
.bbfhc__major,
.bbfhc__callout {
    position: relative;
    overflow: hidden;
    color: var(--bbfhc-major-text, inherit);
}

.bbfhc__content {
    position: relative;
    z-index: 2;
    padding: var(--bbfhc-major-content-pad, 24px);
}

/* Major aspect ratio desktop */
.bbfhc__major {
    aspect-ratio: 16 / 6; /* nice wide hero by default on desktop */
}

/* Background image using CSS variable so we can swap per instance */
.bbfhc__major::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--bbfhc-major-bg);
    background-size: cover;
    background-position: var(--bbfhc-major-objpos, center center);
    transform: scale(1.01);
}

/* Overlay */
.bbfhc__major::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bbfhc-major-overlay, transparent);
    z-index: 1;
}

/* Align content inside major */
.bbfhc__major[data-halign="center"] .bbfhc__content { text-align: center; }
.bbfhc__major[data-halign="right"] .bbfhc__content { text-align: right; }
.bbfhc__major[data-halign="right"] .bbfhc__ctas { justify-content: right; }
.bbfhc__major[data-halign="center"] .bbfhc__ctas { justify-content: center; }

.bbfhc__major {
    display: grid;
}
.bbfhc__major[data-valign="top"] { align-items: start; }
.bbfhc__major[data-valign="center"] { align-items: center; }
.bbfhc__major[data-valign="bottom"] { align-items: end; }

/* CTA buttons */
.bbfhc__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.bbfhc__btn {
  display: inline-block;
  padding: var(--bbfhc-btn-pad-y, 10px) var(--bbfhc-btn-pad-x, 14px);
  border-radius: var(--bbfhc-btn-radius, 6px);
  border-style: solid;
  border-width: var(--bbfhc-btn-border-width, 2px);
  border-color: var(--bbfhc-btn-border, currentColor);
  background: var(--bbfhc-btn-bg, transparent);
  color: var(--bbfhc-btn-text, currentColor);
  text-decoration: none;
  line-height: 1.2;
  font-size: 0.8rem;
  transition: all 300ms ease;
}

.bbfhc__btn:hover,
.bbfhc__btn:focus-visible {
  opacity: 0.92;
  background: var(--bbfhc-btn-text, currentColor);
  color: var(--bbfhc-btn-bg, white);
  text-decoration: none;
}

/* Content box mode: background only behind text/buttons */
.bbfhc .bbfhc__major .bbfhc__content {
  background: var(--bbfhc-major-content-bg, transparent);
  padding: var(--bbfhc-major-content-pad, 24px);
  margin: var(--bbfhc-major-content-margin, 0);
}

.bbfhc[data-bgmode="content"] .bbfhc__callout .bbfhc__content {
  background: var(--bbfhc-callout-content-bg, transparent);
  padding: var(--bbfhc-callout-content-pad, 18px);
  margin: var(--bbfhc-callout-content-margin, 0);
}

/* In content mode, disable full-image overlays (overlay fields become irrelevant) */
.bbfhc[data-bgmode="content"] .bbfhc__major::after,
.bbfhc[data-bgmode="content"] .bbfhc__callout::after {
  background: transparent;
}


/* Callouts grid: auto-fill the space */
.bbfhc__callouts {
    display: grid;
    gap: 0; /* tight grid; spacing can be done via module padding or row settings */
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bbfhc__callout {
    aspect-ratio: 4 / 3;
    display: grid;
    color: var(--bbfhc-callout-text, inherit);
}

.bbfhc__callout::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--bbfhc-callout-bg);
    background-size: cover;
    background-position: var(--bbfhc-callout-objpos, center center);
    transform: scale(1.01);
}

.bbfhc__callout::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bbfhc-callout-overlay, transparent);
    z-index: 1;
}

/* Per-callout padding comes from shared callout padding var */
.bbfhc__callouts .bbfhc__content {
    padding: var(--bbfhc-callout-pad, 18px);
}

/* Align callout content */
.bbfhc__callouts[data-halign="center"] .bbfhc__content { text-align: center; }
.bbfhc__callouts[data-halign="right"] .bbfhc__content { text-align: right; }

.bbfhc__callout[data-valign="top"],
.bbfhc__callouts[data-valign="top"] .bbfhc__callout { align-items: start; }

.bbfhc__callout[data-valign="center"],
.bbfhc__callouts[data-valign="center"] .bbfhc__callout { align-items: center; }

.bbfhc__callout[data-valign="bottom"],
.bbfhc__callouts[data-valign="bottom"] .bbfhc__callout { align-items: end; }

.bbfhc__title {
  color: var(--bbfhc-heading-color, inherit);
}


/* Responsive rules */
@media (max-width: 992px) {
    .bbfhc__callouts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    /* Mobile aspect ratio requirement:
       major 3:2, callouts 4:3 */
    .bbfhc__major { aspect-ratio: 3 / 2; }
    .bbfhc__callout { aspect-ratio: 4 / 3; }
}