/*
 * STRIVE shared component design tokens.
 *
 * Patterns use semantic STRIVE variables rather than fixed radii, borders and
 * shadows. With STRIVE Base Theme these resolve to the active Global Style
 * variation. Fallbacks keep the plugin usable with other block themes.
 */
:root,
.editor-styles-wrapper {
    --strive-radius-small: var(--wp--custom--radius--sm, 4px);
    --strive-radius-card: var(--wp--custom--radius--lg, 12px);
    --strive-radius-panel: var(--wp--custom--radius--xl, 18px);
    --strive-radius-media: var(--wp--custom--radius--image, 12px);
    --strive-radius-pill: var(--wp--custom--radius--pill, 999px);
    --strive-border-width: var(--wp--custom--border--width, 1px);
    --strive-border-strong-width: var(--wp--custom--border--strong-width, 2px);
    --strive-shadow-card: var(--wp--custom--shadow--card, 0 10px 30px rgba(15, 23, 42, .08));
    --strive-shadow-soft: var(--wp--custom--shadow--soft, 0 16px 50px rgba(15, 23, 42, .10));
}

/* Card-like surfaces share one theme-controlled elevation vocabulary. */
.strive-product-card--vertical,
.strive-product-card--horizontal,
.strive-commerce-offer,
.strive-services__card,
.strive-testimonials__quote-card,
.strive-testimonials__metric-panel,
.strive-pricing__card,
.strive-hero__proof-card,
.strive-hero__floating-card,
.strive-hero__cover-panel,
.strive-cta__side-panel,
.strive-cta__floating-card,
.strive-contact__form-ready,
.strive-commerce__form-slot,
.strive-process__next {
    box-shadow: var(--strive-shadow-card);
}

/* Stronger floating/overlap surfaces use the theme's soft/elevated shadow. */
.strive-cta__floating-card,
.strive-hero__floating-card,
.strive-hero__cover-panel {
    box-shadow: var(--strive-shadow-soft);
}


/* -------------------------------------------------------------------------
 * STRIVE asymmetric radius Block Styles
 *
 * Registered in PHP for Image, Group, Cover, Media & Text and Gallery.
 * They intentionally use theme-driven STRIVE tokens instead of fixed pixels.
 * ---------------------------------------------------------------------- */

:is(
    .is-style-strive-radius-top-right,
    .is-style-strive-radius-top-left,
    .is-style-strive-radius-bottom-right,
    .is-style-strive-radius-bottom-left,
    .is-style-strive-radius-top,
    .is-style-strive-radius-bottom,
    .is-style-strive-radius-diagonal,
    .is-style-strive-radius-arch-top
) {
    --strive-asymmetric-radius: var(--strive-radius-panel);
}

.is-style-strive-radius-top-right {
    border-radius: 0 var(--strive-asymmetric-radius) 0 0 !important;
}

.is-style-strive-radius-top-left {
    border-radius: var(--strive-asymmetric-radius) 0 0 0 !important;
}

.is-style-strive-radius-bottom-right {
    border-radius: 0 0 var(--strive-asymmetric-radius) 0 !important;
}

.is-style-strive-radius-bottom-left {
    border-radius: 0 0 0 var(--strive-asymmetric-radius) !important;
}

.is-style-strive-radius-top {
    border-radius: var(--strive-asymmetric-radius) var(--strive-asymmetric-radius) 0 0 !important;
}

.is-style-strive-radius-bottom {
    border-radius: 0 0 var(--strive-asymmetric-radius) var(--strive-asymmetric-radius) !important;
}

.is-style-strive-radius-diagonal {
    border-radius: var(--strive-asymmetric-radius) 0 var(--strive-asymmetric-radius) 0 !important;
}

.is-style-strive-radius-arch-top {
    border-radius: var(--strive-radius-pill) var(--strive-radius-pill) 0 0 !important;
}

/* Media needs to follow the selected wrapper shape. */
figure.wp-block-image:is(
    .is-style-strive-radius-top-right,
    .is-style-strive-radius-top-left,
    .is-style-strive-radius-bottom-right,
    .is-style-strive-radius-bottom-left,
    .is-style-strive-radius-top,
    .is-style-strive-radius-bottom,
    .is-style-strive-radius-diagonal,
    .is-style-strive-radius-arch-top
),
.wp-block-cover:is(
    .is-style-strive-radius-top-right,
    .is-style-strive-radius-top-left,
    .is-style-strive-radius-bottom-right,
    .is-style-strive-radius-bottom-left,
    .is-style-strive-radius-top,
    .is-style-strive-radius-bottom,
    .is-style-strive-radius-diagonal,
    .is-style-strive-radius-arch-top
),
.wp-block-group:is(
    .is-style-strive-radius-top-right,
    .is-style-strive-radius-top-left,
    .is-style-strive-radius-bottom-right,
    .is-style-strive-radius-bottom-left,
    .is-style-strive-radius-top,
    .is-style-strive-radius-bottom,
    .is-style-strive-radius-diagonal,
    .is-style-strive-radius-arch-top
),
.wp-block-media-text:is(
    .is-style-strive-radius-top-right,
    .is-style-strive-radius-top-left,
    .is-style-strive-radius-bottom-right,
    .is-style-strive-radius-bottom-left,
    .is-style-strive-radius-top,
    .is-style-strive-radius-bottom,
    .is-style-strive-radius-diagonal,
    .is-style-strive-radius-arch-top
),
.wp-block-gallery:is(
    .is-style-strive-radius-top-right,
    .is-style-strive-radius-top-left,
    .is-style-strive-radius-bottom-right,
    .is-style-strive-radius-bottom-left,
    .is-style-strive-radius-top,
    .is-style-strive-radius-bottom,
    .is-style-strive-radius-diagonal,
    .is-style-strive-radius-arch-top
) {
    overflow: hidden;
}

/* Image's visible pixels are on the child img, so inherit the figure radius. */
figure.wp-block-image:is(
    .is-style-strive-radius-top-right,
    .is-style-strive-radius-top-left,
    .is-style-strive-radius-bottom-right,
    .is-style-strive-radius-bottom-left,
    .is-style-strive-radius-top,
    .is-style-strive-radius-bottom,
    .is-style-strive-radius-diagonal,
    .is-style-strive-radius-arch-top
) > img,
figure.wp-block-image:is(
    .is-style-strive-radius-top-right,
    .is-style-strive-radius-top-left,
    .is-style-strive-radius-bottom-right,
    .is-style-strive-radius-bottom-left,
    .is-style-strive-radius-top,
    .is-style-strive-radius-bottom,
    .is-style-strive-radius-diagonal,
    .is-style-strive-radius-arch-top
) > a > img {
    border-radius: inherit !important;
}