/* Beauty Spot uses the portrait as a separate editorial card, never as a crop-heavy backdrop. */
.treatment-page--beautyspots .beautyspot-hero {
    isolation: isolate;
    min-height: min(52rem, 92svh);
    align-items: center;
    padding: 9rem 0 4.5rem;
    background:
        radial-gradient(circle at 82% 18%, rgba(225, 189, 123, 0.3), transparent 24rem),
        radial-gradient(circle at 8% 88%, rgba(111, 72, 46, 0.12), transparent 30rem),
        linear-gradient(135deg, var(--section-white-bg), var(--section-cream-bg));
}

.treatment-page--beautyspots .beautyspot-hero::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.2), transparent 46%);
    content: "";
    pointer-events: none;
}

.beautyspot-hero__layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(19rem, 0.72fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
}

.treatment-page--beautyspots .beautyspot-hero .page-hero__panel {
    width: 100%;
    max-width: none;
}

.beautyspot-hero__photo {
    width: min(100%, 31rem);
    margin: 0;
    overflow: hidden;
    justify-self: end;
    padding: 0.7rem;
}

.beautyspot-hero__photo img {
    width: 100%;
    height: auto;
    border-radius: calc(var(--radius-large) - 0.5rem);
}

.beautyspot-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
}

.beautyspot-hero__facts li {
    padding: 0.5rem 0.9rem;
    color: var(--heading-color);
    font-size: 0.9rem;
    font-weight: 700;
}

.treatment-page--beautyspots .beautyspot-hero .hero__actions {
    margin-top: 1.5rem;
}

@media (max-width: 52rem) {
    .treatment-page--beautyspots .beautyspot-hero {
        min-height: 0;
        padding: 6.75rem 0 2.75rem;
    }

    .beautyspot-hero__layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .beautyspot-hero__photo {
        grid-row: 1;
        width: min(100%, 21rem);
        margin-inline: auto;
        justify-self: center;
    }

    .treatment-page--beautyspots .beautyspot-hero .page-hero__panel {
        grid-row: 2;
    }
}