/* ============================================================================
 * FAQ block — two-column 50/50 layout.
 * Left column renders the picked hehofaq category as an accordion; right
 * column stacks subtitle pill, title, description and optional button —
 * left-aligned. Below the breakpoint the left column collapses (the
 * accordion stays visible — it stacks above the right column).
 * ========================================================================== */

.hehoblocks-faq {
    margin: var(--heho-space-10, 6.25rem) auto;
    padding: 0 var(--heho-container-padding-x-lg, 1.5rem);
    max-width: var(--heho-container-max, 96rem);
}

.hehoblocks-faq__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.hehoblocks-faq__right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9375rem;
    text-align: left;
    height: fit-content;
}

.hehoblocks-faq__subtitle {
    margin: 0;
    padding: 0.625rem 1.25rem;
    background-color: var(--heho-color-primary-light-2, #FFEDED);
    color: var(--heho-color-primary, #AC0424);
    font-family: var(--heho-font-primary);
    font-size: 1rem;
    font-weight: var(--heho-font-weight-bold, 700);
    border-radius: var(--heho-radius-pill, 100vmax);
    line-height: var(--heho-line-height-tight, 1.2);
    width: fit-content;
}

.hehoblocks-faq__title {
    margin: 0;
    color: var(--heho-color-text, #010101);
    font-family: var(--heho-font-primary);
    font-size: 1.875rem;
    font-weight: var(--heho-font-weight-bold, 700);
    line-height: var(--heho-line-height-tight, 1.2);
}

.hehoblocks-faq__description {
    margin: 0;
    color: var(--heho-color-text-faded, #B1AEAE);
    font-family: var(--heho-font-secondary);
    font-size: 1rem;
    font-weight: var(--heho-font-weight-medium, 500);
    line-height: var(--heho-line-height-base, 1.5);
}

.hehoblocks-faq__description > :first-child { margin-top: 0; }
.hehoblocks-faq__description > :last-child  { margin-bottom: 0; }
.hehoblocks-faq__description p { margin: 0 0 var(--heho-space-3, 0.75rem); }
.hehoblocks-faq__description p:last-child { margin-bottom: 0; }

.hehoblocks-faq__button {
    display: inline-block;
    margin-top: 0.625rem;
    padding: 1.25rem 3.125rem;
    background-color: transparent;
    color: var(--heho-color-primary, #AC0424);
    border: 0.125rem solid var(--heho-color-primary, #AC0424);
    border-radius: var(--heho-radius-sm, 0.3125rem);
    font-family: var(--heho-font-primary);
    font-size: 1.125rem;
    font-weight: var(--heho-font-weight-bold, 700);
    line-height: var(--heho-line-height-tight, 1.2);
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color var(--heho-transition-base, 200ms ease),
                color var(--heho-transition-base, 200ms ease);
}

.hehoblocks-faq__button:hover,
.hehoblocks-faq__button:focus {
    background-color: var(--heho-color-primary, #AC0424);
    color: var(--heho-color-bg, #FFFFFF);
    text-decoration: none;
}

/* ── Responsive — see breakpoints in heho.css ─────────────────────────── */
@media (max-width: 1024px) {
    .hehoblocks-faq {
        margin: 3.125rem auto;
    }
    .hehoblocks-faq__inner {
        grid-template-columns: 1fr;
        gap: 1.5625rem;
    }
    .hehoblocks-faq__subtitle {
        padding: 0.5rem 0.9375rem;
        font-size: 0.875rem;
    }
    .hehoblocks-faq__title {
        font-size: 1.25rem;
    }
    .hehoblocks-faq__description {
        font-size: 0.875rem;
    }
    .hehoblocks-faq__button {
        padding: 0.9375rem 2.1875rem;
        font-size: 0.875rem;
    }
}