/* overrides.css — extends style.css without modifying it */


/* -- Exercise 1: dual hero ------------------------------------------------- */

.hero-panel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.hero-panel .hero {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
    min-width: 0;
    min-height: 490px;
}

/* Reset the fixed px dimensions from style.css; cascade order handles priority */
.hero-panel .hero-image {
    width: 100%;
    height: 100%;
    min-height: 490px;
    background-size: cover;
    background-position: center center;
}

/* Moon — re-declare per breakpoint to beat style.css's own breakpoint rules */
.hero-panel .hero-unit-moon-exploration .hero-image {
    background-image: url(/images/luna_large.jpg);
}

.hero-unit-space-exploration .hero-image {
    background-image: url(/images/final-frontier_large.jpg);
}

@media (-webkit-min-device-pixel-ratio: 1.5),
       (min-resolution: 1.5dppx),
       (min-resolution: 144dpi) {
    .hero-panel .hero-unit-moon-exploration .hero-image {
        background-image: url(/images/luna_large_2x.jpg);
    }

    .hero-unit-space-exploration .hero-image {
        background-image: url(/images/final-frontier_large_2x.jpg);
    }
}

@media only screen and (max-width: 1068px) {
    .hero-panel .hero-unit-moon-exploration .hero-image {
        background-image: url(/images/luna_medium.jpg);
    }

    .hero-unit-space-exploration .hero-image {
        background-image: url(/images/final-frontier_medium.jpg);
    }
}

@media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (max-width: 1068px) and (min-resolution: 1.5dppx),
       only screen and (max-width: 1068px) and (min-resolution: 144dpi) {
    .hero-panel .hero-unit-moon-exploration .hero-image {
        background-image: url(/images/luna_medium_2x.jpg);
    }

    .hero-unit-space-exploration .hero-image {
        background-image: url(/images/final-frontier_medium_2x.jpg);
    }
}

@media only screen and (max-width: 735px) {
    .hero-panel {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .hero-panel .hero {
        -webkit-box-flex: 0;
        -ms-flex: none;
        flex: none;
        width: 100%;
    }

    .hero-panel .hero-unit-moon-exploration .hero-image {
        background-image: url(/images/luna_small.jpg);
    }

    .hero-unit-space-exploration .hero-image {
        background-image: url(/images/final-frontier_small.jpg);
    }
}

@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (max-width: 735px) and (min-resolution: 1.5dppx),
       only screen and (max-width: 735px) and (min-resolution: 144dpi) {
    .hero-panel .hero-unit-moon-exploration .hero-image {
        background-image: url(/images/luna_small_2x.jpg);
    }

    .hero-unit-space-exploration .hero-image {
        background-image: url(/images/final-frontier_small_2x.jpg);
    }
}


/* -- Exercise 2: timeline order -------------------------------------------- */

/* Cancels float from style.css so items stack correctly on mobile */
.timeline-entries .timeline-item {
    float: none;
    width: 100%;
}

/* IE: float + flex column combination doesn't propagate width to children */
.timeline-entries .timeline-item-content {
    width: 100%;
    word-wrap: break-word;
}

@media (min-width: 992px) {
    .timeline-entries {
        overflow: hidden;
    }

    .timeline-entries .timeline-item:nth-child(odd) {
        float: left;
        clear: left;
        width: calc(50% - 15px);
        margin-right: 15px;
    }

    .timeline-entries .timeline-item:nth-child(even) {
        float: right;
        clear: right;
        width: calc(50% - 15px);
        margin-left: 15px;
    }
}


/* -- Exercise 3: gallery fallback for browsers without CSS Grid ------------- */

/* Float fallback as base; grid containers ignore floats on children per spec */
.gallery-grid {
    overflow: hidden;
}

.gallery-grid::after {
    content: '';
    display: table;
    clear: both;
}

@media only screen and (min-width: 737px) {
    .gallery-photo {
        float: left;
    }

    .grid-third {
        width: 33.3333%;
    }

    .grid-two-third {
        width: 66.6667%;
    }

    .grid-half {
        width: 50%;
    }
}

@supports (display: grid) {
    .gallery-grid {
        overflow: visible;
    }

    .gallery-grid::after {
        display: none;
    }

    @media only screen and (min-width: 737px) {
        .gallery-photo {
            float: none;
            width: auto;
        }
    }
}