/*********************************************************************************************
Home page style.
*********************************************************************************************/

/* Page content style */

#about-simple {
    margin-top: 0px;
    padding-top: 0px;
}

#about-simple .red-button {
    margin: 1.5rem 0.625rem;
}

#about-simple .inverse-red-button {
    margin: 1.5rem 0.625rem;
}

#about-simple .hero-image {
    /* width 100% keeps the image's ratio */
    width: 100%;
    height: auto;
    margin-top: 50px;
    margin-bottom: 30px;
}

/* about-detailed content and section styling */
#about-detailed {
    background: linear-gradient(to bottom right, white, var(--gray-accent));
    /* NOT WORKING. MAY BE VAR
    background: -webkit-linear-gradient(to bottom right, var(--gray-background), var(--gray-accent));
    background: -moz-linear-gradient(to bottom right, var(--gray-background), var(--gray-accent));
    background: -o-linear-gradient(to bottom right, var(--gray-background), var(--gray-accent));
    */
}

#about-detailed .container {
    /* Not necessary unless child elements get fixed dimensions */
    height: auto;
}

#about-detailed .flex-row {
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
    /* Not necessary unless child elements get fixed dimensions */
    height: auto;
}

.double-column-text {
    height: auto;
    max-width: 100%;
}

.double-column-text h3 {
    color: white;
    text-align: center;
    padding: 20px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
    background: -webkit-linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
    background: -moz-linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
    background: -o-linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
}

.double-column-text p {
    padding: 1.5em;
}

.double-column-image img {
    /* Keeps image retio constant */
    max-width: 100%;
    height: auto;
}

@media screen and (max-width: 960px) {
    #about-detailed .flex-row {
        flex-direction: column;
    }
    .double-column-text {
        order: 1;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    .double-column-image {
        order: 2;
    }
}

/* Services section grid and grid card styling */
.grid-card {
    background-size: cover;
    color: white;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    background-color: var(--red-accent);
    width: min(calc(var(--three-column-width) + 40px), 90%);
    overflow: hidden;

    transition: all 1000ms;
    -webkit-transition: all 1000ms;
    -moz-transition: all 1000ms;
    -ms-transition: all 1000ms;
    -o-transition: all 1000ms;

    box-shadow: 4px 8px 4px 0 var(--shadow-color);
}

#screen-replacement-info {
    background-image: url("images/age-barros-fKAjOxgZNPg-unsplash.jpg");
    background-size: cover;
}

#water-damage-info {
    background-image: url("images/iphone-1067991_640.jpg");
    background-size: cover;
}

#battery-replacement-info {
    background-image: url("images/tyler-lastovich-rAtzDB6hWrU-unsplash.jpg");
    background-size: cover;
}

#data-recovery-info {
    background-image: url("images/benjamin-lehman-GNyjCePVRs8-unsplash.jpg");
    background-size: cover;
}

#accessories-info {
    background-image: url("images/lucas-hoang-0_S1K3u6Cmc-unsplash.jpg");
    background-size: cover;
}

#speaker-repair-info {
    background-image: url("images/apple-1284223_640.jpg");
    background-size: cover;
}

.grid-card-logo {
    width: 100%;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;

    transition: all 1000ms;
    -webkit-transition: all 1000ms;
    -moz-transition: all 1000ms;
    -ms-transition: all 1000ms;
    -o-transition: all 1000ms;
}

.grid-card-logo img {
    width: 50%;
    height: auto;
}

.grid-card-text {
    width: 100%;
    opacity: 0;
    text-align: left;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;

    transition: all 1000ms;
    -webkit-transition: all 1000ms;
    -moz-transition: all 1000ms;
    -ms-transition: all 1000ms;
    -o-transition: all 1000ms;
}

.grid-card:hover {
    background: var(--lighter-red-accent);
}

.grid-card:hover .grid-card-logo {
    opacity: 0;

    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
}

.grid-card:hover .grid-card-text {
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 1;

    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
}

/* Grid cards should be shrunk */

/* Text needs special conditions to fit in service cards */
@media screen and (max-width: 940px) {
    .grid-card {
        width: min(var(--three-column-width), 90%);
    }
}