/* =========================================
   PHONE.CSS - MOBIILIVAADE (max-width: 768px)
   ========================================= */

@media only screen and (max-width: 768px) {

    /* --- 1. ÜLDISED SEADED --- */
    body {
        font-size: 16px; /* Tekst natuke suuremaks lugemiseks */
        overflow-x: hidden; /* Keelab horisontaalse kerimise */
    }

    img, video, iframe {
        max-width: 100%; /* Pildid/videod ei lähe kunagi üle ääre */
        height: auto;
    }

    /* --- 2. NAVBAR --- */
    #navbar {
        padding: 0.5rem; /* Vähem ruumi ümber menüü */
    }
    
    #navbar > ul > li > a {
        padding: 0.5rem 0.8rem; /* Väiksemad nupud */
        font-size: 0.9rem;
    }

    /* --- 3. AVALEHT (SHOWCASE) --- */
    #showcase {
        height: auto;           /* Laseb sisul määrata kõrguse */
        min-height: 80vh;       /* Vähemalt 80% ekraani kõrgusest */
        padding: 100px 1rem 4rem; /* Ülevalt ruumi, et tekst ei jääks navbari alla */
        background-attachment: scroll; /* Mobiilis 'fixed' taust tihti hakib, 'scroll' on sujuvam */
    }

    #showcase h1 {
        font-size: 2.2rem;      /* Pealkiri väiksemaks */
        line-height: 1.2;
    }

    #showcase h2 {
        padding-left: 0;        /* Eemaldame vasaku nihke */
        padding-top: 2rem;
        text-align: center;
        font-size: 1.4rem;
    }

    #showcase p {
        padding: 1rem 0;        /* Eemaldame suured küljepaddingud */
        font-size: 1rem;
        text-align: justify;    /* Tekst joondub ilusasti */
    }

    /* --- 4. ÜLDISED KASTID (BOX) --- */
    .box {
        width: 95%;             /* Kast peaaegu terve ekraani laiune */
        margin: 2rem auto;      /* Vähem tühja ruumi kastide vahel */
        padding: 3rem 1rem 1.5rem;
    }

    .box-main {
        width: 90%;             /* Roheline pealkirja kast laiemaks */
        font-size: 1rem;
        top: -1.2rem;
        font-size: small;           /* Natuke madalamale */
    }

    .box-layer {
        padding: 2rem 1rem 1rem; /* Sisu ääred kitsamaks */
    }

    .box-text {
        width: 100% !important; /* Tekstikast alati täislaiuses */
        font-size: 0.95rem;
    }

    /* --- 5. TEEMAD JA KAARDID (CARDS) --- */
    .card-container {
        flex-direction: column; /* Kaardid üksteise alla */
        align-items: center;    /* Keskele */
        gap: 2rem;
    }

    .card {
        width: 100%;            /* Kaart täislaiuses */
        max-width: 350px;       /* Aga mitte liiga lai */
    }

    /* --- 6. SAMMUD (STEPS) --- */
    .steps-container {
        flex-direction: column; /* Sammud üksteise alla */
        align-items: center;
        gap: 2.5rem;            /* Rohkem vahet, et number ära mahuks */
        margin-bottom: 2rem;
    }

    .step-card {
        width: 100%;
        max-width: 280px;
    }

    .video-area {
        width: 100%;
        padding: 0;
    }

    /* --- 7. SISULEHED (ROW CONTAINER) --- */
    /* See on kõige tähtsam osa videote ja teksti paigutamiseks */

    .row-container, 
    .row-container.reverse {
        flex-direction: column; /* Paneb ALATI asjad üksteise alla */
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    /* Tühistame reverse efekti mobiilis, et tekst oleks alati enne videot */
    .row-container.reverse {
        flex-direction: column; 
    }

    .row-container .box-text,
    .row-container .video-box {
        width: 100%;       /* Kastid võtavad terve laiuse */
        flex: none;        /* Tühistame flex venitamise */
        padding: 0;
        margin: 0;
    }

    /* Videod täislaiuses */
    .video-box video,
    .video-box img,
    .video-right video, 
    .video-left video {
        width: 100%;
        height: auto;
        max-width: 100%;   /* Kindlustame, et ei lähe üle ääre */
    }

    /* Erilised sektsioonid (Underground, EDM jne) */
    #underground .box-layer,
    #edm .box-layer,
    #cloudrap .box-layer {
        background-position: center center; /* Taustapilt tsentrisse */
        padding: 4rem 1rem 1rem; /* Rohkem ruumi üles */
    }
    #underground ul,
    #edm ul,
    #cloudrap ul {
        padding: 1rem;
    }
    
    /* Pealkirjad sektsioonide sees */
    h4 {
        font-size: 1.1rem;
        text-align: center; /* Alapealkirjad keskele */
        margin: 0 auto 1rem auto; /* Joondab keskele */
    }

    /* --- 8. AUDIO PLAYER --- */
    audio {
        width: 100%;       /* Pleier terve ekraani laiune */
        margin-top: 1rem;
    }

    /* --- 9. KONTAKT --- */
    #contact {
        padding: 2rem 1rem;
    }
}