/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Unexpected "{"
Line 16:3 Expected identifier but found "'section-image-banner.css'"
Line 18:0 Unexpected "{"
Line 18:1 Expected identifier but found "%"
Line 20:2 Unexpected "-"
Line 23:1 Expected identifier but found "%"
Line 25:0 Unexpected "{"
Line 25:1 Expected identifier but found "%"
Line 27:0 Unexpected "<"
... and 30 more hidden warnings

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

{%- comment -%}
  Color-Coordinated Hero Section with Enhanced Typography
  - Uses heavier weights of Avenir Next for emotional impact
  - Refined sizing & spacing
  - Maintains existing functionality & structure
{%- endcomment -%}

{%- assign colors = "skyblue,coralbloom,gladegreen,midnightindigo,knockoutpink,endlessorange,tidalteal,timelessblack" | split: ',' -%}

<style>
  /* Typography variables with enhanced weight system */
  :root {
    --font-family-primary: 'Avenir Next', sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-heavy: 800;
    --font-weight-black: 900;

    --line-height-tight: 1.05;
    --line-height-normal: 1.5;

    --letter-spacing-tight: -0.03em;
    --letter-spacing-normal: 0.02em;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-wider: 0.08em;
  }

  /* Base hero container */
  .banner.color-coordinated-hero {
    position: relative;
    background-color: var(--primary-color);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
  }

  .banner.color-coordinated-hero:hover {
    box-shadow: 0 0 0 3px var(--primary-color);
  }

  /* -------- DESKTOP (≥ 750px) -------- */
  @media screen and (min-width: 750px) {
    .banner.color-coordinated-hero {
      min-height: 600px;
    }
    .banner.color-coordinated-hero .hero-image-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
    .banner.color-coordinated-hero .hero-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    .banner.color-coordinated-hero .hero-image:first-of-type {
      opacity: 1;
    }
    .banner.color-coordinated-hero .mobile-hero {
      display: none !important;
    }
    .hero-content-overlay {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      transform: translateY(-50%);
      z-index: 2;
      color: #fff;
    }
  }

  /* -------- MOBILE (< 750px) -------- */
  @media screen and (max-width: 749px) {
    .banner.color-coordinated-hero {
      min-height: auto;
    }
    .banner.color-coordinated-hero .hero-image-container {
      position: relative;
      width: 100%;
      height: auto;
      aspect-ratio: 3/4;
    }
    .banner.color-coordinated-hero .desktop-hero {
      display: none !important;
    }
    .banner.color-coordinated-hero .mobile-hero {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    .banner.color-coordinated-hero .mobile-hero:first-of-type {
      opacity: 1;
    }
    .hero-content-overlay {
      position: absolute;
      top: 75%;
      left: 0;
      width: 100%;
      transform: translateY(-50%);
      z-index: 2;
      text-align: center;
      color: #fff;
    }
  }

  @media screen and (max-width: 375px) {
    .banner.color-coordinated-hero .hero-image-container {
      aspect-ratio: 3/3.8;
    }
  }

  /* Shared content wrapper */
  .hero-content-inner {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 3rem;
    box-sizing: border-box;
    text-align: left;
  }
  .hero-content-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
  }

  /* ENHANCED TYPOGRAPHY STYLES */
  .hero-eyebrow {
    font-family: var(--font-family-primary);
    font-size: 1.125rem;
    font-weight: var(--font-weight-heavy); /* Heavier than semibold for more impact */
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    margin-bottom: 0.75rem;
    opacity: 1;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }

  /* Main headline for maximum drama */
  .hero-content-overlay h1 {
    font-family: var(--font-family-primary);
    font-size: 5rem; /* Large & bold for desktop */
    font-weight: var(--font-weight-black); /* 900 weight for ultimate impact */
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    margin: 0 0 1.5rem;
    line-height: 0.95;
    color: #fff;
    transition: color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: translateZ(0);
  }

  /* OPTIONAL: Subheadline (if you need extra emotional copy) */
  .hero-subheadline {
    font-family: var(--font-family-primary);
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: #fff;
    margin-bottom: 1.5rem;
    opacity: 0.95;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }

  /* CTA with stronger presence */
  .hero-content-overlay .hero-cta-button {
    font-family: var(--font-family-primary);
    font-size: 1.05rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    background-color: rgba(255, 255, 255, 0.95);
    color: rgba(0, 0, 0, 0.9);
    padding: 0.85rem 2rem;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-block;
    position: relative;
    z-index: 2;
  }

  .hero-content-overlay .hero-cta-button:hover {
    background-color: var(--primary-color);
    color: #fff;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  }

  /* Remove extra horizontal lines */
  .section-color-coordinated-hero {
    border-bottom: none !important;
  }
  .color-coordinated-hero::after,
  .banner.color-coordinated-hero::after,
  .banner.color-coordinated-hero::before,
  .banner__media::after,
  .banner__media::before {
    display: none !important;
  }

  /* Tablet adjustments (≤ 989px) */
  @media screen and (max-width: 989px) {
    .hero-content-inner {
      padding: 0 2rem;
    }
    .hero-content-overlay h1 {
      font-size: 4.25rem;
      letter-spacing: -0.02em;
      line-height: 1;
    }
    .hero-eyebrow {
      font-size: 1rem;
    }
  }

  /* Mobile adjustments (≤ 749px) */
  @media screen and (max-width: 749px) {
    .hero-content-inner {
      text-align: center;
      padding: 0 1.5rem;
    }
    .hero-content-overlay h1 {
      font-size: 3rem;
      margin-bottom: 1.25rem;
      letter-spacing: -0.01em;
      line-height: 1.05;
    }
    .hero-content-overlay .hero-cta-button {
      font-size: 0.9rem;
      padding: 0.7rem 1.5rem;
      letter-spacing: 0.04em;
    }
    .hero-eyebrow {
      font-size: 0.85rem;
      letter-spacing: 0.06em;
    }
    .hero-subheadline {
      font-size: 1rem;
      margin-bottom: 1rem;
    }
  }

  /* More granular mobile tweaks (≤ 375px) */
  @media screen and (max-width: 375px) {
    .hero-content-overlay h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      letter-spacing: -0.01em;
    }
    .hero-eyebrow {
      font-size: 0.75rem;
      margin-bottom: 0.4rem;
    }
    .hero-subheadline {
      font-size: 0.9rem;
    }
    .hero-content-overlay .hero-cta-button {
      font-size: 0.85rem;
      padding: 0.6rem 1.3rem;
    }
  }

  /* Optional fade-in animation for text */
  @media (prefers-reduced-motion: no-preference) {
    .hero-content-overlay h1 {
      opacity: 0;
      transform: translateY(10px);
      animation: fadeInUp 0.8s ease-out forwards;
      animation-delay: 0.2s;
    }
    .hero-eyebrow {
      opacity: 0;
      transform: translateY(5px);
      animation: fadeInUp 0.6s ease-out forwards;
    }
    .hero-subheadline {
      opacity: 0;
      transform: translateY(5px);
      animation: fadeInUp 0.7s ease-out forwards;
      animation-delay: 0.3s;
    }
    .hero-content-overlay .hero-cta-button {
      opacity: 0;
      transform: translateY(10px);
      animation: fadeInUp 0.8s ease-out forwards;
      animation-delay: 0.4s;
    }
    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
</style>

<div
  id="Banner-{{ section.id }}"
  class="banner banner--{{ section.settings.image_height }} color-coordinated-hero
    {% if section.settings.show_text_below %}banner--mobile-bottom{% endif %}
    {% if section.settings.show_text_box == false %}banner--desktop-transparent{% endif %}
    {% if settings.animations_reveal_on_scroll %}scroll-trigger animate--fade-in{% endif %} section-color-coordinated-hero"
>
  <!-- Hero Image Container -->
  <div class="banner__media hero-image-container">
    {%- for color in colors -%}
      <!-- Desktop Hero Image -->
      <img
        src="{{ 'herodesk-' | append: color | append: '.webp' | asset_url }}"
        alt="{{ color | capitalize }} Hero Image"
        class="hero-image desktop-hero {{ color }}"
        data-color="{{ color }}"
        loading="lazy"
        decoding="async"
      >
      <!-- Mobile Hero Image -->
      <img
        src="{{ 'heromobile-' | append: color | append: '.webp' | asset_url }}"
        alt="{{ color | capitalize }} Mobile Hero Image"
        class="hero-image mobile-hero {{ color }}"
        data-color="{{ color }}"
        loading="lazy"
        decoding="async"
      >
    {%- endfor -%}
  </div>

  <!-- Text Overlay -->
  <div class="hero-content-overlay">
    <div class="hero-content-inner">
      <div class="hero-content-wrapper">
        <!-- Eyebrow text -->
        <p class="hero-eyebrow">Apex Harmony Stethoscope</p>
        
        <!-- Main Headline -->
        <h1>NEVER MISS A BEAT</h1>
        
        <!-- Optional Subheadline (remove if not needed) -->
        {#
        <p class="hero-subheadline">
          Experience unmatched precision & clarity with every auscultation.
        </p>
        #}

        <!-- CTA Button -->
        <a href="/collections" class="hero-cta-button">VIEW COLLECTION</a>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Fallback for image loading errors
    var heroImages = document.querySelectorAll('.hero-image');
    heroImages.forEach(function(img) {
      img.addEventListener('error', function(e) {
        if (!e.target.src.includes('fallback-hero.webp')) {
          e.target.src = "{{ 'fallback-hero.webp' | asset_url }}";
        }
      });
    });

    // Enhanced headline color change on CTA hover
    var ctaButton = document.querySelector('.hero-cta-button');
    var heroHeadline = document.querySelector('.hero-content-overlay h1');
    if (ctaButton && heroHeadline) {
      ctaButton.addEventListener('mouseenter', function() {
        heroHeadline.style.color = 'var(--primary-color)';
        heroHeadline.style.textShadow = '0 2px 10px rgba(0, 0, 0, 0.2)';
      });
      ctaButton.addEventListener('mouseleave', function() {
        heroHeadline.style.color = '#fff';
        heroHeadline.style.textShadow = '0 2px 6px rgba(0, 0, 0, 0.15)';
      });
    }

    // Setup color swapping
    window.changeHeroColor = function(color) {
      // Handle desktop images
      var desktopImages = document.querySelectorAll('.desktop-hero');
      desktopImages.forEach(function(img) {
        img.style.opacity = (img.classList.contains(color)) ? '1' : '0';
      });
      
      // Handle mobile images
      var mobileImages = document.querySelectorAll('.mobile-hero');
      mobileImages.forEach(function(img) {
        img.style.opacity = (img.classList.contains(color)) ? '1' : '0';
      });
      
      // Update primary color variable
      document.documentStyle = document.documentStyle || {};
      document.documentStyle.setProperty('--primary-color', getColorValue(color));
      document.documentElement.style.setProperty('--primary-color', getColorValue(color));
    };

    // Helper function to get color values
    function getColorValue(colorName) {
      var colorMap = {
        'skyblue': '#43A5DC',
        'coralbloom': '#FF6B6B',
        'gladegreen': '#4CAF50',
        'midnightindigo': '#3F51B5',
        'knockoutpink': '#E91E63',
        'endlessorange': '#FF9800',
        'tidalteal': '#009688',
        'timelessblack': '#212121'
      };
      return colorMap[colorName] || '#43A5DC';
    }
  });
</script>

{% schema %}
{
  "name": "Color-Coordinated Hero",
  "class": "section-color-coordinated-hero",
  "settings": [
    {
      "type": "select",
      "id": "image_height",
      "options": [
        { "value": "adapt", "label": "Adapt" },
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" }
      ],
      "default": "medium",
      "label": "Image Height"
    },
    {
      "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": "color_scheme",
      "options": [
        { "value": "scheme-1", "label": "Scheme 1" },
        { "value": "scheme-2", "label": "Scheme 2" },
        { "value": "scheme-3", "label": "Scheme 3" }
      ],
      "default": "scheme-1",
      "label": "Color Scheme"
    },
    {
      "type": "checkbox",
      "id": "show_text_box",
      "default": true,
      "label": "Show Text Box"
    },
    {
      "type": "checkbox",
      "id": "stack_images_on_mobile",
      "default": true,
      "label": "Stack Images on Mobile"
    },
    {
      "type": "select",
      "id": "mobile_content_alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center",
      "label": "Mobile Content Alignment"
    },
    {
      "type": "checkbox",
      "id": "show_text_below",
      "default": true,
      "label": "Show Text Below"
    }
  ],
  "blocks": [],
  "presets": [
    {
      "name": "Color-Coordinated Hero"
    }
  ]
}
{% endschema %}