/* Page-specific overrides for edp (copied from arbeiten_single.css) */

/* 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);
}

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

/* ------------------------------------------------------------
   Carousel (EDP)
   - 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) */
    --carousel-gap: calc(0.7% * var(--scale-factor));
    /* Fallback height; width will follow media's natural aspect */
    --carousel-item-h: calc(775px * var(--scale-factor));
}

.carousel {
    position: absolute;
    top: var(--carousel-top);
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    max-width: none;
    --btn-size: clamp(34px, 1.8vw, 40px);
    --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-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;
    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); }

.carousel-btn--prev { left: var(--gutter-x); top: 50%; transform: translateY(-50%); }
.carousel-btn--next { right: var(--gutter-x); top: 50%; transform: translateY(-50%); }

.carousel-track {
    display: flex;
    gap: 0;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.carousel-track::-webkit-scrollbar { width: 0; height: 0; }
.carousel-track { scrollbar-width: none; -ms-overflow-style: none; }

.carousel-item {
    flex: 0 0 auto;
    width: auto;
    height: var(--carousel-item-h);
    object-fit: contain;
    scroll-snap-align: start;
    user-select: none;
    display: inline-flex;
}

.carousel-item > img,
.carousel-item > video {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
}
.carousel-item { margin-right: var(--carousel-gap); }
.carousel-item:last-child { margin-right: 0; }

.carousel-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.carousel-btn--next::after,
.carousel-btn--prev::after {
    content: '';
    position: absolute;
    width: calc(var(--btn-size) * 0.20);
    height: calc(var(--btn-size) * 0.35);
    top: calc(var(--btn-size) * 0.325);
    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); background-image: url('assets/chevron-right.svg'); }
.carousel-btn--prev::after { left: calc(var(--btn-size) * 0.375); background-image: url('assets/chevron-left.svg'); }

.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; }

/* Meta row */
.arbeiten-meta { top: 100vh; }
.arbeiten-meta .meta-col { height: calc(224px * var(--scale-factor)); }
.arbeiten-meta .back-link { position: absolute; top: 0; left: 0; }
.arbeiten-meta .forward-link { position: absolute; top: 0; right: 0; }
.arbeiten-meta .meta-col--2 p { position: absolute; top: 0; left: 0; margin: 0; }
.arbeiten-info-text { margin: 0; }

@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; 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; }
}

@media (max-width: 600px) {
    body.arbeiten-single { --gutter-x: 20px; min-height: auto; position: static; }
    body.arbeiten-single footer { position: static; left: auto; right: auto; bottom: auto; }
    .name { position: static; height: auto; width: calc(100% - (2 * var(--gutter-x))); margin: 131px 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: 20px 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; margin: 0 0 10px 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: 47px auto 0 auto; margin-bottom: 311px; padding: 0; box-sizing: border-box; }
    .arbeiten-meta .meta-col { height: auto; position: static; width: auto; flex: 0 0 auto; }
    .arbeiten-meta .meta-col--3 { display: none; }
    .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; }
    .arbeiten-meta .meta-col--2 p { position: static; display: block; white-space: normal; overflow: visible; text-overflow: clip; margin: 0; }
}