<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Krupówki 4a – Menu śniadaniowe</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- AOS -->
    <link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet">

    <style>
        :root {
            --accent-main: #a32386;
            --accent-soft: #f08bbf;
            --text-main: #3b2c3b;
            --muted: #8a8190;
            --border-soft: #f4d6ea;
            --bg-soft: #fff7fc;
        }

        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background: #f8f5fb;
            color: var(--text-main);
        }

        .menu-wrapper {
            max-width: 900px;
            margin: 40px auto;
            background: #ffffff;
            border-radius: 18px;
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
            padding: 32px 32px 40px;
        }

        @media (max-width: 576px) {
            .menu-wrapper {
                margin: 16px;
                padding: 20px 16px 28px;
            }
        }

        .menu-heading {
            border-bottom: 1px solid var(--border-soft);
            padding-bottom: 18px;
            margin-bottom: 24px;
        }

        .menu-title {
            font-size: clamp(2.1rem, 4vw, 2.7rem);
            font-weight: 700;
            color: var(--accent-main);
            letter-spacing: 0.02em;
        }

        .lang-pill {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 2px solid var(--border-soft);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            background: var(--bg-soft);
        }

        .section-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .section-subtitle {
            font-size: .92rem;
            color: var(--muted);
            margin-bottom: 22px;
        }

        .menu-item {
            border-top: 1px solid var(--border-soft);
            padding-block: 16px;
        }

        .menu-item:first-of-type {
            border-top: none;
        }

        .menu-item-title {
            font-weight: 700;
            font-size: 1.05rem;
            margin-bottom: 4px;
        }

        .menu-item-desc {
            font-size: .92rem;
            color: var(--muted);
        }

        .menu-item-price {
            font-weight: 600;
            white-space: nowrap;
            font-size: 1rem;
        }

        .menu-item-img {
            width: 120px;
            height: 120px;
            border-radius: 18px;
            overflow: hidden;
            background: var(--bg-soft);
            border: 1px solid var(--border-soft);
            object-fit: cover;
        }

        .menu-section-divider {
            border-top: 1px solid var(--border-soft);
            margin-top: 18px;
            margin-bottom: 2px;
        }
    </style>
</head>
<body>

<div class="menu-wrapper" data-aos="fade-up" data-aos-duration="700">
    <!-- Header -->
    <div class="menu-heading d-flex justify-content-between align-items-center">
        <h1 class="menu-title mb-0" data-aos="fade-right" data-aos-delay="50">Krupówki 4a</h1>
        <div class="lang-pill" data-aos="zoom-in" data-aos-delay="120">
            <span aria-label="english" role="img">🇬🇧</span>
        </div>
    </div>

    <!-- Section title -->
    <div class="mb-1" data-aos="fade-right" data-aos-delay="120">
        <h2 class="section-title mb-1">Śniadania</h2>
    </div>
    <p class="section-subtitle" data-aos="fade-right" data-aos-delay="180">
        Czas oczekiwania ok. 15–30 min. Dostępne cały dzień.
    </p>

    <!-- Items -->
    <div class="menu-items">

        <!-- Item 1 -->
        <div class="menu-item" data-aos="fade-up" data-aos-delay="80">
            <div class="row g-2 align-items-start">
                <div class="col-9 col-sm-10">
                    <div class="menu-item-title">Wrap z jajecznicą i pomidorami</div>
                    <div class="menu-item-desc">
                        tortilla, dip guacamole, kremowa jajecznica z 2 jajek, pomidory, sałata
                    </div>
                </div>
                <div class="col-3 col-sm-2 text-end">
                    <div class="menu-item-price">35 zł</div>
                </div>
            </div>
        </div>

        <!-- Item 2 -->
        <div class="menu-item" data-aos="fade-up" data-aos-delay="130">
            <div class="row g-2 align-items-start">
                <div class="col-9 col-sm-10">
                    <div class="menu-item-title">Jajecznica na maśle</div>
                    <div class="menu-item-desc">
                        jajecznica z 3 jaj na maśle z dodatkiem śmietanki, pieczywo, masło,
                        pomidorki koktajlowe, rukola, balsamico, szczypiorek
                    </div>
                </div>
                <div class="col-3 col-sm-2 text-end">
                    <div class="menu-item-price">24 zł</div>
                </div>
            </div>
        </div>

        <!-- Item 3 with image -->
        <div class="menu-item" data-aos="fade-up" data-aos-delay="180">
            <div class="row g-3 align-items-center">
                <div class="col-4 col-md-3">
                    <!-- Podmień src na swoje zdjęcie -->
                    <img src="https://via.placeholder.com/240x240.png?text=%C5%9Aniadanie"
                         alt="Jajecznica na szynce" class="menu-item-img w-100">
                </div>
                <div class="col-8 col-md-7">
                    <div class="menu-item-title">Jajecznica na szynce</div>
                    <div class="menu-item-desc">
                        3 jajka, szynka, pieczywo, masło, pomidorki koktajlowe, rukola, balsamico, szczypiorek
                    </div>
                </div>
                <div class="col-12 col-md-2 text-md-end mt-2 mt-md-0">
                    <div class="menu-item-price">26 zł</div>
                </div>
            </div>
        </div>

        <!-- Divider -->
        <div class="menu-section-divider" data-aos="fade-in" data-aos-delay="210"></div>

        <!-- Item 4 -->
        <div class="menu-item pt-3" data-aos="fade-up" data-aos-delay="230">
            <div class="row g-2 align-items-start">
                <div class="col-9 col-sm-10">
                    <div class="menu-item-title">Grzanka z jajecznicą na boczku</div>
                    <div class="menu-item-desc">
                        bekon, kremowa jajecznica, grillowana kromka pasterska, sałata, szczypiorek,
                        pomidor, cebula, ocet jabłkowy
                    </div>
                </div>
                <div class="col-3 col-sm-2 text-end">
                    <div class="menu-item-price">35 zł</div>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
<script>
    AOS.init({
        once: true,
        offset: 60
    });
</script>
</body>
</html>
