/* =======================================================================
    7 Summits - Úvodní stránka CSS
    =======================================================================
    1 Header (hlavička)
        1.1 Navigace
            1.1.1 Responzivita
        1.2 Úvodní obrázek
            1.2.1 Responzivita
        1.3 Content Box (hlavní obsah)
            1.3.1 Responzivita
        1.4 Sociální sítě
            1.4.1 Responzivita
        1.5 Video sekce
            1.5.1 Responzivita
    2. Main (hlavní část)
        2.1 About sekce
            2.1.1 Responzivita
        2.2 Expedice & aktuality
            2.2.1 Responzivita
        2.3 Photo grid
            2.3.1 Responzivita
        2.4 Citát & výčet
            2.4.1 Responzivita
        2.5 O mně & loga
            2.5.1 Responzivita
    3. Animace & efekty
    ======================================================================= */

/* 1.5 Video sekce ----------------------------------------------------- */
.videoBox {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%; height: 100%;
    max-height: 1280px;
    top: 0; left: 0;
    background: var(--video-bg);
    overflow: hidden;
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 1s, visibility 1s;
    will-change: opacity, visibility;
}
.videoBox.videoVisible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}
.videoBox.videoHidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
.videoBox video {
    position: relative;
    width: 45%; height: 100%;
    max-height: 1280px;
    object-fit: cover;
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 1s, opacity 1.5s;
    will-change: transform, opacity;
    -webkit-mask-image: linear-gradient(to right, var(--video-overlay-dark) 40%, var(--video-overlay-transparent));
    mask-image: linear-gradient(to right, var(--video-overlay-dark) 40%, var(--video-overlay-transparent));
}
.videoBox.videoVisible video {
    transform: translateX(0);
    opacity: 0.65;
}
.videoBox .nadpis {
    position: absolute;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    width: 40%;
    margin-bottom: 5%;
    gap: 15px;
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 1s, opacity 1s;
    will-change: transform, opacity;
}
.videoBox.videoVisible .nadpis {
    transform: translateX(0);
    opacity: 1;
    transition: transform 1s 0.3s, opacity 1s 0.3s;
    will-change: transform, opacity;
}
.videoBox .nadpis p {
    font-size: 42px;
    font-weight: 500;
    padding-right: 25px;
    letter-spacing: 12px;
    word-spacing: 4px;
    text-transform: uppercase;
    color: var(--color-light-100);
    white-space: nowrap;
}
.videoBox .nadpis hr {
    width: 15%; height: 3px;
    border: none;
    background: var(--color-light-100);
}






















.intro-section {
    gap: 160px;
    padding: 160px 0;
}
.main-top {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 2rem;
    row-gap: 160px;
    width: 100%; height: auto;
}

/* === ÚVODNÍ BLOK === */
.main-top .intro {
    position: relative;
    display: grid;
    grid-column: 1 / 13;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    row-gap: 1rem;
    padding: 0 clamp(0.75rem, 1vw + 1rem, 2.5rem);
}
.main-top .intro .start {
    grid-column: 2 / 6;
    grid-row: 1;
    align-self: center;
}
.main-top .intro .start h2 {
    font-size: 32px;
    font-weight: 400;
    color: var(--color-primary-75);
    text-transform: uppercase;
}
.main-top .intro .start h2 .quote-mark {
    font-family: "Kaisei Opti", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 42px;
    line-height: 0;
    letter-spacing: -8px;
    margin-right: 8px;
    color: var(--color-primary-50);
}
.main-top .intro .text-left {
    grid-column: 2 / 9;
    grid-row: 2;
    place-items: center;
}
.main-top .intro .text-left .block-text {
    font-size: 17px;
    font-weight: 200;
    line-height: 1;
    color: var(--color-primary-90);
    text-transform: uppercase;
    text-align: justify;
    text-align-last: left;
    max-width: 227px;
}
.main-top .intro .text-right {
    grid-column: 6 / 12;
    grid-row: 1;
    place-items: end;
}
.main-top .intro .text-right .block-text {
    font-size: 17px;
    font-weight: 200;
    line-height: 1;
    color: var(--color-primary-90);
    text-transform: uppercase;
    text-align: justify;
    text-align-last: left;
    max-width: 256px;
}

/* === PLÁNOVANÉ AKCE === */
.plans {
    position: relative;
    display: grid;
    grid-column: 1 / 13;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    padding: 0 clamp(0.75rem, 1vw + 1rem, 2.5rem) 0 0;
}
.plans .plan-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    grid-column: 1 / 13;
    gap: 50px;
}
.plans .plan-content img {
    width: 100%; height: auto;
    max-width: 40%; max-height: 380px;
    object-fit: cover;
}
.plans .plan-content .plan-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    margin-top: 50px;
}
.plans .plan-content .plan-text h3 {
    font-size: 22px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-primary-90);
}
.plans .plan-content .plan-text .planovane-akce-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.plans .plan-content .plan-text .planovane-akce-list a {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-primary-50);
    text-decoration: none;
    transition: transform 0.3s;
    will-change: transform;
}
.plans .plan-content .plan-text .planovane-akce-list a:hover {
    transform: translateX(4px);
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(14, 50px);
    gap: 8px;
    width: 100%; max-width: 100%;
}
.gallery-item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-90);
    background: var(--color-neutral-90);    
    border-radius: 4px;
}
.gallery-item.item-1 { grid-column: 1 / span 4; grid-row: 1 / span 7; }
.gallery-item.item-2 { grid-column: 5 / span 2; grid-row: 1 / span 4; }
.gallery-item.item-3 { grid-column: 7 / span 2; grid-row: 1 / span 7; }
.gallery-item.item-4 { grid-column: 5 / span 2; grid-row: 5 / span 6; }
.gallery-item.item-5 { grid-column: 1 / span 2; grid-row: 8 / span 5; }
.gallery-item.item-6 { grid-column: 3 / span 2; grid-row: 8 / span 5; }
.gallery-item.item-7 { grid-column: 7 / span 2; grid-row: 8 / span 7; }
.gallery-item.item-8 { grid-column: 5 / span 2; grid-row: 11 / span 4; }
.gallery-item.item-9 { grid-column: 1 / span 2; grid-row: 13 / span 2; }
.gallery-item.item-10 { grid-column: 3 / span 1; grid-row: 13 / span 2; }
.gallery-item.item-11 { grid-column: 4 / span 1; grid-row: 13 / span 2; }

.main-bottom {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 160px;
    width: 100%; height: auto;
}
.main-bottom .hybrid-content {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%; height: auto;
    padding: 0 0 0 clamp(0.75rem, 1vw + 1rem, 2.5rem);
}
.main-bottom .hybrid-content .hybrid-text-left {
    width: auto; height: auto;
    margin-top: 50px;
}
.main-bottom .hybrid-content .hybrid-text-left .block-text {
    font-size: 17px;
    font-weight: 200;
    line-height: 1;
    color: var(--color-primary-90);
    text-transform: uppercase;
    text-align: justify;
    text-align-last: left;
    max-width: 339px;
}
.main-bottom .hybrid-content .hybrid-content-right {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 120px;
}
.main-bottom .hybrid-content .hybrid-content-right .block-text {
    font-size: 17px;
    font-weight: 200;
    line-height: 1;
    color: var(--color-primary-90);
    text-transform: uppercase;
    text-align: justify;
    text-align-last: left;
    max-width: 256px;
    margin-bottom: -50px;
}
.main-bottom .hybrid-content .hybrid-content-right img {
    width: 100%; height: auto;
    max-width: 670px; max-height: 420px;
    object-fit: cover;
}
.main-bottom .quote-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%; height: auto;
    padding: 0 calc(clamp(0.75rem, 1vw + 1rem, 2.5rem) + 80px);
    margin-top: 50px;
}
.main-bottom .quote-row p {
    font-size: 32px;
    font-weight: 400;
    color: var(--color-primary-75);
    text-transform: uppercase;
    text-align: end;
    max-width: 810px;
}
.main-bottom .quote-row p .quote-mark {
    font-family: "Kaisei Opti", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 42px;
    line-height: 0;
    letter-spacing: -8px;
    margin-right: 8px;
    color: var(--color-primary-50);
}
.main-bottom .about-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%; height: auto;
    padding: 0 clamp(0.75rem, 1vw + 1rem, 2.5rem);
    gap: 40px;
}
.main-bottom .about-content .about-logos {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}
.main-bottom .about-content .about-logos img {
    width: auto; height: 80px;
}
.main-bottom .about-content p {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-primary-75);
    text-align: justify;
    text-align-last: left;
    max-width: 500px;
}





























/* --- Breakpoint pro 6 sloupců --- */
@media (max-width: 1120px) {
    .gallery-grid {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(16, 50px);
    }
    .gallery-item.item-1 { grid-column: 1 / span 4; grid-row: 1 / span 6; }
    .gallery-item.item-2 { grid-column: 5 / span 2; grid-row: 1 / span 3; }
    .gallery-item.item-3 { grid-column: 5 / span 2; grid-row: 4 / span 6; }
    .gallery-item.item-4 { grid-column: 1 / span 2; grid-row: 7 / span 5; }
    .gallery-item.item-5 { grid-column: 3 / span 2; grid-row: 7 / span 4; }
    .gallery-item.item-6 { grid-column: 5 / span 2; grid-row: 10 / span 4; }
    .gallery-item.item-7 { grid-column: 3 / span 2; grid-row: 11 / span 6; }
    .gallery-item.item-8 { grid-column: 5 / span 2; grid-row: 14 / span 3; }
    .gallery-item.item-9 { grid-column: 1 / span 2; grid-row: 12 / span 3; }
    .gallery-item.item-10 { grid-column: 1 / span 1; grid-row: 15 / span 2; }
    .gallery-item.item-11 { grid-column: 2 / span 1; grid-row: 15 / span 2; }
}

/* --- Breakpoint pro 5 sloupců --- */
@media (max-width: 920px) {
    .gallery-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    .gallery-item.item-1 { grid-column: 1 / span 3; grid-row: 1 / span 5; }
    .gallery-item.item-2 { grid-column: 4 / span 2; grid-row: 1 / span 4; }
    .gallery-item.item-3 { grid-column: 1 / span 2; grid-row: 6 / span 5; }
    .gallery-item.item-4 { grid-column: 4 / span 2; grid-row: 5 / span 4; }
    .gallery-item.item-5 { grid-column: 4 / span 2; grid-row: 9 / span 2; }
    .gallery-item.item-6 { grid-column: 1 / span 2; grid-row: 11 / span 6; }
    .gallery-item.item-7 { grid-column: 3 / span 3; grid-row: 13 / span 4; }
    .gallery-item.item-8 { grid-column: 4 / span 2; grid-row: 11 / span 2; }
    .gallery-item.item-9 { grid-column: 3 / span 1; grid-row: 10 / span 3; }
    .gallery-item.item-10 { grid-column: 3 / span 1; grid-row: 6 / span 2; }
    .gallery-item.item-11 { grid-column: 3 / span 1; grid-row: 8 / span 2; }
}

/* --- Breakpoint pro 3 sloupce --- */
@media (max-width: 660px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(19, 50px);
    }
    .gallery-item.item-1 { grid-column: 1 / span 3; grid-row: 1 / span 4; }
    .gallery-item.item-2 { grid-column: 1 / span 1; grid-row: 5 / span 3; }
    .gallery-item.item-3 { grid-column: 2 / span 2; grid-row: 5 / span 4; }
    .gallery-item.item-4 { grid-column: 1 / span 2; grid-row: 17 / span 3; }
    .gallery-item.item-5 { grid-column: 1 / span 1; grid-row: 10 / span 3; }
    .gallery-item.item-6 { grid-column: 3 / span 1; grid-row: 17 / span 3; }
    .gallery-item.item-7 { grid-column: 1 / span 3; grid-row: 13 / span 4; }
    .gallery-item.item-8 { grid-column: 2 / span 2; grid-row: 11 / span 2; }
    .gallery-item.item-9 { grid-column: 1 / span 1; grid-row: 8 / span 2; }
    .gallery-item.item-10 { grid-column: 2 / span 1; grid-row: 9 / span 2; }
    .gallery-item.item-11 { grid-column: 3 / span 1; grid-row: 9 / span 2; }
}

/* --- Breakpoint pro 2 sloupce --- */
@media (max-width: 400px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(20, 50px);
    }
    .gallery-item.item-1 { grid-column: 1 / span 2; grid-row: 1 / span 4; }
    .gallery-item.item-2 { grid-column: 2 / span 1; grid-row: 5 / span 3; }
    .gallery-item.item-3 { grid-column: 2 / span 1; grid-row: 8 / span 4; }
    .gallery-item.item-4 { grid-column: 1 / span 1; grid-row: 9 / span 3; }
    .gallery-item.item-5 { grid-column: 1 / span 2; grid-row: 17 / span 2; }
    .gallery-item.item-6 { grid-column: 1 / span 2; grid-row: 19 / span 2; }
    .gallery-item.item-7 { grid-column: 1 / span 2; grid-row: 12 / span 4; }
    .gallery-item.item-8 { grid-column: 1 / span 2; grid-row: 16 / span 1; }
    .gallery-item.item-9 { grid-column: 1 / span 1; grid-row: 5 / span 2; }
    .gallery-item.item-10 { grid-column: 1 / span 1; grid-row: 7 / span 1; }
    .gallery-item.item-11 { grid-column: 1 / span 1; grid-row: 8 / span 1; }
}