/* ============================================================
   Our Team page (Home/OurTeam) - redesign, ported from ui_changes.
   Navy gradient hero + CMS intro band (accent-bar section headings,
   tinted closing quality band) + a 3-column team-member card grid so
   the 9 members fill exactly 3 clean rows (no orphaned last card).
   Scoped under .our-team-page so nothing leaks to other pages.
   Declares NO font-family anywhere - all text inherits the site's
   existing typeface (Source Sans Pro), per the port's font rule.

   Content boundary:
   - The intro copy AND the closing "We work hard to ensure..." quality
     line all live in ONE CMS rich-text blob (OurTeamTagLine.Description),
     rendered verbatim via @Html.Raw into #tmIntro. A class-only JS
     enhancer only ADDS classes / relocates whole nodes for presentation
     (accent-bar headings, moving the quality line into its band) - it
     never edits, adds, or drops any text.
   - The stray EZ Way Houses logo image is embedded INSIDE that same CMS
     blob, so it can't be deleted in code without editing CMS content.
     It's flagged for removal in the admin panel and hidden here as an
     interim (.tm-intro img -> display:none).
   - Every member (photo, name, role, phone, email, extension) comes from
     the OurTeams CMS collection, one row per person; the view only
     restyles those real per-row values.
   ============================================================ */

.our-team-page {
    --tm-bg: #F5F6F7;
    --tm-heading: #252525;
    --tm-text: #707070;
    --tm-green: #21b389;
    --tm-green-dark: #1a9873;
    --tm-navy: #16233a;
    --tm-navy-deep: #0e1826;
    --tm-card: #ffffff;
    --tm-border: #e8e4dc;
    background: var(--tm-bg);
    color: var(--tm-text);
    margin: 0 !important;
    /* Guaranteed breathing room above the footer, whether or not the closing
       quality band is present. */
    padding-bottom: 56px;
}

/* ---------- Banner ---------- */
/* Simplified banner matching the other redesigned pages: heading + the
   homepage green underline (60x3px #30caa0, centered) on the light page
   background - no navy hero block. The CMS description paragraph stays,
   shown below the line in the site's muted body color. */
.our-team-page .tm-hero {
    padding: 40px 24px 26px;
    text-align: center;
}

.our-team-page .tm-hero h1 {
    position: relative;
    font-size: clamp(1.9rem, 4.4vw, 2.25rem);
    font-weight: 800;
    margin: 0;
    padding-bottom: 14px;
    color: #333333;
}

    .our-team-page .tm-hero h1::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: #30caa0;
        border-radius: 2px;
    }

/* ---------- Intro band (single CMS blob) ---------- */
.our-team-page .tm-intro {
    /* Same text column as the banner description (.tm-hero-desc, 720px wide):
       768px box minus the 24px side padding = 720px of text, so the intro's
       left edge lines up exactly with the text above it, with a small gap
       below the banner. */
    max-width: 768px;
    margin: 0px auto 0;
    padding: 0 24px;
}

    .our-team-page .tm-intro p {
        font-size: .95rem;
        line-height: 1.8;
        color: var(--tm-text);
        margin: 0 0 14px;
    }

    /* Hide the stray logo embedded in the CMS blob (interim - flagged for
       CMS-admin removal). Only image in this blob is that logo. */
    .our-team-page .tm-intro img {
        display: none !important;
    }

    /* Empty paragraphs the CMS blob sometimes carries between sections. */
    .our-team-page .tm-intro .tm-empty {
        display: none !important;
    }

    /* Section headings inside the blob ("Meet Our Team", "We Work Together
       for You"), tagged by the enhancer. Green accent bar + dark weight. */
    .our-team-page .tm-intro .tm-heading {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1.2rem;
        font-weight: 800;
        color: var(--tm-heading);
        margin: 26px 0 12px;
        line-height: 1.3;
    }

        .our-team-page .tm-intro .tm-heading::before {
            content: "";
            flex: 0 0 auto;
            width: 22px;
            height: 3px;
            border-radius: 2px;
            background: var(--tm-green);
        }

/* ---------- Team grid ---------- */
.our-team-page .tm-team {
    max-width: 1120px;
    margin: 44px auto 0;
    padding: 0 24px 8px;
}

.our-team-page .tm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.our-team-page .tm-card {
    background: var(--tm-card);
    border: 1px solid var(--tm-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(16, 24, 40, .05);
    transition: transform .15s ease, box-shadow .15s ease;
}

    .our-team-page .tm-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 38px rgba(16, 24, 40, .12);
    }

/* Photo wrapper clips the zoom so it never spills onto the card body. */
.our-team-page .tm-photo-wrap {
    overflow: hidden;
    line-height: 0;
}

.our-team-page .tm-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    background: #eceef1;
    transition: transform .45s ease;
}

/* Zoom the photo in on card hover. */
.our-team-page .tm-card:hover .tm-photo {
    transform: scale(1.07);
}

@media (prefers-reduced-motion: reduce) {
    .our-team-page .tm-photo {
        transition: none;
    }

    .our-team-page .tm-card:hover .tm-photo {
        transform: none;
    }
}

.our-team-page .tm-card-body {
    padding: 22px 24px 24px;
}

.our-team-page .tm-name {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--tm-heading);
    margin: 0 0 3px;
}

.our-team-page .tm-role {
    font-size: .8rem;
    font-weight: 600;
    color: var(--tm-green-dark);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 16px;
}

.our-team-page .tm-contact {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-top: 16px;
    border-top: 1px solid var(--tm-border);
}

.our-team-page .tm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .84rem;
    color: var(--tm-text);
    text-decoration: none;
    word-break: break-word;
}

    .our-team-page .tm-row svg {
        width: 15px;
        height: 15px;
        fill: var(--tm-green-dark);
        flex-shrink: 0;
    }

    .our-team-page .tm-row:hover {
        color: var(--tm-green-dark);
    }

/* Optional subtle social row - only rendered when a member has
   ShowSocialMedia enabled in the CMS (feature preserved, not dropped). */
.our-team-page .tm-social {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--tm-border);
}

    .our-team-page .tm-social a {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f0fdf9;
        color: var(--tm-green-dark);
        transition: background-color .15s ease, color .15s ease;
    }

        .our-team-page .tm-social a:hover {
            background: var(--tm-green);
            color: #fff;
        }

        .our-team-page .tm-social a i {
            font-size: .82rem;
        }

/* ---------- Closing quality band (moved CMS line) ---------- */
.our-team-page .tm-quality-band {
    background: var(--tm-card);
    border-top: 1px solid var(--tm-border);
    border-bottom: 1px solid var(--tm-border);
    margin-top: 40px;
    padding: 44px 24px;
}

/* If the enhancer didn't find/move the quality line, the band stays empty
   (the line then remains visible in #tmIntro) - hide the empty band. */
.our-team-page .tm-quality-band:has(.tm-quality-slot:empty) {
    display: none;
}

.our-team-page .tm-quality-inner {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.our-team-page .tm-qi {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f0fdf9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .our-team-page .tm-qi svg {
        width: 22px;
        height: 22px;
        fill: var(--tm-green-dark);
    }

.our-team-page .tm-quality-slot p {
    font-size: .97rem;
    line-height: 1.8;
    color: var(--tm-text);
    margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .our-team-page .tm-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .our-team-page .tm-grid {
        grid-template-columns: 1fr;
    }

    .our-team-page .tm-hero {
        padding: 32px 20px 22px;
    }

    .our-team-page .tm-quality-inner {
        flex-direction: column;
    }
}