/* =======================================================================
    7 Summits - LANDING PAGE CSS
======================================================================= */

/* -----------------------------------------------------------------------
    TABLE OF CONTENTS
    1. Header (hlavička)
        1.1 Navigace
        1.2 Úvodní obrázek
        1.3 Content Box (hlavní obsah)
    2. Animace
    3. Responzivita
======================================================================= */

/* 1. Header (hlavička) ------------------------------------------------ */
/* 1.1 Navigace */
header {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%; height: 100vh; height: 100dvh; max-height: 1280px;
    background: var(--color-accent-100);
    overflow: hidden;
}

/* 1.2 Úvodní obrázek */
.image-wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    z-index: 1;
    background-color: var(--color-light-100);
    transform: scale(1.1);
    will-change: transform;
    animation: imageZoomIn 1s ease-out forwards;
}
.image-wrapper img {
    width: 100%; height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
}
.slider-track {
    display: flex;
    height: 100%;
    transform: translateX(0);
    transition: transform .6s ease-in-out;
    will-change: transform;
}
.slider-track img {
    width: 100%; height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}
.image-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 120px 120px rgba(0,0,0,0.28);
    pointer-events: none;
}
.image-wrapper.kategorie::after {
    box-shadow: inset 0 0 120px 120px rgba(0,0,0,0.14);
}
.image-wrapper .image-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.14);
    pointer-events: none;
}

/* 1.3 Content Box (hlavní obsah) -------------------------------------- */
.contentBox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%; height: 100%;
    padding-left: clamp(0.25rem, 0.8vw + 0.25rem, 2.5rem);
    padding-right: clamp(0.25rem, 0.8vw + 0.25rem, 2.5rem);
    padding-bottom: clamp(0.25rem, 0.8vw + 0.25rem, 2.5rem);
    z-index: 2;
}

/* --- Levý panel: sociální sítě, video ovládání, tlačítko --- */
.contentBox .left {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 38px; height: 100%;
    padding-right: 10px;
    opacity: 0;
    transform: translateY(40px);
    will-change: opacity, transform;
    animation: slideUpFadeIn 1s ease forwards;
}
.left .social,
.left .video-controll {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: calc(100% - 120px);
    gap: 12px;
}
.left .social.homepage {
    margin-bottom: 120px;
}
.left .video-controll {
    gap: 8px;
}
.left .social a {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    text-decoration: none;
    background-color: transparent;
    transition: background-color 0.3s, transform 0.3s;
    will-change: background-color, transform;
}
.left .social a:hover {
    background-color: var(--color-light-40-transparent);
    transform: scale(1.1);
}
.left .social a span {
    font-size: 1.25rem;
    color: var(--color-light-100);
    transition: color 0.3s;
}
.left .landingBtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 120px;
    gap: 8px;
    color: var(--color-light-100);
    font-size: 0.75rem;
    letter-spacing: 2px;
    transition: transform 0.3s;
    will-change: transform;
    outline: none; border: none;
    background-color: transparent;
    cursor: pointer;
}
.left .landingBtn:hover {
    transform: translateY(4px);
}
.left .landingBtn .text {
    font-weight: 500;
    writing-mode: sideways-lr;
}
.left .landingBtn .icon {
    font-weight: 200;
    rotate: 180deg;
}
.left .video-controll button {
    position: relative;
    font-size: clamp(1.125rem, 0.8vw + 1.125rem, 1.375rem);
    font-weight: 200;
    color: var(--color-light-100);
    background-color: transparent;
    border: none; outline: none;
    cursor: pointer;
}
.left .video-controll button::before {
    position: absolute;
    content: "";
    display: block;
    width: 2px; height: 0;
    left: calc(clamp(0.25rem, 0.8vw + 0.25rem, 2.5rem) * -1); top: -14px;
    background-color: var(--color-light-100);
    transition: height 0.3s;
    will-change: height;
    animation-delay: 0.3s;
}
.left .video-controll button:hover::before {
    height: calc(100% + 20px);
}
.left .video-controll button .icon {
    font-size: 1.25rem;
    transform: rotate(-90deg);
    transition: transform 0.3s;
    will-change: transform;
}
.left .video-controll button:hover .icon {
    transform: translateX(-4px) rotate(-90deg);
}
.left .video-controll button .text {
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 2px;
    writing-mode: sideways-lr;
    transition: transform 0.3s;
    will-change: transform;
}
.left .video-controll button:hover .text {
    transform: translateX(-4px);
}

/* --- Střední panel: hlavní obsah, expedice --- */
.contentBox .center {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: calc(100% - 96px); height: 100%;
    padding: 0 clamp(0.5rem, 0.8vw + 0.9375rem, 2.5rem);
}
.contentBox .center.homepage {
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-end;
    flex-wrap: wrap;
}
.contentBox .center.homepage a {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: center;
    font-size: clamp(1rem, 1vw + 0.8rem, 1.75rem);
    font-weight: 500;
    letter-spacing: 2px;
    margin-bottom: 80px;
    color: var(--color-light-100);
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    text-shadow: 0 0 12px rgba(0,0,0,0.08);
    transition: all .3s ease-in-out;
    will-change: transform;
}
.contentBox .center.homepage a:hover {
    transform: translateY(-2px);
}
.contentBox .center.homepage .side-divider {
    position: absolute;
    width: 120px; height: 1px;
    bottom: calc(80px + 12px);
    background-color: var(--color-light-100);
    transition: width 0.3s ease-in-out;
    will-change: width;
}
.contentBox .center.homepage .side-divider:first-child { left: -70px; }
.contentBox .center.homepage .side-divider:last-child { right: -70px; }
.contentBox .center.homepage:has(a:nth-of-type(1):hover)  .side-divider:first-child { width: 160px; }
.contentBox .center.homepage:has(a:nth-of-type(2):hover) .side-divider { width: 160px; }
.contentBox .center.homepage:has(a:nth-of-type(3):hover)  .side-divider:last-child { width: 160px; }
.contentBox .center.expedice {
    justify-content: flex-end;
    align-items: center;
}
.center .rubrika {
    font-size: clamp(1.125rem, 0.8vw + 1.125rem, 1.375rem);
    font-weight: 500;
    color: var(--color-light-75);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: clamp(1.5rem, 0.8vw + 0.9375rem, 2.5rem);
    opacity: 0;
    transform: translateY(40px);
    will-change: opacity, transform;
}
.center .rubrika.active {
    animation: contentFadeIn 1s ease forwards;
}
.center .expedition-content {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%; max-width: 580px;
    height: auto;
    color: var(--color-light-100);
    opacity: 0;
    transform: translateY(40px);
    visibility: hidden;
    transition: opacity 1s ease, transform 1s ease;
    will-change: opacity, transform, visibility;
}
.center.expedice .expedition-content {
    max-width: none;
}
.center .expedition-content.active {
    position: relative;
    animation: contentFadeIn 1s ease forwards;
    visibility: visible;
}
.center.expedice .expedition-content {
    align-items: center;
    justify-content: flex-end;
}
.center .expedition-content .expeditionTitle,
.center .expedition-content .expedition-name {
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}
.center .expedition-content .expeditionTitle {
    width: auto;
    font-size: clamp(2.8rem, 1.5vw + 2.4rem, 5.75rem);
    text-align: center;
    text-shadow: 0 0 12px rgba(0,0,0,0.05);
}
.center .expedition-content .expedition-name {
    font-size: clamp(2rem, 1.3vw + 1.5rem, 3.875rem);
}
.center .expedition-content .expedition-route {
    font-size: clamp(1rem, 0.7vw + 0.75rem, 1.625rem);
    font-weight: 500;
    text-transform: lowercase;
}
.center .expedition-content .expeditionDetails {
    font-size: clamp(1rem, 0.75vw + 0.8rem, 1.875rem);
    font-weight: 500;
    text-align: center;
    text-shadow: 0 0 12px rgba(0,0,0,0.05);
    text-transform: lowercase;
}
.center .expedition-content .expedition-description {
    font-size: clamp(0.875rem, 0.5vw + 0.75rem, 1rem);
    font-weight: 400;
    text-align: justify;
    margin: clamp(0.75rem, 0.4vw + 0.6rem, 1.25rem) 0 clamp(1.25rem, 0.8vw + 0.8rem, 2.5rem) 0;
    text-shadow: 0 0 12px rgba(0,0,0,0.05);
}
.center .expedition-content button.expedition-details {
    width: min-content;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border: 1px solid var(--color-light-40);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
    will-change: background, color;
}
.center .expedition-content button.expedition-details:hover {
    background: rgba(255, 255, 255, 0.25);
}
.center .expedition-content button.expedition-details a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: clamp(0.375rem, 0.3vw + 0.3rem, 0.5rem) clamp(0.875rem, 0.4vw + 0.7rem, 1.125rem);
    font-size: clamp(0.875rem, 0.5vw + 0.75rem, 1rem);
    font-weight: 500;
    color: var(--color-light-100);
    border: 0;
    text-decoration: none;
}
.center .expedition-content button.expedition-details span {
    font-weight: 200;
    rotate: 90deg;
}
.center .expeditionLocationBox {
    margin-top: clamp(5.625rem, 3vw + 4.5rem, 11.25rem);
}
.center .expeditionLocationBox p {
    font-size: clamp(1rem, 0.5vw + 0.75rem, 1.125rem);
    font-weight: 400;
    color: var(--color-light-100);
    opacity: 0;
    transform: translateY(40px);
    will-change: opacity, transform;
    animation: slideUpFadeIn 1s ease forwards;
}

/* --- Pravý panel: vizuální ovládání, slider --- */
.contentBox .right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    width: 48px; height: 100%;
    opacity: 0;
    transform: translateY(40px);
    will-change: opacity, transform;
    animation: slideUpFadeIn 1s ease forwards;
}
.right .visual-controll {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto; height: calc(100% - 120px);
}
.right .visual-controll .controll-track {
    position: relative;
    width: 1px;
    height: clamp(10rem, 10vh + 3rem, 17.5rem);
    background-color: var(--color-neutral-100);
}
.right .visual-controll .controll-thumb {
    position: absolute;
    top: 0;
    right: -1px;
    width: 3px;
    background-color: var(--color-light-100);
    transition: top 0.6s ease;
    will-change: top;
}
.right .manual-controll {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: auto; height: 120px;
}
.right .manual-controll .up {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.right .manual-controll .up button {
    border: none; outline: none;
    background-color: transparent;
    cursor: pointer;
    transition: transform 0.3s;
    will-change: transform;
}
.right .manual-controll .up button:nth-child(1) { transform: translateX(-2px); }
.right .manual-controll .up button:nth-child(2) { transform: translateX(0); }
.right .manual-controll .up button:nth-child(1):hover { transform: translateX(-4px); }
.right .manual-controll .up button:nth-child(2):hover { transform: translateX(2px); }
.right .manual-controll .up button span {
    font-size: clamp(1.125rem, 0.8vw + 0.9rem, 1.5rem);
    color: var(--color-light-100);
}
.right .manual-controll .bottom {
    display: flex;
    justify-content: center;
    align-items: center;
}
.right .manual-controll .bottom .slider-position {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.875rem, 0.5vw + 0.75rem, 1rem);
    color: var(--color-light-100);
    font-weight: 400;
}
.right .manual-controll .bottom .slider-position .max-slides {
    font-size: clamp(0.625rem, 0.3vw + 0.55rem, 0.75rem);
    color: var(--color-neutral-90);
    font-weight: 300;
}

/* 2. Animace ---------------------------------------------------------- */
@keyframes contentFadeIn {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 3. Responzivita ----------------------------------------------------- */
@media screen and (max-width: 1280px) {
    .contentBox .center.homepage .side-divider {
        width: 100px;
        bottom: calc(80px + 12px);
    }
    .contentBox .center.homepage .side-divider:first-child { left: -90px; }
    .contentBox .center.homepage .side-divider:last-child { right: -90px; }
    .contentBox .center.homepage:has(a:nth-of-type(1):hover)  .side-divider:first-child { width: 130px; }
    .contentBox .center.homepage:has(a:nth-of-type(2):hover) .side-divider { width: 130px; }
    .contentBox .center.homepage:has(a:nth-of-type(3):hover)  .side-divider:last-child { width: 130px; }
}
@media screen and (max-width: 880px) {
    .contentBox .center.homepage {
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 60px;
        gap: 38px;
    }
    .contentBox .center.homepage a { font-size: 24px; margin-bottom: 0; }
    .contentBox .center.homepage .side-divider { bottom: calc(60px + 12px); }
}
@media screen and (max-width: 780px) {
    .contentBox .center {
        justify-content: flex-end;
        padding-bottom: clamp(6.25rem, 2vw + 5.5rem, 10rem);
    }
    .contentBox .center.homepage { padding-bottom: 0; }
}
@media screen and (max-width: 580px) {
    .contentBox .center.homepage { gap: 28px; }
    .contentBox .center.homepage a { font-size: 20px; }
    .contentBox .center.homepage .side-divider { bottom: calc(60px + 2px); }
}
@media screen and (max-width: 568px) {
    .contentBox .left { padding-right: 0; }
    .contentBox .center {
        width: calc(100% - 76px);
        padding: 0 4px clamp(6.25rem, 2vw + 5.5rem, 10rem) 4px;
    }
    .contentBox .right { width: 38px; }
}
@media screen and (max-width: 420px) {
    .center .expedition-content .expeditionTitle{
        font-size: 2.375rem;
    }
}
@media screen and (max-width: 380px) {
    .center .expedition-content .expeditionTitle{
        font-size: 2rem;
    }
}