/*
 * VP Page Layouts
 * Version 1.0.7
 * ---------------------------------------------------------
 * Eigene Contentbreiten für Seiten in Blocksy.
 *
 * Die Breite wird ausschließlich am Content-Container innerhalb
 * von #main gesetzt. Header, Navigation und Footer bleiben von den
 * globalen Blocksy-Containerbreiten abhängig.
 */

:root {
    --vp-page-width-narrow: 760px;
    --vp-page-width-standard: 900px;
    --vp-page-width-wide: 1100px;
}

/* ---------------------------------------------------------
   Breitenzuordnung
   --------------------------------------------------------- */

body.vp-page-layout-narrow {
    --vp-page-layout-width: var(--vp-page-width-narrow);
}

body.vp-page-layout-standard {
    --vp-page-layout-width: var(--vp-page-width-standard);
}

body.vp-page-layout-wide {
    --vp-page-layout-width: var(--vp-page-width-wide);
}

/* ---------------------------------------------------------
   Blocksy-Seiteninhalt
   ---------------------------------------------------------
   Blocksy berechnet die Artikel- und Blockbreite aus diesen
   Variablen. Sie werden ausschließlich innerhalb von #main
   geändert. Header, Navigation und Footer behalten dadurch ihre
   global konfigurierte Containerbreite.
 */

body.vp-page-layout #main > [class*="ct-container"][data-content] {
    --theme-narrow-container-max-width: var(--vp-page-layout-width);
    --theme-normal-container-max-width: var(--vp-page-layout-width);
}

/* Blocksys Seitentitel liegt in einem zusätzlich begrenzten Wrapper.
   Innerhalb des bereits begrenzten Artikels darf er nicht nochmals
   auf die neue Seitenbreite zentriert werden. */
body.vp-page-layout #main > [class*="ct-container"][data-content]
    > article > .hero-section.is-width-constrained {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

/* VP Block Styles versieht .entry-header global mit Innenabstand.
   Beim Blocksy-Seitentitel würde dieser den Titel um 16 px einrücken. */
body.vp-page-layout #main .hero-section > .entry-header {
    padding: 0;
}

/* Übersichtsseiten bauen ihre Flächen im Editor selbst auf. */
body.vp-page-layout-wide #main > [class*="ct-container"][data-content]
    > article {
    background: transparent !important;
    border: 0;
    box-shadow: none;
}

/* Auf Übersichtsseiten übernimmt der Seiteninhalt die sichtbare
   Überschrift; Blocksys automatisch erzeugter Titel entfällt. */
body.vp-page-layout-wide #main .hero-section {
    display: none;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 689px) {
    body.vp-page-layout #main > [class*="ct-container"][data-content] {
        --theme-narrow-container-max-width: 100%;
        --theme-normal-container-max-width: 100%;
    }
}