/*
========================================
TEOG LAYOUT SYSTEM
========================================

Gemeinsames Designsystem für:

- teog_post
- teog_rg
- alle zukünftigen TEOG Blocks

Struktur:

1. Design Tokens
2. Container
3. Header Layout
4. Header Content
5. Meta Information
6. Content Area
7. Gutenberg Blocks
8. Block Wrapper System
9. Block Layout System
10. Map Block
11. List/Grid System
12. Responsive

*/



/* ======================================
1. DESIGN TOKENS
====================================== */

:root {

    /* COLORS */

    --teog-color-text: #222;
    --teog-color-muted: #555;
    --teog-color-border: #e5e5e5;
    --teog-color-background: #ffffff;



    /* TYPOGRAPHY */

    --teog-font-title: 2.2rem;
    --teog-font-section: 1.6rem;
    --teog-font-meta: 0.85rem;



    /* SPACING */

    --teog-space-xs: 6px;
    --teog-space-sm: 12px;
    --teog-space-md: 20px;
    --teog-space-lg: 40px;
    --teog-space-xl: 60px;



    /* LAYOUT */

    --teog-container-width: 1200px;
    --teog-content-width: 720px;
    --teog-sidebar-width: 320px;



    /* RADIUS */

    --teog-radius: 6px;

}





/* ======================================
2. CONTAINER
====================================== */

.teog-container {

    max-width: var(--teog-container-width);
    margin: 0 auto;

    padding:
        var(--teog-space-lg)
        var(--teog-space-md);

}





/* ======================================
3. HEADER LAYOUT
====================================== */

.teog-header {

    margin-bottom: var(--teog-space-lg);

}

.teog-header-grid {

    display: grid;

    grid-template-columns:
        1fr
        var(--teog-sidebar-width);

    gap: var(--teog-space-lg);

}





/* ======================================
4. HEADER CONTENT
====================================== */

.teog-header-main {

    max-width: var(--teog-content-width);

}

.teog-title {

    font-size: var(--teog-font-title);
    line-height: 1.2;

    margin-top: 0;
    margin-bottom: var(--teog-space-md);

}

.teog-subtitle {

    font-size: 1.1rem;
    color: var(--teog-color-muted);

    margin-bottom: var(--teog-space-md);

}

.teog-text-block {

    line-height: 1.6;

}





/* ======================================
5. HEADER IMAGE
====================================== */

.teog-header-image img {

    width: 100%;
    height: auto;

    border-radius: var(--teog-radius);

}





/* ======================================
6. META INFORMATION
====================================== */

.teog-header-meta {

    margin-top: var(--teog-space-md);

    padding-top: var(--teog-space-md);

    border-top: 1px solid var(--teog-color-border);

}

.teog-meta-item {

    margin-bottom: var(--teog-space-sm);

}

.teog-meta-item strong {

    display: block;

    font-size: var(--teog-font-meta);

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--teog-color-muted);

    margin-bottom: var(--teog-space-xs);

}

.teog-meta-item p {

    margin: 0;

    line-height: 1.5;

}





/* ======================================
7. CONTENT AREA
====================================== */

.teog-content {

    max-width: var(--teog-content-width);

}

.teog-content p {

    line-height: 1.7;

}

.teog-content ul,
.teog-content ol {

    margin-left: 20px;

}





/* ======================================
8. GUTENBERG BLOCK SPACING
====================================== */

.teog-content .wp-block-image,
.teog-content .wp-block-gallery,
.teog-content .wp-block-quote {

    margin:
        var(--teog-space-lg)
        0;

}

.teog-content .wp-block-heading {

    margin-top: var(--teog-space-lg);

}





/* ======================================
9. AUTOMATIC BLOCK WRAPPERS
====================================== */

/* WordPress generiert automatisch:

wp-block-teog-rg-header
wp-block-teog-project-map
wp-block-teog-project-posts

*/

[class^="wp-block-teog-"] {

    margin-top: var(--teog-space-xl);

}

[class^="wp-block-teog-"]:first-child {

    margin-top: 0;

}





/* ======================================
10. BLOCK LAYOUT SYSTEM
====================================== */

.teog-section {

    margin-top: var(--teog-space-xl);

}

.teog-section-title {

    font-size: var(--teog-font-section);

    margin-bottom: var(--teog-space-md);

}

.teog-grid {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: var(--teog-space-lg);

}





/* ======================================
11. LIST / CARD BLOCKS
====================================== */

.teog-list {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: var(--teog-space-lg);

}

.teog-list-item h3 {

    margin-top: 0;

    font-size: 1.2rem;

}

.teog-list-item p {

    margin-bottom: 0;

}





/* ======================================
12. MAP BLOCK
====================================== */

.teog-map {

    height: 500px;

    border-radius: var(--teog-radius);

    overflow: hidden;

}





/* ======================================
13. RESPONSIVE
====================================== */

@media (max-width: 1000px) {

    .teog-header-grid {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 800px) {

    .teog-list {

        grid-template-columns: 1fr 1fr;

    }

}



@media (max-width: 600px) {

    .teog-title {

        font-size: 1.8rem;

    }

    .teog-list {

        grid-template-columns: 1fr;

    }

    .teog-container {

        padding: var(--teog-space-md);

    }

}


/* Keep the project overview visible below sticky headers after pagination. */
#teog-project-overview {
    scroll-margin-top: 100px;
}

/* Single-project location map */
.teog-project-location-map { width: 100%; height: 420px; min-height: 280px; z-index: 0; }