/* ============================
   MOBILE ACTIVATION
   ============================ */
.mobile-only {
    display: none;
}

@media (max-width: 800px) {

    /* Hide desktop sections */
    #landing,
    #artists,
    #demo,
    #photo-section,
    #photo-section2 {
        display: none !important;
    }

    /* Show mobile sections */
    .mobile-only {
        display: flex !important;
    }

    /* ============================
       MOBILE SECTION LAYOUT
       ============================ */
    .mobile-screen {
        width: 100vw;
        height: calc(var(--vh, 1vh) * 100); /* Dynamische 100vh */
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Section content flex layout */
    .section-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Titel boven, content in midden, nav/form onder */
        height: 100%;
    }

    /* Blauwe achtergrond voor mobile-blue */
    .mobile-blue {
        background-color: #0020dc;
        color: #e6e6e6;
    }

    /* TITEL */
    .section-content h1 {
        font-size: 25px;
        margin-bottom: 1rem;
    }

    /* TEKST */
    .section-content p {
        font-size: 16px;
        line-height: 1.2;
        color: #e6e6e6;
    }

    /* NAVIGATIE */
    .mobile-nav {
        display: flex;
        flex-direction: column;
        gap: 0.06rem;
    }

    .mobile-nav a,
    .mobile-nav button {
        text-decoration: none;
        font-size: 40px;
        color: #e6e6e6;
        background: none;
        border: none;
        cursor: pointer;
        text-align: left;
        padding: 0;
    }

    .mobile-nav button:hover,
    .mobile-nav a:hover {
      font-family: 'graphikbold';
    }

    /* FOTO SECTIES */
   .mobile-photo {
        position: relative;
        width: 100vw;
        height: 100vh; /* 100% viewport hoogte */
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
           z-index: -3; /* achter content */
    }

    .mobile-photo .photo-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
     
    }

    /* ARTISTS GRID */
    .mobile-artists-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.1rem;
        overflow-y: auto;
        font-size: 16px;
    }

    .mobile-artists-grid a {
        color: #e6e6e6;
        text-decoration: none;
    }

    .mobile-artists-grid a:hover {
      font-family: 'graphikbold';
    }

    /* DEMO FORM */
    .mobile-form {
        display: flex;
        flex-direction: column;
        
    }

     .section-content p {
        font-size: 16px;
        
    }

    .mobile-form input,
    .mobile-form textarea {
        width: 100%;
        background: #e6e6e6;
        border: 1px solid #dedede;
        color: #0020dc;
        padding: 0.6rem;
        font-size: 18px;
        box-sizing: border-box;
    }

    .mobile-form input[type="submit"] {
        background: #0020dc;
        color: #e6e6e6;
        border: 1px solid #e6e6e6;
        font-weight: bold;
        cursor: pointer;
    }

    .mobile-form textarea {
        height: 80px;
    }
}