/* ============================================================
   KARTUL — simple page (imprint, house rules, contact…)
   Loads AFTER style.css (shares fonts, colours, nav, lang switch).

   Unlike the home/menu/events pages this one is not a "stage" of fixed
   editorial furniture — it is plain long-form text, so the whole job of
   this file is: clear the fixed header, set a comfortable reading
   measure, and give paragraphs/headings/lists an even vertical rhythm.
   ============================================================ */

:root {
    /* ========== TUNE HERE — simple page only =========================
       How wide the text column may get. ~60-75 characters is the
       classic comfortable measure for continuous reading; `ch` sizes it
       off the font's own digit width, so it stays a "character count"
       even if --measure (body font size, set in style.css) changes. */
    --simple-measure: 68ch;

    /* Space between blocks (paragraphs, headings, lists, images) as a
       multiple of line-height — keeps rhythm regular however many
       blocks an editor stacks. */
    --simple-block-gap: 1.3em;

    /* Top spacing comes from --stage-top in style.css. */
    --simple-top-gap: 0;
    --simple-top-gap-mobile: 0;

    /* Left/right margins outside the measure, so the column doesn't
       ever touch the viewport edge even when it's narrower than
       --simple-measure allows (small desktop windows). */
    --simple-side-gap: var(--side-inset);

    /* Inline images dropped into the block palette — bigger than the
       home page's small inline photos (--img-height in style.css),
       since this column has the width to spare. */
    --simple-img-height: 260px;
    /* ================================================================== */
}

.simple-stage {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - var(--header-height));
}

.simple-body {
    width: 100%;
    max-width: var(--simple-measure);
    margin-inline: auto;
    padding-inline: var(--simple-side-gap);
    box-sizing: content-box;
}

.simple-title {
    font-size: 1.4em;
    font-weight: 900;
    margin: 0 0 var(--simple-block-gap);
    line-height: 1.25;
}

/* ---------- vertical rhythm ----------
   line-height is inherited (1.2, from style.css); every block below
   carries the same bottom margin so paragraphs, headings and lists all
   step down evenly regardless of which order an editor stacks them in. */
.simple-body p,
.simple-body ul,
.simple-body ol,
.simple-body .inline-img,
.simple-body .block-events-feature,
.simple-body .block-menu-offer,
.simple-body .block-audio {
    margin: 0 0 var(--simple-block-gap);
}
.simple-body > *:last-child,
.simple-body p:last-child { margin-bottom: 0; }

.simple-body h2,
.simple-body h3 {
    font-size: inherit;
    font-weight: 700;
    line-height: 1.25;
    margin: 1.6em 0 .5em;
}
.simple-body h2:first-child,
.simple-body h3:first-child { margin-top: 0; }

.simple-body ul,
.simple-body ol { padding-left: 1.2em; }
.simple-body li { margin: 0 0 .4em; }

.simple-body a { text-decoration: underline; text-underline-offset: 2px; }
.simple-body a:hover { font-weight: 700; }

/* images sit inline in the flow, full measure width, never overlapping
   text — same calm treatment as the home page's inline photos, just
   sized for a wider column */
.simple-body .inline-img {
    transform: none; /* the home page's --img-tilt is a manifesto quirk, not wanted here */
}
.simple-body .inline-img img {
    display: block;
    width: 100%;
    height: var(--simple-img-height);
    object-fit: cover;
}

/* ---------- mobile ---------- */
@media (max-width: 780px) {
    .simple-body {
        max-width: 100%;
        padding-inline: var(--side-inset-mobile);
    }
    .simple-body .inline-img img { height: calc(var(--simple-img-height) * 0.7); }
}