@layer reset, variables, base, components, utilities;

/* Reset layer */
@layer reset {

    *,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
}

/* Variables layer */
@layer variables {
    :root {
        --color-primary: #15244C;
        --color-primary-hover: #1E326F;

        --color-background: #EEF0F2;
        --color-background-hover: #D1D4D9;

        --color-section-break: #A9A9A9;

        --color-text-link: #1E90FF;
        --color-text-link-hover: #4682B4;

        --color-text: #5D5F5E;
        --font-main: "Titillium Web", sans-serif;
    }
}

/* Base styles */
@layer base {

    html,
    body {
        height: 100%;
        scroll-behavior: smooth;
    }

    body {
        display: flex;
        flex-direction: column;
        font-family: var(--font-main);
        background-color: var(--color-background);
        color: var(--color-text);
        line-height: 1.5;
        overflow-x: hidden;
    }

    main.page-content {
        flex: 1 0 auto;
        padding-top: 5.5rem;
        box-sizing: border-box;
        max-width: 1600px;
        margin: 0 auto;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    h2 {
        font-size: 1.6rem;
        line-height: 1.3;
        margin: 0 0 1rem 0;
    }

    p {
        font-size: 1.3rem;
        line-height: 1.5;
        margin: 0 0 1rem 0;
    }

    @media (max-width: 1280px) {
        h2 {
            font-size: 1.4rem;
        }

        p {
            font-size: 1rem;
        }
    }

    @media (max-width: 1024px) {
        main.page-content {
            padding-top: 4.5rem;
        }

        h2 {
            font-size: 1.3rem;
        }

        p {
            font-size: 1rem;
        }
    }

    @media (max-width: 768px) {
        h2 {
            font-size: 1.2rem;
        }

        p {
            font-size: 0.94rem;
        }

        main.page-content {
            padding-top: 4.5rem;
            box-sizing: border-box;
            max-width: 100%;
            min-height: 0;
        }
    }
}

@layer components {

    .page-header {
        margin: 0 auto;
        padding: 2rem;
        text-align: center;
    }

    .page-header h1 {
        font-size: 3rem;
        font-weight: 600;
        line-height: 1.2;
        margin: 0;
    }

    @media (max-width: 1280px) {

        .page-header {
            padding: 1rem;
        }

        .page-header h1 {
            font-size: 2.6rem;
        }
    }

    @media (max-width: 768px) {

        .page-header h1 {
            font-size: 2rem;
        }

        .swiper-container {
            width: 100%;
            position: relative;
            padding-bottom: 2.5rem;
        }

        .swiper-wrapper {
            width: 100%;
            display: flex;
            transition: transform 0.3s ease;
        }

        .swiper-slide {
            flex-shrink: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .swiper-pagination {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
            padding-top: 0;
        }
    }
}

@layer utilities {
    .desktop-only {
        display: flex;
    }

    .desktop-1024 {
        display: flex;
    }

    .mobile-only {
        display: none;
    }

    .mobile-1024 {
        display: none;
    }

    .line-break-1280 {
        display: none;
    }

    .line-break-mobile {
        display: none;
    }

    @media (max-width: 1280px) {
        .line-break-1280 {
            display: inline;
        }

        .line-break-mobile {
            display: none;
        }
    }

    @media (max-width: 1024px) {
        .mobile-1024 {
            display: flex !important;
        }

        .desktop-1024 {
            display: none !important;
        }

        .line-break-1280 {
            display: none;
        }

        .line-break-mobile {
            display: none;
        }
    }

    @media (max-width: 768px) {
        .desktop-only {
            display: none;
        }

        .mobile-only {
            display: flex;
        }

        .line-break-1280 {
            display: none;
        }

        .line-break-mobile {
            display: inline;
        }
    }
}