{% load i18n %}
<!doctype html>
<html lang="{{ LANGUAGE_CODE }}" data-bs-theme="light">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="{{ favicon_url }}">
    <title>{% block title %}{{ badge_site_name|default:"Arthexis" }}{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
      :root {
        --landing-card-radius: 1.25rem;
      }
      html[data-bs-theme='light'] {
        --bs-body-bg: #f8f9fa;
      }
      body {
        min-height: 100vh;
        margin: 0;
        background-color: var(--bs-body-bg);
        color: var(--bs-body-color);
        font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        display: flex;
        flex-direction: column;
      }
      main.landing-main {
        width: 100%;
        max-width: 960px;
        margin: 0 auto;
        padding: 1.5rem clamp(0.75rem, 4vw, 1.5rem) 2.5rem;
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
        flex: 1 0 auto;
      }
      .landing-main .card {
        border-radius: var(--landing-card-radius);
        border: 1px solid rgba(15, 23, 42, 0.08);
      }
      .landing-main .card-header {
        border: 0;
        padding: 1.5rem 1.5rem 0.75rem;
        background-color: transparent;
      }
      .landing-main .card-body {
        padding: 1.5rem;
      }
      .landing-meta-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem 1.5rem;
        margin: 0;
        padding: 0;
      }
      .landing-meta-list div {
        min-width: 0;
      }
      .landing-meta-list dt {
        margin: 0;
        font-size: 0.75rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--bs-secondary-color);
      }
      .landing-meta-list dd {
        margin: 0;
        font-weight: 600;
        color: var(--bs-body-color);
      }
      .landing-card-section + .landing-card-section {
        margin-top: 1.5rem;
      }
      .landing-card-section-title {
        font-size: 0.75rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--bs-secondary-color);
        margin-bottom: 0.35rem;
      }
      .landing-stat-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
      }
      .landing-stat-grid .stat-value {
        font-size: 1.5rem;
        font-weight: 600;
        margin: 0;
      }
      .landing-stat-grid .stat-label {
        font-size: 0.85rem;
        color: var(--bs-secondary-color);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 0.25rem;
      }
      .landing-connector-card {
        border-radius: 1rem;
        border: 1px solid rgba(15, 23, 42, 0.08);
        padding: 1.25rem;
        background-color: #fff;
        box-shadow: 0 0.5rem 1rem rgba(15, 23, 42, 0.05);
      }
      .landing-connector-card .badge {
        min-width: 4.5rem;
        text-align: center;
      }
      [data-language-container] {
        transition: opacity 0.6s ease;
      }
      @media (max-width: 576px) {
        main.landing-main {
          padding-top: 1.25rem;
          padding-bottom: 2rem;
        }
        .landing-main .card-header,
        .landing-main .card-body {
          padding: 1.25rem;
        }
        .landing-stat-grid {
          grid-template-columns: 1fr;
        }
      }
    </style>
    {% block extra_head %}{% endblock %}
  </head>
  <body>
    <main class="landing-main">
      {% block content %}{% endblock %}
    </main>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    {% block extra_js %}{% endblock %}
  </body>
</html>
