/* ==========================================================================
   RIGHT COLUMN
   ==========================================================================
   For any layout with Contao's RIGHT column enabled (2clr). The counterpart of
   left.css: add it to those page layouts only.

   Contao outputs #main before #right, so the source order is already the
   reading order; nothing is reordered on wide screens. The container is NOT
   restated here (website_structure.css owns .container_inside's width and
   gutter); this file only adds the two-column flex on top.
   ========================================================================== */

:root {
    --right-width: clamp(220px, 22vw, 320px);
    --right-gap: clamp(24px, 4vw, 64px);
    /* where the column sticks; clear a fixed header */
    --right-sticky-top: var(--space-24);
}

/* ---- Shell ---------------------------------------------------------------- */
.container_inside { display: flex; gap: var(--right-gap); }
#right { flex: 0 0 var(--right-width); }
#main {
    flex: 1 1 0;
    min-width: 0;          /* lets a wide table or long URL shrink the column */
    overflow-x: clip;      /* contain .bleed-x; `clip`, not `hidden`, keeps sticky working */
}

/* ---- Sticky (delete this rule to switch it off) --------------------------
   #right stretches to the row's height, so its .inside sticks for as long as
   the main column is taller. If it stops sticking, an ancestor has overflow
   hidden/auto/scroll (see the note on body.mm-wrapper in website_structure.css). */
#right > .inside { position: sticky; top: var(--right-sticky-top); }

/* ---- Narrow screens: one column, the sidebar after the content ------------ */
@media (max-width: 860px) {
    .container_inside { flex-direction: column; }
    #right { flex: 1 1 auto; }
    #right > .inside { position: static; }
}