/* ═══════════════════════════════════════════════════════
   Q&A with Image – frontend block styles
   ═══════════════════════════════════════════════════════ */

/* ── Section wrapper ─────────────────────────────────── */
.qa-image-block {
}

/* ── Inner two-column grid ───────────────────────────── */
.qa-image-block__inner {
    display: grid;
    grid-template-columns: calc(50% - 20px) calc(50% - 20px);
    gap: 40px;
}

/* Image on the left (default) */
.qa-image-block__inner--image-left {
}

/* Image on the right */
.qa-image-block__inner--image-right {
}

/* ── Image column ────────────────────────────────────── */
.qa-image-block__media {
    overflow: hidden;

}

.qa-image-block__media img {
    object-fit: contain;
    display: block;
    width: 100%;
}

/* ── Content column ──────────────────────────────────── */
.qa-image-block__content {
}

.qa-image-block__content h2 {
    color: var(--bs-dark-text-color);
    font-size: 44px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 40px;

}

/* ── Q&A list ─────────────────────────────────────────── */
.qa-list {
}

/* ── Single Q&A accordion item (<details>) ───────────── */
.qa-item {
    border-top: 2px solid var(--bb-boarding-color);
    padding: 20px 0;
}

.qa-item:last-child {
    border-bottom: 2px solid var(--bb-boarding-color);
}


.qa-item[open] {
}

/* ── Question (<summary>) ────────────────────────────── */
.qa-item__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    cursor: pointer;

    line-height: normal;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 16px;
}

/* Hide the native browser marker */
.qa-item__question::-webkit-details-marker {
    display: none;
}

.qa-item__question::marker {
    display: none;
}

/* + icon on the right when closed */
.qa-item__question::after {
    content: '+';
    flex-shrink: 0;
    margin-left: 16px;
    font-size: 24px;
}

/* × icon on the right when open */
.qa-item[open] > .qa-item__question::after {
    content: '×';
}

/* ── Answer (shown when <details> is open) ───────────── */
.qa-item__answer {
    line-height: normal;
}

/* ── Responsive breakpoints ──────────────────────────── */
@media (max-width: 1024px) {
    .qa-image-block__inner {
        grid-template-columns: 1fr;
    }

    /* Stack image below content when right-positioned on mobile */
    .qa-image-block__inner--image-right .qa-image-block__media {
        order: -1;
    }
}

@media (max-width: 767px) {
    .qa-image-block__inner {

    }

    .qa-item__question {
    }

    .qa-item__answer {
    }
}