{#
/**
 * @file
 * Theme override for Basic Page node.
 */
#}
<article{{ attributes.addClass('node', 'node--page') }}>
  <div class="py-16 lg:py-24 bg-white dark:bg-slate-900 transition-colors">
    <div class="max-w-7xl 3xl:max-w-8xl 4xl:max-w-9xl mx-auto px-4 sm:px-6 lg:px-8 3xl:px-12">
      {# Edit Button #}
      {% if can_edit %}
        <div class="mb-8 flex justify-end">
          <a href="{{ path('entity.node.edit_form', {'node': node.id}) }}" class="inline-flex items-center px-4 py-2 bg-gray-100 dark:bg-slate-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-slate-700 rounded-lg transition-colors text-sm font-medium">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
            </svg>
            {{ 'Edit'|t }}
          </a>
        </div>
      {% endif %}

      {# Page Title #}
      <header class="mb-12">
        <h1 class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white">
          {{ label }}
        </h1>
      </header>

      {# Featured Image #}
      {% if node.field_image.entity %}
        <div class="mb-12 rounded-2xl overflow-hidden shadow-lg">
          {{ responsive_image(node.field_image.entity.fileuri, 'article', node.field_image.alt ?: label, 'w-full h-auto object-cover') }}
        </div>
      {% endif %}

      {# Page Body #}
      {% if node.body.value %}
        <div class="prose prose-lg dark:prose-invert max-w-none">
          <div class="text-gray-700 dark:text-gray-300 leading-relaxed text-lg">
            {{ node.body.value|raw }}
          </div>
        </div>
      {% endif %}
    </div>
  </div>
</article>
