/* =============================================================================
   Layout primitives - containers and sections used by every page.
   ============================================================================= */

/* --- Room for the header -----------------------------------------------------
   modules/header.php is position: fixed, so it takes no space of its own and
   the page has to reserve it here. Always the tall value: the header shortens
   to --header-height-compact once the page has scrolled, and if this padding
   followed it the whole page would jump at that moment.
   -------------------------------------------------------------------------- */
body {
    padding-block-start: var(--header-height);
}

/* --- Container ---------------------------------------------------------------
   The one horizontal constraint on the site. Three widths for now:

     .container          1300px   normal content
     .container--slim     800px   long-form text (legal pages, articles)
     .container--wide    1530px   wide rows, galleries, full-bleed sections

   More widths will follow: add a token in tokens.css and one modifier here.
   -------------------------------------------------------------------------- */
.container {

    /* --- Escaping the container ------------------------------------------
       How far it is from the container's INNER edge - past the gutter, past
       the centring margin - to the edge of the window. A child that wants to
       bleed off the page takes it as a negative margin and needs no vw maths
       of its own:

         .media-text__media { margin-inline-start: calc(var(--container-bleed) * -1); }

       It is declared here rather than on :root so that it follows whichever
       width the container is set to: inside .container--wide it resolves
       against 1530px by itself.

       min() is what keeps it correct below the maximum width: there the
       container is the window and the only thing to cancel is the gutter.

       100vw counts a scrollbar and the container does not, so on a platform
       that draws one the bleed overshoots by those few pixels. Give the
       section that uses it `overflow: hidden` - it is going to want that for
       the picture anyway. */
    --container-bleed: calc(
        (100vw - min(100vw, var(--container-max, var(--width-default)))) / 2
        + var(--container-padding)
    );

    width: 100%;
    max-width: var(--container-max, var(--width-default));
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.container--slim {
    --container-max: var(--width-slim);
}

.container--wide {
    --container-max: var(--width-wide);
}

/* Escapes the constraint entirely - for background rows that bleed edge to
   edge while their inner content still uses a .container. */
.container--full {
    --container-max: none;
}

/* --- Section -----------------------------------------------------------------
   Vertical rhythm between page sections. The padding is fluid, so it grows
   with the viewport in step with the type scale.
   -------------------------------------------------------------------------- */
.section {
    padding-block: var(--space-section);
}

.section--tight {
    padding-block: var(--space-section-tight);
}

.section--flush {
    padding-block: 0;
}

.section--alt {
    background-color: var(--color-surface-alt);
}

/* --- A section that closes on a rule -----------------------------------------
   Where several sections share one background - the three that take apart a
   method on a Leistungen page - a hairline is what separates them.

   It is drawn by the container and not by the section, so it stops where the
   content stops instead of running across the window; and it is a
   pseudo-element and not a border-block-end, because a border would sit
   outside the section's padding, hard against the next section.

   The margin above it plus the section's own padding below it put the same
   space on either side.
   -------------------------------------------------------------------------- */
.section--ruled > .container::after {
    content: '';
    display: block;
    margin-block-start: var(--space-section);
    height: var(--border-width);
    background-color: var(--section-rule, rgba(var(--rgb-blue-light), 0.55));
}

.section--invert {
    background-color: var(--color-surface-invert);
    color: var(--color-text-inverse);
}

/* The band a Leistungen page runs its "Wie läuft Ihre Untersuchung ab?" over:
   the dark blue at the top opening into the accent at the foot, so the section
   below it starts from the light end rather than from an edge. A background
   image and not a second element - nothing in it reacts to the pointer, which
   is what forced .technik__band on the home page to be one. */
.section--gradient {
    background-image: linear-gradient(to bottom,
                      var(--color-primary),
                      var(--color-accent));
    color: var(--color-text-inverse);
}

.section--invert h1,
.section--invert h2,
.section--invert h3,
.section--invert h4,
.section--gradient h1,
.section--gradient h2,
.section--gradient h3,
.section--gradient h4 {
    color: var(--color-text-inverse);
}

/* Both inverted bands carry their own hairline: the blue-grey --color-line is
   invisible on either of them. Set on the section rather than on each thing
   that draws a rule, so a module dropped in here needs no modifier of its own -
   .section-head and .accordion both read these two. */
.section--invert,
.section--gradient {
    --section-head-rule: rgba(var(--rgb-white), 0.45);
    --color-line: rgba(var(--rgb-white), 0.35);
}

/* --- Flow primitives ---------------------------------------------------------
   Composable helpers so modules rarely need their own layout rules.
   -------------------------------------------------------------------------- */

/* Auto-fitting grid. Set --grid-min to change the minimum column width. */
.grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 260px), 100%), 1fr));
}

/* Horizontal flow with consistent gaps. */
.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

/* Vertical stack with consistent gaps. */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Two subjects under ONE band. The Herz-CT and the Herz-MRT share the single
   gradient section on /leistungen/kardio, because a second band immediately
   under the first reads as a seam rather than as a second subject. Put this on
   the container: far enough apart to be two sections, close enough to still be
   one band.

   A margin and not a gap, so it collapses to nothing when the band holds only
   one subject - which is every other page. */
.section-stack > * + * {
    margin-block-start: var(--space-3xl);
}