<!DOCTYPE html>
<html lang="{{ app.request.locale }}">
<head>
    <meta charset="UTF-8">
    <title>{{ 'error404.title'|trans({}, 'meta') }}</title>
    <meta name="robots" content="noindex,follow">
    <meta name="description" content="{{ 'error404.description'|trans({}, 'meta') }}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="icon" href="{{ asset(viti_theme_asset('favicon/favicon.ico')) }}" sizes="any">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ asset(viti_theme_asset('favicon/favicon-32x32.png')) }}">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ asset(viti_theme_asset('favicon/apple-touch-icon.png')) }}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Libre+Bodoni:opsz,wght@6..96,400..900&family=Libre+Franklin:wght@100..900&family=Material+Symbols+Outlined:wght@100..700&display=swap">

    {% set theme_entry = viti_theme().name %}
    {% if app.environment == 'dev' %}
        {{ encore_entry_link_tags('app', null, 'front') }}
        {{ encore_entry_link_tags(theme_entry, null, 'front') }}
    {% else %}
        {% set styleNonce = csp_nonce('style') %}
        {{ encore_entry_link_tags('app', null, 'front', { nonce: styleNonce }) }}
        {{ encore_entry_link_tags(theme_entry, null, 'front', { nonce: styleNonce }) }}
    {% endif %}
</head>
<body class="overflow-x-hidden bg-primary font-body text-base text-white selection:bg-primary-fixed/30 selection:text-white">
    <header class="absolute inset-x-0 top-0 z-20">
        <div class="mx-auto flex w-full max-w-[1440px] items-center px-4 py-5 md:px-16 md:py-7">
            <a href="{{ path('homepage') }}" aria-label="{{ 'theme.error.not_found.logo_link'|trans }}">
                <twig:theme:BrandLogo
                    variant="light"
                    class="h-16 w-auto md:h-20"
                    imageClass="h-full w-auto object-contain"
                />
            </a>
        </div>
    </header>

    <main>
        <section aria-labelledby="error-title" class="relative isolate flex min-h-[100svh] w-full items-center overflow-hidden bg-primary">
            <div class="absolute inset-0 z-0">
                <twig:Image
                    mapping="public"
                    pathLandscape="{{ viti_theme_asset('images/photo-404-cellar.jpg') }}"
                    pathPortrait="{{ viti_theme_asset('images/photo-404-cellar.jpg') }}"
                    ratioLandscape="16/9"
                    ratioPortrait="2/3"
                    fit="crop"
                    alt="{{ 'theme.error.not_found.image_alt'|trans }}"
                    class="h-full w-full"
                    picture:class="block h-full w-full"
                    img:class="h-full w-full object-cover object-[62%_center] md:object-center"
                    lazy="{{ false }}"
                />
                <div class="absolute inset-0 bg-black/45"></div>
                <div class="absolute inset-0 bg-gradient-to-r from-black/60 via-black/25 to-transparent"></div>
            </div>

            <div class="relative z-10 mx-auto w-full max-w-[1440px] px-4 pb-20 pt-40 md:px-16 md:py-48">
                <div class="max-w-2xl text-center md:text-left">
                    <p class="mb-5 font-label text-[12px] font-semibold uppercase tracking-[0.2em] text-primary-fixed">
                        {{ 'theme.error.not_found.kicker'|trans }}
                    </p>
                    <h1 id="error-title" class="mb-6 text-balance font-display text-[clamp(3rem,8vw,5.5rem)] font-semibold leading-[1.02] tracking-[-0.03em] [font-optical-sizing:auto]">
                        {{ 'theme.error.not_found.title'|trans }}
                    </h1>
                    <p class="mx-auto mb-10 max-w-[60ch] text-pretty text-[18px] leading-8 text-white/90 md:mx-0">
                        {{ 'theme.error.not_found.text'|trans }}
                    </p>
                    <a
                        href="{{ path('homepage') }}"
                        class="inline-flex min-h-12 items-center justify-center gap-3 bg-white px-8 py-4 font-label text-[12px] font-semibold uppercase tracking-[0.18em] text-primary transition-colors duration-200 hover:bg-surface-container-high focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-white"
                    >
                        <span aria-hidden="true" class="material-symbols-outlined text-[20px]">arrow_back</span>
                        {{ 'theme.error.not_found.cta'|trans }}
                    </a>
                </div>
            </div>
        </section>
    </main>
</body>
</html>
