
<section id="hero-top-{{ section.id }}" class="hero hero--top-aligned{% if section.settings.full_width %} hero--full{% endif %}" style="background-image: url({{ section.settings.image | img_url: 'master' }});">
  <div class="hero__overlay" style="background: {{ section.settings.overlay_color }}; opacity: {{ section.settings.overlay_opacity | divided_by: 100 }};"></div>

  <div class="hero__inner container">
    <div class="hero__content">


      {% if section.settings.heading != blank %}
        <h1 class="hero__heading" style="color: {{ section.settings.text_color }}">{{ section.settings.heading }}</h1>
      {% endif %}



      {% if section.settings.button_text != blank and section.settings.button_link != blank %}
        <a href="{{ section.settings.button_link }}" class="button hero__button">{{ section.settings.button_text }}</a>
      {% endif %}
    </div>
  </div>

  <style>
    /* Fuerza alineado arriba y centrado; espacio superior 10% */
    /* Se usa alta especificidad y !important para sobreescribir valores globales del theme */
    #hero-top-{{ section.id }} {
      position: relative;
      background-size: cover;
      background-position: center;
      min-height: 420px;
      display: flex;
      align-items: flex-start; /* contenido en la parte superior */
      justify-content: center; /* centro horizontal */
      padding-block-start: 0 !important;
      padding-block-end: 0 !important;
    }

    #hero-top-{{ section.id }} .hero__overlay {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    /* Asegura que el contenedor interno no empuje el contenido hacia abajo */
    #hero-top-{{ section.id }} .hero__inner {
      position: relative;
      z-index: 1;
      width: 100%;
      display: flex;
      justify-content: center; /* centra el bloque horizontalmente */
      align-items: flex-start; /* sitúa el bloque en la parte superior */
      padding-top: 0 !important;
      padding-bottom: {{ section.settings.padding_bottom }}px !important;
    }

    /* El bloque de texto queda centrado horizontalmente y separado desde arriba 10% */
    #hero-top-{{ section.id }} .hero__content {
      margin-top: 5% !important; /* separación desde la parte superior del hero */
      display: flex;
      flex-direction: column;
      justify-content: flex-start; /* contenido hacia arriba dentro del bloque */
      align-items: center; /* centra el bloque de texto horizontalmente */
      text-align: center; /* centra el texto interno */
      max-width: {{ section.settings.content_width }}px;
      width: 100%;
      gap: 12px;
      box-sizing: border-box;
    }

    /* Ajustes para mobile: menos separación superior */
    @media (max-width: 749px) {
      #hero-top-{{ section.id }} {
        min-height: 300px;
      }
      #hero-top-{{ section.id }} .hero__inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
      }
      #hero-top-{{ section.id }} .hero__content {
        margin-top: 6% !important;
        padding-left: 12px;
        padding-right: 12px;
      }
    }
  </style>
</section>

{% schema %}
{
  "name": "Hero Top Aligned",
  "settings": [
    { "type": "image_picker", "id": "image", "label": "Imagen de fondo" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Título principal" },
    { "type": "color", "id": "overlay_color", "label": "Color overlay", "default": "#000000" },
    { "type": "range", "id": "overlay_opacity", "label": "Opacidad overlay (%)", "min": 0, "max": 100, "step": 1, "default": 30 },
    { "type": "select", "id": "text_color", "label": "Color del texto", "options": [{ "value": "#ffffff", "label": "Blanco" }, { "value": "#000000", "label": "Negro" }], "default": "#ffffff" },
    { "type": "number", "id": "content_width", "label": "Ancho máximo del contenido (px)", "default": 700 },
    { "type": "number", "id": "padding_top", "label": "Padding top (px)", "default": 40 },
    { "type": "number", "id": "padding_bottom", "label": "Padding bottom (px)", "default": 40 },
    { "type": "checkbox", "id": "full_width", "label": "Ocupar ancho completo", "default": false },
    { "type": "text", "id": "button_text", "label": "Texto del botón", "default": "Ver más" },
    { "type": "url", "id": "button_link", "label": "Enlace del botón", "default": "/" }
  ],
  "blocks": [],
  "presets": [
    { "name": "Hero Top Aligned", "category": "Hero" }
  ]
}
{% endschema %}
