<div class="sky-section w-full" <%= 'data-collapsable=root' if collapsible %><%= ' data-initially-collapsed=true' if initially_collapsed %>>
  <%# Section header with controls %>
  <div class="section-header flex justify-between items-center sticky z-10 py-2 border-b">
    <span><%= title %></span>
    <% if collapsible || font_size_adjustable %>
      <div class="flex items-center gap-3">
        <% if font_size_adjustable %>
          <%= render partial: 'shared/section_controls/font_size_controls' %>
        <% end %>
        <% if collapsible %>
          <%= render partial: 'shared/section_controls/toggle_button', locals: { initially_collapsed: initially_collapsed } %>
        <% end %>
      </div>
    <% end %>
  </div>
  <%# Content container %>
  <div class="<%= container_class %>">
    <% content_classes = "leading-loose" %>
    <% content_classes += " line-clamp-6" if collapsible && initially_collapsed %>
    <div class="<%= content_classes %>"<%= ' data-collapsable=content' if collapsible %>>
      <%= content.html_safe %>
    </div>
  </div>
</div>
