/**
 * WPBakery integration.
 *
 * WPBakery 7+ wraps the rows in .wpb-content-wrapper — every rule below
 * therefore targets rows under either parent, and the wrapper itself stays
 * transparent (full width, no padding).
 *
 * .entry-content is full width. A VC row that contains a section element
 * (.my-section) runs full-bleed — the section brings its own background and
 * .wrapper. Every other row is constrained to the wrapper width.
 */
:is(.entry-content, .entry-content > .wpb-content-wrapper) > .vc_row {
    margin-inline: 0;
}

/* wpautop turns line breaks between rows into stray <br> — never render them */
:is(.entry-content, .entry-content > .wpb-content-wrapper) > br {
    display: none;
}

/* Full-bleed rows: neutralise VC's column gutters */
:is(.entry-content, .entry-content > .wpb-content-wrapper) > .vc_row:has(.my-section) > .vc_column_container > .vc_column-inner {
    padding-inline: 0;
    padding-top: 0;
}

:is(.entry-content, .entry-content > .wpb-content-wrapper) > .vc_row:has(.my-section) .wpb_wrapper > .my-section {
    margin: 0;
}

/* Constrained rows */
:is(.entry-content, .entry-content > .wpb-content-wrapper) > .vc_row:not(:has(.my-section)) {
    width: 100%;
    max-width: var(--wrapper-max-width);
    margin-inline: auto;
    padding-inline: max(0px, calc(var(--container-padding) - 15px));
    padding-top: var(--section-space);
}

:is(.entry-content, .entry-content > .wpb-content-wrapper) > .vc_row:not(:has(.my-section)):last-child {
    padding-bottom: var(--section-space);
}

/* Plain content without VC (classic editor) */
.entry-content > :not(.vc_row, .wpb-content-wrapper, style, script) {
    max-width: var(--wrapper-max-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.entry-content > :not(.vc_row, .wpb-content-wrapper):first-child {
    padding-top: var(--section-space);
}

.entry-content > :not(.vc_row, .wpb-content-wrapper):last-child {
    padding-bottom: var(--section-space);
}

/* ---------- Section base ---------- */
.my-section {
    padding-block: var(--section-space);
}

/* Bottom spacing ("Abstand unten"); no class = the element's own default.
   Doubled class so it beats element rules like .my-hero { padding-block } */
.my-section.my-section--pb-none { padding-bottom: 0; }
.my-section.my-section--pb-s    { padding-bottom: var(--section-space-s); }
.my-section.my-section--pb-m    { padding-bottom: var(--section-space); }
.my-section.my-section--pb-l    { padding-bottom: var(--section-space-l); }

.my-section--creme      { background-color: var(--color-background); }
.my-section--creme-tief { background-color: var(--color-background-alt); }
.my-section--weiss      { background-color: var(--color-surface); }

/* Two stacked sections with the same light background: no double spacing */
.vc_row:has(.my-section--creme) + .vc_row .my-section--creme,
.vc_row:has(.my-section--weiss) + .vc_row .my-section--weiss,
.vc_row:has(.my-section--creme-tief) + .vc_row .my-section--creme-tief,
.vc_row:has(.my-section--creme) + br + .vc_row .my-section--creme,
.vc_row:has(.my-section--weiss) + br + .vc_row .my-section--weiss,
.vc_row:has(.my-section--creme-tief) + br + .vc_row .my-section--creme-tief {
    padding-top: 0;
}

/* Template list (.section, creme) followed by page content that starts with a
   creme section (posts page: list + CTA) — no double spacing */
.section + .entry-content > .wpb-content-wrapper > .vc_row:first-child .my-section--creme,
.section + .entry-content > .vc_row:first-child .my-section--creme {
    padding-top: 0;
}

/* ---------- Section heading ---------- */
.my-heading__hand {
    margin: 0 0 .625rem;
}

.my-heading__kicker {
    margin: 0 0 1rem;
}

.my-heading__title {
    max-width: 20ch;
    margin: 0;
}

.tafel .my-heading__title {
    color: var(--color-text-inverse);
}

/* ---------- Text link with arrow ---------- */
.my-more {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .96875rem;
    font-weight: var(--font-weight-bold);
}

.my-more svg {
    transition: transform .3s var(--ease-out);
}

.my-more:hover svg {
    transform: translateX(3px);
}