/* ============================================================
   БЛОК TEAM («Наша команда» + «Відгуки про нас»)
   Підключення:
   <link rel="stylesheet" type="text/css" href="{{ asset('public/assets\css\frontend\New_website\team.css') }}">

   Брейкпоінти:
   - ПК (за замовчуванням)          > 1440px
   - ноутбук / планшет альбомний    <= 1440px
   - планшет портретний             <= 1024px
   - телефон                        <= 768px
   ============================================================ */

.cases-team {
    position: relative;
    width: 100%;
    max-width: 1920px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
    padding: 90px 0 100px;
}

/* права сіра панель з хвилястими лініями (right_back.png) */
.team-back {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 56%;
    object-fit: cover;
    object-position: right center;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.team-container {
    position: relative;
    width: 100%;
    max-width: 1386px;
    z-index: 1;
    display: flex;
    gap: 90px;
}

/* ============================================================
   ЛІВА КОЛОНКА: фото + «Наша команда»
   ============================================================ */

.team-left {
    width: 42%;
    flex-shrink: 0;
}

/* стопка: фото + дві картки, що визирають праворуч */
.team-photo-stack {
    position: relative;
    width: 454px;
    max-width: 100%;
    margin-bottom: 56px;
    /* запас зверху, щоб розкриті картки не обрізались */
    z-index: 5;
}

.team-photo {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 14px;
    display: block;
    z-index: 3;
}

.team-photo-layer {
    position: absolute;
    border-radius: 14px;
    height: 88%;
    top: 6%;
}

/* світло-блакитна картка (Rectangle_34626227.png) */
.team-photo-layer-1 {
    right: -14px;
    width: 40%;
    height: 80%;
    z-index: 2;
}

/* сіра картка (Rectangle_34626228.png) */
.team-photo-layer-2 {
    right: -28px;
    width: 60%;
    height: 60%;
    z-index: 1;
}

/* помаранчева стрілка ліворуч від фото — клікабельна */
.team-arrow {
    position: absolute;
    left: -52px;
    top: 42%;
    width: 32px;
    height: auto;
    z-index: 4;
    cursor: pointer;
    transition: transform 0.25s ease;
}

.team-arrow:hover { transform: scale(1.18); }

/* ---------- анімація «віяла» по кліку на стрілку ----------
   клас .is-fanned вішає team.js: фото та обидві картки
   піднімаються вгору, кожна зі своїм нахилом */

.team-photo,
.team-photo-layer {
    transition: transform 0.55s cubic-bezier(0.22, 0.9, 0.3, 1.2);
    will-change: transform;
}

.team-photo-stack.is-fanned .team-photo {
    transform: translateY(-10px) rotate(-7deg);
    transform-origin: bottom left;
}

/* картки повністю виїжджають з-за фото праворуч-угору,
   кожна зі своїм нахилом — їх видно цілком */
.team-photo-stack.is-fanned .team-photo-layer-1 {
    transform: translateX(62%) translateY(-58px) rotate(7deg);
}

.team-photo-stack.is-fanned .team-photo-layer-2 {
    transform: translateX(58%) translateY(190px) rotate(-20deg);
}

.team-photo-stack.is-fanned .team-photo-layer-3 {
    transform:translateX(8%) translateY(200px) rotate(14deg)
}

/* у розкритому стані по фото та картках можна клікати —
   вони відкриваються великим форматом по центру екрана */
.team-photo-stack.is-fanned .team-photo,
.team-photo-stack.is-fanned .team-photo-layer {
    cursor: zoom-in;
}

/* ---------- лайтбокс: велике фото по центру вікна ---------- */

.team-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(1, 8, 16, 0.84);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.team-lightbox.is-open {
    opacity: 1;
    pointer-events: all;
}

.team-lightbox img {
    /* фото розтягується майже на все вікно */
    width: min(92vw, 1320px);
    height: auto;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
    transform: scale(0.92);
    transition: transform 0.3s ease;
    cursor: default;
}

.team-lightbox.is-open img { transform: scale(1); }

.team-lightbox-close {
    position: absolute;
    top: 26px;
    right: 34px;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: #FFFFFF;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s, transform 0.2s;
}

.team-lightbox-close:hover { opacity: 1; transform: scale(1.1); }

@media (prefers-reduced-motion: reduce) {
    .team-photo,
    .team-photo-layer { transition: none; }
}

.team-title {
    margin: 0 0 24px;
    font-weight: 800;
    font-size: 34px;
    line-height: 41px;
    color: #1E3A5F;
}

.team-title-accent { color: #2196FF; }

.team-text {
    margin: 0 22px 22px 0;
    font-weight: 500;
    font-size: 17px;
    line-height: 27px;
    color: #3A4358;
}

.team-text:last-child { margin-bottom: 0; }

/* ============================================================
   ПРАВА КОЛОНКА: «Відгуки про нас»
   ============================================================ */

.team-right {
    flex: 1;
    min-width: 0;
}

.reviews-title {
    margin: 0 0 44px;
    font-weight: 800;
    font-size: 34px;
    line-height: 41px;
    color: #2196FF;
}

.reviews-title-muted { color: #3A3160; }

.team-right-inner {
    display: flex;
    gap: 64px;
    align-items: flex-start;
}

/* ---------- відео-відгук ---------- */

.reviews-video-col {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.reviews-video {
    position: relative;
    width: 300px;
    height: 340px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(160deg, #1A2230 0%, #0C121E 100%);
    cursor: pointer;
}

/* відео: до запуску притемнене, як постер */
.reviews-video img,
.reviews-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
    transition: opacity 0.3s;
}

/* під час відтворення відео яскраве, кнопка play схована */
.reviews-video.is-playing video { opacity: 1; }

.reviews-video.is-playing .reviews-play {
    opacity: 0;
    pointer-events: none;
}

.reviews-play { transition: transform 0.2s, opacity 0.25s; }

.reviews-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #2196FF;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: transform 0.2s;
}

.reviews-video:hover .reviews-play {
    transform: translate(-50%, -50%) scale(1.1);
}

.reviews-text {
    margin: 36px 0 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 25px;
    color: #2C2A4E;
}

.reviews-all-btn {
    margin-top: 28px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 28px;
    border-radius: 22px;
    background: transparent;
    border: 1.5px solid #2A90FF;
    color: rgba(42, 144, 255, 0.75);
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    text-decoration: none;
    transition: color 0.2s, box-shadow 0.2s;
}

.reviews-all-btn:hover {
    color: #2A90FF;
    box-shadow: 0 0 14px rgba(42, 144, 255, 0.35);
}

/* ---------- вертикальна стрічка карток-відгуків ---------- */

.reviews-cards {
    flex: 1;
    min-width: 0;
    max-width: 320px;
    height: 660px;
    overflow: hidden;
    /* верх і низ розчиняються в прозорість */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.reviews-cards-track {
    display: flex;
    flex-direction: column;
    height: max-content;
    animation: reviews-marquee-up 22s linear infinite;
}

.reviews-cards-group {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-bottom: 22px;
    flex-shrink: 0;
}

.reviews-cards-group img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    display: block;
}

@keyframes reviews-marquee-up {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

/* ============================================================
   НОУТБУК / ПЛАНШЕТ АЛЬБОМНИЙ  (<= 1440px)
   ============================================================ */
@media (max-width: 1440px) {

    .cases-team { padding: 64px 32px 76px; }

    .team-container { gap: 56px; }

    .team-photo-stack { width: 100%; margin-bottom: 40px; }
    .team-arrow { left: -38px; width: 26px; }

    .team-title, .reviews-title { font-size: 28px; line-height: 34px; }
    .team-text { font-size: 15px; line-height: 24px; }

    .team-right-inner { gap: 40px; }

    .reviews-video-col { width: 260px; }
    .reviews-video { width: 260px; height: 300px; }
    .reviews-text { font-size: 15px; line-height: 23px; margin-top: 28px; }

    .reviews-cards { height: 560px; max-width: 300px; }
}

/* ============================================================
   ПЛАНШЕТ ПОРТРЕТНИЙ  (<= 1024px)
   Колонки одна під одною
   ============================================================ */
@media (max-width: 1024px) {

    .cases-team { padding: 48px 24px 60px; }

    /* сіра панель стає тлом усієї нижньої половини */
    .team-back { width: 100%; opacity: 0.5; }

    .team-container { flex-direction: column; gap: 48px; }

    .team-left { width: 100%; }

    .team-photo-stack { width: 100%; max-width: 460px; margin-bottom: 32px; }
    /* на планшеті/телефоні стрілки нема — віяло запускається тапом по фото */
    .team-arrow { display: none; }
    .team-photo { cursor: pointer; }

    .reviews-title { margin-bottom: 28px; }

    .team-right-inner { gap: 28px; }

    .reviews-cards { height: 480px; }
}

/* ============================================================
   ТЕЛЕФОН  (<= 768px)
   ============================================================ */
@media (max-width: 768px) {

    .cases-team { padding: 36px 16px 48px; }

    .team-container { gap: 36px; }

    .team-title, .reviews-title { font-size: 22px; line-height: 28px; }
    .team-text { font-size: 14px; line-height: 22px; }

    .team-photo-layer-1 { right: -8px; }
    .team-photo-layer-2 { right: -16px; }

    .team-photo-stack.is-fanned .team-photo-layer-1 {
        transform: translateX(32%) translateY(-36px) rotate(6deg);
    }

    .team-photo-stack.is-fanned .team-photo-layer-2 {
        transform: translateX(66%) translateY(-78px) rotate(12deg);
    }

    .team-lightbox img { width: 94vw; border-radius: 12px; }
    .team-lightbox-close { top: 14px; right: 16px; }

    /* відео та стрічка одна під одною */
    .team-right-inner { flex-direction: column; }

    .reviews-video-col { width: 100%; }
    .reviews-video { width: 100%; max-width: 340px; height: 300px; }

    .reviews-text { font-size: 14px; line-height: 22px; margin-top: 20px; }

    .reviews-all-btn { width: 100%; box-sizing: border-box; }

    .reviews-cards {
        max-width: 340px;
        width: 100%;
        height: 380px;
    }

    .reviews-cards-track { animation-duration: 16s; }
}

@media (prefers-reduced-motion: reduce) {
    .reviews-cards-track { animation: none; }
}