/**
 * Content + Image Split Block - Frontend Styles
 *
 * Layout: conteúdo (InnerBlocks) à esquerda + painel de imagem à direita.
 * O painel de mídia sangra até a borda direita da viewport.
 *
 * @package Ably_Blocks
 */

/* ── Section wrapper ────────────────────────────────────────── */
.ap-split {
    overflow: hidden;
}

/* ── Background color modifiers ─────────────────────────────── */
.ap-split.bg-white    { background-color: #ffffff; }
.ap-split.bg-purpura  { background-color: var(--semantics-colors-fill-accent-purpura,  #6D28D9); color: var(--semantics-colors-text-on-dark, #ffffff); }
.ap-split.bg-ponkan   { background-color: var(--semantics-colors-fill-accent-ponkan,   #FFA301); }
.ap-split.bg-pitaya   { background-color: var(--semantics-colors-fill-accent-pitaya,   #C41362); color: var(--semantics-colors-text-on-dark, #ffffff); }
.ap-split.bg-pistache { background-color: var(--semantics-colors-fill-accent-pistache, #059669); color: var(--semantics-colors-text-on-dark, #ffffff); }
.ap-split.bg-petunia  { background-color: var(--semantics-colors-fill-accent-petunia,  #1E293B); color: var(--semantics-colors-text-on-dark, #ffffff); }

/* ── Two-column grid ────────────────────────────────────────── */
.ap-split__inner {
    width: 100%;
    max-width: var(--semantics-container-max, 1440px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 794fr) minmax(0, 622fr);
}

/* ── Content (left column) ──────────────────────────────────── */
.ap-split__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ap-split__inner-content {
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-small, 12px);
}


/* Media panel color modifiers */
.ap-split__media.bg-purpura  { background-color: var(--semantics-colors-fill-accent-purpura,  #6D28D9); }
.ap-split__media.bg-ponkan   { background-color: var(--semantics-colors-fill-accent-ponkan,   #FFA301); }
.ap-split__media.bg-pitaya   { background-color: var(--semantics-colors-fill-accent-pitaya,   #C41362); }
.ap-split__media.bg-pistache { background-color: var(--semantics-colors-fill-accent-pistache, #059669); }
.ap-split__media.bg-petunia  { background-color: var(--semantics-colors-fill-accent-petunia,  #1E293B); }

/* ── Reversed layout (image left, content right) ────────────── */
.ap-split--reversed .ap-split__inner {
    grid-template-columns: minmax(0, 622fr) minmax(0, 794fr);
}

/* ── Inner content: text color inheritance on dark backgrounds ─ */
.ap-split.bg-purpura  .ap-split__content,
.ap-split.bg-pitaya   .ap-split__content,
.ap-split.bg-pistache .ap-split__content,
.ap-split.bg-petunia  .ap-split__content {
    color: var(--semantics-colors-text-on-dark, #ffffff);
}

/* Headings and paragraphs inherit from section color */
.ap-split__content h1,
.ap-split__content h2,
.ap-split__content h3,
.ap-split__content h4,
.ap-split__content p,
.ap-split__content li {
    color: inherit;
}

/* Column sub-layout for skills/lists inside content area */
.ap-split__content .wp-block-columns {
    gap: var(--semantics-spacing-big, 24px);
}

/* ── Responsive: tablet (≤ 1024px) ─────────────────────────── */
@media (max-width: 1024px) {
    .ap-split__inner,
    .ap-split--reversed .ap-split__inner {
        grid-template-columns: 1fr;
    }

    .ap-split__media {
        min-height: 320px;
        margin-right: 0;
    }
}

/* ── Responsive: mobile (≤ 576px) ──────────────────────────── */
@media (max-width: 576px) {
    .ap-split__content {
        padding: var(--semantics-padding-bigger, 48px) var(--semantics-spacing-large, 32px);
    }

    .ap-split__media {
        min-height: 240px;
    }
}