/* Larger screens */
@media (max-width: 1200px) {
    main.content {
        width: clamp(100%, 1024px, 1024px);
    }
}

/* Tablet and mobile shared styles */
@media (max-width: 1024px) {
    /* Layout adjustments */
    main.content {
        width: 100%;
        max-width: unset;
        padding: 0;
    }

    /* Content sections */
    .content-section {
        all: unset;
        display: grid;
        grid-template-areas:
            "logo"
            "text"
            "list";
        margin: 0;
        padding-inline: 1rem;
        padding-block: 2rem;
        text-align: center;
    }
}

/* Mobile specific styles */
@media (max-width: 768px) {
    :root {
        --mobile-header-height: 4rem;
    }

    main.content {
        width: 100%;
        max-width: unset;
        padding: 0;
    }

    /* Header & Navigation */
    .header-container {
        display: flex;
        flex-direction: row;
        height: var(--mobile-header-height);
        z-index: 100;
    }

    a:has(.header--logo) {
        position: fixed;
        top: 2px;
        background-color: var(--color-dark);
        border-radius: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc(var(--mobile-header-height) - 5px);
        height: calc(var(--mobile-header-height) - 5px);
    }

    .header--logo {
        height: calc(var(--mobile-header-height) - 5px);
        width: unset;
    }

    header .anfrage,
    .header-container .header--slogan {
        display: none;
    }

    .burger-menu-background {
        position: fixed;
        top: 0;
        height: 4rem;
        width: 100%;
        background-color: var(--color-accent);
        z-index: 99;
    }

    /* Burger menu */
    .burger-menu {
        position: fixed;
        top: 2rem;
        right: 1rem;
        z-index: 103;
        width: 30px;
        height: 2px;
        background-color: #000;
        transition: background-color 0.2s ease;
    }

    .burger-menu::before,
    .burger-menu::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #000;
        transition: transform 0.2s ease;
    }

        .burger-menu::before {
        top: -10px;
    }

    .burger-menu::after {
        top: 10px;
    }

    .burger-menu.open {
        background: transparent;
    }

    .burger-menu.open::before {
        transform: translateY(10px) rotate(45deg);
    }

    .burger-menu.open::after {
        transform: translateY(-10px) rotate(-45deg);
    }

    /* Mobile navigation */
    .main-nav {
        position: fixed;
        top: 0;
        width: 100vw;
        height: 100vh;
        background-color: #fff;
        overflow: auto;
        z-index: 100;
        transform: translateX(100%);
        transition: transform 200ms ease;
    }

    .main-nav.open {
        transform: translateX(0);
    }

    .main-nav ul {
        display: flex;
        flex-direction: column;
        padding-top: var(--mobile-header-height);
    }

    .main-nav ul li a {
        padding-block: 1rem;
    }

    /* Content adjustments */
    .hero {
        height: calc(100vh - var(--mobile-header-height));
        height: calc(100svh - var(--mobile-header-height));
        background-position-x: 0;
        animation: slideBg 60s ease-in-out infinite;
        border-radius: 0;
    }

    @keyframes slideBg {
        0% {
            background-position-x: 0%;
        }
        50% {
            background-position-x: 100%;
        }
        100% {
            background-position-x: 0%;
        }
    }

    .hero-text-wrapper p {
        font-size: 1.5rem;
    }

    main.content {
        max-width: unset;
    }

    main.content {
        padding: 0;
    }

    .content-section .logo,
    .content-section .text {
        margin: 0;
        padding: 0;
        justify-self: center;
    }

    .content-section .list ul {
        list-style: none;
        margin: 0;
        padding: 0;
        padding-block: 2rem;
        font-weight: bold;
        font-size: 1.25rem;
    }

    .content-section {
        all: unset;
        display: grid;
        grid-template-areas:
            "logo"
            "text"
            "list";
        margin: 0;
        padding: 2rem;
        text-align: center;
    }

    /* Über mich / EAC Logo */
    #uebermich {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .logo-eac {
        position: relative;
        right: unset;
        top: unset;
    }

    /* Gallery */
    section.gallery {
        padding-inline: 1rem;
        padding-bottom: 2rem;
    }

    section.gallery h2 {
        padding-bottom: 1rem;
    }

    /* Gigs section */
    .gig-content {
        flex-direction: column;
    }

    /* Kontakt */
    .kontakt-table {
        all: unset;
    }

    .kontakt-table p {
        font-size: 1.25rem;
    }

    .kontakt-table p:nth-child(2n) {
        margin-top: 0;
    }

    #kontakt iframe {
        margin-top: 3rem;
        width: 100%;
        height: 20rem;
        border-radius: 0;
    }

    /* Video */
    .imagevideo-section {
        margin: 0;
        padding: 0;
        border: 0;
        background-color: #111; /* not using --color-dark explicitly to match the section bg */
    }

    .imagevideo-section video {
        width: 100%;
        border-radius: 0;
        aspect-ratio: 2.18 / 1;

        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    #kontakt iframe {
        border-radius: 0;
    }

    /* Footer */
    footer {
        display: flex;
        flex-direction: column;
    }

    footer .links {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1rem;
    }

    .spotify.mobile-only {
        display: flex;
    }

    .spotify iframe {
        margin-inline: auto;
    }

    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none;
    }
}

/* Short screens */
@media (max-height: 530px) {
    .hero {
        display: flex;
        justify-content: space-between;
    }

    .hero img {
        position: static;
    }
}


/* Dark mode (mobile devices)*/
@media (prefers-color-scheme: dark) {
        .burger-menu,
        .burger-menu::before,
        .burger-menu::after {
            background-color: #fff;
        }

        .main-nav {
            background-color: #111;
        }

        .main-nav a {
            color: #fff;
        }
    }