/* E-E-A-T trust strip + breadcrumb — shared by hub, services, and
   cancer-treatment templates. Dual rem scale per location design system. */

.reviewed-by {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 auto;
    padding: 0.6rem 1.2rem;
    background-color: #fff8fb;
    border-top: 1px solid #f0d0dd;
    border-bottom: 1px solid #f0d0dd;
}

.reviewed-by__avatar {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    border: 2px solid #fdfdfd;
    box-shadow: 0 0 0 2px var(--brandClr, #802a8f);
    flex-shrink: 0;
}

.reviewed-by__text {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    min-width: 0;
}

.reviewed-by__label {
    margin: 0;
    font-size: 0.715rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1e8e3e;
}

.reviewed-by__label i {
    margin-right: 0.12rem;
}

.reviewed-by__name {
    margin: 0;
    font-size: 0.91rem;
    line-height: 140%;
    color: #444444;
}

.reviewed-by__name a {
    color: var(--brandClr, #802a8f);
    font-weight: 600;
    text-decoration: none;
}

.reviewed-by__name a:hover,
.reviewed-by__name a:focus-visible {
    text-decoration: underline;
}

.reviewed-by__creds {
    display: block;
    font-size: 0.78rem;
    color: #5a5b60;
    font-weight: 400;
}

.reviewed-by__meta {
    margin: 0;
    font-size: 0.754rem;
    color: #5a5b60;
}

.reviewed-by__meta a {
    color: var(--brandClr, #802a8f);
    font-weight: 600;
    text-decoration: none;
}

.reviewed-by__meta a:hover {
    text-decoration: underline;
}

.reviewed-by__dot {
    color: #d791ab;
    padding: 0 0.15rem;
}

/* Inside a banner's left column (under the CTA button) the strip becomes
   a compact card — no full-bleed borders, no margin hack to clear the
   form (the form/image lives in the right column). Covers the location
   banner plus all five service banners. */
.banner__left-container .reviewed-by,
.banner__left .reviewed-by,
.details-container .reviewed-by,
.second-opinion-tumor__details-container .reviewed-by,
.screening-banner__details-container .reviewed-by {
    margin: 1rem 0 0;
    padding: 0.5rem 0.8rem;
    border: 1px solid #f0d0dd;
    border-radius: 0.6rem;
    width: fit-content;
    max-width: 100%;
}

.loc-breadcrumb {
    margin: 0 auto;
    padding: 0.4rem 1.2rem 0.1rem;
    font-size: 0.806rem;
    color: #5a5b60;
}

.loc-breadcrumb a {
    color: var(--brandClr, #802a8f);
    font-weight: 500;
    text-decoration: none;
}

.loc-breadcrumb a:hover,
.loc-breadcrumb a:focus-visible {
    text-decoration: underline;
}

@media screen and (min-width: 768px) {
    /* The banner form overflows ~1.4rem below the banner on the right;
       keep this strip on the LEFT, clear of the form's column. */
    .reviewed-by {
        gap: 0.3rem;
        padding: 0.28rem 0.5rem;
        margin: 0.2rem 14rem 0 1.88rem;
        border: 1px solid #f0d0dd;
        border-radius: 0.25rem;
        width: fit-content;
        max-width: calc(100% - 16rem);
    }

    .reviewed-by__avatar {
        width: 1.05rem;
        height: 1.05rem;
        box-shadow: 0 0 0 1px var(--brandClr, #802a8f);
    }

    .reviewed-by__text {
        flex-direction: row;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 0.05rem 0.35rem;
    }

    .reviewed-by__label {
        font-size: 0.39rem;
    }

    .reviewed-by__name {
        font-size: 0.442rem;
    }

    .reviewed-by__creds {
        display: inline;
        font-size: 0.39rem;
    }

    .reviewed-by__meta {
        font-size: 0.39rem;
    }

    /* Cap the card width: the banner form overlaps the left column from
       the right (absolutely positioned on service banners), so a 100%-wide
       card would touch it — 17rem keeps a clear gap before the form. */
    .banner__left-container .reviewed-by,
    .banner__left .reviewed-by,
    .details-container .reviewed-by,
    .second-opinion-tumor__details-container .reviewed-by,
    .screening-banner__details-container .reviewed-by {
        margin: 0.55rem 0 0;
        max-width: min(100%, 17rem);
    }

    .loc-breadcrumb {
        padding: 0.2rem 1.88rem 0.05rem;
        font-size: 0.416rem;
    }
}