.ath-room-track {
    width: 100% !important;
}

@media (min-width: 1025px) {
    .ath-room-track {
        height: 300vh !important;
        width: 100% !important;
        position: relative !important;
        overflow: visible !important;
        flex-direction: row;
    }
    .ath-room-track--reverse {
        flex-direction: row-reverse;
    }
    .ath-room-sticky {
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important;
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        justify-content: space-between !important;
        /* Ορίζουμε το sticky box ως Container για να μετράμε το πλάτος του */
        container-type: inline-size;
    }
    .ath-room-text {
        width: 45%; 
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }
    .ath-room-text > * {
        width: 100% !important;
        /* Fallback για πολύ παλιούς browsers */
        min-width: 450px !important;
        /* ΤΟ ΜΥΣΤΙΚΟ: Το κείμενο μένει σταθερά στο 45% του συνολικού container. 
           Έτσι, όταν το animation της εικόνας "κλείνει" αυτό το κουτί, 
           τα γράμματα ΔΕΝ ζουλιούνται, απλά κρύβονται όμορφα (wipe effect) */
        min-width: 45cqw !important; 
        padding: 0 clamp(1.5rem, 4vw, 4rem) !important;
        box-sizing: border-box !important;
    }
    .ath-room-media {
        position: relative;
        width: 45%; 
        height: 60vh !important;
        border-radius: 24px;
        overflow: hidden !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    .ath-room-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media (max-width: 1024px) {
    .ath-room-track {
        height: auto !important;
        padding: 2rem 0 !important;
        width: 100% !important;
    }

    .ath-room-sticky {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
        height: auto !important;
        width: 100% !important;
    }

    .ath-room-media {
        position: relative !important;
        width: 80% !important;
        max-width: 600px !important;
        margin: 0 auto !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        order: -1 !important;
        display: block !important;
        height: auto !important;
    }

    .ath-room-media img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 20px !important;
    }

    .ath-room-text {
        width: 80% !important;
        max-width: 600px !important;
        margin: 0 auto !important;
        height: auto !important;
        padding: 0 !important;
    }

    .ath-room-text > * {
        width: 100% !important;
        min-width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 767px) {
    .ath-room-track {
        padding: 1.5rem 0 !important;
    }

    .ath-room-sticky {
        gap: 1rem !important;
    }

    .ath-room-media {
        width: 92% !important;
        max-width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 16px !important;
    }

    .ath-room-media img {
        border-radius: 16px !important;
    }

    .ath-room-text {
        width: 92% !important;
        max-width: 100% !important;
    }
}