/* min-width: 0 — довгий текст/флекс у колонці не роздуває рядок */
.content-col-grow {
    min-width: 0;
}

.content-stack-col--text {
    overflow-wrap: anywhere;
}

.content-stack-col--text > :first-child {
    width: 100%;
    max-width: 65ch;
    margin-inline: auto;
}

/* gap лише для Tailwind (grid). У Bootstrap — відступи через g-* у component (row-cols + g-3), без CSS gap на .row */
.content-grid-gap:not(.row) {
    gap: 1rem;
}

.content-full-frame {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.content-section-pad {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

/* Третина рядка: стабільна висота прев’ю, без height:100% від сусіднього тексту */
.content-img-fullheight {
    display: block;
    width: 100%;
    max-width: min(100%, 28rem);
    margin-inline: auto;
    min-width: 0;
    aspect-ratio: 3 / 4;
    max-height: 28rem;
    height: auto;
    flex-shrink: 1;
    object-fit: cover;
    object-position: center;
}

.memo-number-hover,
.memo-box-hover,
.memo-cta-shadow,
.memo-cta-hover {
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.memo-title-rule {
    border-bottom: 4px solid var(--bs-primary);
}

.memo-principle-rule {
    border-top: 2px solid rgba(var(--bs-emphasis-color-rgb), 0.2);
}

.memo-principle-group:hover .memo-number-hover {
    color: var(--bs-primary) !important;
}

.memo-principle-group:hover .memo-box-hover {
    border-top-color: rgba(var(--bs-primary-rgb), 0.4) !important;
}

.memo-cta-shadow {
    transform: translate(0.375rem, 0.375rem);
}

.memo-cta-group:hover .memo-cta-shadow {
    transform: translate(0, 0);
}

.memo-cta-hover:hover {
    background-color: var(--bs-primary, rgb(var(--tw-primary-600, 37 99 235) / 1)) !important;
    color: #fff !important;
    border-color: var(--bs-primary, rgb(var(--tw-primary-700, 29 78 216) / 1)) !important;
}

.content-river__arc {
    width: 18rem;
    height: 18rem;
}

.content-river__node {
    width: 0.75rem;
    height: 0.75rem;
    transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
    .content-river__copy--right {
        grid-column-start: 2;
    }

    .content-river__copy--left {
        grid-column-start: 1;
        grid-row-start: 1;
    }

    .content-river__spacer--left {
        order: 2;
    }
}

/* content companion — hairline width for BS decor */
.content-companion__hair {
    width: 3rem;
}

/* numeric index column width on small screens */
.content-companion__index {
    min-width: 0;
}

.content-companion__index-digit {
    font-variant-numeric: tabular-nums;
}

/* Geometry shared by both CSS frameworks (Bootstrap has no utilities for it) */
.gallery-diptych__section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.mxw-4xl {
    max-width: 56rem !important;
}

.mxw-2xl {
    max-width: 42rem !important;
}

.gallery-diptych__head {
    margin-bottom: 2rem;
}

.gallery-diptych__title {
    font-size: 1.875rem;
    margin-bottom: 0.75rem;
}

.gallery-diptych__lead {
    font-size: 1.125rem;
}

.gallery-diptych__stage {
    aspect-ratio: 16 / 9;
}

.gallery-diptych__label {
    top: 1rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    --bs-bg-opacity: 0.9;
}

.gallery-diptych__label--before {
    inset-inline-start: 1rem;
}

.gallery-diptych__label--after {
    inset-inline-end: 1rem;
}

.gallery-diptych__handle {
    width: 2.5rem;
    height: 2.5rem;
}

@media (min-width: 768px) {
    .gallery-diptych__title {
        font-size: 2.25rem;
    }
}

/* gallery v14 — before/after diptych divider */
[data-diptych-stage] {
    --split-pos: 50%;
}

.gallery-diptych__inner {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: ew-resize;
    touch-action: none;
    user-select: none;
}

.gallery-diptych__img {
    object-fit: cover;
    pointer-events: none;
}

.gallery-diptych__img--before {
    clip-path: inset(0 calc(100% - var(--split-pos)) 0 0);
}

.gallery-diptych__divider {
    --bs-bg-opacity: 0.8;
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--split-pos);
    width: 2px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.gallery-diptych__divider > * {
    pointer-events: auto;
}

.content-img-ratio {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    object-fit: cover;
    flex-shrink: 0;
}

.document-folio__photo--shift:hover { transform: scale(1.05); transition: transform .2s ease; }

.document-folio__appeal--shift:hover { transform: scale(1.05); transition: transform .2s ease; }

.content-heading-gap {
    margin-bottom: 2rem;
}

.content-report-leaf__toggle {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    cursor: pointer;
    outline-offset: -0.125rem;
}

.content-report-leaf__glyph {
    transition: transform 180ms ease;
}

.content-report-leaf__toggle.is-open .content-report-leaf__glyph {
    transform: rotate(45deg);
}

.content-report-leaf__orb {
    width: 10rem;
    height: 10rem;
    filter: blur(4rem);
}

.content-flex-min {
    min-width: 0;
}