/* ============================================================
   GWW HERO FRAME + CTA BALANCE V1.23.3.38
   ============================================================ */

/* ------------------------------------------------------------
   SIDEBAR ACTIONS — exact same physical button dimensions
   ------------------------------------------------------------ */

body:has(.gww-profile-tier)
:is(
    .gww-sidebar-card,
    .gww-business-contact-card
)
.gww338-side-cta {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:44px !important;
    height:44px !important;
    padding:0 14px !important;
    margin-top:8px !important;
    border-width:2px !important;
    border-style:solid !important;
    border-radius:6px !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
    line-height:1 !important;
}

/* Website should never be visually smaller than Contact/Map. */
body:has(.gww-profile-tier)
:is(
    .gww-sidebar-card,
    .gww-business-contact-card
)
.gww338-side-cta.gww336-website-cta {
    min-height:44px !important;
    height:44px !important;
    padding:0 14px !important;
}

/* ------------------------------------------------------------
   HERO CTAs — same height, natural width
   ------------------------------------------------------------ */

body:has(.gww-profile-tier)
.gww338-hero-cta {
    min-height:42px !important;
    height:42px !important;
    padding:0 16px !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
}

/* ------------------------------------------------------------
   HERO FRAME — content-aware width / automatic height
   JavaScript supplies --gww338-copy-width from measured content.
   ------------------------------------------------------------ */

body:has(.gww-profile-tier)
:is(
    .gww-hero-copy,
    .gww-business-hero-copy
)[data-gww-auto-frame="v1-23-3-38"] {
    width:var(--gww338-copy-width) !important;
    max-width:min(var(--gww338-copy-width),100%) !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    box-sizing:border-box !important;
}

/*
 * Do not force long titles onto one line.
 * The frame expands first, then the title wraps cleanly at the cap.
 */
body:has(.gww-profile-tier)
:is(
    .gww-hero-copy,
    .gww-business-hero-copy
)[data-gww-auto-frame="v1-23-3-38"]
h1 {
    width:auto !important;
    max-width:100% !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
}

/* Professional short-name frame can stay visibly tighter. */
@supports selector(body:has(.gww-profile-tier--professional)) {
    body:has(.gww-profile-tier--professional)
    .gww-hero-copy[data-gww-auto-frame="v1-23-3-38"] {
        justify-self:start !important;
    }
}

/* Business frame grows for company names but remains capped. */
@supports selector(body:has(.gww-profile-tier--business)) {
    body:has(.gww-profile-tier--business)
    .gww-business-hero-copy[data-gww-auto-frame="v1-23-3-38"] {
        justify-self:start !important;
    }
}

@media(max-width:820px) {
    body:has(.gww-profile-tier)
    :is(
        .gww-hero-copy,
        .gww-business-hero-copy
    )[data-gww-auto-frame="v1-23-3-38"] {
        width:100% !important;
        max-width:100% !important;
    }

    body:has(.gww-profile-tier)
    .gww338-hero-cta {
        min-height:42px !important;
        height:auto !important;
    }
}
