/* ActiveSheets reusable block-pattern styles. */

.as-hero-pattern {
    box-sizing: border-box;
    padding-block: var(--as-space-2xl);
    padding-inline: var(--as-page-gutter);
}

.as-hero-pattern__inner {
    width: min(100%, var(--as-wide-width));
    margin-inline: auto;
}

.as-hero-pattern__content {
    max-width: 52rem;
}

/* Category heroes need a wider headline measure than ordinary reading copy. */
.as-hero-pattern .has-hero-font-size {
    width: min(100%, var(--as-standard-width));
    max-width: var(--as-standard-width);
    font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
    line-height: 1.1;
}

.as-hero-pattern .has-large-font-size {
    max-width: 48rem;
    font-size: clamp(1.25rem, calc(1rem + 0.75vw), 1.65rem) !important;
    line-height: 1.45;
}

/* Align hero prose with the wider headline instead of centering each measure. */
.as-hero-pattern > .alignwide > p:not(.as-eyebrow) {
    margin-inline-start: max(0px, calc((100% - var(--as-standard-width)) / 2)) !important;
    margin-inline-end: auto !important;
}

.as-hero-pattern__eyebrow,
.as-content-pattern__eyebrow {
    margin-block-end: var(--as-space-xs);
    color: var(--as-color-primary);
    font-size: var(--as-font-size-sm);
    font-weight: var(--as-font-weight-semibold);
    letter-spacing: var(--as-letter-spacing-label);
    text-transform: uppercase;
}

.as-hero-pattern__title {
    margin-block-end: var(--as-space-md);
    font-size: var(--as-font-size-hero);
    line-height: var(--as-line-height-tight);
}

.as-hero-pattern__summary,
.as-content-pattern__summary {
    max-width: 62ch;
    margin-block-end: var(--as-space-md);
    color: var(--as-color-text-muted);
    font-size: clamp(1.05rem, calc(0.75rem + 1vw), 1.25rem);
    line-height: 1.55;
}

.as-hero-pattern--centered {
    text-align: center;
}

.as-hero-pattern--centered .as-hero-pattern__content,
.as-hero-pattern--centered .as-hero-pattern__summary {
    margin-inline: auto;
}

.as-hero-pattern--centered .wp-block-buttons {
    justify-content: center;
}

.as-hero-pattern--product .as-hero-pattern__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
    gap: var(--as-space-xl);
    align-items: center;
}

.as-hero-pattern__visual {
    display: grid;
    min-height: 22rem;
    place-items: center;
    padding: var(--as-space-lg);
    border: var(--as-border-width) solid var(--as-color-border);
    border-radius: var(--as-radius-lg);
    background: var(--as-color-surface-alt);
    color: var(--as-color-text-muted);
    text-align: center;
}

.as-hero-pattern__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--as-space-xs) var(--as-space-md);
    margin-block-end: var(--as-space-md);
    color: var(--as-color-text-muted);
    font-size: var(--as-font-size-sm);
}

.as-content-pattern {
    box-sizing: border-box;
    padding-block: var(--as-section-space);
    padding-inline: var(--as-page-gutter);
}

.as-content-pattern__inner {
    width: min(100%, var(--as-wide-width));
    margin-inline: auto;
}

/* Let structural card grids use the wide canvas while prose keeps contentSize. */
.as-content-pattern .as-grid {
    width: min(100%, var(--as-wide-width));
    max-width: var(--as-wide-width);
    margin-inline: auto;
}

.as-content-pattern > .alignwide > .wp-block-heading {
    width: min(100%, var(--as-standard-width));
    max-width: var(--as-standard-width);
}

/* Keep readable prose narrow, but align it with the standard heading column. */
.as-content-pattern > .alignwide > :where(p, ul, ol, blockquote) {
    margin-inline-start: max(0px, calc((100% - var(--as-standard-width)) / 2)) !important;
    margin-inline-end: auto !important;
}

.as-content-pattern .as-card h3 {
    font-size: clamp(1.5rem, calc(1.375rem + 0.25vw), 1.75rem);
    line-height: 1.28;
}

.as-content-pattern .as-card :where(p, li) {
    font-size: clamp(1.0625rem, calc(1rem + 0.15vw), 1.125rem);
    line-height: 1.5;
}

.as-content-pattern__header {
    max-width: 48rem;
    margin-block-end: var(--as-space-xl);
}

.as-content-pattern__split {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--as-space-xl);
    align-items: start;
}

.as-content-pattern__split .as-content-pattern__header {
    margin-block-end: 0;
}

.as-comparison-table table {
    min-width: 42rem;
}

.as-comparison-table th:first-child {
    width: 34%;
}

.as-faq-list {
    border-top: var(--as-border-width) solid var(--as-color-border);
}

.as-faq-item {
    padding-block: var(--as-space-sm);
    border-bottom: var(--as-border-width) solid var(--as-color-border);
}

.as-faq-item summary {
    color: var(--as-color-text);
    font-weight: var(--as-font-weight-semibold);
    cursor: pointer;
}

.as-faq-item[open] summary {
    margin-block-end: var(--as-space-sm);
}

.as-faq-item > :last-child {
    margin-block-end: 0;
}

.as-conversion-pattern {
    box-sizing: border-box;
    padding-block: var(--as-space-xl);
    padding-inline: var(--as-page-gutter);
}

.as-conversion-pattern__inner {
    width: min(100%, var(--as-wide-width));
    margin-inline: auto;
}

.as-conversion-pattern__inner--horizontal {
    gap: var(--as-space-lg);
}

.as-conversion-pattern__content {
    max-width: 46rem;
}

.as-conversion-pattern__content > :last-child,
.as-conversion-pattern__expectations > :last-child,
.as-conversion-pattern__request-card > :last-child {
    margin-block-end: 0;
}

.as-conversion-pattern__split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
    gap: var(--as-space-xl);
    align-items: center;
}

.as-conversion-pattern--banner .as-conversion-pattern__content p {
    opacity: 0.9;
}

.as-conversion-pattern--contact {
    margin-block: var(--as-section-space);
    padding: var(--as-space-lg);
}

.as-conversion-pattern--contact .as-conversion-pattern__inner {
    width: 100%;
}

.as-trust-pattern {
    box-sizing: border-box;
    padding-block: var(--as-section-space);
    padding-inline: var(--as-page-gutter);
}

.as-trust-pattern__inner {
    width: min(100%, var(--as-wide-width));
    margin-inline: auto;
}

.as-testimonial {
    max-width: 54rem;
    margin: 0 auto;
    padding: var(--as-space-xl);
    border: 0;
    text-align: center;
}

.as-testimonial p {
    margin-block-end: var(--as-space-md);
    color: var(--as-color-text);
    font-size: var(--as-font-size-xl);
    font-weight: var(--as-font-weight-semibold);
    line-height: var(--as-line-height-heading);
}

.as-testimonial cite {
    color: var(--as-color-text-muted);
    font-size: var(--as-font-size-sm);
    font-style: normal;
}

.as-statistics-row {
    text-align: center;
}

.as-statistic {
    padding: var(--as-space-lg);
    border-block: var(--as-border-width) solid var(--as-color-border);
}

.as-statistic__value {
    margin-block-end: var(--as-space-xs);
    color: var(--as-color-primary);
    font-size: var(--as-font-size-2xl);
}

.as-statistic__label {
    margin: 0;
    color: var(--as-color-text-muted);
}

.as-trust-pattern__split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
    gap: var(--as-space-xl);
    align-items: center;
}

.as-case-study-results > :last-child {
    margin-block-end: 0;
}

.as-logo-strip {
    gap: var(--as-space-sm);
    margin-block-start: var(--as-space-lg);
}

.as-logo-placeholder {
    display: grid;
    min-width: 9rem;
    min-height: 4.5rem;
    place-items: center;
    padding: var(--as-space-sm);
    border: var(--as-border-width) dashed var(--as-color-border);
    border-radius: var(--as-radius-sm);
    background: var(--as-color-surface);
    color: var(--as-color-text-muted);
}

.as-logo-placeholder p {
    margin: 0;
    font-size: var(--as-font-size-sm);
    font-weight: var(--as-font-weight-semibold);
}

@media (max-width: 781px) {
    .as-hero-pattern,
    .as-content-pattern,
    .as-conversion-pattern,
    .as-trust-pattern {
        padding-block: var(--as-space-xl);
    }

    .as-hero-pattern--product .as-hero-pattern__inner,
    .as-content-pattern__split,
    .as-conversion-pattern__split,
    .as-trust-pattern__split {
        grid-template-columns: 1fr;
        gap: var(--as-space-lg);
    }

    .as-hero-pattern__visual {
        min-height: 15rem;
    }

    .as-content-pattern__header {
        margin-block-end: var(--as-space-lg);
    }

    .as-content-pattern__split .as-content-pattern__header {
        margin-block-end: 0;
    }

    .as-conversion-pattern__inner--horizontal {
        align-items: flex-start;
    }

    .as-conversion-pattern--contact {
        margin-block: var(--as-space-xl);
        padding: var(--as-space-md);
    }

    .as-testimonial {
        padding: var(--as-space-md);
    }

    .as-testimonial p {
        font-size: var(--as-font-size-lg);
    }

    .as-logo-placeholder {
        min-width: 7rem;
        flex: 1 1 7rem;
    }
}