/* Page-specific overrides for arbeiten_single */

/* Scoped layout variables to keep a constant 473px footer gap
   while scaling the carousel proportionally with viewport height. */
body.arbeiten-single {
    /* Anchors */
    /* Push carousel down by the same delta as .name (56px) */
    --carousel-top: calc(366px * var(--scale-factor));
    --carousel-footer-gap: calc(473px * var(--scale-factor));
    --arbeiten-meta-gap: calc(40px * var(--scale-factor));

    /* Offset so that at 1920x1080 the carousel height equals 775px
       and the footer gap equals 473px. 310 + 775 + 473 + 305 - 1080 = 783 */
    --page-offset: calc(783px * var(--scale-factor));

    /* Effective page height and carousel size */
    --page-min-h: calc(100vh + var(--page-offset));
    /* Size carousel so its bottom sits 40px above the viewport bottom */
    --carousel-item-h: calc(100vh - var(--carousel-top) - var(--arbeiten-meta-gap));

    height: auto;
    min-height: var(--page-min-h);
}

.name{
    width: calc(445px * var(--scale-factor));
    /* Match single-line text block height */
    height: var(--font-size-base);
    left: calc(40px * var(--scale-factor));
    position: absolute;
    top: calc(305px * var(--scale-factor));
    font-size: var(--font-size-base);
    font-weight: 300;
    font-style: normal;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-none);
}

/* Title wrapper should occupy the same vertical space as the text block
   so subsequent sections can be positioned relative to it if needed. */
.title {
    /* Reserve only the visual text block height (one line ~ 14px) */
    height: var(--font-size-base);
}

/* Mobile name/title adjustments removed for desktop-first focus */

/* Override footer position for shorter page */
footer {
    top: auto;
    bottom: 0;
}

/* ------------------------------------------------------------
   Carousel (Arbeiten Single)
   - Top pinned via --carousel-top
   - Height scales with viewport height to maintain 473px gap to footer
   - Aspect ratio preserved via width = height * 16/9
   ------------------------------------------------------------ */

:root {
    /* Base carousel parameters (scale-aware)
       Gap scales with smaller viewport dimension, clamped 14–20px */
    --carousel-gap: calc(0.7% * var(--scale-factor));
    /* Fallback height; width follows media's intrinsic aspect */
    --carousel-item-h: calc(775px * var(--scale-factor));
}

.carousel {
    position: absolute;
    top: var(--carousel-top);
    /* Full-bleed: ignore outer gutters and span the viewport */
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    max-width: none;
    /* contain removed to avoid large layer allocation */
    /* Responsive control size for nav buttons */
    --btn-size: clamp(34px, 1.8vw, 40px);
    /* Button blur + colors */
    --btn-blur: 5px;
    --btn-circle-bg: rgba(138, 138, 138, 0.33);
    --btn-circle-bg-hover: rgba(162, 162, 162, 0.33);
}

@media (prefers-color-scheme: light) {
    .carousel {
        --btn-circle-bg: rgba(161, 161, 161, 0.33);
        --btn-circle-bg-hover: rgba(188, 188, 188, 0.33);
    }
}

/* Carousel navigation buttons */
.carousel-btn {
    position: absolute;
    width: var(--btn-size);
    height: var(--btn-size);
    padding: 0;
    margin: 0;
    border: 0;
    background: var(--btn-circle-bg);
    cursor: pointer;
    z-index: 2;
    /* Anchor pseudo-element chevron */
    border-radius: 50%;
    -webkit-backdrop-filter: blur(var(--btn-blur));
    backdrop-filter: blur(var(--btn-blur));
    transition: background-color 0.3s cubic-bezier(0.2,0,0,1);
}

.carousel-btn:hover { background-color: var(--btn-circle-bg-hover); }

/* Left button at left gutter 40px; vertically 368px from carousel top */
.carousel-btn--prev {
    left: var(--gutter-x);
    top: 50%;
    transform: translateY(-50%);
}

/* Right button: right gutter 40px; vertically centered */
.carousel-btn--next {
    right: var(--gutter-x);
    top: 50%;
    transform: translateY(-50%);
    /* No transition on background-image; it is non-interpolable */
}

.carousel-track {
    display: flex;
    /* Use margins on items for wider browser support */
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* smooth momentum on iOS/macOS */
}

/* Hide horizontal scrollbar (only for carousel track) */
.carousel-track::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.carousel-track {
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;        /* IE/old Edge */
}

.carousel-item {
    flex: 0 0 auto; /* width varies by intrinsic aspect */
    width: auto;
    height: var(--carousel-item-h);
    scroll-snap-align: start; /* snap each image to the left edge */
    user-select: none;
    display: inline-flex;
}

.carousel-item > img,
.carousel-item > video {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
}

/* Spacing via margins to ensure consistent behavior across browsers */
.carousel-item { margin-right: var(--carousel-gap); }
.carousel-item:last-child { margin-right: 0; }

/* Keyboard accessibility: make focus visible without changing hover behavior */
.carousel-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Pseudo-element chevrons with precise placement; responsive to --btn-size */
.carousel-btn--next::after,
.carousel-btn--prev::after {
    content: '';
    position: absolute;
    width: calc(var(--btn-size) * 0.20);   /* 8/40 of button width */
    height: calc(var(--btn-size) * 0.35);  /* 14/40 of button height */
    top: calc(var(--btn-size) * 0.325);    /* (40-14)/2 = 13 */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    pointer-events: none;
}

.carousel-btn--next::after {
    right: calc(var(--btn-size) * 0.375);  /* right gap 15/40 */
    background-image: url('assets/chevron-right.svg');
}

.carousel-btn--prev::after {
    left: calc(var(--btn-size) * 0.375);   /* left gap 15/40 */
    background-image: url('assets/chevron-left.svg');
}

/* Preload chevrons to prevent first-hover flicker/jump */
.carousel::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
    background-image:
      url('assets/chevron-left.svg'),
      url('assets/chevron-right.svg');
    background-repeat: no-repeat;
}

/* Mobile carousel adjustments removed */

/* Back link below the carousel, aligned with left content gutter */
.back-link {
    position: absolute;
    /* Positioned by local containers; keep default here */
    top: auto;
    left: calc(40px * var(--scale-factor));
}

/* Mobile back-link adjustments removed */

/* Meta row under carousel, mirrors footer layout (4 columns) */
.arbeiten-meta {
    /* Make the top edge of the meta row kiss the viewport bottom */
    top: 100vh;
}

.arbeiten-meta .meta-col {
    height: calc(224px * var(--scale-factor));
}

/* Back link inside first column, top-left */
.arbeiten-meta .back-link {
    position: absolute;
    top: 0;
    left: 0;
}

.arbeiten-meta .forward-link {
    position: absolute;
    top: 0;
    right: 0;
}

/* Info text inside second column, match footer-text positioning */
.arbeiten-meta .meta-col--2 p {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
}

.arbeiten-info-text {
    margin: 0;
}

/* Mobile arbeiten-meta layout removed */

@media (min-width: 601px) and (max-width: 1023px) {
    body.arbeiten-single {
        --gutter-x: clamp(24px, 5vw, 40px);
        min-height: auto;
        position: static;
    }
    body.arbeiten-single footer {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        margin: 0;
    }
    .name {
        position: static;
        height: auto;
        width: calc(100% - (2 * var(--gutter-x)));
        margin: clamp(164px, 16vh, 220px) auto 0 auto;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    .carousel {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        width: calc(100% - (2 * var(--gutter-x)));
        margin: clamp(32px, 6vh, 48px) auto 0 auto;
    }
    .carousel-track {
        display: block;
        overflow: visible;
        -webkit-overflow-scrolling: auto;
        touch-action: pan-y;
    }
    .carousel-item {
        display: block;
        width: 100%;
        height: auto;
        /* keep original aspect ratio */
        margin: 0 0 clamp(16px, 3vh, 24px) 0;
        flex: none;
        object-fit: contain;
    }
    .carousel-item:last-child { margin-bottom: 0; }
    .carousel-btn { display: none; }
    .arbeiten-meta {
        position: static;
        top: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        width: calc(100% - (2 * var(--gutter-x)));
        margin: clamp(64px, 7vh, 96px) auto 0 auto;
        padding: 0;
        box-sizing: border-box;
        gap: clamp(24px, 4vh, 32px);
    }
    .arbeiten-meta .meta-col {
        position: static;
        height: auto;
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
    }
    .arbeiten-meta .meta-col--2 {
        order: 1;
        flex: 1 1 100%;
        width: 100%;
        margin: 0 0 clamp(80px, 8vh, 112px) 0;
    }
    .arbeiten-meta .meta-col--1,
    .arbeiten-meta .meta-col--4 {
        order: 2;
    }
    .arbeiten-meta .meta-col--4 {
        margin-left: auto;
    }
    .arbeiten-meta .meta-col--3 {
        display: none;
    }
    .arbeiten-meta .back-link,
    .arbeiten-meta .forward-link {
        position: static;
    }
    .arbeiten-meta .meta-col--2 p {
        position: static;
        display: block;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        margin: 0;
    }
}

/* ------------------------------------------------------------
   Mobile (<=600px)
   - Replace carousel with vertical media stack (10px gap)
   - Keep meta row single-line below media
   ------------------------------------------------------------ */
@media (max-width: 600px) {
    /* Use 20px gutters on this page */
    body.arbeiten-single { --gutter-x: 20px; }
    /* Page height and footer anchoring */
    body.arbeiten-single {
        /* Let content define height; avoid footer overlap */
        min-height: auto;
        position: static;
    }
    body.arbeiten-single footer {
        /* Flow footer after content on mobile */
        position: static;
        left: auto; right: auto; bottom: auto;
    }

    /* Title: two-line at y=131px, 20px gutters */
    .name {
        position: static;
        height: auto;              /* allow two lines */
        width: calc(100% - (2 * var(--gutter-x)));
        margin: 131px auto 0 auto; /* place at y=131px */
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* Make media flow vertically; remove absolute positioning math */
    .carousel {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        width: calc(100% - (2 * var(--gutter-x)));  /* match content width */
        margin: 20px auto 0 auto; /* 20px gap from title */
    }
    .carousel-track {
        display: block;
        overflow: visible;
        -webkit-overflow-scrolling: auto;
        touch-action: pan-y;
    }
    .carousel-item {
        display: block;
        width: 100%;
        height: auto;
        /* keep original aspect ratio */
        margin: 0 0 10px 0;
        flex: none;
        object-fit: contain;
    }
    .carousel-item:last-child { margin-bottom: 0; }

    /* Hide nav controls on mobile */
    .carousel-btn { display: none; }

    .arbeiten-meta {
        position: static;
        top: auto;
        display: flex;
        flex-wrap: wrap; /* allow info text to occupy full row */
        justify-content: space-between;
        align-items: flex-start;
        width: calc(100% - (2 * var(--gutter-x)));
        margin: 47px auto 0 auto; /* 47px below last carousel image */
        margin-bottom: 311px; /* uniform gap to footer across mobile widths */
        padding: 0;
        box-sizing: border-box;
    }
    .arbeiten-meta .meta-col { height: auto; position: static; width: auto; flex: 0 0 auto; }
    /* Hide only empty third column */
    .arbeiten-meta .meta-col--3 { display: none; }
    /* Let the info text span the full width on its own row, then 96px gap */
    .arbeiten-meta .meta-col--2 { order: 1; flex: 1 1 100%; width: 100%; margin: 0 0 96px 0; }
    .arbeiten-meta .meta-col--1 { order: 2; }
    .arbeiten-meta .meta-col--4 { order: 2; margin-left: auto; }
    .arbeiten-meta .back-link,
    .arbeiten-meta .forward-link { position: static; }
    /* Ensure info text wraps naturally and is in normal flow */
    .arbeiten-meta .meta-col--2 p {
        position: static;
        display: block;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        margin: 0;
    }
}