/* =========================================================
   LEGACY AV SOLUTIONS
   REVIEWS PAGE

   Page-specific styles for reviews.html.

   Shared website elements such as:
   - Header
   - Navigation
   - Footer
   - Global buttons
   - Brand colors
   - Reusable containers

   are handled by style.css.

   DESIGN DIRECTION:
   - Dark, dramatic Reviews hero
   - Warm off-white testimonial section
   - Dark technical testimonial cards
   - Strong red review accents
   - Deep navy closing CTA
   - Sharp edges rather than rounded corporate cards
   - Consistent visual language with Home, Our Story,
     and Services
   ========================================================= */

/* =========================================================
   BRANDED LEGACY DIVIDER
   ========================================================= */

/*
   This divider matches the branded divider used across
   Home, Our Story, and Services.

   Thin red, white, and blue stripes run across the page
   while the Legacy AV Solutions logo interrupts the
   stripes in the center.
*/

.legacy-divider {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 54px;

    background-color: var(--brand-black);

    overflow: hidden;
}


.legacy-divider::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    height: 9px;

    transform: translateY(-50%);

    background:
        linear-gradient(to bottom,
            var(--brand-red) 0,
            var(--brand-red) 33.33%,
            var(--brand-white) 33.33%,
            var(--brand-white) 66.66%,
            var(--brand-blue) 66.66%,
            var(--brand-blue) 100%);
}


.legacy-divider-logo {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 18px;

    background-color: var(--brand-black);
}


.legacy-divider-logo img {
    width: 190px;

    height: auto;

    display: block;
}

/* =========================================================
   REVIEWS TYPOGRAPHY DETAILS
   ========================================================= */

/*
   Small branded labels use the same condensed display face
   established across Home, Our Story, and Services.
*/

.reviews-hero .section-label,
.reviews-heading .section-label,
.reviews-cta .section-label {
    font-family: var(--font-display);

    font-weight: 800;
}


/* =========================================================
   1. REVIEWS HERO
   ========================================================= */

/*
   Reviews begins with a dark hero rather than the
   original light background.

   This creates consistency with the redesigned Services
   and Our Story pages while still allowing the Reviews
   page to have its own identity.
*/

.reviews-hero {
    position: relative;

    padding: 115px 0 105px;

    background:
        radial-gradient(circle at 82% 35%,
            rgba(6, 75, 120, 0.26) 0%,
            rgba(6, 75, 120, 0.08) 30%,
            transparent 58%),
        var(--color-dark);

    color: var(--brand-white);

    overflow: hidden;
}


/*
   Subtle red lighting in the opposite corner balances
   the blue AV-style lighting.

   The effect is intentionally restrained so the page
   does not become an obvious red/white/blue theme.
*/

.reviews-hero::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    left: -240px;
    bottom: -270px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(170, 50, 50, 0.14) 0%,
            transparent 70%);

    pointer-events: none;
}


.reviews-hero .section-container {
    position: relative;

    z-index: 1;
}


.reviews-hero-content {
    max-width: 800px;
}


.reviews-hero-content h1 {
    margin-bottom: 1.4rem;

    font-size: clamp(3.5rem, 7vw, 5.5rem);

    font-weight: 900;

    line-height: 1.02;

    letter-spacing: 0.005em;

    color: var(--brand-white);
}


.reviews-hero-description {
    max-width: 700px;

    margin-bottom: 2rem;

    font-size: 1.12rem;

    line-height: 1.8;

    color: #e2e2df;
}


/*
   Existing HTML already contains this decorative line.

   It now uses the same sharp red treatment established
   throughout the redesigned website.
*/

.reviews-hero-divider {
    width: 90px;

    height: 4px;

    background-color: var(--brand-red);

    border-radius: 0;
}


/* =========================================================
   2. REVIEWS SECTION
   ========================================================= */

/*
   The main testimonial area switches to the warm off-white
   background used elsewhere on the redesigned site.

   This creates a strong contrast against the dark hero.
*/

.reviews-section {
    padding-top: 120px;

    padding-bottom: 120px;

    background-color: var(--color-light-section);

    color: var(--color-light-section-text);

    border-top: 4px solid var(--brand-blue);
}


.reviews-heading {
    max-width: 800px;

    margin: 0 auto 4rem;

    text-align: center;
}


.reviews-heading h2 {
    margin-bottom: 1.2rem;

    font-size: clamp(2.4rem, 4vw, 3.6rem);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: 0.005em;

    color: var(--color-light-section-text);
}


/*
   A small red line is generated beneath the heading.

   This gives the section the same heading hierarchy as
   Services without requiring an HTML change.
*/

.reviews-heading h2::after {
    content: "";

    display: block;

    width: 72px;

    height: 4px;

    margin: 24px auto;

    background-color: var(--brand-red);
}


.reviews-heading .section-intro {
    max-width: 680px;

    margin-left: auto;

    margin-right: auto;
}


.reviews-intro {
    margin-bottom: 0;

    font-size: 1.05rem;

    line-height: 1.8;

    color: var(--color-light-section-text-secondary);
}


/* =========================================================
   3. REVIEW CARD GRID
   ========================================================= */

/*
   Three cards remain side-by-side on larger displays.

   The responsive rules later in this file preserve the
   tablet and mobile layouts.
*/

.reviews-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1.5rem;
}


/* =========================================================
   4. REVIEW CARDS
   ========================================================= */

/*
   The original Reviews page used rounded white cards.

   These have been redesigned as dark, sharper testimonial
   modules to better match the new Legacy visual identity.

   The cards stand out strongly against the warm background.
*/

.review-card {
    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 350px;

    padding: 2.25rem;

    background:
        linear-gradient(145deg,
            #181a1e 0%,
            #111216 100%);

    border: 1px solid #303238;

    border-top: 4px solid var(--brand-red);

    border-radius: 2px;

    overflow: hidden;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.13);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/*
   Adds subtle blue AV lighting to the bottom corner
   of each review card.
*/

.review-card::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    right: -110px;
    bottom: -120px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(6, 75, 120, 0.23) 0%,
            transparent 70%);

    pointer-events: none;
}


.review-card:hover {
    transform: translateY(-6px);

    border-color: var(--brand-blue-light);

    border-top-color: var(--brand-red);

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.18);
}


/*
   Keep all actual card content above the decorative
   background glow.
*/

.review-card>* {
    position: relative;

    z-index: 1;
}




/* =========================================================
   6. PLACEHOLDER REVIEW CONTENT
   ========================================================= */

/*
   These reviews are not real testimonials yet.

   The placeholder label remains visually obvious so the
   temporary content is not mistaken for an actual
   customer review while the site is being developed.
*/

.review-placeholder-label {
    margin-bottom: 1rem;

    color: var(--brand-blue-light);

    font-family: var(--font-display);

    font-size: 0.78rem;

    font-weight: 800;

    letter-spacing: 0.12em;

    line-height: 1.5;

    text-transform: uppercase;
}


.review-text {
    flex-grow: 1;

    margin-bottom: 0;

    color: #e2e2df;

    font-size: 1.03rem;

    line-height: 1.8;
}


/* =========================================================
   7. REVIEW AUTHOR INFORMATION
   ========================================================= */

.review-author {
    display: flex;

    flex-direction: column;

    gap: 0.3rem;

    margin-top: 1.75rem;

    padding-top: 1.35rem;

    border-top: 1px solid rgba(255, 255, 255, 0.15);
}


.review-author-name {
    color: var(--brand-white);

    font-family: var(--font-display);

    font-weight: 800;

    letter-spacing: 0.005em;
}


.review-project {
    color: #b9babd;

    font-size: 0.9rem;
}


/* =========================================================
   8. CONTACT CTA
   ========================================================= */

/*
   The closing CTA uses the deep navy gradient already
   established across the redesigned website.

*/

.reviews-cta {
    position: relative;

    padding: 95px 0;

    background:
        linear-gradient(135deg,
            #071722 0%,
            #09283d 50%,
            #06304c 100%);

    color: var(--brand-white);



    overflow: hidden;
}


/*
   Subtle decorative red lighting.
*/

.reviews-cta::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    left: -200px;
    top: -220px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(170, 50, 50, 0.14) 0%,
            transparent 70%);

    pointer-events: none;
}


/*
   Subtle blue lighting on the opposite side.
*/

.reviews-cta::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -230px;
    bottom: -270px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(11, 101, 158, 0.20) 0%,
            transparent 70%);

    pointer-events: none;
}


.reviews-cta .section-container {
    position: relative;

    z-index: 1;
}


.reviews-cta-content {
    max-width: 760px;

    margin: 0 auto;

    text-align: center;
}


.reviews-cta .section-label {
    color: var(--brand-red);
}


.reviews-cta h2 {
    margin-bottom: 1.2rem;

    color: var(--brand-white);

    font-size: clamp(2.3rem, 4vw, 3.3rem);

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: 0.005em;
}


.reviews-cta p {
    max-width: 650px;

    margin: 0 auto 2.2rem;

    color: #e2e2df;

    font-size: 1.05rem;

    line-height: 1.8;
}


/* =========================================================
   9. CTA BUTTON
   ========================================================= */

.reviews-cta-button {
    padding: 15px 32px;

    background-color: var(--brand-red);

    color: var(--brand-white);

    border: 1px solid var(--brand-red);

    border-radius: 2px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease;
}


.reviews-cta-button:hover {
    transform: translateY(-2px);

    background-color: var(--brand-red-hover);

    color: var(--brand-white);

    border-color: var(--brand-red-hover);
}


/* =========================================================
   10. TABLET RESPONSIVE DESIGN
   ========================================================= */

@media (max-width: 900px) {

    .reviews-hero {
        padding: 95px 0 85px;
    }


    /*
       Reviews change from three columns to two columns
       on tablet-sized displays.
    */

    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /*
       Because there are currently three review cards,
       the third card fills the second row.

       We can revisit this once real testimonials are added
       and the number of reviews changes.
    */

    .review-card:last-child {
        grid-column: 1 / -1;
    }

}


/* =========================================================
   11. MOBILE RESPONSIVE DESIGN
   ========================================================= */

@media (max-width: 600px) {

    .reviews-hero {
        padding: 75px 0 70px;
    }


    .reviews-hero-content h1 {
        font-size: 3rem;

        line-height: 1.03;

        letter-spacing: 0.005em;
    }


    .reviews-hero-description {
        font-size: 1rem;

        line-height: 1.75;
    }


    .reviews-section {
        padding-top: 80px;

        padding-bottom: 80px;
    }


    /*
       Review cards stack vertically on phones.
    */

    .reviews-grid {
        grid-template-columns: 1fr;
    }


    /*
       Removes the tablet-only spanning behavior.
    */

    .review-card:last-child {
        grid-column: auto;
    }


    .review-card {
        min-height: auto;

        padding: 1.75rem;
    }


    .reviews-cta {
        padding: 75px 0;
    }


    .reviews-cta h2 {
        font-size: 2rem;

        line-height: 1.08;
    }


    .reviews-cta-button {
        width: 100%;

        text-align: center;
    }

}


/* =========================================================
   12. REDUCED MOTION ACCESSIBILITY
   ========================================================= */

/*
   Visitors who have requested reduced motion through
   their operating system will not receive the card/button
   lift animations.
*/

@media (prefers-reduced-motion: reduce) {

    .review-card,
    .reviews-cta-button {
        transition: none;
    }


    .review-card:hover,
    .reviews-cta-button:hover {
        transform: none;
    }

}