/* =========================================================
   Title + Subtitle
========================================================= */

#title {
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    color: var(--blue);
    margin: 40px auto 0;
    padding: 0 30px;
    line-height: 1.1;
    max-width: var(--content-max-width);
}

#subtitle {
    text-align: center;
    font-size: 16px;
    color: #000;
    margin: 0 auto 50px;
    padding: 0 30px;
    max-width: var(--content-max-width);
}

#subtitleLink {
    color: var(--blue);
}

#subtitleLink:hover {
    color: var(--blue-hover);
}


/* =========================================================
   Top
========================================================= */

#top {
    max-width: var(--content-max-width);
    margin: 0 auto 30px auto;
    padding: 0 15px;
}

#topQuote {
}

#topBorder {
    width: 100%;
    margin: 30px auto;
    border: none;
    border-top: 1px solid #eee;
}

#topQuoteText {
    font-size: 16px;
    margin-bottom: 10px;
}

#topQuoteAuthor {
    font-size: 14px;
}


/* =========================================================
   Grid
========================================================= */

#grid {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 30px;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 15px;
    align-items: flex-start;
}

#gridBorder {
    width: 100%;
    margin: 30px auto;
    border: none;
    border-top: 1px solid #eee;
}

#gridContent {
}

#gridContentItems {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.gridContentItemsQuote {
    margin-bottom: 29px;
}

.gridContentItemsQuote:last-child {
    margin-bottom: 0;
}

.gridContentItemsQuoteText {
    font-size: 16px;
    margin-bottom: 10px;
}

.gridContentItemsQuoteAuthor {
    font-size: 14px;
}

#gridImage {
    max-width: 366px;
    margin: 0 auto;
    height: auto;
    object-fit: cover;
}

#gridBorder {
    grid-column: 1 / -1;
    width: 100%;
    border: none;
    border-top: 1px solid #eee;
    margin: 30px 0;
}

/* Responsive — Grid */
@media (max-width: 800px) {
    #grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   Featured
========================================================= */

#featured {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 15px;
}

#featuredItems {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.featuredItemsQuote {
    margin-top: 40px;
}

.featuredItemsQuoteText {
    font-size: 24px;
    margin-bottom: 10px;
    line-height: 1.3;
}

.featuredItemsQuoteAuthor {
    font-size: 14px;
}

/* Responsive — Featured */
@media (max-width: 800px) {
    #featuredItems {
        grid-template-columns: 1fr;
    }
}

/* ===== Featured Center ===== */

#featuredCenter {
    text-align: center;
    width: 100%;
    margin-top: 80px;
}

#featuredCenterItemsQuote {
}

#featuredCenterItemsQuoteText {
    font-size: 24px;
    margin-bottom: 10px;
}

#featuredCenterItemsQuoteAuthor {
    font-size: 14px;
}

#featuredCenterBorder {
    width: 100%;
    border: none;
    border-top: 1px solid #eee;
    margin: 80px 0 40px;
}

/* =========================================================
   Middle
========================================================= */

#middle {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 60px;
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
}

.middleQuote {
    padding: 50px 0;
    border-top: 1px solid #eee;
}

.middleQuote:first-child {
    border-top: none;
    padding-top: 0;
}

.middleQuote:last-child {
    padding-bottom: 0;
}

.middleQuoteText {
    font-size: 16px;
    margin-bottom: 8px;
}

.middleQuoteAuthor {
    font-size: 14px;
}

/* =========================================================
   Hero
========================================================= */

#hero {
    background-image: url('/assets/images/customer-testimonials/bg_happywoman.jpg');
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    color: var(--primary);
    min-height: 600px;
    display: flex;
    align-items: center;
    line-height: 1.3;
    justify-content: flex-end;
    padding: 40px;
}

#heroContent {
    max-width: 50%;
    text-align: right;
    margin-left: auto;
}

#heroContentQuote {
}

#heroContentQuoteText {
    font-size: 38px;
    margin-bottom: 10px;
}

#heroContentQuoteAuthor {
    font-size: 14px;
}

/* Responsive — Hero */
@media (max-width: 800px) {
    #hero {
        justify-content: flex-end;
        min-height: 300px;
    }

    #heroContent {
        max-width: 50%;
        text-align: right;
    }

    #heroContentQuoteText {
        font-size: 21px;
    }
}


/* =========================================================
   CTA
========================================================= */

#cta {
    background-color: var(--light-blue);
    text-align: center;
    padding: 60px 15px;
    margin: 0 auto;
    line-height: 1;
}

#ctaTitle {
    font-size: 38px;
    font-weight: 600;
    color: var(--blue);
    margin: 0 0 10px;
}

#ctaBody {
    font-size: 24px;
    color: #000;
    margin: 0;
}

/* Responsive - CTA */
@media (max-width: 800px) {
    #ctaTitle {
        font-size: 28px;
    }
}

/* =========================================================
   Grid Reverse
========================================================= */

#gridReverse {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 15px;
    align-items: flex-end;
}

#gridReverseImage {
    max-width: 600px;
    margin: 0 auto;
    height: auto;
    object-fit: cover;
}

#gridReverseContent {
    align-self: center;
}

#gridReverseContentItems {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.gridReverseContentItemsQuote {
    margin-bottom: 29px;
}

.gridReverseContentItemsQuote:last-child {
    margin-bottom: 0;
}

.gridReverseContentItemsQuoteText {
    font-size: 16px;
    margin-bottom: 10px;
}

.gridReverseContentItemsQuoteAuthor {
    font-size: 14px;
}

/* Responsive — Grid Reverse */
@media (max-width: 800px) {
    #gridReverse {
        grid-template-columns: 1fr;
        margin-bottom: 30px;
    }

    #gridReverseImage {
        order: -1;
        max-width: 600px;
    }
}