.shared-public-hero {
    --shared-hero-min-height: 30rem;
    --shared-hero-image-position-desktop: center center;
    --shared-hero-image-position-mobile: center center;
    --hero-action-primary-bg: var(--bs-primary);
    --hero-action-primary-border: var(--bs-primary);
    --hero-action-primary-color: #fff;
    --hero-action-secondary-bg: transparent;
    --hero-action-secondary-border: var(--bs-primary);
    --hero-action-secondary-color: var(--bs-primary);
    --hero-action-orders-bg: transparent;
    --hero-action-orders-border: var(--bs-secondary);
    --hero-action-orders-color: var(--bs-secondary);
    position: relative;
}

.shared-public-hero.hero-height-compact { --shared-hero-min-height: 21rem; }
.shared-public-hero.hero-height-large { --shared-hero-min-height: 42rem; }

/* Existing P.2F.4A variants remain addressable; the visual editor can refine them further. */
.shared-public-hero.variant-compact { --shared-hero-min-height: 21rem; }
.shared-public-hero.variant-compact .shared-public-hero-copy { padding-block: clamp(1.25rem, 3vw, 2.5rem); }
.shared-public-hero.variant-image-full .shared-public-hero-media { background-size: contain; background-color: var(--bs-dark); }
.shared-public-hero.variant-wedding-elegant .shared-public-hero-shell { border-radius: 0; }
.shared-public-hero.variant-wedding-elegant .shared-public-hero-block.role-eyebrow { letter-spacing: .2em; }
.shared-public-hero.variant-festival-poster .shared-public-hero-block.role-title { text-transform: uppercase; }

.shared-public-hero-shell {
    position: relative;
    display: grid;
    grid-template-areas:
        "visual"
        "copy";
    overflow: hidden;
}

.shared-public-hero.hero-width-contained .shared-public-hero-shell {
    border-radius: 1.5rem;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .12);
}

.shared-public-hero.hero-width-contained.variant-wedding-elegant .shared-public-hero-shell {
    border-radius: 0;
}

.shared-public-hero-visual {
    grid-area: visual;
    position: relative;
    min-height: var(--shared-hero-min-height);
    overflow: hidden;
}

.shared-public-hero-media,
.shared-public-hero-overlay {
    position: absolute;
    inset: 0;
}

.shared-public-hero-media {
    background-position: var(--shared-hero-image-position-desktop);
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.001);
}

.shared-public-hero.effect-soft-blur .shared-public-hero-media {
    filter: blur(5px);
    transform: scale(1.025);
}
.shared-public-hero.effect-grayscale .shared-public-hero-media { filter: grayscale(1); }
.shared-public-hero.effect-sepia .shared-public-hero-media { filter: sepia(.8); }
.shared-public-hero.effect-saturate .shared-public-hero-media { filter: saturate(1.5); }

.shared-public-hero-overlay { z-index: 1; }
.shared-public-hero.overlay-dark.overlay-intensity-soft .shared-public-hero-overlay { background: rgba(0, 0, 0, .2); }
.shared-public-hero.overlay-dark.overlay-intensity-medium .shared-public-hero-overlay { background: rgba(0, 0, 0, .45); }
.shared-public-hero.overlay-dark.overlay-intensity-strong .shared-public-hero-overlay { background: rgba(0, 0, 0, .7); }
.shared-public-hero.overlay-light.overlay-intensity-soft .shared-public-hero-overlay { background: rgba(255, 255, 255, .2); }
.shared-public-hero.overlay-light.overlay-intensity-medium .shared-public-hero-overlay { background: rgba(255, 255, 255, .45); }
.shared-public-hero.overlay-light.overlay-intensity-strong .shared-public-hero-overlay { background: rgba(255, 255, 255, .7); }

.shared-public-hero-copy {
    grid-area: copy;
    z-index: 2;
    width: 100%;
    max-width: none;
    padding: clamp(1.5rem, 5vw, 5rem);
    background: var(--bs-body-bg);
}

.shared-public-hero.content-position-above .shared-public-hero-shell {
    grid-template-areas:
        "copy"
        "visual";
}

.shared-public-hero.content-position-below .shared-public-hero-shell {
    grid-template-areas:
        "visual"
        "copy";
}

.shared-public-hero.content-position-inside .shared-public-hero-shell {
    grid-template-areas: "hero";
}

.shared-public-hero.content-position-inside .shared-public-hero-visual,
.shared-public-hero.content-position-inside .shared-public-hero-copy {
    grid-area: hero;
}

.shared-public-hero.content-position-inside .shared-public-hero-copy {
    width: min(100%, 68rem);
    max-width: 68rem;
    background: transparent;
}

.shared-public-hero.content-position-inside.placement-top-left .shared-public-hero-copy,
.shared-public-hero.content-position-inside.placement-top-center .shared-public-hero-copy,
.shared-public-hero.content-position-inside.placement-top-right .shared-public-hero-copy { align-self: start; }
.shared-public-hero.content-position-inside.placement-middle-left .shared-public-hero-copy,
.shared-public-hero.content-position-inside.placement-middle-center .shared-public-hero-copy,
.shared-public-hero.content-position-inside.placement-middle-right .shared-public-hero-copy { align-self: center; }
.shared-public-hero.content-position-inside.placement-bottom-left .shared-public-hero-copy,
.shared-public-hero.content-position-inside.placement-bottom-center .shared-public-hero-copy,
.shared-public-hero.content-position-inside.placement-bottom-right .shared-public-hero-copy { align-self: end; }
.shared-public-hero.content-position-inside.placement-top-left .shared-public-hero-copy,
.shared-public-hero.content-position-inside.placement-middle-left .shared-public-hero-copy,
.shared-public-hero.content-position-inside.placement-bottom-left .shared-public-hero-copy { justify-self: start; }
.shared-public-hero.content-position-inside.placement-top-center .shared-public-hero-copy,
.shared-public-hero.content-position-inside.placement-middle-center .shared-public-hero-copy,
.shared-public-hero.content-position-inside.placement-bottom-center .shared-public-hero-copy { justify-self: center; }
.shared-public-hero.content-position-inside.placement-top-right .shared-public-hero-copy,
.shared-public-hero.content-position-inside.placement-middle-right .shared-public-hero-copy,
.shared-public-hero.content-position-inside.placement-bottom-right .shared-public-hero-copy { justify-self: end; }

.shared-public-hero-content { width: 100%; }
.shared-public-hero-identity,
.shared-public-hero-counts,
.shared-public-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}
.shared-public-hero-identity { margin-bottom: 1.25rem; }
.shared-public-hero-counts { margin-top: 1rem; }
.shared-public-hero-actions { margin-top: 1.5rem; }

.shared-public-hero-logo {
    max-width: 8rem;
    max-height: 3rem;
    object-fit: contain;
}
.shared-public-hero-logo-fallback {
    display: inline-grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: 50%;
    font-size: .85rem;
    font-weight: 800;
    color: #212529;
    background: #fff;
}
.shared-public-hero-label {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .75rem;
    font-weight: 700;
}
.shared-public-hero-workspace-name { font-weight: 600; }
.shared-public-hero-block {
    font-size: var(--hero-block-size-desktop, 1rem);
    overflow-wrap: anywhere;
}
.shared-public-hero-block.role-eyebrow,
.shared-public-hero-block.role-breadcrumb { text-transform: uppercase; }

.shared-public-hero.content-position-inside .shared-public-hero-content {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}
.shared-public-hero.content-position-inside.overlay-light .shared-public-hero-content {
    text-shadow: none;
}

.shared-public-hero.content-position-inside {
    --hero-action-primary-bg: #fff;
    --hero-action-primary-border: #fff;
    --hero-action-primary-color: #212529;
    --hero-action-secondary-bg: transparent;
    --hero-action-secondary-border: rgba(255, 255, 255, .8);
    --hero-action-secondary-color: #fff;
    --hero-action-orders-bg: transparent;
    --hero-action-orders-border: rgba(255, 255, 255, .8);
    --hero-action-orders-color: #fff;
}

.shared-public-hero.content-position-inside.overlay-light {
    --hero-action-primary-bg: #212529;
    --hero-action-primary-border: #212529;
    --hero-action-primary-color: #fff;
    --hero-action-secondary-bg: transparent;
    --hero-action-secondary-border: #212529;
    --hero-action-secondary-color: #212529;
    --hero-action-orders-bg: transparent;
    --hero-action-orders-border: #495057;
    --hero-action-orders-color: #212529;
}

.shared-public-hero-action-primary {
    color: var(--hero-action-primary-color);
    background-color: var(--hero-action-primary-bg);
    border-color: var(--hero-action-primary-border);
}
.shared-public-hero-action-primary:hover,
.shared-public-hero-action-primary:focus {
    color: var(--hero-action-primary-color);
    background-color: color-mix(in srgb, var(--hero-action-primary-bg) 88%, #000);
    border-color: var(--hero-action-primary-border);
}
.shared-public-hero-action-secondary {
    color: var(--hero-action-secondary-color);
    background-color: var(--hero-action-secondary-bg);
    border-color: var(--hero-action-secondary-border);
}
.shared-public-hero-action-secondary:hover,
.shared-public-hero-action-secondary:focus {
    color: var(--hero-action-primary-color);
    background-color: var(--hero-action-primary-bg);
    border-color: var(--hero-action-primary-border);
}
.shared-public-hero-action-orders {
    color: var(--hero-action-orders-color);
    background-color: var(--hero-action-orders-bg);
    border-color: var(--hero-action-orders-border);
}
.shared-public-hero-action-orders:hover,
.shared-public-hero-action-orders:focus {
    color: var(--hero-action-primary-color);
    background-color: var(--hero-action-primary-bg);
    border-color: var(--hero-action-primary-border);
}

@media (min-width: 768px) {
    .hero-block-hide-desktop { display: none !important; }
}

@media (max-width: 767.98px) {
    .shared-public-hero.mobile-height-compact { --shared-hero-min-height: 18rem; }
    .shared-public-hero.mobile-height-standard { --shared-hero-min-height: 25rem; }
    .shared-public-hero.mobile-height-large { --shared-hero-min-height: 32rem; }

    .shared-public-hero-media {
        background-position: var(--shared-hero-image-position-mobile);
    }

    .shared-public-hero-copy {
        padding: 1.5rem;
    }

    .shared-public-hero-block {
        font-size: var(--hero-block-size-mobile, 1rem);
    }

    .hero-block-hide-mobile { display: none !important; }

    .shared-public-hero.mobile-content-position-above .shared-public-hero-shell {
        grid-template-areas:
            "copy"
            "visual";
    }

    .shared-public-hero.mobile-content-position-below .shared-public-hero-shell {
        grid-template-areas:
            "visual"
            "copy";
    }

    .shared-public-hero.mobile-content-position-above .shared-public-hero-visual,
    .shared-public-hero.mobile-content-position-below .shared-public-hero-visual {
        grid-area: visual;
    }

    .shared-public-hero.mobile-content-position-above .shared-public-hero-copy,
    .shared-public-hero.mobile-content-position-below .shared-public-hero-copy {
        grid-area: copy;
        align-self: stretch;
        justify-self: stretch;
        width: 100%;
        max-width: none;
        background: var(--bs-body-bg);
        text-shadow: none;
    }

    .shared-public-hero.mobile-content-position-inside .shared-public-hero-shell {
        grid-template-areas: "hero";
    }

    .shared-public-hero.mobile-content-position-inside .shared-public-hero-visual,
    .shared-public-hero.mobile-content-position-inside .shared-public-hero-copy {
        grid-area: hero;
    }

    .shared-public-hero.mobile-content-position-inside .shared-public-hero-copy {
        width: min(100%, 68rem);
        max-width: 68rem;
        background: transparent;
    }

    .shared-public-hero.mobile-content-position-inside.mobile-placement-top-left .shared-public-hero-copy,
    .shared-public-hero.mobile-content-position-inside.mobile-placement-top-center .shared-public-hero-copy,
    .shared-public-hero.mobile-content-position-inside.mobile-placement-top-right .shared-public-hero-copy { align-self: start; }
    .shared-public-hero.mobile-content-position-inside.mobile-placement-middle-left .shared-public-hero-copy,
    .shared-public-hero.mobile-content-position-inside.mobile-placement-middle-center .shared-public-hero-copy,
    .shared-public-hero.mobile-content-position-inside.mobile-placement-middle-right .shared-public-hero-copy { align-self: center; }
    .shared-public-hero.mobile-content-position-inside.mobile-placement-bottom-left .shared-public-hero-copy,
    .shared-public-hero.mobile-content-position-inside.mobile-placement-bottom-center .shared-public-hero-copy,
    .shared-public-hero.mobile-content-position-inside.mobile-placement-bottom-right .shared-public-hero-copy { align-self: end; }
    .shared-public-hero.mobile-content-position-inside.mobile-placement-top-left .shared-public-hero-copy,
    .shared-public-hero.mobile-content-position-inside.mobile-placement-middle-left .shared-public-hero-copy,
    .shared-public-hero.mobile-content-position-inside.mobile-placement-bottom-left .shared-public-hero-copy { justify-self: start; }
    .shared-public-hero.mobile-content-position-inside.mobile-placement-top-center .shared-public-hero-copy,
    .shared-public-hero.mobile-content-position-inside.mobile-placement-middle-center .shared-public-hero-copy,
    .shared-public-hero.mobile-content-position-inside.mobile-placement-bottom-center .shared-public-hero-copy { justify-self: center; }
    .shared-public-hero.mobile-content-position-inside.mobile-placement-top-right .shared-public-hero-copy,
    .shared-public-hero.mobile-content-position-inside.mobile-placement-middle-right .shared-public-hero-copy,
    .shared-public-hero.mobile-content-position-inside.mobile-placement-bottom-right .shared-public-hero-copy { justify-self: end; }

    .shared-public-hero.mobile-align-left .shared-public-hero-copy { text-align: left !important; }
    .shared-public-hero.mobile-align-center .shared-public-hero-copy { text-align: center !important; }
    .shared-public-hero.mobile-align-right .shared-public-hero-copy { text-align: right !important; }
    .shared-public-hero.mobile-align-left .shared-public-hero-identity,
    .shared-public-hero.mobile-align-left .shared-public-hero-counts,
    .shared-public-hero.mobile-align-left .shared-public-hero-actions { justify-content: flex-start !important; }
    .shared-public-hero.mobile-align-center .shared-public-hero-identity,
    .shared-public-hero.mobile-align-center .shared-public-hero-counts,
    .shared-public-hero.mobile-align-center .shared-public-hero-actions { justify-content: center !important; }
    .shared-public-hero.mobile-align-right .shared-public-hero-identity,
    .shared-public-hero.mobile-align-right .shared-public-hero-counts,
    .shared-public-hero.mobile-align-right .shared-public-hero-actions { justify-content: flex-end !important; }

    .shared-public-hero.mobile-spacing-compact .shared-public-hero-blocks,
    .shared-public-hero.mobile-spacing-normal .shared-public-hero-blocks,
    .shared-public-hero.mobile-spacing-relaxed .shared-public-hero-blocks {
        display: flex;
        flex-direction: column;
    }
    .shared-public-hero.mobile-spacing-compact .shared-public-hero-blocks { gap: .25rem; }
    .shared-public-hero.mobile-spacing-normal .shared-public-hero-blocks { gap: .65rem; }
    .shared-public-hero.mobile-spacing-relaxed .shared-public-hero-blocks { gap: 1.15rem; }
    .shared-public-hero.mobile-spacing-compact .shared-public-hero-block,
    .shared-public-hero.mobile-spacing-normal .shared-public-hero-block,
    .shared-public-hero.mobile-spacing-relaxed .shared-public-hero-block {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .shared-public-hero.mobile-content-position-inside {
        --hero-action-primary-bg: #fff;
        --hero-action-primary-border: #fff;
        --hero-action-primary-color: #212529;
        --hero-action-secondary-bg: transparent;
        --hero-action-secondary-border: rgba(255, 255, 255, .8);
        --hero-action-secondary-color: #fff;
        --hero-action-orders-bg: transparent;
        --hero-action-orders-border: rgba(255, 255, 255, .8);
        --hero-action-orders-color: #fff;
    }

    .shared-public-hero.mobile-content-position-inside.overlay-light {
        --hero-action-primary-bg: #212529;
        --hero-action-primary-border: #212529;
        --hero-action-primary-color: #fff;
        --hero-action-secondary-bg: transparent;
        --hero-action-secondary-border: #212529;
        --hero-action-secondary-color: #212529;
        --hero-action-orders-bg: transparent;
        --hero-action-orders-border: #495057;
        --hero-action-orders-color: #212529;
    }

    .shared-public-hero.mobile-content-position-above,
    .shared-public-hero.mobile-content-position-below {
        --hero-action-primary-bg: var(--bs-primary);
        --hero-action-primary-border: var(--bs-primary);
        --hero-action-primary-color: #fff;
        --hero-action-secondary-bg: transparent;
        --hero-action-secondary-border: var(--bs-primary);
        --hero-action-secondary-color: var(--bs-primary);
        --hero-action-orders-bg: transparent;
        --hero-action-orders-border: var(--bs-secondary);
        --hero-action-orders-color: var(--bs-secondary);
    }

    .shared-public-hero.mobile-content-position-inside .shared-public-hero-content {
        text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
    }
    .shared-public-hero.mobile-content-position-inside.overlay-light .shared-public-hero-content,
    .shared-public-hero.mobile-content-position-above .shared-public-hero-content,
    .shared-public-hero.mobile-content-position-below .shared-public-hero-content {
        text-shadow: none;
    }
}

@media (min-width: 992px) {
    .shared-public-hero.content-position-inside.variant-image-left .shared-public-hero-shell {
        grid-template-columns: 44% 56%;
        grid-template-areas: "visual copy";
    }

    .shared-public-hero.content-position-inside.variant-image-right .shared-public-hero-shell {
        grid-template-columns: 56% 44%;
        grid-template-areas: "copy visual";
    }

    .shared-public-hero.content-position-inside.variant-image-left .shared-public-hero-visual,
    .shared-public-hero.content-position-inside.variant-image-right .shared-public-hero-visual {
        grid-area: visual;
    }

    .shared-public-hero.content-position-inside.variant-image-left .shared-public-hero-copy,
    .shared-public-hero.content-position-inside.variant-image-right .shared-public-hero-copy {
        grid-area: copy;
        align-self: stretch;
        justify-self: stretch;
        width: 100%;
        max-width: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: var(--bs-dark);
    }

    .shared-public-hero.content-position-inside.variant-image-left.placement-top-left .shared-public-hero-copy,
    .shared-public-hero.content-position-inside.variant-image-left.placement-top-center .shared-public-hero-copy,
    .shared-public-hero.content-position-inside.variant-image-left.placement-top-right .shared-public-hero-copy,
    .shared-public-hero.content-position-inside.variant-image-right.placement-top-left .shared-public-hero-copy,
    .shared-public-hero.content-position-inside.variant-image-right.placement-top-center .shared-public-hero-copy,
    .shared-public-hero.content-position-inside.variant-image-right.placement-top-right .shared-public-hero-copy {
        justify-content: flex-start;
    }

    .shared-public-hero.content-position-inside.variant-image-left.placement-bottom-left .shared-public-hero-copy,
    .shared-public-hero.content-position-inside.variant-image-left.placement-bottom-center .shared-public-hero-copy,
    .shared-public-hero.content-position-inside.variant-image-left.placement-bottom-right .shared-public-hero-copy,
    .shared-public-hero.content-position-inside.variant-image-right.placement-bottom-left .shared-public-hero-copy,
    .shared-public-hero.content-position-inside.variant-image-right.placement-bottom-center .shared-public-hero-copy,
    .shared-public-hero.content-position-inside.variant-image-right.placement-bottom-right .shared-public-hero-copy {
        justify-content: flex-end;
    }
}