/* Block: Content Columns */

.block-content-columns {
    --cc-gap: var(--system-spacing-gap-xl);
}

/* Mother of the columns: 100% inside the block's natural wrapper padding. */
.block-content-columns .cc-shell {
    width: 100%;
    min-width: 0;
}

/* Boxed: outermost is md + bg-box. Each boxed descendant steps radius down
   (sm, then xs) and paints the nested token. Not tied to element type.
   Shell is the block wrapper — one step larger than a boxed column. */
.block-content-columns .boxed {
    padding: var(--system-spacing-inset-md);
    border-radius: var(--system-border-radius-md);
    background: var(--system-bg-box);
    box-sizing: border-box;
}

.block-content-columns .cc-shell.boxed {
    padding: var(--system-spacing-inset-lg);
    border-radius: var(--system-border-radius-lg);
}

.block-content-columns .boxed .boxed {
    border-radius: var(--system-border-radius-sm);
    background: var(--system-bg-box-nested);
}

.block-content-columns .boxed .boxed .boxed {
    border-radius: var(--system-border-radius-xs);
}

.block-content-columns-swiper {
    width: 100%;
    overflow: visible;
}

.block-content-columns .cc-row {
    display: flex;
    justify-content: var(--cc-row-justify, space-between);
    align-items: stretch;
    gap: var(--cc-gap);
    width: 100%;
}

.block-content-columns .cc-column {
    display: flex;
    flex-direction: column;
    justify-content: var(--cc-col-justify, flex-start);
    gap: var(--cc-col-gap, var(--system-spacing-gap-lg));
    flex: 0 1 var(--cc-w);
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: auto;
}

/* Same moment single-title / h2 go centered. */
.block-content-columns.not-slide {
    @container page-content (max-width: 1024px) {
        & .cc-row {
            flex-direction: column;
            justify-content: flex-start;
        }

        & .cc-column {
            flex: none;
            width: 100%;
            max-width: 100%;
        }
    }
}

.block-content-columns.mobile-slide {
    @container page-content (max-width: 1024px) {
        & .block-content-columns-swiper {
            overflow: hidden;
        }

        & .cc-column {
            flex: 0 0 auto;
            width: 85%;
            max-width: 85%;
        }
    }
}

/* Shared Align token — Text (chips + title + copy) and Button (cta + disclaimer). */
.cc-align-center { --cc-align: center; }
.cc-align-right  { --cc-align: end; }

/* Heading group (chips + title) then body. Gap between the two groups is
   larger than the chips↔title gap inside the heading. */
.cc-text {
    display: flex;
    flex-direction: column;
    gap: var(--system-spacing-gap-md);
    text-align: var(--cc-align, start);
}

.cc-text .title-heading-wrap {
    gap: var(--system-spacing-gap-2xs);
}

.block-content-columns .cc-text .single-title,
.block-content-columns .cc-text .title-heading-wrap {
    align-items: var(--cc-align, start);
}

.block-content-columns .cc-text .single-chips,
.block-content-columns .cc-text .title-heading-wrap h2 {
    text-align: var(--cc-align, start);
}

.block-content-columns .cc-text .single-chips.has-icon {
    justify-content: var(--cc-align, start);
}

.block-content-columns .cc-text .title-heading-wrap h2 {
    text-box-trim: trim-end;
    text-box-edge: cap alphabetic;
}

@container page-content (max-width: 1024px) {
    .block-content-columns .cc-text .single-chips.has-icon {
        align-items: var(--cc-align, start);
    }
}

/* ── Sub Block: Button ───────────────────────────────────────────────────────── */

.block-content-columns .cc-button.cta-button-wrap {
    justify-content: var(--cc-align, start);
}

@container page-content (max-width: 1024px) {
    .block-content-columns .cc-button.cta-button-wrap {
        justify-content: var(--cc-align, start);
        align-items: var(--cc-align, start);
    }
}

@container page-content (max-width: 768px) {
    .block-content-columns .cc-button.cta-button-wrap {
        align-items: var(--cc-align, start);
    }

    .block-content-columns .cc-button.cc-align-center .cta-disclaimer,
    .block-content-columns .cc-button.cc-align-right .cta-disclaimer {
        margin-left: 0;
    }
}

.cc-text .text-body-lg {
    color: var(--system-fg);
}

.cc-text .text-body-md,
.cc-text .text-body-sm {
    color: var(--system-fg-muted);
}

.cc-text.has-title .text-body-lg {
    color: var(--system-fg-muted);
}

/* ── Sub Block: Media ────────────────────────────────────────────────────────── */

.cc-media {
    width: 100%;
    overflow: hidden;

    &:not(.boxed) {
        border-radius: var(--system-border-radius-md);
    }

    & .cc-media__surface {
        width: 100%;
    }

    & .cc-media__image {
        width: 100%;
        height: auto;
        display: block;
    }

    & .cc-media__video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        inset: 0;
    }
}

/* ── Sub Block: List ─────────────────────────────────────────────────────────── */

.cc-list {
    --cc-list-title-size: var(--system-font-size-body-lg);
    --cc-list-title-lh: var(--system-line-height-body-lg);
    display: flex;
    flex-direction: column;
    gap: var(--system-spacing-gap-xs);
}

.cc-list > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: inherit;
}

.cc-list-plain {
    --cc-list-item-pad: var(--system-spacing-gap-sm);
    gap: 0;
}

.cc-list-large {
    --cc-list-title-size: var(--system-font-size-body-xl);
    --cc-list-title-lh: var(--system-line-height-body-xl);
}

.cc-list-plain.cc-list-separated {
    --cc-list-item-pad: var(--system-spacing-gap-md);
}

.cc-list-plain.cc-list-large {
    --cc-list-item-pad: var(--system-spacing-gap-lg);
}

.cc-list-plain .cc-list-row {
    padding-block: var(--cc-list-item-pad);
}

/* .cc-list-plain .cc-list-row:first-child {
    padding-top: 0;
}

.cc-list-plain .cc-list-row:last-child {
    padding-bottom: 0;
} */

.cc-list-separated .cc-list-row:not(:last-child) {
    border-bottom: 1px solid var(--system-border-hairline);
}

.cc-list-row {
    display: flex;
    width: 100%;
    gap: var(--system-spacing-gap-sm);
    align-items: flex-start;
    color: inherit;
}

/* Relationship row: 16:9 thumb + title/desc. The inner <a> is the flex row. */
.cc-list-row--link > a {
    display: flex;
    align-items: center;
    gap: inherit;
    width: 100%;
    padding: var(--system-spacing-inset-2xs);
    border-radius: var(--system-border-radius-md);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.2s ease-out;

    &:hover {
        background: var(--system-bg-box);
    }
}

.cc-list-row--link {

    & .cc-list-row__media {
        width: 30%;
        height: auto;
        aspect-ratio: 16 / 9;
    }


    & .cc-list-row__desc {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

.cc-list-row__media {
    flex: 0 0 auto;
    width: 25px;
    height: 25px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * Icon = cap-height of the title. Offset = half-leading of the same line
 * (the 2px hack, but it scales with lg/xl and every breakpoint).
 */
.cc-list-row--plain .cc-list-row__media:has(.cc-list-row__icon) {
    font-size: var(--cc-list-title-size);
    line-height: var(--cc-list-title-lh);
    width: 1.5cap;
    height: auto;
    margin-top: calc((1cap - 1lh) / 4);
}

.cc-list-row__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--system-border-radius-sm);
}

.cc-list-row__icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    & svg {
        width: 100%;
        height: auto;
    }

    & svg path,
    & svg rect,
    & svg circle,
    & svg polygon,
    & svg polyline,
    & svg line {
        fill: var(--system-fg-primary);
    }
}

.cc-list-row__content {
    flex: 1;
    min-width: 0;
    gap: var(--system-spacing-gap-2xs);
}

.cc-list-row__title {
    color: var(--system-fg);
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.cc-list-row__desc {
    color: var(--system-fg-muted);
}