FvRE section-type detection — the brains behind the toggle

Signal	Weight	Detects
data-fvw-type attribute on section	★★★	Explicit type (highest priority)
.elementor-top-section vs .elementor-inner-section	★★★	FULL-width vs INNER/column container
Section is direct child of main or .page	★★	Top-level section → FULL
Section contains .elementor-column children	★★	COLS / column grid
Number of column children: 2 / 3 / 4	★★	Card grid if 3+, 2-col if 2
Column contains card-like widget (image+title+text)	★★	Card grid → default 2-COL on mobile
Section contains single text widget only	★	TEXT block → default STACK
Section contains heading + button (no image)	★	CTA → default STACK
Section has full-bleed image background	★	HERO → default STACK
Section detected as FOOTER (role=contentinfo, .site-footer, last child)	★	FOOTER → default STACK, links vertical

// freshvibe-cms/fvre/detectSectionType.js
function detectSectionType(sectionEl, context) {
  // 1. Explicit data attribute wins
  const explicit = sectionEl.getAttribute('data-fvw-type');
  if (explicit) return { type: explicit, source: 'explicit' };

  // 2. Heuristic scoring
  const scores = { hero: 0, full: 0, cols: 0,
                cards: 0, text: 0, cta: 0, footer: 0 };

  // 2a. Elementor top vs inner
  if (sectionEl.classList.contains('elementor-inner-section')) scores.cols += 3;
  if (sectionEl.classList.contains('elementor-top-section')) scores.full += 3;

  // 2b. Direct child of main/.page
  if (sectionEl.parentElement?.matches('main, .page, body > *')) scores.full += 2;

  // 2c. Column children?
  const columns = sectionEl.querySelectorAll(':scope > .elementor-column, :scope > .elementor-row > .elementor-column');
  if (columns.length >= 2) { scores.cols += 2; scores.cards += 1; }

  // 2d. Each column: card or text?
  let cardColumns = 0, textColumns = 0;
  columns.forEach(col => {
    const hasImage  = col.querySelector('.elementor-widget-image');
    const hasTitle  = col.querySelector('h1, h2, h3, .elementor-widget-heading');
    const hasText   = col.querySelector('.elementor-widget-text-editor');
    const hasButton = col.querySelector('.elementor-widget-button');
    if ((hasImage || hasTitle) && hasText) cardColumns++;
    else if (hasText && !hasImage) textColumns++;
  });
  if (cardColumns >= 2) scores.cards += 3;
  if (textColumns >= 2 && cardColumns === 0) scores.text += 2;

  // 2e. CTA detection (heading + button, no columns)
  if (columns.length === 0) {
    const hasHeading = sectionEl.querySelector('.elementor-widget-heading');
    const hasButton  = sectionEl.querySelector('.elementor-widget-button');
    if (hasHeading && hasButton) scores.cta += 3;
  }

  // 2f. Hero detection (full-bleed image background)
  const bg = getComputedStyle(sectionEl).backgroundImage;
  if (bg && bg !== 'none' && sectionEl.querySelector('.elementor-widget-heading')) {
    scores.hero += 2;
  }

  // 2g. Footer detection (role, class, position)
  if (sectionEl.getAttribute('role') === 'contentinfo' ||
      sectionEl.classList.contains('site-footer') ||
      context.isLastSection) {
    scores.footer += 3;
  }

  // 3. Pick winner
  const winner = Object.entries(scores).sort((a, b) => b[1] - a[1])[0];
  return { type: winner[0], confidence: winner[1], scores: scores };
}