{# Shared inner fragment for Design 1 - core card markup only #}
<div class="toptrump-card design-1" style="border-radius:8px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,0.12);">
  <div style="padding:8px; display:flex; gap:8px; justify-content:flex-end;"></div>
  <div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; position:relative; overflow:hidden;">
    {# Print fallback: actual <img> element that is hidden on screen but shown by `printable.html` via its print stylesheet. #}
    {% if card.background and card.background.image or background and background.image %}
      <img class="print-hero-bg" src="{% if card.background and card.background.image %}{{ card.background.image.url }}{% else %}{{ background.image.url }}{% endif %}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
    {% endif %}
    {% if card.image %}
      <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:180px; z-index:1;">
    {% endif %}
  </div>
  <div class="title-band" style="background:#2a7ae2; color:white; padding:12px; font-weight:700; font-size:1.2rem; text-align:center">{{ card.name }}</div>
  <div class="card-body" style="padding:12px; background:#fff;">
    <div class="subtitle is-6"><strong>Era:</strong> {{ card.get_era_display }} — <strong>Diet:</strong>
      {% if card.diet == 'herbivore' %}
        <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#2ecc71;color:#fff;font-weight:700;margin-left:6px;">🥦 Herbivore</span>
      {% elif card.diet == 'carnivore' %}
        <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#e74c3c;color:#fff;font-weight:700;margin-left:6px;">🥩 Carnivore</span>
      {% else %}
        <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#f39c12;color:#fff;font-weight:700;margin-left:6px;">🍽️ Omnivore</span>
      {% endif %}
    </div>
    <div style="margin-top:0.5rem">{{ card.description|linebreaksbr }}</div>
    {% if card.facts_list %}
      <div style="margin-top:0.5rem">
        <strong>Fun facts</strong>
        <ul class="fact-list">
          {% for fact in card.facts_list %}
            <li>{{ fact }}</li>
          {% endfor %}
        </ul>
      </div>
    {% endif %}

    <div style="margin-top:0.8rem">
      {% include 'cards/_card_stats_rows.html' %}
    </div>
  </div>
</div>