{% set v = module.content %}
{% set s = module.style %}
{% set a = module.advanced %}

{# Preload hero images if needed #}
{% if v.image.src and v.image_priority == 'high' %}
  <link rel="preload" as="image" href="{{ v.image.src }}" fetchpriority="high">
{% endif %}

{# Main card element with custom properties - now using theme variables as fallbacks #}
<article class="c-card c-card--{{ v.variant }}{{ a.custom_class ? ' ' ~ a.custom_class : '' }}"
  {% if a.custom_id %}id="{{ a.custom_id }}"{% endif %}
  style="
    --card-p: {{ s.padding }};
    --card-r: {{ s.radius }};
    --card-bw: {{ s.border_width }};
    --card-bc: {% if s.border_color.color %}rgba({{ s.border_color.color|convert_rgb }}, {{ s.border_color.opacity / 100 }}){% else %}var(--color-border, #e5e7eb){% endif %};
    --card-bg: {% if s.bg_color.color %}rgba({{ s.bg_color.color|convert_rgb }}, {{ s.bg_color.opacity / 100 }}){% else %}var(--color-bg, #ffffff){% endif %};
    --card-fg: {% if s.fg_color.color %}rgba({{ s.fg_color.color|convert_rgb }}, {{ s.fg_color.opacity / 100 }}){% else %}var(--color-text, #111827){% endif %};
    --card-img-minh: {{ s.image_min_h }};
    --card-minh: {{ s.card_min_h }};
    --card-maxw: {{ s.max_w == 'none' ? 'initial' : s.max_w }};
    {% if s.image_aspect != 'auto' %}--card-aspect: {{ s.image_aspect }};{% endif %}
    {# Per-instance values live here (not in shared :where() blocks) so two
       differently-configured cards on one page don't overwrite each other. #}
    --card-shadow: {% if s.shadow == 'sm' %}var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06)){% elif s.shadow == 'md' %}var(--shadow-md, 0 4px 10px rgba(0,0,0,0.10)){% elif s.shadow == 'lg' %}var(--shadow-lg, 0 10px 24px rgba(0,0,0,0.14)){% elif s.shadow == 'xl' %}var(--shadow-xl, 0 20px 40px rgba(0,0,0,0.18)){% else %}none{% endif %};
    --card-transition: {% if s.disable_transitions %}none{% else %}var(--transition, transform 0.15s ease, box-shadow 0.15s ease){% endif %};
    --card-img-fit: {{ s.image_fit|default('cover') }};
    --card-img-w: {{ (s.image_fit == 'cover' or s.image_fit == 'fill') ? '100%' : 'auto' }};
    --card-img-h: {{ (s.image_fit == 'cover' or s.image_fit == 'fill') ? '100%' : 'auto' }};
    --card-img-maxw: {{ (s.image_fit == 'cover' or s.image_fit == 'fill') ? 'none' : '100%' }};
    --card-img-maxh: {{ (s.image_fit == 'cover' or s.image_fit == 'fill') ? 'none' : '100%' }};
    --card-media-bg: {{ (s.image_fit == 'contain' or s.image_fit == 'scale-down') ? 'var(--color-bg-secondary, #f9fafb)' : 'transparent' }};
    --hover-scale: {{ s.hover_raise ? 'scale(1.02) translateY(-2px)' : 'none' }};
    --hover-shadow: {{ s.hover_shadow ? '0 12px 28px rgba(0,0,0,0.18)' : 'var(--card-shadow)' }};
    --label-bg: {% if s.label_color.color %}rgba({{ s.label_color.color|convert_rgb }}, {{ s.label_color.opacity / 100 }}){% else %}{{ theme.core.colors.primary.color or '#007bff' }}{% endif %};
  "
  {% if s.enable_container_queries %}data-container-queries="true"{% endif %}
>
  {# Corner-flag label if present #}
  {% if v.badge %}
    <span class="card-flag" aria-label="Badge: {{ v.badge }}">{{ v.badge }}</span>
  {% endif %}

  {# Image for default, logo-over-image, and image-right variants #}
  {% if v.variant in ['default', 'logo-over-image', 'image-right', 'full-background'] and v.image.src %}
    <div class="c-card__media" {% if not v.image_alt %}aria-hidden="true"{% endif %}>
      {% set loading = v.image_priority == 'high' ? 'eager' : (v.image_priority == 'low' ? 'lazy' : v.image.loading) %}
      {% set fetchpriority = v.image_priority == 'high' ? 'high' : (v.image_priority == 'low' ? 'low' : 'auto') %}

      {# Check if HubSpot has set explicit dimensions (meaning size is restricted) #}
      {% set has_explicit_size = v.image.width and v.image.height %}
      {% set img_style = '' %}
      {% if has_explicit_size %}
        {# Respect HubSpot's sizing - don't let CSS override it #}
        {% set img_style = 'max-height: ' ~ v.image.height ~ 'px !important; width: auto !important; height: auto !important;' %}
      {% endif %}

      {# Check if image is HubSpot-hosted (resize_image_url only works with HubSpot URLs) #}
      {% set is_hubspot_image = v.image.src is string_containing 'hubspot' or v.image.src is string_containing 'hubspotusercontent' or v.image.src is string_containing 'f.hubspotusercontent' %}

      <img
        src="{{ v.image.src }}"
        alt="{{ v.image_alt|default('', true)|escape }}"
        loading="{{ loading }}"
        {% if fetchpriority != 'auto' %}fetchpriority="{{ fetchpriority }}"{% endif %}
        decoding="async"
        {% if v.image.width %}width="{{ v.image.width }}"{% endif %}
        {% if v.image.height %}height="{{ v.image.height }}"{% endif %}
        {% if img_style %}style="{{ img_style }}"{% endif %}
        {% if is_hubspot_image %}
        sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
        srcset="{{ v.image.src|resize_image_url(320) }} 320w,
                {{ v.image.src|resize_image_url(480) }} 480w,
                {{ v.image.src|resize_image_url(640) }} 640w,
                {{ v.image.src|resize_image_url(768) }} 768w,
                {{ v.image.src|resize_image_url(1024) }} 1024w,
                {{ v.image.src|resize_image_url(1280) }} 1280w,
                {{ v.image.src|resize_image_url(1536) }} 1536w"
        {% endif %}
      >

      {# Logo overlay for logo-over-image variant #}
      {% set logo_url = v.logo.src|default(v.logo) %}
      {% if v.variant == 'logo-over-image' and logo_url %}
        <img class="c-card__logo"
             src="{{ logo_url }}"
             alt=""
             aria-hidden="true"
             loading="lazy"
             width="{{ v.logo.width }}"
             height="{{ v.logo.height }}">
      {% endif %}
    </div>
  {% endif %}

  {# Card body content #}
  <div class="c-card__body">
    {% if v.eyebrow %}
      <p class="c-card__eyebrow">{{ v.eyebrow|escape }}</p>
    {% endif %}

    <h3 class="c-card__title">{{ v.title|escape }}</h3>

    {% if v.content %}
      <div class="c-card__text">{{ v.content|sanitize_html }}</div>
    {% endif %}

    {% if v.meta %}
      <p class="c-card__meta">{{ v.meta|escape }}</p>
    {% endif %}

    {# CTA button or link #}
    {% if v.cta_url.href and v.cta_text %}
      {% set target_attrs = v.new_tab ? 'target="_blank" rel="noopener noreferrer"' : '' %}
      {% set aria_label = v.cta_aria_label ? 'aria-label="' ~ v.cta_aria_label|escape ~ '"' : '' %}

      {% if v.cta_as_button %}
        <a class="c-card__btn"
           href="{{ v.cta_url.href }}"
           {{ target_attrs }}
           {{ aria_label }}>
          <span>{{ v.cta_text|escape }}</span>
        </a>
      {% else %}
        <a class="c-card__link"
           href="{{ v.cta_url.href }}"
           {{ target_attrs }}
           {{ aria_label }}>
          {{ v.cta_text|escape }}
          <span aria-hidden="true">→</span>
        </a>
      {% endif %}
    {% endif %}
  </div>
</article>

{# Structured data if enabled #}
{% if a.structured_data %}
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "{{ a.schema_type }}",
    "name": "{{ v.title|escape_json }}",
    {% if v.content %}"description": "{{ v.content|striptags|truncate(160)|escape_json }}",{% endif %}
    {% if v.image.src %}"image": "{{ v.image.src|absolute_url }}",{% endif %}
    {% if v.cta_url.href %}"url": "{{ v.cta_url.href|absolute_url }}"{% endif %}
  }
  </script>
{% endif %}

{# Inline critical CSS - leveraging theme styles #}
{% require_css %}
<style>
  :where(.c-card) {
    container-type: inline-size;
    contain: layout style paint;
    display: grid;
    gap: 0.75rem;
    position: relative;
    color: var(--card-fg);
    background: var(--card-bg);
    border: var(--card-bw) solid var(--card-bc);
    border-radius: var(--card-r);
    padding: var(--card-p);
    min-height: var(--card-minh);
    max-width: var(--card-maxw);
    /* Use theme shadow variables */
    box-shadow: var(--card-shadow);
    /* Per-instance transition value (none when disabled) — set in inline style. */
    transition: var(--card-transition, transform 0.15s ease, box-shadow 0.15s ease);
  }

  :where(.c-card__media) {
    position: relative;
    overflow: hidden;
    border-radius: calc(var(--card-r) - 2px);
    aspect-ratio: var(--card-aspect, auto);
    min-height: var(--card-img-minh);
    /* Always use flexbox to center images */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-media-bg, transparent);
  }

  :where(.c-card__media > img) {
    display: block;
    /* All fit-dependent values come from per-instance vars (set in inline style). */
    width: var(--card-img-w, 100%);
    height: var(--card-img-h, 100%);
    max-width: var(--card-img-maxw, none);
    max-height: var(--card-img-maxh, none);
    margin: 0 auto;
    object-fit: var(--card-img-fit, cover);
  }

  :where(.c-card__logo) {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    max-width: 96px;
    height: auto;
    background: rgba(255,255,255,0.9);
    padding: var(--spacing-xs, 0.25rem);
    border-radius: var(--radius-sm, 4px);
  }

  {% include "../../includes/card-flag.css.html" %}

  :where(.c-card__body) {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  :where(.c-card__eyebrow) {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.8;
    margin: 0;
  }

  :where(.c-card__title) {
    /* Inherit font-family and weight from theme headings */
    font-size: clamp(1rem, 1vw + 0.9rem, 1.25rem);
    line-height: inherit; /* Use theme's heading line-height */
    margin: 0;
  }

  :where(.c-card__text) {
    font-size: 0.9375rem;
    line-height: inherit; /* Use theme's body line-height */
  }

  :where(.c-card__text > *:first-child) {
    margin-top: 0;
  }

  :where(.c-card__text > *:last-child) {
    margin-bottom: 0;
  }

  :where(.c-card__meta) {
    font-size: 0.875rem;
    opacity: 0.7;
    margin: 0;
  }

  :where(.c-card__btn) {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    padding: var(--spacing-sm, 0.5rem) var(--spacing, 1rem);
    border-radius: var(--radius, 6px);
    background: var(--card-fg);
    color: var(--card-bg);
    text-decoration: none;
    font-weight: 500;
    transition: opacity var(--transition-fast, 0.15s ease);
  }

  :where(.c-card__btn:hover) {
    opacity: 0.9;
  }

  :where(.c-card__btn:focus-visible) {
    /* Use theme's focus styles */
    outline: 2px solid var(--color-primary, var(--card-fg));
    outline-offset: 2px;
  }

  :where(.c-card__link) {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
  }

  :where(.c-card__link:hover) {
    text-decoration-thickness: 2px;
  }

  :where(.c-card__link:focus-visible) {
    /* Use theme's focus styles */
    outline: 2px solid var(--color-primary, var(--card-fg));
    outline-offset: 2px;
    border-radius: 2px;
  }

  {# Shadow + hover are now per-instance via inline-style vars (--card-shadow,
     --hover-scale, --hover-shadow), so these rules are static/shared — no leak.
     When hover is disabled the vars resolve to none / the base shadow → no change. #}
  :where(.c-card:hover) {
    transform: var(--hover-scale, none);
    box-shadow: var(--hover-shadow, var(--card-shadow));
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.c-card:hover) {
      transform: none !important;
    }
  }

  {# Variant: full-background #}
  {% if v.variant == 'full-background' %}
    :where(.c-card--full-background) {
      overflow: hidden;
      color: var(--color-white, #fff);
    }

    :where(.c-card--full-background .c-card__media) {
      position: absolute;
      inset: 0;
      aspect-ratio: auto; /* Always auto for full background */
      min-height: 0;
      z-index: 0;
    }

    :where(.c-card--full-background .c-card__body) {
      position: relative;
      z-index: 1;
    }

    :where(.c-card--full-background::before) {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
      z-index: 1;
    }
  {% endif %}

  {# Variant: image-right #}
  {% if v.variant == 'image-right' %}
    @media (min-width: 640px) {
      :where(.c-card--image-right) {
        grid-template-columns: 1fr auto;
        align-items: center;
      }

      :where(.c-card--image-right .c-card__media) {
        order: 2;
        width: 200px;
        {% if s.image_aspect != 'auto' %}
        aspect-ratio: 1;
        {% endif %}
      }

      :where(.c-card--image-right .c-card__body) {
        order: 1;
      }
    }
  {% endif %}

  {# Variant: minimal #}
  {% if v.variant == 'minimal' %}
    :where(.c-card--minimal) {
      border: none;
      box-shadow: none;
      background: transparent;
      padding: 0;
    }

    :where(.c-card--minimal .c-card__body) {
      gap: 0.25rem;
    }
  {% endif %}

  {# Variant: no-image #}
  {% if v.variant == 'no-image' %}
    :where(.c-card--no-image .c-card__body) {
      padding: 0.5rem 0;
    }
  {% endif %}

  {# Container queries — keyed to the data attribute so they only affect cards that
     enabled them (the rules were unqualified before and leaked to every card). #}
  {% if s.enable_container_queries %}
    @container (min-width: 400px) {
      :where(.c-card[data-container-queries="true"]) {
        padding: calc(var(--card-p) * 1.5);
      }

      :where([data-container-queries="true"] .c-card__title) {
        font-size: clamp(1.125rem, 2vw + 0.9rem, 1.5rem);
      }
    }

    @container (min-width: 600px) {
      :where(.c-card--image-right[data-container-queries="true"]) {
        grid-template-columns: 1fr auto;
      }

      :where(.c-card--image-right[data-container-queries="true"] .c-card__media) {
        width: 240px;
      }
    }
  {% endif %}
</style>
{% end_require_css %}