{% extends "_base.html" %}

{% block styles %}
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-doc-text);
}

/* ======== Cover Page ======== */
.cover {
  page-break-after: always;
  break-after: page;
  /* Fill A4 minus margins: 297mm - 12mm top - 20mm bottom = 265mm */
  height: 265mm;
  display: flex;
  flex-direction: column;
}

.cover-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.cover-logo {
  font-family: var(--font-headline);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-black);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.cover-logo span { color: var(--color-terracotta); }
.cover-tagline {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-subtle);
  margin-top: 4px;
}
.cover-date {
  text-align: right;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-black);
  letter-spacing: 0.04em;
}

.cover-accent {
  height: 3px;
  background: var(--color-terracotta);
  width: 80px;
  margin: 28px 0 36px;
}

.cover-eyebrow {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin-bottom: 16px;
}

.cover-title {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.1;
  color: var(--color-black);
  letter-spacing: -0.015em;
  margin-bottom: 22px;
  max-width: 140mm;
}

.cover-recipient {
  font-size: 13px;
  color: var(--color-body);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.cover-recipient-name {
  font-family: var(--font-headline);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-black);
}

.cover-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  min-height: 0;
}
.cover-image .inline-svg {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.cover-image .inline-svg svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
.cover-image img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.body-content p { margin-bottom: 12px; }
.body-content strong { font-weight: 600; color: var(--color-black); }
.body-content a { color: var(--color-terracotta); text-decoration: none; }

.body-content h1 {
  font-family: var(--font-headline);
  font-weight: 700; font-size: 24px; color: var(--color-black);
  margin-top: 32px; margin-bottom: 14px; line-height: 1.2;
  page-break-before: always;
  break-before: page;
}
.body-content h2 {
  font-family: var(--font-headline);
  font-weight: 700; font-size: 17px; color: var(--color-black);
  margin-top: 28px; margin-bottom: 10px;
  line-height: 1.3; letter-spacing: -0.01em;
}
.body-content h3 {
  font-family: var(--font-headline);
  font-weight: 600; font-size: 14px; color: var(--color-black);
  margin-top: 22px; margin-bottom: 8px; line-height: 1.35;
}

.body-content ul, .body-content ol { margin-bottom: 12px; padding-left: 24px; }
.body-content li { margin-bottom: 4px; }

.body-content hr { border: none; margin: 20px 0; }

.body-content blockquote {
  border-left: 2.5px solid var(--color-terracotta);
  padding-left: 16px;
  margin: 16px 0;
  color: var(--color-body);
  font-style: italic;
}

.body-content code { font-family: 'Courier New', monospace; font-size: 11px; background: var(--color-light); padding: 1px 4px; border-radius: 3px; }
.body-content pre { background: var(--color-light); padding: 14px; border-radius: 6px; overflow-x: auto; margin-bottom: 12px; }
.body-content pre code { background: none; padding: 0; }

.body-content img,
.body-content .inline-svg {
  display: block;
  max-width: 100%;
  max-height: 230mm;
  height: auto;
  width: auto;
  margin: 16px auto;
  break-inside: avoid;
  page-break-inside: avoid;
}
.body-content .inline-svg svg {
  display: block;
  max-width: 100%;
  max-height: 230mm;
  height: auto;
  margin: 0 auto;
}

.body-content table { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 12px; }
.body-content th { font-family: var(--font-ui); font-weight: 700; text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--color-terracotta); color: var(--color-black); }
.body-content td { padding: 8px 10px; border-bottom: 1px solid var(--color-doc-border); }

h1, h2, h3 { break-after: avoid; }

/* Manual page break — use <div class="page-break"></div> in markdown */
.page-break { page-break-before: always; break-before: page; height: 0; }
{% endblock %}

{% block content %}
<div class="cover">
  <div class="cover-header">
    <div>
      <div class="cover-logo">Escape <span>Velocity</span></div>
      <div class="cover-tagline">{{ STRINGS.tagline }}</div>
    </div>
    <div class="cover-date">{{ DATE }}</div>
  </div>

  <div class="cover-accent"></div>

  {% if EYEBROW %}<div class="cover-eyebrow">{{ EYEBROW }}</div>{% endif %}
  <div class="cover-title">{{ SUBJECT }}</div>

  {% if RECIPIENT %}
  <div class="cover-recipient">{% if LANG == 'de' %}Erstellt für{% else %}Created for{% endif %}</div>
  <div class="cover-recipient-name">{{ RECIPIENT }}</div>
  {% endif %}

  {% if COVER %}
  <div class="cover-image">{{ COVER | safe }}</div>
  {% endif %}
</div>

<div class="body-content">
{{ CONTENT | safe }}
</div>
{% endblock %}