<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{{ event.title }} — MONT</title>
  <meta name="description" content="{{ event.body[:160] | striptags | replace('\n',' ') }}" />
  <meta name="robots" content="index, follow" />
  <link rel="canonical" href="{{ base_url }}/events/{{ event.slug }}" />
  <meta property="og:type" content="article" />
  <meta property="og:url" content="{{ base_url }}/events/{{ event.slug }}" />
  <meta property="og:title" content="{{ event.title }} — MONT" />
  {% if event.image %}<meta property="og:image" content="{{ base_url }}/static/{{ event.image }}" />{% endif %}
  <link rel="icon" type="image/svg+xml" href="/static/favicon.svg" />
  <link rel="icon" type="image/png" href="/static/favicon.png" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap" rel="stylesheet">
  <style>
    :root { --brand: #1f4ea3; --brand2: #3978e0; --bg: #eef4ff; }
    * { box-sizing: border-box; }
    body { margin: 0; font-family: Manrope, sans-serif; background: var(--bg); color: #15203b; min-height: 100vh; }
    .wrap { width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 60px; }
    .back-btn {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 13px; font-weight: 700; color: var(--brand);
      text-decoration: none; margin-bottom: 20px;
      padding: 8px 16px; border-radius: 999px;
      background: #fff; border: 1px solid #c8d8f7; transition: .15s ease;
    }
    .back-btn:hover { background: #eef4ff; transform: translateX(-2px); }
    .article-card {
      background: #fff; border-radius: 20px;
      border: 1px solid #dae6ff;
      box-shadow: 0 12px 40px rgba(16,43,95,.1);
      overflow: hidden;
    }
    .article-header { display: flex; gap: 20px; align-items: flex-start; padding: 28px 32px 0; }
    .article-hero-img { flex-shrink: 0; width: 160px; height: 106px; object-fit: cover; border-radius: 12px; display: block; }
    .article-header-text { flex: 1; min-width: 0; }
    .article-body-wrap { padding: 20px 32px 36px; }
    .event-date-badge {
      display: inline-block; background: linear-gradient(135deg,#1f4ea3,#3978e0);
      color: #fff; font-size: 12px; font-weight: 800;
      padding: 4px 14px; border-radius: 999px; margin-bottom: 10px;
    }
    .article-title { font-size: 24px; font-weight: 800; color: #1a3e79; margin: 0; line-height: 1.25; }
    .article-body { font-size: 15px; color: #2e3f58; line-height: 1.75; }
    .article-body p { margin: 0 0 16px; }
    .article-body p:last-child { margin-bottom: 0; }
    .article-body a { color: var(--brand); font-weight: 600; text-decoration: none; }
    .article-body a:hover { text-decoration: underline; }
    .article-body strong, .article-body b { font-weight: 700; color: #1a3e79; }
    .article-body em, .article-body i { font-style: italic; }
    .article-body ul, .article-body ol { margin: 0 0 16px 20px; padding: 0; }
    .article-body li { margin-bottom: 6px; }
    .article-body h2, .article-body h3, .article-body h4 { font-weight: 800; color: #1a3e79; margin: 20px 0 10px; }
    .article-body h2 { font-size: 20px; }
    .article-body h3 { font-size: 17px; }
    .article-body blockquote { border-left: 3px solid var(--brand); margin: 16px 0; padding: 8px 16px; background: #f0f5ff; border-radius: 0 8px 8px 0; color: #526079; }
    .article-body table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
    .article-body th, .article-body td { border: 1px solid #dae6ff; padding: 8px 12px; text-align: left; }
    .article-body th { background: #eef4ff; font-weight: 700; color: #1a3e79; }
    .article-contact { margin-top: 28px; padding-top: 20px; border-top: 1px solid #e8f0ff; font-size: 13px; color: #526079; }
    .article-contact a { color: var(--brand); font-weight: 700; text-decoration: none; }
    @media (max-width: 640px) {
      .article-header { flex-direction: column; padding: 20px 20px 0; }
      .article-hero-img { width: 100%; height: 140px; }
      .article-body-wrap { padding: 16px 20px 28px; }
      .article-title { font-size: 20px; }
    }
  </style>
</head>
<body>
  <div class="wrap">
    <a href="/events" class="back-btn">← Все мероприятия</a>
    <article class="article-card">
      <div class="article-header">
        {% if event.image %}
          <img class="article-hero-img" src="/static/{{ event.image }}" alt="{{ event.title }}" />
        {% endif %}
        <div class="article-header-text">
          <span class="event-date-badge">📅 {{ event.event_date[8:10] }}.{{ event.event_date[5:7] }}.{{ event.event_date[:4] }}</span>
          <h1 class="article-title">{{ event.title }}</h1>
        </div>
      </div>
      <div class="article-body-wrap">
        <div class="article-body">
          {% if '<' in event.body %}
            {{ event.body | safe }}
          {% else %}
            {% for paragraph in event.body.split('\n\n') %}
              <p>{{ paragraph }}</p>
            {% endfor %}
          {% endif %}
        </div>
        {% if event.register_url %}
        <div style="margin-top:24px;">
          <a href="{{ event.register_url }}" target="_blank" rel="noopener"
             style="display:inline-block;background:linear-gradient(135deg,#1f4ea3,#3978e0);
                    color:#fff;font-weight:800;font-size:15px;padding:12px 28px;
                    border-radius:12px;text-decoration:none;transition:.15s;"
             onmouseover="this.style.opacity='.85'" onmouseout="this.style.opacity='1'">
            Зарегистрироваться →
          </a>
        </div>
        {% endif %}
        <div class="article-contact">
          По вопросам участия: <a href="https://www.mont.ru/ru-ru/events" target="_blank" rel="noopener">mont.ru/events</a>
        </div>
      </div>
    </article>
  </div>
</body>
</html>
