{#
  Flexible Section Component - Ultimate flexible page builder block
  
  Expected variables from page builder:
  - block (Matrix block that IS the flexibleSectionType entry)
  - block.columnLayout
  - block.mobileLayout
  - block.verticalAlignment
  - block.gapSize
  - block.backgroundScheme
  - block.backgroundImage
  - block.backgroundOverlay
  - block.overlayOpacity
  - block.textColorOverride
  - block.contentColumns (nested matrix)
  - block.containerWidth
  - block.paddingTop
  - block.paddingBottom
  - block.sectionIdAnchor
  - block.customClasses
  - block.addTopDivider
  - block.dividerStyle
  - block.showDesktop
  - block.showMobile
  - block.animationStyle
#}

{# Get settings - block IS the flexibleSectionType entry #}
{# Handle dropdown fields that return objects with .value property #}
{% set columnLayoutRaw = block.columnLayout.value ?? block.columnLayout ?? 'singleColumn' %}
{% set mobileLayoutRaw = block.mobileLayout.value ?? block.mobileLayout ?? 'stack' %}
{% set verticalAlignRaw = block.verticalAlignment.value ?? block.verticalAlignment ?? block.verticalAlign ?? 'top' %}
{% set gapSizeRaw = block.gapSize.value ?? block.gapSize ?? 'medium' %}
{% set backgroundSchemeRaw = block.backgroundScheme.value ?? block.backgroundScheme ?? 'whiteClean' %}
{% set bgImage = block.backgroundImage ? block.backgroundImage.one() : null %}
{% set bgOverlay = block.backgroundOverlay ?? false %}
{% set overlayOpacityRaw = block.overlayOpacity.value ?? block.overlayOpacity ?? '50' %}
{% set textColorOverrideRaw = block.textColorOverride.value ?? block.textColorOverride ?? 'auto' %}
{% set containerWidthRaw = block.containerWidth.value ?? block.containerWidth ?? 'fullBgContainer' %}
{% set paddingTopRaw = block.paddingTop.value ?? block.paddingTop ?? 'medium' %}
{% set paddingBottomRaw = block.paddingBottom.value ?? block.paddingBottom ?? 'medium' %}
{% set sectionId = block.sectionIdAnchor ?? '' %}
{% set customClasses = block.customClasses ?? '' %}
{% set addTopDivider = block.addTopDivider ?? false %}
{% set dividerStyleRaw = block.dividerStyle.value ?? block.dividerStyle ?? 'line' %}
{% set showDesktop = block.showDesktop ?? true %}
{% set showMobile = block.showMobile ?? true %}
{% set animationStyleRaw = block.animationStyle.value ?? block.animationStyle ?? 'none' %}

{# Normalize values - convert to string and handle variations #}
{% set columnLayout = columnLayoutRaw|string|replace({'twoColumns': 'twoColumn'}) %}
{% set normalizedColumnLayout = columnLayout|replace({'Columns': 'Column'}) %}
{% set mobileLayout = mobileLayoutRaw|string %}
{% set verticalAlignment = verticalAlignRaw|string %}
{% set gapSize = gapSizeRaw|string %}
{% set backgroundScheme = backgroundSchemeRaw|string %}
{% set overlayOpacity = overlayOpacityRaw|string %}
{% set textColorOverride = textColorOverrideRaw|string %}
{% set containerWidth = containerWidthRaw|string %}
{% set paddingTop = paddingTopRaw|string %}
{% set paddingBottom = paddingBottomRaw|string %}
{% set dividerStyle = dividerStyleRaw|string %}
{% set animationStyle = animationStyleRaw|string %}

{# Build CSS classes #}

{# Background Scheme Classes #}
{% set bgClasses = {
  'navyDark': 'bg-gradient-navy text-white',
  'creamLight': 'bg-cream text-navy',
  'whiteClean': 'bg-white text-navy',
  'beigeWarm': 'bg-beige text-navy',
  'goldLuxury': 'bg-gradient-gold text-navy',
  'gradientNavy': 'bg-gradient-navy text-white',
  'gradientGold': 'bg-gradient-gold text-navy',
  'transparent': 'bg-transparent'
} %}

{# Column Layout Classes - Base classes that stack on mobile by default #}
{% set columnClasses = {
  'singleColumn': 'grid-cols-1',
  'twoColumn5050': 'grid-cols-1 lg:grid-cols-2',
  'twoColumn3367': 'grid-cols-1 lg:grid-cols-3',
  'twoColumn6733': 'grid-cols-1 lg:grid-cols-3',
  'threeColumnEqual': 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
  'fourColumnEqual': 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
} %}

{# Column Layout Classes for "maintain" mobile option - keeps columns on mobile #}
{% set columnClassesMaintain = {
  'singleColumn': 'grid-cols-1',
  'twoColumn5050': 'grid-cols-2',
  'twoColumn3367': 'grid-cols-3',
  'twoColumn6733': 'grid-cols-3',
  'threeColumnEqual': 'grid-cols-3',
  'fourColumnEqual': 'grid-cols-4'
} %}

{# Column Span for 33/67 and 67/33 layouts - for grid layouts #}
{% set columnSpans = {
  'twoColumn3367': ['lg:col-span-1', 'lg:col-span-2'],
  'twoColumn6733': ['lg:col-span-2', 'lg:col-span-1']
} %}

{# Column Span for "maintain" option - works on all screen sizes #}
{% set columnSpansMaintain = {
  'twoColumn3367': ['col-span-1', 'col-span-2'],
  'twoColumn6733': ['col-span-2', 'col-span-1']
} %}

{# Mobile Layout Classes #}
{# Note: 'stack' uses default grid behavior (stacks on mobile via grid-cols-1) #}
{# 'maintain' should keep columns on mobile, so we'll handle this in the grid class logic #}
{% set mobileClasses = {
  'stack': '',
  'maintain': '',
  'reverse': 'flex flex-col-reverse lg:flex-row'
} %}

{# Vertical Alignment Classes #}
{% set alignClasses = {
  'top': 'items-start',
  'center': 'items-center',
  'bottom': 'items-end',
  'stretch': 'items-stretch'
} %}

{# Gap Size Classes - ensure all variations are covered #}
{% set gapClasses = {
  'none': 'gap-0',
  'small': 'gap-4',
  'medium': 'gap-8',
  'large': 'gap-12',
  'xlarge': 'gap-16',
  'xLarge': 'gap-16',
  'X-Large': 'gap-16',
  'XLarge': 'gap-16'
} %}

{# Padding Classes - values in pixels #}
{% set paddingClasses = {
  'none': '0',
  'small': '32',
  'medium': '64',
  'large': '96',
  'xlarge': '128'
} %}

{# Container Width Classes #}
{% set containerClasses = {
  'fullBgContainer': 'w-full',
  'fullBgFull': 'w-full',
  'containerBoth': 'max-w-7xl mx-auto px-6',
  'narrowContainer': 'max-w-5xl mx-auto px-6'
} %}

{# Visibility Classes #}
{% set visibilityClass = '' %}
{% if not showDesktop and not showMobile %}
  {# Hide completely if both are off #}
  {% set visibilityClass = 'hidden' %}
{% elseif not showDesktop %}
  {# Hide on desktop, show on mobile #}
  {% set visibilityClass = 'lg:hidden' %}
{% elseif not showMobile %}
  {# Hide on mobile, show on desktop #}
  {% set visibilityClass = 'hidden lg:block' %}
{% endif %}

{# Animation Classes #}
{% set animationClasses = {
  'none': '',
  'fadeIn': 'animate-fade-in',
  'slideUp': 'animate-slide-up',
  'slideLeft': 'animate-slide-left',
  'slideRight': 'animate-slide-right'
} %}

{# Top Divider #}
{% if addTopDivider %}
  {% if dividerStyle == 'wave' %}
    <div class="w-full overflow-hidden leading-none">
      <svg viewBox="0 0 1200 120" preserveAspectRatio="none" class="w-full h-12 md:h-16">
        <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="fill-current text-{{ backgroundScheme == 'navyDark' or backgroundScheme == 'gradientNavy' ? 'navy' : 'beige' }}"></path>
      </svg>
    </div>
  {% elseif dividerStyle == 'curve' %}
    <div class="w-full overflow-hidden leading-none">
      <svg viewBox="0 0 1200 120" preserveAspectRatio="none" class="w-full h-12 md:h-16">
        <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" class="fill-current text-{{ backgroundScheme == 'navyDark' or backgroundScheme == 'gradientNavy' ? 'navy' : 'beige' }}"></path>
        <path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" class="fill-current text-{{ backgroundScheme == 'navyDark' or backgroundScheme == 'gradientNavy' ? 'navy' : 'beige' }}"></path>
        <path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" class="fill-current text-{{ backgroundScheme == 'navyDark' or backgroundScheme == 'gradientNavy' ? 'navy' : 'beige' }}"></path>
      </svg>
    </div>
  {% elseif dividerStyle == 'zigzag' %}
    <div class="w-full overflow-hidden leading-none">
      <svg viewBox="0 0 1200 120" preserveAspectRatio="none" class="w-full h-8">
        <path d="M0,0 L60,60 L120,0 L180,60 L240,0 L300,60 L360,0 L420,60 L480,0 L540,60 L600,0 L660,60 L720,0 L780,60 L840,0 L900,60 L960,0 L1020,60 L1080,0 L1140,60 L1200,0 L1200,120 L0,120 Z" class="fill-current text-{{ backgroundScheme == 'navyDark' or backgroundScheme == 'gradientNavy' ? 'navy' : 'beige' }}"></path>
      </svg>
    </div>
  {% else %}
    <div class="w-full border-t-2 border-gold/30"></div>
  {% endif %}
{% endif %}

{# Main Section #}
{% if visibilityClass != 'hidden' %}
{# Determine if this is a navy background for text color inheritance #}
{% set sectionBgClass = bgClasses[backgroundScheme] ?? 'bg-white text-navy' %}
{% set isNavySection = 'bg-gradient-navy' in sectionBgClass or 'navy' in sectionBgClass|lower %}

<section 
  {% if sectionId %}id="{{ sectionId }}"{% endif %}
  class="relative overflow-hidden {{ sectionBgClass }} {{ visibilityClass }} {{ customClasses }} {{ animationClasses[animationStyle] ?? '' }}"
  style="padding-top: {{ paddingClasses[paddingTop] }}px; padding-bottom: {{ paddingClasses[paddingBottom] }}px;"
  data-bg-scheme="{{ backgroundScheme }}"
  data-is-navy="{{ isNavySection ? 'true' : 'false' }}"
  data-section-bg-class="{{ sectionBgClass }}"
>
  {# Background Image #}
  {% if bgImage %}
    <div class="absolute inset-0 z-0">
      {{ imageMacro.optimizedImage(bgImage, {
        alt: '',
        class: 'w-full h-full object-cover',
        loading: 'lazy',
        width: bgImage.width,
        height: bgImage.height,
        sizes: '100vw'
      }) }}
      {% if bgOverlay %}
        <div class="absolute inset-0 bg-navy" style="opacity: {{ overlayOpacity / 100 }}"></div>
      {% endif %}
    </div>
  {% endif %}

  {# Content Container #}
  {# Handle container width properly - fullBgFull = full width with padding, containerBoth = container with padding #}
  {% set containerClass = '' %}
  {% set containerPadding = 'px-6' %}
  
  {% if containerWidth == 'fullBgFull' %}
    {# Full width background but content still has horizontal padding #}
    {% set containerClass = 'w-full' %}
    {% set containerPadding = 'px-6 lg:px-12' %}
  {% elseif containerWidth == 'containerBoth' or containerWidth == 'fullBgContainer' %}
    {# Container with max-width and padding #}
    {% set containerClass = 'max-w-7xl mx-auto' %}
    {% set containerPadding = 'px-6 lg:px-12' %}
  {% elseif containerWidth == 'narrowContainer' %}
    {% set containerClass = 'max-w-5xl mx-auto' %}
    {% set containerPadding = 'px-6 lg:px-12' %}
  {% else %}
    {% set containerClass = containerClasses[containerWidth] ?? 'max-w-7xl mx-auto' %}
    {% set containerPadding = 'px-6 lg:px-12' %}
  {% endif %}
  <div class="relative z-10 {{ containerClass }} {{ containerPadding }}">
    
    {# Check if we have content columns #}
    {% set contentColumns = block.contentColumns ?? null %}
    {% if contentColumns and contentColumns.exists() %}
      {# Check if we need special grid layout or flex layout for reverse #}
      {# Apply gap size - ensure it's properly set and handle variations #}
      {% set appliedGap = gapClasses[gapSize] ?? gapClasses['medium'] %}
      {% if not appliedGap %}
        {# Fallback if gapSize doesn't match any key #}
        {% set appliedGap = 'gap-8' %}
      {% endif %}
      
      {# Get vertical alignment class #}
      {% set alignClass = alignClasses[verticalAlignment] ?? alignClasses['top'] %}
      
      {# Handle different mobile layout options #}
      {% if mobileLayout == 'reverse' %}
        {# Reverse order: use flex layout with column reverse on mobile, row on desktop #}
        <div class="flex flex-col-reverse lg:flex-row {{ alignClass }} {{ appliedGap }}">
      {% elseif mobileLayout == 'maintain' %}
        {# Maintain columns: use grid with columns maintained on mobile #}
        <div class="grid {{ columnClassesMaintain[normalizedColumnLayout] ?? columnClassesMaintain[columnLayout] ?? columnClassesMaintain['singleColumn'] }} {{ alignClass }} {{ appliedGap }}">
      {% else %}
        {# Stack on mobile: use default grid classes that stack on mobile #}
        <div class="grid {{ columnClasses[normalizedColumnLayout] ?? columnClasses[columnLayout] ?? columnClasses['singleColumn'] }} {{ alignClass }} {{ appliedGap }}">
      {% endif %}
        
        {# Loop through columns #}
        {% for column in contentColumns.all() %}
          {% set columnIndex = loop.index0 %}
          
          {# Handle column spans based on mobile layout #}
          {% set columnSpanClass = '' %}
          {% set flexBasisClass = '' %}
          
          {% if mobileLayout == 'reverse' %}
            {# For reverse layout with 33/67 or 67/33, use flex-basis instead of grid spans #}
            {% if normalizedColumnLayout == 'twoColumn3367' or normalizedColumnLayout == 'twoColumn6733' %}
              {% if columnIndex == 0 %}
                {% set flexBasisClass = normalizedColumnLayout == 'twoColumn3367' ? 'lg:flex-[0_0_33.333%]' : 'lg:flex-[0_0_66.666%]' %}
              {% else %}
                {% set flexBasisClass = normalizedColumnLayout == 'twoColumn3367' ? 'lg:flex-[0_0_66.666%]' : 'lg:flex-[0_0_33.333%]' %}
              {% endif %}
            {% endif %}
          {% elseif mobileLayout == 'maintain' %}
            {# For maintain option, use spans that work on all screen sizes #}
            {% set columnSpanClass = columnSpansMaintain[normalizedColumnLayout] is defined ? (columnSpansMaintain[normalizedColumnLayout][columnIndex] ?? '') : (columnSpansMaintain[columnLayout][columnIndex] ?? '') %}
          {% else %}
            {# For stack option, use responsive spans (only on large screens) #}
            {% set columnSpanClass = columnSpans[normalizedColumnLayout] is defined ? (columnSpans[normalizedColumnLayout][columnIndex] ?? '') : (columnSpans[columnLayout][columnIndex] ?? '') %}
          {% endif %}
        
        <div class="{{ columnSpanClass }} {{ flexBasisClass }} {{ textColorOverride != 'auto' ? 'text-' ~ textColorOverride : '' }}">
          {# Loop through content elements in this column #}
          {% for element in column.contentElements.all() %}
            
            {# Rich Text Block #}
            {% if element.type == 'richText' %}
              {% set fontSizeRaw = element.fontSize ?? 'base' %}
              {% set textAlignRaw = element.textAlign ?? 'left' %}
              {% set maxWidthRaw = element.maxWidth ?? 'full' %}
              {% set elementTextColorRaw = element.textColorOverride ?? null %}
              
              {% set fontSize = fontSizeRaw.value ?? fontSizeRaw %}
              {% set textAlign = textAlignRaw.value ?? textAlignRaw %}
              {% set maxWidth = maxWidthRaw.value ?? maxWidthRaw %}
              {% set elementTextColor = elementTextColorRaw ? (elementTextColorRaw.value ?? elementTextColorRaw) : null %}
              
              {# Font size styles - more distinct sizes for better visual difference
                 small: 0.875rem (14px) - small text
                 base: 1rem (16px) - base/body text
                 large: 1.25rem (20px) - large text
                 xlarge: 1.5rem (24px) - extra large text
                 Note: Using inline styles to override prose-lg classes #}
              {% set fontSizeStyles = {
                'small': 'font-size: 0.875rem !important;',
                'base': 'font-size: 1rem !important;',
                'large': 'font-size: 1.25rem !important;',
                'xlarge': 'font-size: 1.5rem !important;'
              } %}
              {% set fontSizeStyle = fontSizeStyles[fontSize] ?? fontSizeStyles['base'] %}
              {% set textAlignClasses = {'left': 'text-left', 'center': 'text-center', 'right': 'text-right'} %}
              {% set maxWidthClasses = {'full': 'w-full', 'container': 'max-w-4xl', 'narrow': 'max-w-2xl', 'prose': 'max-w-prose'} %}
              
              {# Determine text color - element-level override first, then section-level, then default #}
              {% set uniqueId = 'rich-text-' ~ element.id %}
              {% set finalTextColor = '' %}
              {% set hasExplicitOverride = false %}
              
              {# Check element-level override first #}
              {% if elementTextColor and elementTextColor != 'auto' and elementTextColor != '' %}
                {% set hasExplicitOverride = true %}
                {# Map color names to CSS color values #}
                {% if elementTextColor == 'navy' %}
                  {% set finalTextColor = '#2c4a5c' %}
                {% elseif elementTextColor == 'white' %}
                  {% set finalTextColor = 'white' %}
                {% elseif elementTextColor == 'gold' %}
                  {% set finalTextColor = '#D58D72' %}
                {% elseif elementTextColor == 'charcoal' %}
                  {% set finalTextColor = '#3a3a3a' %}
                {% elseif elementTextColor == 'charcoalLight' %}
                  {% set finalTextColor = '#5a5a5a' %}
                {% else %}
                  {% set finalTextColor = elementTextColor %}
                {% endif %}
              {# Fall back to section-level override #}
              {% elseif textColorOverride != 'auto' and textColorOverride != '' %}
                {% set hasExplicitOverride = true %}
                {# Map color names to CSS color values #}
                {% if textColorOverride == 'navy' %}
                  {% set finalTextColor = '#2c4a5c' %}
                {% elseif textColorOverride == 'white' %}
                  {% set finalTextColor = 'white' %}
                {% elseif textColorOverride == 'gold' %}
                  {% set finalTextColor = '#D58D72' %}
                {% elseif textColorOverride == 'charcoal' %}
                  {% set finalTextColor = '#3a3a3a' %}
                {% elseif textColorOverride == 'charcoalLight' %}
                  {% set finalTextColor = '#5a5a5a' %}
                {% else %}
                  {% set finalTextColor = textColorOverride %}
                {% endif %}
              {# Fall back to section default (only if no explicit override) #}
              {% elseif isNavySection %}
                {# Only apply white default if no explicit override - allows CKEditor colors to work #}
                {% set finalTextColor = 'white' %}
              {% endif %}
              
              {# Apply text color - only force override if explicitly set, otherwise allow CKEditor colors #}
              {% if finalTextColor and hasExplicitOverride %}
                {# Explicit override - force it with !important #}
                <div id="{{ uniqueId }}" class="{{ textAlignClasses[textAlign] ?? textAlignClasses['left'] }} {{ maxWidthClasses[maxWidth] ?? maxWidthClasses['full'] }} {{ textAlign == 'center' ? 'mx-auto' : '' }} mb-6 prose prose-lg max-w-none leading-relaxed" style="color: {{ finalTextColor }} !important; {{ fontSizeStyle }}">
                  <style type="text/css">
                    /* Force text color and font size with ID selector for maximum specificity - only when override is explicitly set */
                    #{{ uniqueId }},
                    #{{ uniqueId }} *,
                    #{{ uniqueId }} h1,
                    #{{ uniqueId }} h2,
                    #{{ uniqueId }} h3,
                    #{{ uniqueId }} h4,
                    #{{ uniqueId }} h5,
                    #{{ uniqueId }} h6,
                    #{{ uniqueId }} p,
                    #{{ uniqueId }} div,
                    #{{ uniqueId }} span,
                    #{{ uniqueId }} strong,
                    #{{ uniqueId }} em,
                    #{{ uniqueId }} a,
                    #{{ uniqueId }} li,
                    #{{ uniqueId }} ul,
                    #{{ uniqueId }} ol,
                    #{{ uniqueId }} blockquote,
                    #{{ uniqueId }} code,
                    #{{ uniqueId }} pre,
                    #{{ uniqueId }} [style*="color"],
                    #{{ uniqueId }} [style*="color"] * {
                      color: {{ finalTextColor }} !important;
                    }
                    /* Override prose-lg font size */
                    #{{ uniqueId }},
                    #{{ uniqueId }} p,
                    #{{ uniqueId }} div,
                    #{{ uniqueId }} span {
                      {{ fontSizeStyle }}
                    }
                  </style>
                  {{ element.content }}
                </div>
              {% elseif finalTextColor and not hasExplicitOverride %}
                {# Section default (e.g., white on navy) - apply as base but allow CKEditor inline styles to override #}
                {# Add class to allow CKEditor colors to work #}
                <div id="{{ uniqueId }}" class="allow-ckeditor-colors {{ textAlignClasses[textAlign] ?? textAlignClasses['left'] }} {{ maxWidthClasses[maxWidth] ?? maxWidthClasses['full'] }} {{ textAlign == 'center' ? 'mx-auto' : '' }} mb-6 prose prose-lg max-w-none leading-relaxed" style="color: {{ finalTextColor }}; {{ fontSizeStyle }}">
                  <style type="text/css">
                    /* Override prose-lg font size */
                    #{{ uniqueId }},
                    #{{ uniqueId }} p,
                    #{{ uniqueId }} div,
                    #{{ uniqueId }} span {
                      {{ fontSizeStyle }}
                    }
                  </style>
                  {{ element.content }}
                </div>
              {% else %}
                {# No color override - let CKEditor styles work freely #}
                <div id="{{ uniqueId }}" class="allow-ckeditor-colors {{ textAlignClasses[textAlign] ?? textAlignClasses['left'] }} {{ maxWidthClasses[maxWidth] ?? maxWidthClasses['full'] }} {{ textAlign == 'center' ? 'mx-auto' : '' }} mb-6 prose prose-lg max-w-none leading-relaxed" style="{{ fontSizeStyle }}">
                  <style type="text/css">
                    /* Override prose-lg font size */
                    #{{ uniqueId }},
                    #{{ uniqueId }} p,
                    #{{ uniqueId }} div,
                    #{{ uniqueId }} span {
                      {{ fontSizeStyle }}
                    }
                  </style>
                  {{ element.content }}
                </div>
              {% endif %}
            
            {# Heading Block #}
            {% elseif element.type == 'heading' %}
              {% set headingLevelRaw = element.headingLevel ?? 'h2' %}
              {% set headingStyleRaw = element.headingStyle ?? 'standard' %}
              {% set textAlignRaw = element.textAlign ?? 'left' %}
              {% set addUnderline = element.addUnderline ?? false %}
              {% set underlineColorRaw = element.underlineColor ?? 'gold' %}
              {% set elementTextColorRaw = element.textColorOverride ?? null %}
              
              {% set headingLevel = headingLevelRaw.value ?? headingLevelRaw %}
              {% set headingStyle = headingStyleRaw.value ?? headingStyleRaw %}
              {% set textAlign = textAlignRaw.value ?? textAlignRaw %}
              {% set underlineColor = underlineColorRaw.value ?? underlineColorRaw %}
              {% set elementTextColor = elementTextColorRaw ? (elementTextColorRaw.value ?? elementTextColorRaw) : null %}
              
              {# Base size classes for each heading level #}
              {% set headingLevelSizes = {
                'h1': 'text-5xl lg:text-6xl',
                'h2': 'text-4xl lg:text-5xl',
                'h3': 'text-3xl lg:text-4xl',
                'h4': 'text-2xl lg:text-3xl',
                'h5': 'text-xl lg:text-2xl'
              } %}
              
              {# Style modifiers - adjust size based on style #}
              {% set styleModifiers = {
                'display': {
                  'h1': 'text-6xl lg:text-7xl',
                  'h2': 'text-5xl lg:text-6xl',
                  'h3': 'text-4xl lg:text-5xl',
                  'h4': 'text-3xl lg:text-4xl',
                  'h5': 'text-2xl lg:text-3xl'
                },
                'standard': {
                  'h1': 'text-5xl lg:text-6xl',
                  'h2': 'text-4xl lg:text-5xl',
                  'h3': 'text-3xl lg:text-4xl',
                  'h4': 'text-2xl lg:text-3xl',
                  'h5': 'text-xl lg:text-2xl'
                },
                'subtitle': {
                  'h1': 'text-4xl lg:text-5xl',
                  'h2': 'text-3xl lg:text-4xl',
                  'h3': 'text-2xl lg:text-3xl',
                  'h4': 'text-xl lg:text-2xl',
                  'h5': 'text-lg lg:text-xl'
                }
              } %}
              
              {# Get the appropriate size class based on level and style #}
              {% set sizeClass = styleModifiers[headingStyle][headingLevel] ?? headingLevelSizes[headingLevel] ?? headingLevelSizes['h2'] %}
              
              {# Font weight and style classes based on headingStyle #}
              {% set styleWeightClasses = {
                'display': 'font-heading font-bold leading-tight',
                'standard': 'font-heading font-semibold leading-tight',
                'subtitle': 'font-body font-medium tracking-wide'
              } %}
              
              {% set weightClass = styleWeightClasses[headingStyle] ?? styleWeightClasses['standard'] %}
              {% set textAlignClasses = {'left': 'text-left', 'center': 'text-center', 'right': 'text-right'} %}
              
              {# Determine text color - element-level override first, then section-level, then default #}
              {% set finalTextColor = '' %}
              
              {# Check element-level override first #}
              {% if elementTextColor and elementTextColor != 'auto' and elementTextColor != '' %}
                {# Map color names to CSS color values #}
                {% if elementTextColor == 'navy' %}
                  {% set finalTextColor = '#2c4a5c' %}
                {% elseif elementTextColor == 'white' %}
                  {% set finalTextColor = 'white' %}
                {% elseif elementTextColor == 'gold' %}
                  {% set finalTextColor = '#D58D72' %}
                {% elseif elementTextColor == 'charcoal' %}
                  {% set finalTextColor = '#3a3a3a' %}
                {% elseif elementTextColor == 'charcoalLight' %}
                  {% set finalTextColor = '#5a5a5a' %}
                {% else %}
                  {% set finalTextColor = elementTextColor %}
                {% endif %}
              {# Fall back to section-level override #}
              {% elseif textColorOverride != 'auto' and textColorOverride != '' %}
                {# Map color names to CSS color values #}
                {% if textColorOverride == 'navy' %}
                  {% set finalTextColor = '#2c4a5c' %}
                {% elseif textColorOverride == 'white' %}
                  {% set finalTextColor = 'white' %}
                {% elseif textColorOverride == 'gold' %}
                  {% set finalTextColor = '#D58D72' %}
                {% elseif textColorOverride == 'charcoal' %}
                  {% set finalTextColor = '#3a3a3a' %}
                {% elseif textColorOverride == 'charcoalLight' %}
                  {% set finalTextColor = '#5a5a5a' %}
                {% else %}
                  {% set finalTextColor = textColorOverride %}
                {% endif %}
              {# Fall back to section default #}
              {% elseif isNavySection %}
                {% set finalTextColor = 'white' %}
              {% endif %}
              
              <{{ headingLevel }} class="{{ sizeClass }} {{ weightClass }} {{ textAlignClasses[textAlign] ?? textAlignClasses['left'] }} mb-6"{% if finalTextColor %} style="color: {{ finalTextColor }} !important;"{% endif %}>
                {{ element.headingText }}
                {% if addUnderline %}
                  <div class="w-16 h-1 bg-{{ underlineColor }} mt-4 {{ textAlign == 'center' ? 'mx-auto' : '' }} {{ textAlign == 'right' ? 'ml-auto' : '' }}"></div>
                {% endif %}
              </{{ headingLevel }}>
            
            {# Button Block - Using CTA Button Component #}
            {% elseif element.type == 'button' %}
              {% set alignmentRaw = element.alignment ?? 'left' %}
              {% set alignment = alignmentRaw.value ?? alignmentRaw %}
              {% set alignmentClasses = {'left': 'text-left', 'center': 'text-center', 'right': 'text-right'} %}
              
              <div class="{{ alignmentClasses[alignment] ?? alignmentClasses['left'] }} mb-6">
                {% include 'components/cta-button.twig' with { 'cta': element } %}
              </div>
            
            {# Image Block #}
            {% elseif element.type == 'image' %}
              {% set imageAsset = element.imageAsset.one() %}
              {% if imageAsset %}
                {% set imageSizeRaw = element.imageSize ?? 'full' %}
                {% set imagePositionRaw = element.imagePosition ?? 'center' %}
                {% set borderRadiusRaw = element.borderRadius ?? 'none' %}
                {% set addShadow = element.addShadow ?? false %}
                {% set decorativeBorderRaw = element.decorativeBorder ?? false %}
                
                {# Normalize dropdown field values #}
                {% set imageSize = imageSizeRaw.value ?? imageSizeRaw %}
                {% set imagePosition = imagePositionRaw.value ?? imagePositionRaw %}
                {% set borderRadius = borderRadiusRaw.value ?? borderRadiusRaw %}
                {% set decorativeBorder = decorativeBorderRaw.value ?? decorativeBorderRaw %}
                {% if decorativeBorder == '1' or decorativeBorder == true or decorativeBorder == 'yes' %}
                  {% set decorativeBorder = true %}
                {% else %}
                  {% set decorativeBorder = false %}
                {% endif %}
                
                {% set imageSizeClasses = {'small': 'max-w-xs', 'medium': 'max-w-md', 'large': 'max-w-2xl', 'full': 'w-full'} %}
                {% set imagePositionClasses = {'left': '', 'center': 'mx-auto', 'right': 'ml-auto'} %}
                {% set borderRadiusClasses = {'none': '', 'small': 'rounded', 'medium': 'rounded-xl', 'large': 'rounded-3xl', 'full': 'rounded-full'} %}
                
                {# Determine text color for caption - respect override first, then use section default #}
                {% set finalTextColor = '' %}
                {% if textColorOverride != 'auto' and textColorOverride != '' %}
                  {# Map color names to CSS color values #}
                  {% if textColorOverride == 'navy' %}
                    {% set finalTextColor = '#2c4a5c' %}
                  {% elseif textColorOverride == 'white' %}
                    {% set finalTextColor = 'white' %}
                  {% elseif textColorOverride == 'gold' %}
                    {% set finalTextColor = '#D58D72' %}
                  {% else %}
                    {% set finalTextColor = textColorOverride %}
                  {% endif %}
                {% elseif isNavySection %}
                  {% set finalTextColor = 'white' %}
                {% endif %}
                
                <div class="mb-6 {{ imagePositionClasses[imagePosition] ?? imagePositionClasses['center'] }} {{ imageSizeClasses[imageSize] ?? imageSizeClasses['full'] }}">
                  {% if decorativeBorder %}
                    {# Decorative border effect - layered gold frames #}
                    <div class="relative">
                      <div class="absolute -top-5 -left-5 w-full h-full border-2 border-gold/40 rounded-2xl"></div>
                      <div class="absolute -bottom-5 -right-5 w-full h-full border-2 border-gold/20 rounded-2xl"></div>
                      <div class="relative rounded-2xl overflow-hidden shadow-xl">
                        {{ imageMacro.optimizedImage(imageAsset, {
                          alt: element.caption ?? '',
                          class: 'w-full h-auto ' ~ (borderRadiusClasses[borderRadius] ?? borderRadiusClasses['none']),
                          loading: 'lazy',
                          width: imageAsset.width,
                          height: imageAsset.height,
                          sizes: '(max-width: 1024px) 100vw, 50vw'
                        }) }}
                      </div>
                    </div>
                  {% else %}
                    {# Standard image without decorative border #}
                    {{ imageMacro.optimizedImage(imageAsset, {
                      alt: element.caption ?? '',
                      class: 'w-full h-auto ' ~ (borderRadiusClasses[borderRadius] ?? borderRadiusClasses['none']) ~ (addShadow ? ' shadow-luxury' : ''),
                      loading: 'lazy',
                      width: imageAsset.width,
                      height: imageAsset.height
                    }) }}
                  {% endif %}
                  {% if element.caption %}
                    <p class="text-sm italic mt-3 text-center"{% if finalTextColor %} style="color: {{ finalTextColor }} !important;"{% endif %}>{{ element.caption }}</p>
                  {% endif %}
                </div>
              {% endif %}
            
            {# Icon + Text Block #}
            {% elseif element.type == 'iconText' %}
              {% set icon = element.iconAsset ? element.iconAsset.one() : null %}
              {% set iconPositionRaw = element.iconPosition ?? 'left' %}
              {% set iconSizeRaw = element.iconSize ?? 'medium' %}
              {% set iconColorRaw = element.iconColor ?? 'auto' %}
              
              {% set iconPosition = iconPositionRaw.value ?? iconPositionRaw %}
              {% set iconSize = iconSizeRaw.value ?? iconSizeRaw %}
              {% set iconColor = iconColorRaw.value ?? iconColorRaw %}
              
              {% set iconSizeClasses = {'small': 'w-8 h-8', 'medium': 'w-12 h-12', 'large': 'w-16 h-16'} %}
              {% set iconColorClass = iconColor != 'auto' ? 'text-' ~ iconColor : '' %}
              
              <div class="mb-8 {{ iconPosition == 'top' ? 'text-center' : 'flex items-start gap-5' }} {{ iconPosition == 'right' ? 'flex-row-reverse' : '' }}">
                {% if icon %}
                  <div class="{{ iconPosition == 'top' ? 'mb-4 flex justify-center' : 'flex-shrink-0' }}">
                    {{ imageMacro.optimizedImage(icon, {
                      alt: '',
                      class: (iconSizeClasses[iconSize] ?? iconSizeClasses['medium']) ~ ' ' ~ iconColorClass,
                      loading: 'lazy',
                      width: icon.width,
                      height: icon.height,
                      autoResponsive: false
                    }) }}
                  </div>
                {% endif %}
                <div class="{{ iconPosition == 'top' ? '' : 'flex-1' }}">
                  {% if element.heading %}
                    <h3 class="text-xl font-semibold mb-3 text-navy">{{ element.heading }}</h3>
                  {% endif %}
                  {% if element.description %}
                    <div class="text-base text-charcoal-light leading-relaxed">{{ element.description }}</div>
                  {% endif %}
                </div>
              </div>
            
            {# Spacer Block #}
            {% elseif element.type == 'spacer' %}
              {% set spacerSize = element.spacerSize ?? 'medium' %}
              {% set spacerClasses = {
                'xs': 'h-4',
                'small': 'h-8',
                'medium': 'h-12',
                'large': 'h-16',
                'xlarge': 'h-24',
                'xxlarge': 'h-32'
              } %}
              <div class="{{ spacerClasses[spacerSize] }}"></div>
            
            {# Quote Block #}
            {% elseif element.type == 'quote' %}
              {% set quoteStyle = element.quoteStyle ?? 'default' %}
              
              {% if quoteStyle == 'large' %}
                <blockquote class="bg-beige rounded-2xl p-8 lg:p-12 mb-8">
                  <p class="text-2xl lg:text-3xl italic text-navy leading-relaxed mb-6">"{{ element.quoteText }}"</p>
                  {% if element.quoteAuthor %}
                    <footer class="text-base">
                      <span class="font-semibold text-navy">{{ element.quoteAuthor }}</span>
                      {% if element.quoteRole %}
                        <span class="text-charcoal-light"> - {{ element.quoteRole }}</span>
                      {% endif %}
                    </footer>
                  {% endif %}
                </blockquote>
              {% elseif quoteStyle == 'minimal' %}
                <blockquote class="border-l-4 border-gold pl-6 mb-8">
                  <p class="text-lg italic text-charcoal leading-relaxed mb-3">"{{ element.quoteText }}"</p>
                  {% if element.quoteAuthor %}
                    <footer class="text-sm text-charcoal-light">— {{ element.quoteAuthor }}{% if element.quoteRole %}, {{ element.quoteRole }}{% endif %}</footer>
                  {% endif %}
                </blockquote>
              {% else %}
                <blockquote class="mb-8">
                  <p class="text-xl italic text-charcoal leading-relaxed mb-4">"{{ element.quoteText }}"</p>
                  {% if element.quoteAuthor %}
                    <footer class="text-base">
                      <span class="font-semibold">{{ element.quoteAuthor }}</span>
                      {% if element.quoteRole %}
                        <span class="text-charcoal-light"> - {{ element.quoteRole }}</span>
                      {% endif %}
                    </footer>
                  {% endif %}
                </blockquote>
              {% endif %}
            
            {# CTA Banner Block #}
            {% elseif element.type == 'ctaBanner' %}
              {% set ctaStyle = element.ctaStyle ?? 'default' %}
              
              {# Determine text color - respect override first, then use section default #}
              {% set finalTextColor = '' %}
              {% if textColorOverride != 'auto' and textColorOverride != '' %}
                {# Map color names to CSS color values #}
                {% if textColorOverride == 'navy' %}
                  {% set finalTextColor = '#2c4a5c' %}
                {% elseif textColorOverride == 'white' %}
                  {% set finalTextColor = 'white' %}
                {% elseif textColorOverride == 'gold' %}
                  {% set finalTextColor = '#D58D72' %}
                {% elseif textColorOverride == 'charcoal' %}
                  {% set finalTextColor = '#3a3a3a' %}
                {% elseif textColorOverride == 'charcoalLight' %}
                  {% set finalTextColor = '#5a5a5a' %}
                {% else %}
                  {% set finalTextColor = textColorOverride %}
                {% endif %}
              {% elseif isNavySection %}
                {% set finalTextColor = 'white' %}
              {% endif %}
              
              {# Build style attribute if we have a color override #}
              {% if finalTextColor %}
                {% set textColorStyle = ' style="color: ' ~ finalTextColor ~ ' !important;"' %}
                {% set textColorStyleDesc = ' style="color: ' ~ finalTextColor ~ ' !important; opacity: 0.9;"' %}
              {% else %}
                {% set textColorStyle = '' %}
                {% set textColorStyleDesc = '' %}
              {% endif %}
              
              {% if ctaStyle == 'gradient' %}
                <div class="bg-gradient-gold rounded-3xl p-10 text-center mb-8">
                  <h3 class="text-3xl font-heading mb-4"{{ textColorStyle|raw }}>{{ element.ctaHeading }}</h3>
                  <p class="text-lg mb-6"{{ textColorStyleDesc|raw }}>{{ element.ctaDescription }}</p>
                  <a href="{{ element.ctaButtonUrl }}" class="btn-navy inline-flex items-center">{{ element.ctaButtonText }}</a>
                </div>
              {% elseif ctaStyle == 'bordered' %}
                <div class="border-4 border-gold rounded-3xl p-10 text-center mb-8">
                  <h3 class="text-3xl font-heading mb-4"{{ textColorStyle|raw }}>{{ element.ctaHeading }}</h3>
                  <p class="text-lg mb-6"{{ textColorStyleDesc|raw }}>{{ element.ctaDescription }}</p>
                  <a href="{{ element.ctaButtonUrl }}" class="btn-gold inline-flex items-center">{{ element.ctaButtonText }}</a>
                </div>
              {% else %}
                <div class="bg-beige rounded-3xl p-10 text-center mb-8">
                  <h3 class="text-3xl font-heading mb-4"{{ textColorStyle|raw }}>{{ element.ctaHeading }}</h3>
                  <p class="text-lg mb-6"{{ textColorStyleDesc|raw }}>{{ element.ctaDescription }}</p>
                  <a href="{{ element.ctaButtonUrl }}" class="btn-gold inline-flex items-center">{{ element.ctaButtonText }}</a>
                </div>
              {% endif %}
            
            {# Video Block #}
            {% elseif element.type == 'video' %}
              {% set videoType = element.videoType ?? 'youtube' %}
              {% set aspectRatio = element.videoAspectRatio ?? '16-9' %}
              
              {% set aspectRatioClasses = {
                '16-9': 'aspect-video',
                '4-3': 'aspect-[4/3]',
                '1-1': 'aspect-square'
              } %}
              
              <div class="mb-8 rounded-2xl overflow-hidden {{ aspectRatioClasses[aspectRatio] }}">
                {% if videoType == 'youtube' and element.videoUrl %}
                  <iframe 
                    src="https://www.youtube.com/embed/{{ element.videoUrl }}" 
                    class="w-full h-full"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                    allowfullscreen
                    title="YouTube video player"
                  ></iframe>
                {% elseif videoType == 'vimeo' and element.videoUrl %}
                  <iframe 
                    src="https://player.vimeo.com/video/{{ element.videoUrl }}" 
                    class="w-full h-full"
                    allow="autoplay; fullscreen; picture-in-picture" 
                    allowfullscreen
                    title="Vimeo video player"
                  ></iframe>
                {% elseif videoType == 'local' and element.videoFile.one() %}
                  {% set videoFile = element.videoFile.one() %}
                  <video controls class="w-full h-full object-cover" {% if element.videoPoster.one() %}poster="{{ element.videoPoster.one().url }}"{% endif %}>
                    <source src="{{ videoFile.url }}" type="{{ videoFile.mimeType }}">
                  </video>
                {% endif %}
              </div>
            
            {# Call to Action Block #}
            {% elseif element.type == 'callToAction' %}
              {% include 'components/call-to-action.twig' with { block: element } %}
            
            {# Statistics Block #}
            {% elseif element.type == 'statistics' %}
              {% set statSize = element.statSize ?? 'medium' %}
              {% set icon = element.statIcon.one() %}
              
              {% set statSizeClasses = {
                'small': 'text-3xl',
                'medium': 'text-5xl',
                'large': 'text-7xl',
                'xLarge': 'text-8xl'
              } %}
              
              <div class="text-center mb-8">
                {% if icon %}
                  {{ imageMacro.optimizedImage(icon, {
                    alt: '',
                    class: 'w-12 h-12 mx-auto mb-4',
                    loading: 'lazy',
                    width: icon.width,
                    height: icon.height,
                    autoResponsive: false
                  }) }}
                {% endif %}
                <div class="{{ statSizeClasses[statSize] }} font-bold text-gold mb-2">{{ element.statNumber }}</div>
                <div class="text-base text-charcoal-light uppercase tracking-wider">{{ element.statLabel }}</div>
              </div>
            
            {# Divider Block #}
            {% elseif element.type == 'divider' %}
              {% set dividerStyleRaw = element.dividerStyle2 ?? 'line' %}
              {% set dividerWidthRaw = element.dividerWidth ?? 'short' %}
              {% set dividerColorRaw = element.dividerColor ?? 'auto' %}
              {% set dividerThicknessRaw = element.dividerThickness ?? 'thin' %}
              {% set spacingAboveRaw = element.spacingAbove ?? 'none' %}
              {% set spacingBelowRaw = element.spacingBelow ?? 'none' %}
              
              {# Normalize dropdown values #}
              {% set dividerStyle = dividerStyleRaw.value ?? dividerStyleRaw %}
              {% set dividerWidthRawValue = dividerWidthRaw.value ?? dividerWidthRaw %}
              {% set dividerWidth = dividerWidthRawValue|lower|trim %}
              {% set dividerColorRawValue = dividerColorRaw.value ?? dividerColorRaw %}
              {% set dividerColor = dividerColorRawValue|lower|trim %}
              {% set dividerThickness = dividerThicknessRaw.value ?? dividerThicknessRaw %}
              {% set spacingAbove = spacingAboveRaw.value ?? spacingAboveRaw %}
              {% set spacingBelow = spacingBelowRaw.value ?? spacingBelowRaw %}
              
              {# Determine divider color #}
              {% set finalDividerColor = '' %}
              {% if dividerColor == 'auto' or dividerColor == '' %}
                {# Use text color override or section default #}
                {% if textColorOverride != 'auto' and textColorOverride != '' %}
                  {% set textColorLower = textColorOverride|lower %}
                  {% if textColorLower == 'navy' %}
                    {% set finalDividerColor = '#2c4a5c' %}
                  {% elseif textColorLower == 'white' %}
                    {% set finalDividerColor = 'white' %}
                  {% elseif textColorLower == 'gold' %}
                    {% set finalDividerColor = '#D58D72' %}
                  {% elseif textColorLower == 'charcoal' %}
                    {% set finalDividerColor = '#3a3a3a' %}
                  {% elseif textColorLower == 'charcoallight' %}
                    {% set finalDividerColor = '#5a5a5a' %}
                  {% else %}
                    {% set finalDividerColor = textColorOverride %}
                  {% endif %}
                {% elseif isNavySection %}
                  {% set finalDividerColor = 'white' %}
                {% else %}
                  {% set finalDividerColor = '#3a3a3a' %}
                {% endif %}
              {% else %}
                {# Map color names to CSS color values (case-insensitive) #}
                {% if dividerColor == 'navy' %}
                  {% set finalDividerColor = '#2c4a5c' %}
                {% elseif dividerColor == 'white' %}
                  {% set finalDividerColor = 'white' %}
                {% elseif dividerColor == 'gold' %}
                  {% set finalDividerColor = '#D58D72' %}
                {% elseif dividerColor == 'charcoal' %}
                  {% set finalDividerColor = '#3a3a3a' %}
                {% elseif dividerColor == 'charcoallight' %}
                  {% set finalDividerColor = '#5a5a5a' %}
                {% else %}
                  {# If it's already a hex color, use it directly #}
                  {% set finalDividerColor = dividerColorRawValue %}
                {% endif %}
              {% endif %}
              
              {# Width classes - very distinct sizes for clear visual difference
                 full: 100% width
                 short: 4rem (64px) - short, elegant divider
                 medium: 10rem (160px) - medium, more prominent #}
              {% set widthClasses = {
                'full': 'w-full',
                'short': 'w-16 mx-auto',
                'medium': 'w-40 mx-auto'
              } %}
              
              {# Normalize width value and ensure we have a valid class #}
              {# Handle case variations and ensure proper matching #}
              {% set widthKey = dividerWidth %}
              {% set foundMatch = false %}
              
              {# Check if exact match exists #}
              {% if widthKey in widthClasses|keys %}
                {% set foundMatch = true %}
              {% else %}
                {# Try to find a match (case-insensitive) #}
                {% for key, class in widthClasses %}
                  {% if key|lower == dividerWidth|lower %}
                    {% set widthKey = key %}
                    {% set foundMatch = true %}
                  {% endif %}
                {% endfor %}
              {% endif %}
              
              {# Use matched key or fallback to short #}
              {% set widthClass = foundMatch ? (widthClasses[widthKey] ?? widthClasses['short']) : widthClasses['short'] %}
              
              {# Thickness classes #}
              {% set thicknessClasses = {
                'thin': 'h-px',
                'medium': 'h-0.5',
                'thick': 'h-1'
              } %}
              
              {# Spacing classes - using spacerSize options (xs, small, medium, large, xlarge, xxlarge) #}
              {% set spacingAboveClass = '' %}
              {% set spacingBelowClass = '' %}
              
              {% if spacingAbove != 'none' %}
                {% if spacingAbove == 'xs' %}
                  {% set spacingAboveClass = 'mt-4' %}
                {% elseif spacingAbove == 'small' %}
                  {% set spacingAboveClass = 'mt-8' %}
                {% elseif spacingAbove == 'medium' %}
                  {% set spacingAboveClass = 'mt-12' %}
                {% elseif spacingAbove == 'large' %}
                  {% set spacingAboveClass = 'mt-16' %}
                {% elseif spacingAbove == 'xlarge' %}
                  {% set spacingAboveClass = 'mt-24' %}
                {% elseif spacingAbove == 'xxlarge' %}
                  {% set spacingAboveClass = 'mt-32' %}
                {% endif %}
              {% endif %}
              
              {% if spacingBelow != 'none' %}
                {% if spacingBelow == 'xs' %}
                  {% set spacingBelowClass = 'mb-4' %}
                {% elseif spacingBelow == 'small' %}
                  {% set spacingBelowClass = 'mb-8' %}
                {% elseif spacingBelow == 'medium' %}
                  {% set spacingBelowClass = 'mb-12' %}
                {% elseif spacingBelow == 'large' %}
                  {% set spacingBelowClass = 'mb-16' %}
                {% elseif spacingBelow == 'xlarge' %}
                  {% set spacingBelowClass = 'mb-24' %}
                {% elseif spacingBelow == 'xxlarge' %}
                  {% set spacingBelowClass = 'mb-32' %}
                {% endif %}
              {% endif %}
              
              {% set spacingClass = (spacingAboveClass ~ ' ' ~ spacingBelowClass)|trim %}
              
              <div class="{{ spacingClass }}">
                {% if dividerStyle == 'dotted' %}
                  <div class="{{ widthClass }} border-t-2 border-dotted" style="border-color: {{ finalDividerColor }} !important;"></div>
                {% else %}
                  <div class="{{ widthClass }} {{ thicknessClasses[dividerThickness] ?? thicknessClasses['thin'] }}" style="background-color: {{ finalDividerColor }} !important;"></div>
                {% endif %}
              </div>
            
            {% endif %}
            
          {% endfor %}
        </div>
      {% endfor %}
      
      </div>
    {% else %}
      {# No content columns - show placeholder or empty state #}
      <div class="text-center py-12">
        <p class="text-charcoal-light">No content added yet. Please add content columns in the page builder.</p>
      </div>
    {% endif %}
  </div>
</section>
{% endif %}
{# End section - hidden if visibilityClass is 'hidden' #}