/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Unexpected "{"
Line 16:3 Expected identifier but found "'section-espionage-feature.css'"
Line 18:0 Unexpected "{"
Line 18:1 Expected identifier but found "%"
Line 19:20 Unexpected "{"
Line 19:29 Expected ":"
Line 19:35 Unexpected ","
Line 20:20 Unexpected "{"
Line 20:29 Expected ":"
... and 185 more hidden warnings

**/
{{ 'section-espionage-feature.css' | asset_url | stylesheet_tag }}

{%- style -%}
  #shopify-section-{{ section.id }},
  #shopify-section-{{ section.id }}.section,
  #shopify-section-{{ section.id }}.shopify-section {
    --ef-bg: {{ section.settings.background_color }};
    --ef-text: {{ section.settings.text_color }};
    --ef-page-width: {{ section.settings.page_width }}px;
    --ef-section-padding-top: {{ section.settings.section_padding_top }}px;
    --ef-section-padding-bottom: {{ section.settings.section_padding_bottom }}px;
    --ef-content-max-width: {{ section.settings.content_max_width }}px;
    --ef-eyebrow-size: {{ section.settings.eyebrow_size }}px;
    --ef-heading-size: {{ section.settings.heading_size }}px;
    --ef-text-size: {{ section.settings.text_size }}px;
    --ef-eyebrow-bottom: {{ section.settings.eyebrow_spacing_bottom }}px;
    --ef-heading-bottom: {{ section.settings.heading_spacing_bottom }}px;
    --ef-copy-bottom: {{ section.settings.copy_spacing_bottom }}px;
    --ef-text-block-bottom: {{ section.settings.text_block_spacing_bottom }}px;
    --ef-image-width: {{ section.settings.image_width }}px;
    --ef-image-height: {{ section.settings.image_height }}px;
    --ef-image-padding-top: {{ section.settings.image_padding_top }}px;
    --ef-image-padding-bottom: {{ section.settings.image_padding_bottom }}px;
    --ef-image-fit: {{ section.settings.image_fit }};
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background: var(--ef-bg);
  }

  .section + #shopify-section-{{ section.id }}.section,
  #shopify-section-{{ section.id }}.section + .section,
  #shopify-section-{{ section.id }}.shopify-section + .shopify-section {
    margin-top: 0 !important;
  }

  .section + .espionage-feature-section,
  .espionage-feature-section + .section,
  .espionage-feature-section + .espionage-feature-section {
    margin-top: 0 !important;
  }

  @media screen and (max-width: 749px) {
    #shopify-section-{{ section.id }} {
      --ef-section-padding-top: {{ section.settings.section_padding_top_mobile }}px;
      --ef-section-padding-bottom: {{ section.settings.section_padding_bottom_mobile }}px;
      --ef-eyebrow-size: {{ section.settings.eyebrow_size_mobile }}px;
      --ef-heading-size: {{ section.settings.heading_size_mobile }}px;
      --ef-text-size: {{ section.settings.text_size_mobile }}px;
      --ef-text-block-bottom: {{ section.settings.text_block_spacing_bottom_mobile }}px;
      --ef-image-height: {{ section.settings.image_height_mobile }}px;
    }
  }

  #shopify-section-{{ section.id }} .espionage-feature {
    background: var(--ef-bg);
    color: var(--ef-text);
    padding-top: var(--ef-section-padding-top);
    padding-bottom: var(--ef-section-padding-bottom);
  }

  #shopify-section-{{ section.id }} .espionage-feature__inner {
    width: min(100% - 3rem, var(--ef-page-width));
    margin-inline: auto;
    text-align: center;
  }

  #shopify-section-{{ section.id }} .espionage-feature__text {
    max-width: var(--ef-content-max-width);
    margin-inline: auto;
    margin-bottom: var(--ef-text-block-bottom);
  }

  #shopify-section-{{ section.id }} .espionage-feature__eyebrow,
  #shopify-section-{{ section.id }} .espionage-feature__heading,
  #shopify-section-{{ section.id }} .espionage-feature__copy,
  #shopify-section-{{ section.id }} .espionage-feature__copy p {
    color: inherit;
  }

  #shopify-section-{{ section.id }} .espionage-feature__eyebrow {
    margin: 0 0 var(--ef-eyebrow-bottom);
    font-size: var(--ef-eyebrow-size);
    font-weight: 700;
    line-height: 1.2;
  }

  #shopify-section-{{ section.id }} .espionage-feature__heading {
    margin: 0 0 var(--ef-heading-bottom);
    font-size: var(--ef-heading-size);
    font-weight: 700;
    line-height: 1.1;
  }

  #shopify-section-{{ section.id }} .espionage-feature__copy {
    margin-bottom: var(--ef-copy-bottom);
    font-size: var(--ef-text-size);
    line-height: 1.45;
  }

  #shopify-section-{{ section.id }} .espionage-feature__copy p {
    margin-top: 0;
    margin-bottom: 0;
  }

  #shopify-section-{{ section.id }} .espionage-feature__image-space {
    display: block;
    width: min(100%, var(--ef-image-width));
    height: var(--ef-image-height);
    margin-inline: auto;
    padding-top: var(--ef-image-padding-top);
    padding-bottom: var(--ef-image-padding-bottom);
    box-sizing: content-box;
  }

  #shopify-section-{{ section.id }} .espionage-feature__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--ef-image-fit);
  }

  #shopify-section-{{ section.id }} .espionage-feature__placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 160px;
    place-items: center;
    border: 2px dashed rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    line-height: 1.2;
  }

  #shopify-section-{{ section.id }} .espionage-feature__placeholder-svg {
    width: 100%;
    height: 100%;
    min-height: 160px;
    border: 2px dashed rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
    fill: rgba(255, 255, 255, 0.3);
  }

  @media screen and (max-width: 749px) {
    #shopify-section-{{ section.id }} .espionage-feature__inner {
      width: min(100% - 2rem, var(--ef-page-width));
    }
  }
{%- endstyle -%}

<section class="espionage-feature color-{{ section.settings.color_scheme }}">
  <div class="espionage-feature__inner">
    <div class="espionage-feature__text">
      {%- if section.settings.eyebrow != blank -%}
        <p class="espionage-feature__eyebrow">
          {{ section.settings.eyebrow | escape }}
        </p>
      {%- endif -%}

      {%- if section.settings.heading != blank -%}
        <h2 class="espionage-feature__heading">
          {{ section.settings.heading | escape }}
        </h2>
      {%- endif -%}

      {%- if section.settings.text != blank -%}
        <div class="espionage-feature__copy rte">
          {{ section.settings.text }}
        </div>
      {%- endif -%}
    </div>

    <div class="espionage-feature__image-space">
      {%- if section.settings.image != blank -%}
        {%- capture image_sizes -%}(min-width: 990px) {{ section.settings.image_width }}px, calc(100vw - 3rem){%- endcapture -%}
        {{
          section.settings.image
          | image_url: width: 1800
          | image_tag:
            loading: 'lazy',
            class: 'espionage-feature__image',
            widths: '375, 550, 750, 900, 1100, 1300, 1500, 1800',
            sizes: image_sizes
        }}
      {%- else -%}
        <div class="espionage-feature__placeholder">
          Select image in section settings
        </div>
      {%- endif -%}
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Espionage feature",
  "tag": "section",
  "class": "section espionage-feature-section",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Upload/select image"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Color scheme",
      "default": "background-1"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "Content"
    },
    {
      "type": "text",
      "id": "eyebrow",
      "label": "Small text",
      "default": "Path Tracing With Neural Rendering"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Enter the World of Espionage"
    },
    {
      "type": "richtext",
      "id": "text",
      "label": "Description",
      "default": "<p>Experience next-level realism in 007 First Light with path tracing, powered by GeForce RTX 50 Series, delivering physically accurate shadows, reflections, and global illumination.</p>"
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "range",
      "id": "page_width",
      "min": 700,
      "max": 1600,
      "step": 20,
      "unit": "px",
      "label": "Section width",
      "default": 1200
    },
    {
      "type": "range",
      "id": "content_max_width",
      "min": 300,
      "max": 1000,
      "step": 10,
      "unit": "px",
      "label": "Text max width",
      "default": 650
    },
    {
      "type": "range",
      "id": "section_padding_top",
      "min": 0,
      "max": 200,
      "step": 4,
      "unit": "px",
      "label": "Top padding",
      "default": 48
    },
    {
      "type": "range",
      "id": "section_padding_bottom",
      "min": 0,
      "max": 240,
      "step": 4,
      "unit": "px",
      "label": "Bottom padding",
      "default": 64
    },
    {
      "type": "range",
      "id": "section_padding_top_mobile",
      "min": 0,
      "max": 160,
      "step": 4,
      "unit": "px",
      "label": "Mobile top padding",
      "default": 32
    },
    {
      "type": "range",
      "id": "section_padding_bottom_mobile",
      "min": 0,
      "max": 180,
      "step": 4,
      "unit": "px",
      "label": "Mobile bottom padding",
      "default": 48
    },
    {
      "type": "header",
      "content": "Text sizes"
    },
    {
      "type": "range",
      "id": "eyebrow_size",
      "min": 8,
      "max": 40,
      "step": 1,
      "unit": "px",
      "label": "Small text size",
      "default": 13
    },
    {
      "type": "range",
      "id": "heading_size",
      "min": 16,
      "max": 90,
      "step": 1,
      "unit": "px",
      "label": "Heading size",
      "default": 32
    },
    {
      "type": "range",
      "id": "text_size",
      "min": 10,
      "max": 36,
      "step": 1,
      "unit": "px",
      "label": "Description size",
      "default": 14
    },
    {
      "type": "range",
      "id": "eyebrow_size_mobile",
      "min": 8,
      "max": 30,
      "step": 1,
      "unit": "px",
      "label": "Mobile small text size",
      "default": 11
    },
    {
      "type": "range",
      "id": "heading_size_mobile",
      "min": 16,
      "max": 56,
      "step": 1,
      "unit": "px",
      "label": "Mobile heading size",
      "default": 26
    },
    {
      "type": "range",
      "id": "text_size_mobile",
      "min": 10,
      "max": 26,
      "step": 1,
      "unit": "px",
      "label": "Mobile description size",
      "default": 13
    },
    {
      "type": "header",
      "content": "Text spacing"
    },
    {
      "type": "range",
      "id": "eyebrow_spacing_bottom",
      "min": 0,
      "max": 80,
      "step": 2,
      "unit": "px",
      "label": "Space below small text",
      "default": 8
    },
    {
      "type": "range",
      "id": "heading_spacing_bottom",
      "min": 0,
      "max": 80,
      "step": 2,
      "unit": "px",
      "label": "Space below heading",
      "default": 10
    },
    {
      "type": "range",
      "id": "copy_spacing_bottom",
      "min": 0,
      "max": 80,
      "step": 2,
      "unit": "px",
      "label": "Space below description",
      "default": 0
    },
    {
      "type": "range",
      "id": "text_block_spacing_bottom",
      "min": 0,
      "max": 220,
      "step": 4,
      "unit": "px",
      "label": "Space between text and image area",
      "default": 48
    },
    {
      "type": "range",
      "id": "text_block_spacing_bottom_mobile",
      "min": 0,
      "max": 160,
      "step": 4,
      "unit": "px",
      "label": "Mobile space between text and image area",
      "default": 32
    },
    {
      "type": "header",
      "content": "Image"
    },
    {
      "type": "range",
      "id": "image_width",
      "min": 300,
      "max": 1400,
      "step": 20,
      "unit": "px",
      "label": "Image width",
      "default": 900
    },
    {
      "type": "range",
      "id": "image_height",
      "min": 120,
      "max": 900,
      "step": 10,
      "unit": "px",
      "label": "Image height",
      "default": 420
    },
    {
      "type": "range",
      "id": "image_height_mobile",
      "min": 100,
      "max": 700,
      "step": 10,
      "unit": "px",
      "label": "Mobile image height",
      "default": 240
    },
    {
      "type": "select",
      "id": "image_fit",
      "label": "Image fit",
      "default": "contain",
      "options": [
        {
          "value": "contain",
          "label": "Show full image"
        },
        {
          "value": "cover",
          "label": "Fill image area"
        }
      ]
    },
    {
      "type": "range",
      "id": "image_padding_top",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "Image area top padding",
      "default": 0
    },
    {
      "type": "range",
      "id": "image_padding_bottom",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "Image area bottom padding",
      "default": 0
    }
  ],
  "presets": [
    {
      "name": "Espionage feature"
    }
  ]
}
{% endschema %}