/* Containers, sections and the two grids the design needs. */

.cuc-container {
    width: 100%;
    max-width: var(--cuc-container);
    margin-inline: auto;
    padding-inline: var(--cuc-gutter);
}

.cuc-section { padding-block: var(--cuc-space-16); }
.cuc-section--tight { padding-block: var(--cuc-space-12); }
/* The closing call to action. Half of --tight, because the band sits between
   the card grid above and the footer below: its padding lands on top of the
   grid's and the footer's, and three paddings in a row read as one large
   emptiness rather than as three deliberate gaps. */
.cuc-section--cta { padding-block: var(--cuc-space-6); }
.cuc-section--band { background: var(--cuc-surface); }

/* A section inside a section adds no padding, and a container inside a container
 * adds no gutter.
 *
 * BOTH page templates - Default.html and None.html - already wrap
 * lib.contentMain in `.cuc-container.cuc-section`, and ELEVEN plugin templates
 * open with the same pair of classes. Every plugin page therefore had two of
 * each: 4rem of padding on top of 4rem, and one gutter inside another. On
 * /aktionen that put 96 px between the title band and the first line of content,
 * which is what Marcel reported on 2026-08-07.
 *
 * This is a NET, not the design. The right fix is for the plugin templates to
 * stop wrapping themselves, since the page template owns that job - but that is
 * eleven files across two extensions, and each of them has to be checked in a
 * browser rather than assumed. Until then this makes the nesting harmless, and
 * it keeps the next template that copies the same opening line from
 * reintroducing the gap. */
.cuc-section .cuc-section { padding-block: 0; }
.cuc-container .cuc-container { max-width: none; padding-inline: 0; }

/* auto-fit with minmax means the four-across card grid becomes two and then one
   without a single media query. The min() guard is what stops it overflowing
   below 260px instead of shrinking. */
.cuc-grid {
    display: grid;
    gap: var(--cuc-space-6);
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

/* Same track size as .cuc-grid, but auto-FILL instead of auto-fit.
 *
 * The difference only shows when there are fewer cards than columns, and then it
 * is the whole point: auto-fit collapses the empty tracks, so a single card
 * stretches across the entire page. On "Meine Aktionen" that is the normal case
 * - most organisers have one or two actions - and a card blown up to 1400px
 * beside a landing page full of 260px cards was what Marcel reported.
 *
 * auto-fill keeps the empty tracks, so one card is exactly as wide as it would
 * be if there were four. Not applied to .cuc-grid itself, because the home page
 * and the feature row were built against the stretching behaviour and changing
 * it there is a different decision.
 */
.cuc-grid--fill {
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

/* Inside the actions area the cards get a lower minimum than the shared grid.
   The design puts FOUR cards beside the timeline; at 1440px the left column is
   1040px, so four cards with 24px gaps need 242px each and the 260px minimum
   above silently produced three plus a stranded fourth. Scoped rather than
   lowered globally, so the feature row keeps its own comfortable minimum. */
.cuc-actions-layout .cuc-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(236px, 100%), 1fr));
}

/* The actions area: cards on the left, step timeline on the right. This is the
   only explicit breakpoint in the layout, because it is the only place where the
   structure genuinely changes rather than the column count. */
.cuc-actions-layout {
    display: grid;
    gap: var(--cuc-space-8);
    grid-template-columns: 1fr;
}

@media (min-width: 1200px) {
    .cuc-actions-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}

.cuc-stack > * + * { margin-top: var(--cuc-space-4); }

.cuc-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cuc-space-4);
    align-items: center;
}