/**
 * Global Styles - Based on Original TYPO3 Design
 * 
 * Contains global container styles and utility classes
 * 
 * @package Kurpfalz_Theme
 * @author Saad Badr
 * @copyright 2025 SawatzkiMühlenbruch GmbH
 */

/* ============================================
   Outer Container (Main Page Wrapper)
   ============================================ */

.outer {
    width: 100%;
    margin: 0 auto;
    background-color: var(--color-quaternary);
    overflow: hidden;
}

/* ============================================
   Content Container
   ============================================ */

.content {
    min-height: 10vh;
}

/* Add top margin on mobile when header is absolute */
@media screen and (max-width: 1270px) {
    .content {
        margin-top: var(--header-height);
    }
}

@media (max-width: 540px) {
    .content {
        margin-top: var(--header-height-mobile);
    }
}

/* ============================================
   Utility Classes
   ============================================ */

/* Clickable cursor */
.clickable {
    cursor: pointer;
}

/* Headline alignment */
.ce-headline-right {
    text-align: right;
}

/* ============================================
   Image Handling
   ============================================ */

.ce-image figure.image {
    margin: 0;
    line-height: 0;
}

.ce-image figure.image img {
    max-width: 100%;
    height: auto;
}

/* Text with image (left aligned, inline) */
.ce-textpic.ce-left.ce-intext {
    display: flex;
    margin-bottom: var(--spacing-sm);
}

.ce-textpic.ce-left.ce-intext .ce-gallery,
.ce-textpic.ce-left.ce-intext .ce-bodytext {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 0;
    width: max-content;
}

.ce-textpic.ce-left.ce-intext .ce-gallery p:first-child,
.ce-textpic.ce-left.ce-intext .ce-bodytext p:first-child {
    margin-top: 6px;
}

.ce-textpic.ce-left.ce-intext .ce-gallery p:last-child,
.ce-textpic.ce-left.ce-intext .ce-bodytext p:last-child {
    margin-bottom: 6px;
}

/* ============================================
   View Animations (Scroll Animations)
   ============================================ */

.content-inner > div {
    transition: padding-top 0.8s;
}

.content-inner > div.notInView {
    padding-top: var(--spacing-xl);
}

.content-inner > div.inView {
    padding-top: 0;
}

/* Fade-in animation for grid items */
.content-inner > div.viewAnimation .list-leasers-default .leaser-outer,
.content-inner > div.viewAnimation .news-list-item {
    opacity: 0;
    transition-delay: calc(0.8s + var(--item-index) * 0.4s);
    transition-duration: 1.2s;
    transition-property: opacity;
}

.content-inner > div.notInView .list-leasers-default .leaser-outer,
.content-inner > div.notInView .news-list-item {
    opacity: 0;
}

.content-inner > div.inView .list-leasers-default .leaser-outer,
.content-inner > div.inView .news-list-item {
    opacity: 1;
}

/* Slide-in animation for two-column layouts */
.content-inner > div.container-columns-outer.viewAnimation .container-two-columns .second-column {
    position: relative;
    transition-delay: 0.4s;
    transition-duration: 0.4s;
    transition-property: left;
}

.content-inner > div.container-columns-outer.notInView .container-two-columns .second-column {
    left: 1500px;
}

.content-inner > div.container-columns-outer.inView .container-two-columns .second-column {
    left: 0;
}