/* About page layout using meta-col approach (mirrors arbeiten_single) */

/* Override body height for this page */
:root {
    --page-extra: calc(265px * var(--scale-factor));
}

body {
    height: auto;
    /* Align page height/scrolling with Impressum */
    min-height: calc(100vh + var(--page-extra));
}

/* Four-column meta row */
.about-meta {
    /* vertical position only; layout comes from .meta-row */
    top: var(--page-top-anchor);
    --about-img-scale: 1.5;
    --about-img-width: calc(var(--col-w-responsive) * 0.609 * var(--about-img-scale));
    --about-img-height: calc(var(--about-img-width) * (2158 / 1440));
}

.about-meta .meta-col {
    height: var(--about-img-height);
    min-width: 0; /* allow even shrink like footer */
}

/* Col 1: about text, top-left */
.about-meta .meta-col--1 .about-text {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
}

/* Col 2: image, top-right */
.about-meta .meta-col--2 .about-image {
    position: absolute;
    top: 0;
    right: 0;
    /* Keep a constant proportion of the column width so the left gap
       scales with the column (≈61% of its width). */
    width: var(--about-img-width);
    /* Maintain current portrait aspect ratio (1440:2158) */
    aspect-ratio: 1440 / 2158;
    height: auto;
    object-fit: cover;
}

/* Col 4: kleiner-lebenslauf centered */
.about-meta .meta-col--4 {
    top: 0;
    display: flex;
}

.kleiner-lebenslauf {
    height: calc(212px * var(--scale-factor));
    width: calc(445px * var(--scale-factor));
    /* Align first line cap-height to column top while preserving 8px inner gap */
    transform: translateY(calc(-8px * var(--scale-factor)));
}

.kleiner-lebenslauf li {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-white);
    margin-bottom: calc(40px * var(--scale-factor));
}

.lebenslauf-name {
    color: var(--color-white);
    display: flex;
    justify-content: space-between;
}

/* Remove default paragraph margins inside the CV list */
.lebenslauf-name p {
    margin: 0;
}

.lebenslauf-jahr {
    color: var(--color-grey);
}

/* Responsive stacking removed for desktop-first focus */

/* Footer position for this page */
footer {
    top: auto;
    bottom: 0;
}

/* Tablet portrait (601px - 1023px)
   - Reflow content like mobile but keep 40px gutters
   - Use flex column body so footer stays pinned to bottom */
@media (min-width: 601px) and (max-width: 1023px) {
    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    #menu-container,
    #footer-container {
        flex-shrink: 0;
    }

    #footer-container {
        margin-top: auto;
    }

    .about-meta {
        position: static;
        display: block;
        padding: 0 var(--gutter-x);
        margin: 131px 0 80px 0;
    }

    .about-meta .meta-col {
        display: block;
        width: 100%;
        height: auto;
    }

    .about-meta .meta-col--3 {
        display: none;
    }

    .about-meta .meta-col--1 .about-text {
        position: static;
        width: auto;
        margin: 0;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .about-meta .meta-col--2 {
        margin-top: 40px;
    }

    .about-meta .meta-col--2 .about-image {
        position: static;
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1440 / 2158;
        object-fit: cover;
    }

    .about-meta .meta-col--4 {
        position: static;
        margin-top: 40px;
        padding: 0;
    }

    .kleiner-lebenslauf {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        transform: none;
    }
}

/* Mobile: precise layout per Figma */
@media (max-width: 600px) {
    /* Page height and footer anchoring */
    body {
        min-height: 1500px;
        position: relative;
    }
    footer {
        position: absolute;
        left: 0; right: 0; bottom: 0;
    }

    /* About layout
       - about text at y=131px, height 165px
       - image 40px below text, full-bleed 375x476
       - kleiner-lebenslauf 40px below image, width 335 (20px gutters), height 149 */
    .about-meta {
        position: absolute;
        top: calc(131px);
        left: 0;
        right: 0;
        padding: 0; /* explicit per-element gutters */
        display: block;
    }
    .about-meta .meta-col { display: block; width: 100%; height: auto; }
    .about-meta .meta-col--3 { display: none; }

    /* About text block */
    .about-meta .meta-col--1 .about-text {
        position: absolute;
        top: 0;
        left: var(--gutter-x);
        right: var(--gutter-x);
        width: auto;
        height: 165px;
        /* Override global mobile truncation to allow wrapping */
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        margin: 0;
    }

    /* About image under text with 20px gutters, adaptive size and fixed gaps */
    .about-meta {
        /* Compute image width (full viewport minus gutters) and height by aspect ratio (1440:2158) */
        --about-img-w: calc(100vw - (2 * var(--gutter-x)));
        --about-img-h: calc(var(--about-img-w) * (2158 / 1440));
        --cv-base-top: calc(165px + 40px + var(--about-img-h) + 40px);
        --cv-target-top: calc(100vh - 131px);
    }
    .about-meta .meta-col--2 .about-image {
        position: absolute;
        top: calc(165px + 40px); /* 40px below the about text block */
        left: var(--gutter-x);
        width: var(--about-img-w);
        height: var(--about-img-h);
        object-fit: cover;
    }

    /* CV block under image */
    .about-meta .meta-col--4 {
        position: absolute; /* allow left/right to define both edges */
        top: max(var(--cv-base-top), var(--cv-target-top));
        left: 0;
        right: 0;
        width: auto;
        height: 165px;
        padding: 0 var(--gutter-x); /* symmetric 20px gutters on mobile */
        box-sizing: border-box;
    }

    .kleiner-lebenslauf {
        box-sizing: border-box;
        width: 100%;           /* fluid: fill container minus gutters */
        max-width: 100%;       /* prevent overflow on very small viewports */
        margin-inline: auto;   /* stays centered if clamped */
        transform: none;       /* neutralize desktop baseline tweak */
        overflow: hidden;
    }
}