/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Unexpected "{"
Line 16:3 Expected identifier but found "'section-video-banner.css'"
Line 18:0 Unexpected "{"
Line 18:1 Expected identifier but found "%"
Line 112:0 Unexpected "{"
Line 112:1 Expected identifier but found "%"
Line 114:0 Unexpected "<"
Line 116:5 Expected identifier but found "%"
Line 117:6 Unexpected "<"
... and 11 more hidden warnings

**/
{{ 'section-video-banner.css' | asset_url | stylesheet_tag }}

{%- style -%}
  /* Resetowanie marginesów i paddingów */
  .banner,
  .banner__media,
  .banner__content,
  .banner__box {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Upewnij się, że padding i border są wliczane w wymiary */
  }

  /* Usuń ewentualne obramowania */
  .banner__media,
  .banner__content,
  .banner__box {
    border: none;
  }

  /* Napraw artefakty pozycjonowania */
  .banner.video-background {
    position: relative;
    overflow: hidden; /* Ukryj wszystko, co wychodzi poza banner */
    width: 100%;
    height: 80vh; /* Ustaw wysokość banera */
  }

  .banner__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* Wideo jest pod tekstem */
  }

  .banner__content {
    position: absolute;
    top: 0; /* Napis na samej górze */
    left: 50%;
    transform: translateX(-50%); /* Wyśrodkowanie w poziomie */
    width: 100%;
    text-align: center;
    z-index: 2; /* Tekst jest na wierzchu */
    padding-top: 20px; /* Dodaj trochę odstępu od góry */
  }

  .banner__box {
    background-color: rgba(0, 0, 0, 0.5); /* Lekko przezroczyste tło dla tekstu */
    padding: 20px;
    border-radius: 10px;
    display: inline-block;
  }

  .banner__heading, .banner__subheading {
    color: white;
    text-align: center;
    margin: 0;
  }

  .banner__heading {
    padding: 10px 0;
    font-size: 2.5rem; /* Większy rozmiar tekstu dla nagłówka */
  }

  .banner__subheading {
    padding: 5px 0;
    font-size: 1.5rem; /* Większy rozmiar tekstu dla podtytułu */
  }

  /* Dodatkowe poprawki dla urządzeń mobilnych */
  @media screen and (max-width: 749px) {
    .banner.video-background {
      height: 50vh; /* Zmniejsz wysokość banera na urządzeniach mobilnych */
    }

    .banner__heading {
      font-size: 2rem; /* Mniejszy rozmiar tekstu na urządzeniach mobilnych */
    }

    .banner__subheading {
      font-size: 1.2rem; /* Mniejszy rozmiar tekstu na urządzeniach mobilnych */
    }
  }

  @media screen and (max-width: 499px) {
    .banner__heading {
      font-size: 1.5rem; /* Jeszcze mniejszy rozmiar tekstu na bardzo małych ekranach */
    }

    .banner__subheading {
      font-size: 1rem; /* Jeszcze mniejszy rozmiar tekstu na bardzo małych ekranach */
    }
  }
{%- endstyle -%}

<div id="Banner-{{ section.id }}" class="banner video-background banner--content-align-{{ section.settings.desktop_content_alignment }}">
  <div class="banner__media media video-background">
    {%- if section.settings.video_url != blank -%}
      <video autoplay muted loop playsinline>
        <source src="{{ section.settings.video_url | escape }}" type="video/mp4">
        Your browser does not support HTML5 video.
      </video>
    {%- else -%}
      <div class="banner__media-placeholder">
        <p>No video available.</p>
      </div>
    {%- endif -%}
  </div>                                                                                                                 

  <div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width">
    <div class="banner__box content-container color-{{ section.settings.color_scheme }}">
      <h2 class="banner__heading">TentBox® już w Polsce!</h2>
      <p class="banner__subheading">Showroom Tarnowskie Góry, Gliwicka 200 zapraszamy!</p>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Video Banner",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "text",
      "id": "video_url",
      "label": "Video URL",
      "info": "Enter the URL of the video file (MP4 format)."
    },
    {
      "type": "range",
      "id": "image_overlay_opacity",
      "min": 0,
      "max": 100,
      "step": 10,
      "unit": "%",
      "label": "Image Overlay Opacity",
      "default": 0
    },
    {
      "type": "select",
      "id": "desktop_content_position",
      "options": [
        { "value": "top-left", "label": "Top Left" },
        { "value": "top-center", "label": "Top Center" },
        { "value": "top-right", "label": "Top Right" },
        { "value": "middle-left", "label": "Middle Left" },
        { "value": "middle-center", "label": "Middle Center" },
        { "value": "middle-right", "label": "Middle Right" },
        { "value": "bottom-left", "label": "Bottom Left" },
        { "value": "bottom-center", "label": "Bottom Center" },
        { "value": "bottom-right", "label": "Bottom Right" }
      ],
      "default": "middle-center",
      "label": "Desktop Content Position"
    },
    {
      "type": "select",
      "id": "desktop_content_alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center",
      "label": "Desktop Content Alignment"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Color Scheme",
      "default": "scheme-1"
    }
  ],
  "presets": [
    {
      "name": "Video Banner",
      "settings": {
        "video_url": "",
        "image_overlay_opacity": 0,
        "desktop_content_position": "middle-center",
        "desktop_content_alignment": "center",
        "color_scheme": "scheme-1"
      }
    }
  ]
}
{% endschema %}