@import "/static/stylesheets/common.css";

div.hr {
    width: 100%;
    height: 1px;
    background: #aaa;
}

main {
    @media (max-width: 85rem) {
        padding-top: var(--navbar-height);
    }
}

#main-header {
    height: 80vh;
    position: relative;

    img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 0 0;
    }

    #title-wrapper {
        position: absolute;

        display: flex;
        align-items: center;

        height: 100%;
        width: 100%;

        z-index: 1;

        backdrop-filter: brightness(60%);
        color: var(--background-color);

        div.spacer {
            max-width: 10rem;
            flex: 1;
        }

        #header-title {
            width: fit-content;

            @media (max-width: 60rem) {
                padding: 0 2rem;
            }

            h1 {
                font-size: 3rem;
                font-weight: 800;

                &::first-letter {
                    color: var(--konosport-red-2);
                }
            }

            h2 {
                font-size: 1.5rem;
            }

            @media (min-width: 35rem) {
                h1 {
                    font-size: 5rem;
                }
            }

            @media (min-width: 50rem) {
                h1 {
                    font-size: 7rem;
                }

                h2 {
                    font-size: 2rem;
                }
            }
        }
    }
}

.section-title {
    position: relative;
    top: -0.7em;

    font-size: xx-large;
    font-weight: 600;

    margin: 0 auto;
    width: fit-content;
    padding: 0 1.5rem;
    box-sizing: border-box;
    background: var(--background-color);

    @media (max-width: 30rem) {
        font-size: x-large;
        padding: 0 0.5rem;
    }
}

.big-button {
    margin: 0 auto;

    padding: 0.8rem 1rem;

    border-radius: 0.5rem;
    border: none;

    background: var(--konosport-red-2);
    color: #fafafa;

    transition: box-shadow 0.3s ease-out;

    cursor: pointer;
}

#about-us-wrapper {
    #about-us {
        max-width: 85rem;
        margin: 0 auto;
        padding: 3rem 0;

        display: flex;
        flex-direction: column;
        gap: 2rem;

        .about-us-row {
            display: flex;
            align-items: center;

            .img-wrapper {
                flex: 0 0 40%;

                padding: 0 4rem;
                box-sizing: border-box;

                img {
                    border-radius: 1rem;

                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                }
            }

            .about-us-text {
                flex: 1;

                padding-right: 5rem;
                box-sizing: border-box;

                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 1rem;

                div.hr {
                    width: 100%;
                    height: 1px;
                    background: 1px solid #2b2b2b;
                }

                .about-us-title {
                    font-size: xx-large;
                    font-weight: 600;
                }

                .about-us-description {
                    text-align: justify;
                }
            }
        }

        @media (max-width: 85rem) {
            max-width: 40rem;

            gap: 3rem;

            .about-us-row {
                flex-direction: column;
                gap: 1rem;
                margin-bottom: 2rem;

                .img-wrapper {
                    padding: 0 1.5rem;
                    width: 70%;
                }

                .about-us-text {
                    padding: 0 2rem;
                }
            }
        }

        @media (min-width: 85rem) {
            background: white;
            box-shadow: 0 0 10px 0 #ccc;

            .about-us-row:nth-child(even) {
                flex-direction: row-reverse;
            }
        }
    }

    @media (max-width: 85rem) {
        /* background: white; */
    }
}

#news-preview {
    padding: 0 1.5rem;
    box-sizing: border-box;

    #news-section-wrapper {
        margin: 0 auto;
        margin-top: 5rem;

        max-width: max-content;

        display: flex;
        flex-direction: column;
        align-items: center;

        .big-button {
            margin: 2rem auto;
        }
    }

    #news-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;

        max-width: 79rem;
        width: 100%;

        padding: 1rem;

        list-style: none;

        overflow-x: auto;
        scroll-snap-type: x mandatory;

        scrollbar-width: none;
    }

    #news-selector-list {
        list-style: none;

        display: flex;
        gap: 0.2rem;

        .news-selector {
            height: 1.7rem;
            padding: 0.4rem;
            align-content: center;

            cursor: pointer;

            p {
                text-indent: 100px;
                overflow: hidden;

                background: white;
                border: 1px solid #333;
                box-sizing: border-box;

                border-radius: 50%;
                corner-shape: round;

                height: 100%;
                aspect-ratio: 1;

                transition: 0.2s ease-out;
            }

            &.news-selected p {
                /* background: var(--konosport-red-3); */
                background: #333;
            }
        }
    }
}

#event-page-section {
    padding: 5rem 1.5rem;

    #event-section-wrapper {
        width: 100%;

        margin: 0 auto;
        max-width: 85rem;
        box-sizing: border-box;

        #event-section {
            #event-list {
                display: grid;
                grid-template-columns: repeat(
                    auto-fill,
                    minmax(min(25rem, 100%), 25rem)
                );
                gap: 2rem;

                width: fit-content;
                max-width: 100%;

                margin: 0 auto;
                margin-top: 2rem;

                list-style: none;
            }
        }
    }
}

.card-item {
    list-style-type: none;

    scroll-snap-align: center;

    flex: 1 0 100%;

    max-width: 25rem;

    .thirteenth-card {
        height: 35rem;
        max-width: 25rem;

        position: relative;

        img {
            height: 100%;
            width: 100%;
        }
    }
}

.page-list {
    width: fit-content;

    margin: 0 auto;
    margin-top: 3rem;

    list-style-type: none;

    display: flex;

    border-radius: 0.5rem;
    border: 1px solid #ccc;

    background: white;

    li {
        a {
            display: block;
            height: 2.5rem;
            min-width: 2.5rem;

            text-align: center;
            align-content: center;

            svg {
                margin: 0 auto;
                height: 1.5rem;

                stroke: currentColor;
            }
        }

        &.current-page-link {
            color: var(--konosport-red-2);
            text-decoration: underline;
        }
    }
}

#gallery-section-wrapper {
    padding: 5rem 2rem;

    #gallery-section {
        max-width: 80rem;
        margin: 0 auto;
    }
}

#football-school {
    width: 100%;
    max-width: 60rem;

    margin: 0 auto;
    padding: 3rem 5rem;
    box-sizing: border-box;

    background: white;
    box-shadow: 0 0 10px 0 #ccc;

    h1 {
        margin-bottom: 1rem;
    }

    h2 {
        margin-top: 1.5rem;
        margin-bottom: 0.7rem;
    }

    @media (max-width: 50rem) {
        padding: 1.5rem;
    }

    #about-football-school {
        text-align: justify;
    }
}

footer {
    --footer-background-color: #2b2b2b;
    background: var(--footer-background-color);
    color: #fafafa;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 4rem;

    padding-top: 5rem;

    #columns-wrapper {
        display: flex;
        justify-content: space-around;

        max-width: 60rem;
        width: 100%;

        @media (max-width: 35rem) {
            flex-direction: column;
            gap: 4rem;
            align-items: center;

            width: 100%;

            .column {
                text-align: center;

                ul {
                    align-items: center;
                }
            }
        }

        .column {
            ul {
                list-style: none;
                display: flex;
                flex-direction: column;

                gap: 1rem;

                li {
                    height: 1.5rem;
                    align-content: center;
                }
            }

            svg {
                height: 1.2rem;
                aspect-ratio: 1;
            }

            .column-heading {
                font-size: x-large;
                font-weight: bold;
                margin-bottom: 2rem;
            }

            .contact-item {
                display: flex;
                align-items: center;
                gap: 0.5rem;

                .contact-icon {
                    fill: var(--konosport-red-2);
                    display: block;

                    transition: transform 0.2s ease-out;
                }

                .contact-icon:has(~ .contact-text:hover) {
                    transform: scale(1.2);
                }
            }
        }
    }

    .social-media {
        display: flex;
        justify-content: center;
        gap: 3rem;

        margin-top: 1rem;

        .social-media-link {
            border: 1px solid white;
            border-radius: 100%;

            @supports (corner-shape: round) {
                corner-shape: round;
            }

            line-height: 0;
            font-size: 0;
            color: transparent;

            height: 3rem;
            padding: 0.7rem;
            box-sizing: border-box;

            transition: 0.2s ease-in-out;

            &:hover {
                transform: scale(1.1);
            }

            svg {
                display: block;

                height: 100%;
                /* by default make the icon square, others can be given other ratios */
                aspect-ratio: 1;

                fill: var(--konosport-red-2);
            }
        }
    }

    #credit {
        text-align: center;
        padding: 1rem 0;
        width: 100%;
        background: hsl(from var(--footer-background-color) h s calc(l * 0.8));
    }
}

.section-border-top {
    @media (min-width: 85rem) {
        border-top: 1px solid #2b2b2b;
    }
}

#contact-section-wrapper {
    padding: 5rem 2rem;

    #contact-section {
        max-width: 40rem;
        margin: 0 auto;

        padding: 0 1rem;
        box-sizing: border-box;
    }
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    --inputs-gap: 1.5rem;
    gap: var(--inputs-gap);

    margin-top: 1rem;

    .form-row {
        width: 100%;
        display: flex;
        gap: 0.5rem;

        @media (max-width: 30rem) {
            flex-direction: column;
            gap: var(--inputs-gap);
        }
    }

    .label-input-wrapper {
        width: 100%;
    }

    label,
    input {
        display: block;

        .required {
            color: red;
        }
    }

    label {
        font-weight: 500;
        margin-bottom: 0.5rem;
        text-indent: 0.25rem;
    }

    input:not([type="submit"]),
    textarea {
        width: 100%;

        padding: 0.6rem 0.8rem;
        box-sizing: border-box;

        font-size: small;

        border-radius: 0.5rem;
        border: 1px solid #aaa;
    }

    textarea {
        resize: vertical;
        height: 7rem;
    }

    input.big-button {
        font-size: medium;
        width: unset;
        padding: 0.5rem 1rem;
        margin: unset;
    }
}

#event-search {
    width: 100%;
    max-width: 40rem;

    @media (max-width: 55rem) {
        max-width: 30rem;
    }

    margin: 0 auto;

    .search-row {
        width: 100%;
        display: flex;
        gap: 0.5rem;
    }

    #event-search-form {
        gap: 1rem;
        margin-top: 0;

        align-items: end;

        #search-input-wrapper,
        #filter-wrapper {
            width: 100%;
        }

        #search-input-wrapper {
            position: relative;
            z-index: 2;

            #event-search-string {
                padding-left: 2rem;
            }

            button {
                position: absolute;

                height: 100%;
                aspect-ratio: 1;

                padding: 0.6rem;
                box-sizing: border-box;

                .svg-icon {
                    height: 80%;
                    aspect-ratio: 1;
                }
            }
        }

        #filter-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;

            #event-filters {
                flex: 1;
            }
        }

        #button-row {
            justify-content: end;

            .big-button {
                font-size: 0.9rem;
                padding: 0.5rem 1rem;
                margin: 0;

                min-width: 5rem;

                &#reset-button {
                    background: transparent;
                    border: 1px solid currentColor;
                    color: var(--konosport-red-2);
                }
            }
        }
    }
}

#error-section-wrapper {
    padding: 0 1.5rem;
    height: 80vh;

    #logo-link {
        display: flex;
        align-items: center;
        gap: 2rem;

        height: 10rem;

        margin-bottom: 6rem;

        img {
            height: 100%;
        }

        p {
            font-size: 4rem;
            font-weight: 600;

            &::first-letter {
                color: var(--konosport-red-2);
            }
        }
    }

    #error-section {
        max-width: 50rem;
        height: 100%;
        margin: 0 auto;

        align-content: center;

        #error-title {
            font-size: 2.5rem;
            font-weight: 700;
        }

        #error-description {
            font-size: 1.5rem;
        }

        #status-code {
            font-size: 1.2rem;
            font-weight: 500;
            color: hsl(from currentColor h s calc(l + 25));
        }

        > p {
            margin-bottom: 1rem;
        }

        @media (max-width: 45rem) {
            #logo-link {
                height: 6rem;

                p {
                    font-size: 2.5rem;
                }
            }

            #error-title {
                font-size: 1.5rem;
            }

            #error-description {
                font-size: 1.2rem;
            }

            #status-code {
                font-size: 1rem;
            }
        }
    }
}