/* Block: Intro */

.block-intro { gap: 10px; }
.block-intro .cols { gap: var(--spacing-gap-large); }
.block-intro .col.left {
    max-width: 60%;
    position: sticky;
    top: var(--spacing-section-top);
    align-self: flex-start;
}
.block-intro .col.right { max-width: 40%; container-type: inline-size; padding-top: 40px; }

.block-intro .col.right.has-media { max-width: 50%; padding-top:0; }
.block-intro:has(.col.right.has-media) .col.left { max-width: 50%; }

.block-intro .single-title { display: flex; flex-direction: column; gap: 16px; }
.block-intro .single-title .text-content p { color: var(--color-subtext); }


.block-intro .title-heading-wrap { display: flex; flex-direction: column; gap: 10px; }

.block-intro .col.right p.side-text-small { color: var(--color-subtext); }

.block-intro .intro-right-image { width: 100%; }
.block-intro .intro-right-image img { width: 100%; height: auto; border-radius: var(--border-radius-md); display: block; }

/* ── Intro media frame – shared square container for tagcloud / fill-image ── */
.intro-media-frame {
    width: 100%;
    max-height: 80dvh;
}

.intro-media-frame__box {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 100%;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: var(--color-product-section);
}

.intro-media-frame__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.intro-media-frame__box.block-tagcloud__container {
    aspect-ratio: 1 / 1;
    max-height: 100%;
}

@container page-content (max-width: 1500px) {
    .block-intro .col.left { max-width: 60%; }
    .block-intro .col.right { max-width: 40%; }

    .block-intro .col.right.has-media { max-width: 50%; }
    .block-intro:has(.col.right.has-media) .col.left { max-width: 50%; }
}

@container page-content (max-width: 1024px) {
    .block-intro .col.left { max-width: 100%; position: static; }
    .block-intro .col.right { max-width: 100%; }
    .block-intro .col.left .buttons { justify-content: center; }
    .block-intro .text-content p { text-align: center; }

    .block-intro:has(.col.right.has-media) .col.left { max-width: 100%; }
    .block-intro:has(.col.right.has-media) .col.right { max-width: 100%; }
    .block-intro .col.right { padding-top: 0px; }
    .block-intro .cols { gap: var(--spacing-gap-large); }
    .block-intro .intro-right-image img { margin-top:5px; }

    .block-intro .col.right.has-media { padding-top:10px; }

    .intro-media-frame__box,
    .intro-media-frame__box.block-tagcloud__container { aspect-ratio: 16 / 9; }
}