/* ==========================================================
   GWW EXPLICIT HERO LAYOUT — V1.23.3.63.1
   FINAL PUBLIC HERO COMPOSITION LAYER
   ========================================================== */

.gww-explicit-hero-layout,
.gww-explicit-hero-media,
.gww-explicit-hero-content,
.gww-business-hero-grid,
.gww-business-logo-card,
.gww-business-hero-copy {
    box-sizing: border-box !important;
    min-width: 0 !important;
}


/* ==========================================================
   PROFESSIONAL DESKTOP
   Match current Business visual composition:
       portrait LEFT | copy RIGHT
   ========================================================== */

@media screen and (min-width: 601px) {

    .gww-explicit-hero-layout--professional {
        display: grid !important;

        grid-template-columns:
            minmax(170px, 220px)
            minmax(300px, 520px)
            !important;

        grid-template-rows: auto !important;
        grid-auto-flow: row !important;

        width: min(100%, 900px) !important;
        max-width: 900px !important;
        min-width: 0 !important;

        column-gap: clamp(24px, 3vw, 44px) !important;
        row-gap: 0 !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 24px !important;
        padding-right: 24px !important;

        align-items: center !important;
        justify-content: center !important;
    }

    .gww-explicit-hero-layout--professional
    > .gww-explicit-hero-media {
        grid-column: 1 !important;
        grid-row: 1 !important;

        position: relative !important;

        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        float: none !important;
        transform: none !important;

        width: clamp(170px, 17vw, 220px) !important;
        max-width: 220px !important;
        min-width: 0 !important;

        margin: 0 auto !important;

        justify-self: center !important;
        align-self: center !important;
    }

    .gww-explicit-hero-layout--professional
    > .gww-explicit-hero-media img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 auto !important;

        object-fit: cover !important;
    }

    .gww-explicit-hero-layout--professional
    > .gww-explicit-hero-content {
        grid-column: 2 !important;
        grid-row: 1 !important;

        position: relative !important;

        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        float: none !important;
        transform: none !important;

        width: 100% !important;
        max-width: 520px !important;
        min-width: 0 !important;

        margin: 0 !important;

        justify-self: start !important;
        align-self: center !important;
    }

    /*
     * Professional remains transparent because 3.57 owns paint.
     * This file changes only composition.
     */
}


/* ==========================================================
   TRUE MOBILE — BOTH PROFESSIONAL + BUSINESS
   ========================================================== */

@media screen and (max-width: 600px) {

    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .gww-profile-tier.gww-tier-advanced .gww-hero,
    .gww-profile-tier.gww-tier-advanced .gww-business-hero,
    .gww-restricted-tier-shell.gww-tier-advanced
    .gww-profile-preview-hero {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        overflow: hidden !important;
    }

    /* ------------------------------------------------------
       PROFESSIONAL
       ------------------------------------------------------ */

    .gww-explicit-hero-layout--professional {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        grid-template-rows:
            auto auto !important;

        grid-auto-flow: row !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        gap: 18px !important;

        margin: 0 !important;
        padding: 22px 18px 28px !important;

        align-items: start !important;
        justify-items: stretch !important;
    }

    .gww-explicit-hero-layout--professional
    > .gww-explicit-hero-media {
        grid-column: 1 !important;
        grid-row: 1 !important;

        position: relative !important;

        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        float: none !important;
        transform: none !important;

        width: min(48vw, 180px) !important;
        max-width: 180px !important;
        min-width: 0 !important;

        margin: 0 auto !important;

        justify-self: center !important;
        align-self: start !important;
    }

    .gww-explicit-hero-layout--professional
    > .gww-explicit-hero-media img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 auto !important;

        object-fit: cover !important;
    }

    .gww-explicit-hero-layout--professional
    > .gww-explicit-hero-content {
        grid-column: 1 !important;
        grid-row: 2 !important;

        position: relative !important;

        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        float: none !important;
        transform: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        justify-self: stretch !important;
        align-self: start !important;
    }

    /* ------------------------------------------------------
       BUSINESS
       Existing stable renderer classes.
       Desktop is untouched because these rules are mobile-only.
       ------------------------------------------------------ */

    .gww-profile-tier--business.gww-tier-advanced
    .gww-business-hero-grid,
    .gww-restricted-tier-shell.gww-profile-tier--business.gww-tier-advanced
    .gww-business-hero-grid {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        grid-template-rows:
            auto auto !important;

        grid-auto-flow: row !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        gap: 18px !important;

        margin: 0 !important;
        padding: 22px 18px 28px !important;

        align-items: start !important;
        justify-items: stretch !important;
    }

    .gww-profile-tier--business.gww-tier-advanced
    .gww-business-logo-card,
    .gww-restricted-tier-shell.gww-profile-tier--business.gww-tier-advanced
    .gww-business-logo-card {
        grid-column: 1 !important;
        grid-row: 1 !important;

        position: relative !important;

        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        float: none !important;
        transform: none !important;

        width: min(48vw, 180px) !important;
        max-width: 180px !important;
        min-width: 0 !important;

        margin: 0 auto !important;

        justify-self: center !important;
        align-self: start !important;
    }

    .gww-profile-tier--business.gww-tier-advanced
    .gww-business-logo-card img,
    .gww-restricted-tier-shell.gww-profile-tier--business.gww-tier-advanced
    .gww-business-logo-card img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 auto !important;

        object-fit: cover !important;
    }

    .gww-profile-tier--business.gww-tier-advanced
    .gww-business-hero-copy,
    .gww-restricted-tier-shell.gww-profile-tier--business.gww-tier-advanced
    .gww-business-hero-copy {
        grid-column: 1 !important;
        grid-row: 2 !important;

        position: relative !important;

        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        float: none !important;
        transform: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        justify-self: stretch !important;
        align-self: start !important;
    }

    /* ------------------------------------------------------
       SHARED MOBILE COPY / TYPOGRAPHY
       ------------------------------------------------------ */

    .gww-explicit-hero-content,
    .gww-business-hero-copy {
        min-width: 0 !important;
    }

    .gww-explicit-hero-content h1,
    .gww-business-hero-copy h1 {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;

        font-size: clamp(30px, 9vw, 42px) !important;
        line-height: 1.04 !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .gww-business-hero-actions {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        gap: 10px !important;
    }

    .gww-business-hero-actions > *,
    .gww-business-hero-btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        white-space: normal !important;
    }

    .gww-business-social-share {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        flex-wrap: wrap !important;
    }
}