@import url("../../styles/style.css");

main {
    display: flex;
    flex-direction: row !important;
    justify-content: space-between;


    #main-content {
        min-width: calc(100% - 300px);
        display: flex;
        flex-direction: column;
        gap: 36px;
    }

    #main-info {
        display: flex;
        gap: 36px;
    
        #main-text {
            display: flex;
            flex-direction: column;
            gap: 24px;
    
            #info {
                display: flex;
                flex-direction: column;
                gap: 20px;
    
                .green {
                    color: var(--adding-color);
                }
            }
        }
    }

    .update-history {
        display: flex;
        flex-direction: column;
        max-height: 70svh;

        p {
            font-size: 16px;
            font-weight: 400;
            text-align: center;
            color: var(--text-menu-color);
        }

        ul, div {
            width: 100%;
            margin: 0;
            padding: 0 5px 0 20px;
            overflow-y: auto;

            li {
                text-align: center;
                padding: 3px 0;
            }

            tr {
                padding: 3px 0;
            }
        }
    }

    #update-history {
        position: sticky;
        top: 100px;
        box-sizing: border-box;
        min-width: 400px;
        gap: 40px;
        padding: 30px;
        transform: translateX(30px);
        border-radius: var(--border-radius-card) 0 0 var(--border-radius-card);
    }

    #update-history-mobile {
        display: none;
    }
}

#day-airplane {
    display: flex;
    flex-direction: column;
    gap: 32px;

    #header {
        display: flex;
        align-items: center;
        gap: 60px;

        >p {
            font-size: 20px;
            font-weight: 500;

            span {
                font-size: 18px;
                color: var(--text-menu-color);
            }
        }
    }

    #images {
        display: flex;
        justify-content: space-between;
        
        .airplane-img {
            max-width: 200px;
            max-height: 150px;
            object-fit: contain;
        }
    }
}

#partners {
    display: flex;
    flex-direction: column;
    gap: 20px;

    #partners-content {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .partner {
            display: flex;
            align-items: center;
            gap: 10px;

            .vertical-bar {
                width: 1px;
                height: 40px;
                background: var(--text-base-color);
                margin-left: 10px;
            }
        }
    }

    h3 {
        font-size: 16px;
        font-weight: 600;

        span {
            color: var(--primary-text-color);
        }
    }
}

/* Adaptability */
@media screen and (max-width: 1300px) {
    #main-info {
        flex-direction: column;
        align-items: center;
        
        #main-img {
            width: 350px;
        }
    }

    #day-airplane {
        #header {
            flex-direction: column;
            gap: 10px;
        }

        #images {
            flex-direction: column;
            align-items: center;
            gap: 10px;

            .airplane-img {
                max-width: 90%;
            }
        }
    }

    #partners {
        #partners-content {
            gap: 40px;

            .partner {
                flex-direction: column;
            }

            .vertical-bar {
                display: none;
            }
        }
    }

    #update-history {
        display: none;
    }

    #update-history-mobile {
        display: flex !important;
        align-items: center;
        gap: 20px;
    }
}