<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Мероприятия MONT</title>
  <meta name="description" content="Предстоящие мероприятия, вебинары и конференции дистрибьютора MONT." />
  <meta name="robots" content="index, follow" />
  <link rel="canonical" href="{{ base_url }}/events" />
  <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(900px, 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: 24px;
      padding: 8px 16px; border-radius: 999px;
      background: #fff; border: 1px solid #c8d8f7; transition: .15s;
    }
    .back-btn:hover { background: #eef4ff; transform: translateX(-2px); }
    h1 { font-size: 28px; font-weight: 800; color: #1a3e79; margin: 0 0 24px; }
    .top3 { margin-bottom: 32px; }
    .top3-label {
      font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
      text-transform: uppercase; color: #7a9bc0; margin-bottom: 14px;
    }
    .top3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .top3-card {
      background: #fff; border-radius: 16px; border: 1px solid #dae6ff;
      box-shadow: 0 6px 20px rgba(16,43,95,.08);
      overflow: hidden; text-decoration: none; color: inherit;
      transition: .18s ease; display: flex; flex-direction: column;
    }
    .top3-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(16,43,95,.14); }
    .top3-card img { width: 100%; height: 160px; object-fit: cover; display: block; }
    .top3-card .no-img { width: 100%; height: 100px; background: linear-gradient(135deg, #e8f4f0, #d0eee4); display: flex; align-items: center; justify-content: center; }
    .top3-card .no-img-icon { font-size: 36px; opacity: .5; }
    .top3-card-body { padding: 14px 16px 18px; flex: 1; display: flex; flex-direction: column; }
    .event-date-badge {
      display: inline-block; background: linear-gradient(135deg,#1f4ea3,#3978e0);
      color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .3px;
      padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; align-self: flex-start;
    }
    .top3-card-title { font-size: 14px; font-weight: 800; color: #1a3e79; line-height: 1.4; flex: 1; margin: 0 0 12px; }
    .top3-card-excerpt { font-size: 12px; color: #5a7090; line-height: 1.55; margin: 0 0 12px; flex: 1;
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .read-more { font-size: 12px; font-weight: 700; color: var(--brand2); }
    .divider { border: none; border-top: 2px solid #e0eaff; margin: 0 0 24px; }
    .rest-label { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #7a9bc0; margin-bottom: 16px; }
    .event-row {
      background: #fff; border-radius: 14px; border: 1px solid #dae6ff;
      display: flex; gap: 0; overflow: hidden; margin-bottom: 12px;
      text-decoration: none; color: inherit;
      transition: .18s ease; box-shadow: 0 4px 14px rgba(16,43,95,.06);
    }
    .event-row:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16,43,95,.12); }
    .event-row img { width: 120px; height: 90px; object-fit: cover; flex-shrink: 0; }
    .event-row .no-img-row { width: 80px; flex-shrink: 0; background: linear-gradient(135deg, #e8f4f0, #d0eee4); }
    .event-row-body { padding: 12px 16px; display: flex; flex-direction: column; justify-content: center; }
    .event-row-date { font-size: 11px; color: #3978e0; font-weight: 700; margin-bottom: 4px; }
    .event-row-title { font-size: 14px; font-weight: 800; color: #1a3e79; line-height: 1.35; margin: 0 0 6px; }
    .event-row-excerpt { font-size: 12px; color: #5a7090; line-height: 1.5; margin: 0;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .empty { text-align: center; padding: 60px 0; color: #9ab0d0; font-size: 15px; }
    @media (max-width: 700px) { .top3-grid { grid-template-columns: 1fr; } .event-row img { width: 90px; height: 70px; } }
  </style>
</head>
<body>
  <div class="wrap">
    <a href="/" class="back-btn">← На главную</a>
    <h1>Мероприятия MONT</h1>

    {% if events %}
      {% set top3 = events[:3] %}
      {% set rest  = events[3:] %}

      <div class="top3">
        <div class="top3-label">Ближайшие мероприятия</div>
        <div class="top3-grid">
          {% for e in top3 %}
          <a class="top3-card" href="/events/{{ e.slug }}">
            {% if e.image %}
              <img src="/static/{{ e.image }}" alt="{{ e.title }}" />
            {% else %}
              <div class="no-img"><span class="no-img-icon">📅</span></div>
            {% endif %}
            <div class="top3-card-body">
              <span class="event-date-badge">{{ e.event_date[8:10] }}.{{ e.event_date[5:7] }}.{{ e.event_date[:4] }}</span>
              <h2 class="top3-card-title">{{ e.title }}</h2>
              <p class="top3-card-excerpt">{{ e.body | striptags | truncate(180, true, '...') }}</p>
              <span class="read-more">Подробнее →</span>
            </div>
          </a>
          {% endfor %}
        </div>
      </div>

      {% if rest %}
        <hr class="divider" />
        <div class="rest-label">Все мероприятия</div>
        {% for e in rest %}
        <a class="event-row" href="/events/{{ e.slug }}">
          {% if e.image %}
            <img src="/static/{{ e.image }}" alt="{{ e.title }}" />
          {% else %}
            <div class="no-img-row"></div>
          {% endif %}
          <div class="event-row-body">
            <div class="event-row-date">📅 {{ e.event_date[8:10] }}.{{ e.event_date[5:7] }}.{{ e.event_date[:4] }}</div>
            <div class="event-row-title">{{ e.title }}</div>
            <p class="event-row-excerpt">{{ e.body | striptags | truncate(160, true, '...') }}</p>
          </div>
        </a>
        {% endfor %}
      {% endif %}

    {% else %}
      <div class="empty">Актуальных мероприятий нет</div>
    {% endif %}
  </div>
</body>
</html>
