/* ============================================================ */
/* LRA Theme — Global Layout & Content Width                   */
/* Sorgt fuer einheitliche Seitenraender auf allen Seiten       */
/* ============================================================ */

/* --- CSS-Variablen --- */
:root {
    --lra-content-width: 1200px;
    --lra-wide-width: 1400px;
    --lra-content-padding: 24px;
    --lra-content-padding-mobile: 20px;
}

/* --- Globale Content-Begrenzung (Unterseiten) --- */
/* page.php / single.php wrappen Content in .page-entry-content */
.page-entry-content,
.post-entry-content {
    max-width: var(--lra-content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--lra-content-padding);
    padding-right: var(--lra-content-padding);
}

/* Falls .container-narrow gesetzt ist (alte Startseite), schmaler */
.page-entry-content.container-narrow {
    max-width: 800px;
}

/* --- Startseite: Nur nicht-Cover-Bloecke begrenzen --- */
/* Cover-Blöcke sind Hero-Sektionen und bleiben randvoll */
/* Gutenberg zentriert is-layout-constrained bereits selbst */
/* Wir muessen nur sicherstellen, dass direkte Kinder die nicht */
/* im constrained layout sind, auch Padding bekommen */

/* Die .lra-frontpage main hat keine .entry-content wrapper */
/* Gutenberg is-layout-constrained zentriert bereits automatisch */
/* Nur Padding fuer Bloecke die ausserhalb von groups sitzen */

/* --- alignwide / alignfull Support --- */
.entry-content .alignwide,
.wp-block[data-align="wide"] {
    max-width: var(--lra-wide-width);
    margin-left: auto;
    margin-right: auto;
}

.entry-content .alignfull,
.wp-block[data-align="full"] {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* alignfull: Innen-Content begrenzen */
.entry-content .alignfull > .wp-block-cover__inner-container,
.entry-content .alignfull > .wp-block-group__inner-container {
    max-width: var(--lra-content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--lra-content-padding);
    padding-right: var(--lra-content-padding);
}

/* --- Cover-Blöcke: Innen-Content begrenzen (auch auf Startseite) --- */
.wp-block-cover__inner-container {
    max-width: var(--lra-content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--lra-content-padding);
    padding-right: var(--lra-content-padding);
}

/* --- Group-Blöcke: Innen-Content begrenzen --- */
.wp-block-group__inner-container {
    max-width: var(--lra-content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--lra-content-padding);
    padding-right: var(--lra-content-padding);
}

/* --- Mobile: Kleineres Padding --- */
@media (max-width: 768px) {
    :root {
        --lra-content-padding: var(--lra-content-padding-mobile);
    }
    
    .page-entry-content,
    .post-entry-content,
    .wp-block-cover__inner-container,
    .wp-block-group__inner-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Local design experiment: one gentle camera move on the front-page photo. */
#primary.lra-frontpage > .wp-block-cover:first-child {
    overflow: hidden;
}

#primary.lra-frontpage > .wp-block-cover:first-child > .wp-block-cover__image-background {
    transform-origin: 58% 45%;
    animation: lra-frontpage-camera 8s ease-out both;
}

@keyframes lra-frontpage-camera {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    #primary.lra-frontpage > .wp-block-cover:first-child > .wp-block-cover__image-background {
        animation: none;
        transform: none;
    }
}