/* ==========================================================================
   Page Header V3: decorative gradient spines in the top-right and
   bottom-left corners. Drawn as pseudo-elements on the cover so the pattern
   markup stays untouched. The cover clips overflow, so the shapes are cut
   by its rounded bottom corners exactly as in the design.
   ========================================================================== */

.forge-page-header-v3::before,
.forge-page-header-v3::after {
    content: "";
    position: absolute;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Top right. Sits above the cover's background span (z-index 0) and, being
   earlier in tree order, below the inner container at the same level. */
.forge-page-header-v3::before {
    top: 0;
    right: 0;
    z-index: 1;
    width: min(703px, 49vw);
    aspect-ratio: 703 / 506;
    background-image: url("../../decorations/page-header-spine-right.svg");
    background-position: top right;
}

/* Bottom left. Comes after the inner container in tree order, so it stays
   at z-index 0: above the background, below the text. */
.forge-page-header-v3::after {
    bottom: 0;
    left: 0;
    z-index: 0;
    width: min(687px, 48vw);
    aspect-ratio: 687 / 522;
    background-image: url("../../decorations/page-header-spine-left.svg");
    background-position: bottom left;
}

/* Phones: the shapes scale with the viewport and would shrink to slivers,
   so let them grow relative to the narrower width and keep to the corners. */
@media (max-width: 767px) {
    .forge-page-header-v3::before {
        width: 78vw;
    }

    .forge-page-header-v3::after {
        width: 76vw;
    }
}

/* Fill the viewport up to 825px; taller content still pushes it out.
   !important: the cover block writes its own 100vh minimum inline. */
.forge-page-header-v3.wp-block-cover {
    min-height: min(100vh, 825px) !important;
    min-height: min(100svh, 825px) !important;
}

/* --- Buttons and mobile height -----------------------------------------------
   The same rules as Hero V1 (assets/forge/hero-v1.css): on phones the buttons
   stretch edge to edge and stack, from 576px they shrink to their label. Also
   a shorter panel on small screens. These lived in the Forge copy of this
   stylesheet, which this file replaces rather than extends. */
.forge-page-header-v3 .wp-block-button,
.forge-page-header-v3 .wp-block-buttons {
    width: 100%;
}

@media (min-width: 576px) {
    .forge-page-header-v3 .wp-block-button {
        width: max-content;
    }
}

@media (max-width: 768px) {
    .forge-page-header-v3 .forge-page-header-v3-wrapper {
        min-height: 400px !important;
    }
}