/**
 * Layout Systems - Reusable Layout Components
 * 
 * Global layout patterns used across multiple widgets
 * 
 * @package Kurpfalz_Theme
 * @author Saad Badr
 * @copyright 2025 SawatzkiMühlenbruch GmbH
 */

/* ============================================
   Two-Column Layout System (50/50 Split)
   Used by: Shop Detail, Post Detail, etc.
   ============================================ */

.layout-two-column {
    overflow: hidden;
    width: 100%;
}

.layout-two-column__container {
    max-width: var(--max-width-content);
    margin-left: auto;
    margin-right: auto;
}

.layout-two-column__content {
    display: flex;
    margin-left: var(--margin-horizontal);
    margin-right: var(--margin-horizontal);
    margin-top: var(--spacing-lg); /* Abstand nach oben */
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

/* 50/50 Split */
.layout-two-column__main {
    flex: 0 0 calc(50% - (var(--spacing-lg) / 2));
}

.layout-two-column__aside {
    flex: 0 0 calc(50% - (var(--spacing-lg) / 2));
}

/* Aside with background wrapper */
.layout-two-column__aside-background {
    overflow: hidden;
    border-bottom-right-radius: var(--border-radius-md);
    height: 100%;
}

.layout-two-column__aside-content {
    margin: 0; /* No margins - image should be full width in aside */
}

/* Aside background color modifiers */
.layout-two-column--aside-bg-primary .layout-two-column__aside-background {
    background-color: var(--color-primary);
    --text-color: var(--color-white);
    --link-color: var(--color-white);
    --link-color-hover: var(--color-white);
}

.layout-two-column--aside-bg-secondary .layout-two-column__aside-background {
    background-color: var(--color-secondary);
    --text-color: var(--color-primary);
    --link-color: var(--color-primary);
    --link-color-hover: var(--color-primary);
}

.layout-two-column--aside-bg-tertiary .layout-two-column__aside-background {
    background-color: var(--color-tertiary);
    --text-color: var(--color-primary);
    --link-color: var(--color-primary);
    --link-color-hover: var(--color-primary);
}

.layout-two-column--aside-bg-quaternary .layout-two-column__aside-background {
    background-color: var(--color-quaternary);
    --text-color: var(--color-primary);
    --link-color: var(--color-primary);
    --link-color-hover: var(--color-primary);
}

/* Responsive: Stack columns on mobile */
@media screen and (max-width: 750px) {
    .layout-two-column__content {
        flex-direction: column;
        gap: 32px;
        margin-left: 0;
        margin-right: 0;
    }
    
    .layout-two-column__main {
        margin-left: var(--margin-horizontal);
        margin-right: var(--margin-horizontal);
    }
    
    .layout-two-column__aside {
        width: auto;
        min-width: auto;
        order: -1; /* Media column first on mobile */
    }
    
    .layout-two-column__aside-content {
        margin-left: var(--margin-horizontal);
        margin-right: var(--margin-horizontal);
    }
}

@media (max-width: 540px) {
    .layout-two-column__main {
        margin-left: var(--spacing-sm);
        margin-right: var(--spacing-sm);
    }
    
    .layout-two-column__aside-content {
        margin-left: var(--spacing-sm);
        margin-right: var(--spacing-sm);
    }
}

/* ============================================
   Content Header System
   Used by: Post Detail, Shop Detail, etc.
   ============================================ */

.content-header {
    overflow: hidden;
    width: 100%;
}

.content-header__container {
    max-width: var(--max-width-content);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--margin-horizontal);
    padding-right: var(--margin-horizontal);
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
}

.content-header__title {
    font-weight: var(--font-weight-light);
    text-transform: uppercase;
    font-size: var(--font-size-h1);
    color: var(--text-color);
    margin: 0;
}

/* Header background color modifiers */
.content-header--bg-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    --text-color: var(--color-white);
    --link-color: var(--color-white);
    --link-color-hover: var(--color-white);
}

.content-header--bg-secondary {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    --text-color: var(--color-primary);
    --link-color: var(--color-primary);
    --link-color-hover: var(--color-primary);
}

.content-header--bg-tertiary {
    background-color: var(--color-tertiary);
    color: var(--color-primary);
    --text-color: var(--color-primary);
    --link-color: var(--color-primary);
    --link-color-hover: var(--color-primary);
}

.content-header--bg-quaternary {
    background-color: var(--color-quaternary);
    color: var(--color-primary);
    --text-color: var(--color-primary);
    --link-color: var(--color-primary);
    --link-color-hover: var(--color-primary);
}

/* Responsive header */
@media screen and (max-width: 750px) {
    .content-header__title {
        font-size: 1.8rem;
    }
}

@media (max-width: 540px) {
    .content-header__container {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    
    .content-header__title {
        font-size: 1.6rem;
    }
}