{# Detail rendering for styled Section — white card with optional header/footer #}
{% from "partials/macros/detail_item.html" import render_item with context %}
{% set _section_span = _span_map[item.get_col_span()] if item.get_col_span() in _span_map else "" %}
{% set cols_class = _cols_map[item.get_cols()] if item.get_cols() in _cols_map else "grid-cols-1" %}
<div class="{{ _section_span }} bg-white dark:bg-secondary-800 rounded-xl border border-secondary-200 dark:border-secondary-700 shadow-sm overflow-hidden {{ item.get_css_class() }}">
  {% if item.get_title() %}
  <div class="px-6 py-3 bg-secondary-50 dark:bg-secondary-900/40 border-b border-secondary-100 dark:border-secondary-700">
    <h3 class="text-xs font-semibold uppercase tracking-wide text-secondary-500 dark:text-secondary-400">{{ item.get_title() }}</h3>
    {% if item.get_description() %}<p class="text-xs text-secondary-400 dark:text-secondary-500 mt-0.5">{{ item.get_description() }}</p>{% endif %}
  </div>
  {% endif %}
  <div class="grid {{ cols_class }} gap-0 divide-x divide-secondary-100 dark:divide-secondary-700">
    {% for child in item.get_fields() %}{{ render_item(child, inside_section=True) }}{% endfor %}
  </div>
  {% if item.get_footer() %}
  <div class="px-6 py-3 border-t border-secondary-100 dark:border-secondary-700 bg-secondary-50 dark:bg-secondary-900/40">
    <p class="text-xs text-secondary-400 dark:text-secondary-500">{{ item.get_footer() }}</p>
  </div>
  {% endif %}
</div>