/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:10 Unexpected "/"
Line 22:1 Expected identifier but found "%"
Line 24:0 Unexpected "{"
Line 24:1 Expected identifier but found "%"
Line 25:23 Unexpected "{"
Line 25:32 Expected ":"
Line 25:39 Unexpected "{"
Line 27:15 Expected identifier but found whitespace
... and 95 more hidden warnings

**/
{%- comment -%}
  sections/camps-schools-hero.liquid
  Section A: Hero
  Full-width hero with background image, clean typography, dual CTAs
  
  REQUIRES: tripshed-typography.css in theme assets
{%- endcomment -%}

{% style %}
  #camps-schools-hero-{{ section.id }} {
    position: relative;
    min-height: {{ section.settings.hero_height }}vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ts-font-primary, Poppins, system-ui, sans-serif);
    overflow: hidden;
  }

  #camps-schools-hero-{{ section.id }} .cs-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--ts-forest, #294c31);
  }

  #camps-schools-hero-{{ section.id }} .cs-hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #camps-schools-hero-{{ section.id }} .cs-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(26, 58, 46, {{ section.settings.overlay_top }}) 0%,
      rgba(26, 58, 46, {{ section.settings.overlay_bottom }}) 100%
    );
  }

  #camps-schools-hero-{{ section.id }} .cs-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    padding: 120px 32px 140px;
  }

  #camps-schools-hero-{{ section.id }} .cs-hero__kicker {
    display: inline-block;
    font-size: var(--ts-text-base, 1.125rem);
    font-weight: var(--ts-font-semibold, 600);
    letter-spacing: var(--ts-tracking-widest, 0.14em);
    text-transform: uppercase;
    color: var(--ts-gold, #ffc800);
    margin-bottom: 28px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  #camps-schools-hero-{{ section.id }} .cs-hero__title {
    margin: 0 0 32px;
    font-size: var(--ts-h1, clamp(2.5rem, 5.5vw, 3.75rem));
    font-weight: var(--ts-font-bold, 700);
    line-height: var(--ts-leading-tight, 1.15);
    color: var(--ts-white, #ffffff);
    letter-spacing: var(--ts-tracking-tight, -0.02em);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 8px 30px rgba(0, 0, 0, 0.2);
  }

  #camps-schools-hero-{{ section.id }} .cs-hero__lead {
    margin: 0 0 44px;
    font-size: var(--ts-text-xl, 1.375rem);
    font-weight: var(--ts-font-normal, 400);
    line-height: var(--ts-leading-relaxed, 1.75);
    color: rgba(255, 255, 255, 0.95);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  }

  #camps-schools-hero-{{ section.id }} .cs-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    margin-bottom: 36px;
  }

  #camps-schools-hero-{{ section.id }} .cs-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 40px;
    font-size: var(--ts-text-base, 1.125rem);
    font-weight: var(--ts-font-semibold, 600);
    text-decoration: none;
    border-radius: 999px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    border: 2px solid transparent;
  }

  #camps-schools-hero-{{ section.id }} .cs-hero__btn:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 3px;
  }

  #camps-schools-hero-{{ section.id }} .cs-hero__btn--primary {
    background: var(--ts-gold, #ffc800);
    color: #1a1a1a;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
  }

  #camps-schools-hero-{{ section.id }} .cs-hero__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
  }

  #camps-schools-hero-{{ section.id }} .cs-hero__btn--secondary {
    background: transparent;
    color: var(--ts-white, #ffffff);
    border-color: rgba(255, 255, 255, 0.6);
  }

  #camps-schools-hero-{{ section.id }} .cs-hero__btn--secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.9);
  }

  #camps-schools-hero-{{ section.id }} .cs-hero__trust {
    font-size: var(--ts-text-base, 1.125rem);
    font-weight: var(--ts-font-medium, 500);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  }

  @media (max-width: 768px) {
    #camps-schools-hero-{{ section.id }} {
      min-height: auto;
    }

    #camps-schools-hero-{{ section.id }} .cs-hero__content {
      padding: 100px 24px 120px;
    }

    #camps-schools-hero-{{ section.id }} .cs-hero__ctas {
      flex-direction: column;
      align-items: center;
    }

    #camps-schools-hero-{{ section.id }} .cs-hero__btn {
      width: 100%;
      max-width: 340px;
      padding: 18px 32px;
    }
  }
{% endstyle %}

<section id="camps-schools-hero-{{ section.id }}" class="cs-hero" aria-labelledby="cs-hero-title-{{ section.id }}">
  <div class="cs-hero__bg">
    {% if section.settings.image != blank %}
      {{ section.settings.image | image_url: width: 2400 | image_tag:
        loading: 'eager',
        class: 'cs-hero__bg-img',
        alt: section.settings.image_alt
      }}
    {% endif %}
    <div class="cs-hero__overlay" aria-hidden="true"></div>
  </div>

  <div class="cs-hero__content">
    {% if section.settings.kicker != blank %}
      <p class="cs-hero__kicker">{{ section.settings.kicker | escape }}</p>
    {% endif %}

    <h1 id="cs-hero-title-{{ section.id }}" class="cs-hero__title">
      {{ section.settings.heading | escape }}
    </h1>

    {% if section.settings.lead != blank %}
      <p class="cs-hero__lead">{{ section.settings.lead }}</p>
    {% endif %}

    <div class="cs-hero__ctas">
      {% if section.settings.cta_primary_text != blank %}
        <a href="{{ section.settings.cta_primary_link | default: '#institutional-inquiry' }}" class="cs-hero__btn cs-hero__btn--primary">
          {{ section.settings.cta_primary_text | escape }}
        </a>
      {% endif %}
      {% if section.settings.cta_secondary_text != blank %}
        <a href="{{ section.settings.cta_secondary_link | default: '#' }}" class="cs-hero__btn cs-hero__btn--secondary">
          {{ section.settings.cta_secondary_text | escape }}
        </a>
      {% endif %}
    </div>

    {% if section.settings.trust_line != blank %}
      <p class="cs-hero__trust">{{ section.settings.trust_line }}</p>
    {% endif %}
  </div>
</section>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('#camps-schools-hero-{{ section.id }} a[href^="#"]').forEach(function(anchor) {
      anchor.addEventListener('click', function(e) {
        var targetId = this.getAttribute('href');
        if (targetId === '#') return;
        var target = document.querySelector(targetId);
        if (target) {
          e.preventDefault();
          target.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      });
    });
  });
</script>

{% schema %}
{
  "name": "CS Hero",
  "tag": "section",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Background Image",
      "info": "Recommended: 2400x1350px. Professional outdoor imagery."
    },
    {
      "type": "text",
      "id": "image_alt",
      "label": "Image Alt Text",
      "default": "Outdoor education program with students and guides"
    },
    {
      "type": "range",
      "id": "hero_height",
      "label": "Hero Height (vh)",
      "min": 50,
      "max": 100,
      "step": 5,
      "default": 85
    },
    {
      "type": "range",
      "id": "overlay_top",
      "label": "Overlay Opacity (Top)",
      "min": 0.3,
      "max": 0.9,
      "step": 0.05,
      "default": 0.6
    },
    {
      "type": "range",
      "id": "overlay_bottom",
      "label": "Overlay Opacity (Bottom)",
      "min": 0.4,
      "max": 0.95,
      "step": 0.05,
      "default": 0.75
    },
    {
      "type": "header",
      "content": "Content"
    },
    {
      "type": "text",
      "id": "kicker",
      "label": "Kicker",
      "default": "Camps & Schools"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Outdoor Programming Built for Institutions"
    },
    {
      "type": "textarea",
      "id": "lead",
      "label": "Lead Paragraph",
      "default": "Structured canoe expeditions and outdoor education programs with the documentation, communication, and risk management your organization requires."
    },
    {
      "type": "header",
      "content": "Primary CTA"
    },
    {
      "type": "text",
      "id": "cta_primary_text",
      "label": "Primary CTA Text",
      "default": "Schedule a 20-Minute Planning Call"
    },
    {
      "type": "text",
      "id": "cta_primary_link",
      "label": "Primary CTA Link",
      "default": "#institutional-inquiry"
    },
    {
      "type": "header",
      "content": "Secondary CTA"
    },
    {
      "type": "text",
      "id": "cta_secondary_text",
      "label": "Secondary CTA Text",
      "default": "Request a Program Overview"
    },
    {
      "type": "text",
      "id": "cta_secondary_link",
      "label": "Secondary CTA Link",
      "default": "#programs"
    },
    {
      "type": "header",
      "content": "Trust Line"
    },
    {
      "type": "textarea",
      "id": "trust_line",
      "label": "Trust Line (below CTAs)",
      "default": "20+ years of experience across Algonquin, Killarney, and Temagami."
    }
  ],
  "presets": [
    {
      "name": "CS Hero"
    }
  ]
}
{% endschema %}