/* ==========================================================================
   Calendio Page Header 2026
   Scope: shared tenant-page header (eyebrow + title + description + meta +
   actions), rendered by templates/element/app/page_header.php.
   Replaces the ~9 near-identical bespoke "hero" blocks that used to live
   one-per-page (business-workspace-*, calendar-management-*,
   services-team-*, business-team-*, commerce-hero, booking-inbox-hero,
   dashboard-hero-card, embed-admin-hero) — those are migrated to this file
   page by page; do not add a new one-off hero class, extend this one.
   Depends on: app.css / calendio-theme.css tokens
   ========================================================================== */

.page-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    padding: 24px;
    border: 1px solid var(--calendio-border, #E8DED2);
    border-radius: var(--calendio-radius-2xl, 30px);
    background:
        radial-gradient(circle at 8% 0%, rgba(var(--calendio-accent-rgb, 240, 91, 168), .18), transparent 34%),
        radial-gradient(circle at 100% 0%, rgba(var(--calendio-peach-rgb, 255, 179, 107), .22), transparent 30%),
        linear-gradient(135deg, #FFFFFF 0%, var(--calendio-surface-warm, #FFFCF7) 56%, var(--calendio-primary-soft, #F0EEFF) 100%);
    box-shadow: var(--calendio-shadow-md, 0 14px 36px rgba(31, 35, 48, .10));
}

.page-hero::before {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -155px;
    width: 320px;
    height: 320px;
    border-radius: 999px;
    background: rgba(var(--calendio-primary-rgb, 109, 93, 246), .12);
    pointer-events: none;
}

.page-hero::after {
    content: "";
    position: absolute;
    right: 38px;
    top: 28px;
    width: 76px;
    height: 76px;
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(var(--calendio-primary-rgb, 109, 93, 246), .16), rgba(var(--calendio-accent-rgb, 240, 91, 168), .12));
    transform: rotate(10deg);
    pointer-events: none;
}

.page-hero > * {
    position: relative;
    z-index: 1;
}

.page-hero__eyebrow {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 10px;
    padding: 7px 11px;
    border: 1px solid rgba(var(--calendio-primary-rgb, 109, 93, 246), .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .76);
    color: var(--calendio-primary-hover, #5947E8);
    box-shadow: var(--calendio-shadow-xs, 0 2px 8px rgba(31, 35, 48, .045));
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.page-hero h1 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--calendio-ink, #1F2330);
    font-size: clamp(30px, 4vw, 46px);
    line-height: .98;
    font-weight: 950;
    letter-spacing: -.055em;
}

/* .field-help__text (webroot/css/calendio-field-help.css) opens upward by
   default. The h1 it sits next to here is right at the top of .page-hero,
   which needs overflow:hidden to clip its decorative background blobs to
   the rounded corners — so an upward-opening popover gets cut off almost
   entirely. Open it downward instead, where the card has plenty of room. */
.page-hero h1 .field-help__text {
    bottom: auto;
    top: calc(100% + 8px);
}

.page-hero__description {
    max-width: 780px;
    margin: 12px 0 0;
    color: var(--calendio-text-muted, #766E66);
    font-size: 15px;
    line-height: 1.65;
    font-weight: 650;
}

.page-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.page-hero__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 7px 10px;
    border: 1px solid var(--calendio-border, #E8DED2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: var(--calendio-text-muted, #766E66);
    font-size: 12px;
    font-weight: 850;
}

.page-hero__meta strong {
    color: var(--calendio-ink, #1F2330);
    font-weight: 950;
}

.page-hero__actions {
    display: grid;
    gap: 10px;
    justify-items: end;
}

/* Buttons ----------------------------------------------------------------- */

.page-hero-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    font-weight: 950;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        color .16s ease,
        box-shadow .16s ease,
        opacity .16s ease;
}

.page-hero-link--primary {
    border: 0;
    background: linear-gradient(135deg, var(--calendio-primary, #6D5DF6), var(--calendio-pink, #F05BA8));
    color: #FFFFFF;
    box-shadow: 0 16px 34px rgba(var(--calendio-primary-rgb, 109, 93, 246), .22);
}

.page-hero-link--primary:hover {
    transform: translateY(-1px);
    color: #FFFFFF;
    text-decoration: none;
    box-shadow: 0 20px 42px rgba(var(--calendio-accent-rgb, 240, 91, 168), .26);
}

.page-hero-link--secondary {
    border: 1px solid var(--calendio-border, #E8DED2);
    background: rgba(255, 255, 255, .86);
    color: var(--calendio-ink, #1F2330);
    box-shadow: var(--calendio-shadow-xs, 0 2px 8px rgba(31, 35, 48, .045));
}

.page-hero-link--secondary:hover {
    transform: translateY(-1px);
    border-color: var(--calendio-primary-border, #DCD7FF);
    color: var(--calendio-primary-hover, #5947E8);
    text-decoration: none;
}

.page-hero-link--danger {
    border: 1px solid rgba(var(--calendio-danger-rgb, 239, 68, 68), .24);
    background: var(--calendio-danger-soft, #FFF1F2);
    color: var(--calendio-danger-text, #991B1B);
}

.page-hero-link--danger:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--calendio-danger-rgb, 239, 68, 68), .4);
    text-decoration: none;
}

.page-hero-link__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    margin-right: 7px;
    flex: 0 0 auto;
}

.page-hero-link__icon svg {
    width: 17px;
    height: 17px;
    stroke-width: 2;
}

.page-hero-link__label {
    white-space: nowrap;
}

@media (max-width: 760px) {
    .page-hero {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .page-hero__actions {
        justify-items: start;
    }

    .page-hero-link {
        width: 100%;
    }
}