/* ================================================================
   PIONEER LOGISTIC — FOOTER.CSS
   Стили футера
   ================================================================ */


/* ================================================================
   FOOTER
   ================================================================ */
.footer {
    position: relative;
    width: 100%;
    background: linear-gradient(180deg, #00060E 0%, #000000 100%);
    overflow: hidden;
}

/* ===== ДЕКОРАТИВНАЯ ЗОНА ===== */
.footer__decor {
    position: relative;
    height: clamp(200px, 28vw, 450px);
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.footer__container-sinking {
    width: clamp(300px, 80vw, 900px);
    margin-bottom: -130px;
}

.footer__container-sinking img {
    width: 100%;
    height: auto;
}

.footer__tentacle {
    position: absolute;
    bottom: 0;
    width: clamp(100px, 52vw, 460px);
    pointer-events: none;
}

.footer__tentacle img {
    width: 100%;
    height: auto;
}

.footer__tentacle--left {
    left: -13vw;
    transform: rotate(343deg);
}

.footer__tentacle--right {
    right: -7vw;
    transform: rotate(343deg);
}

/* ===== КОНТАКТЫ ===== */
.footer__contacts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 40px);
    padding: 40px;
    position: relative;
}

.footer__contacts * {
    font-family: 'Seenonim';
}

.footer__contact-item {
    text-align: center;
    color: #ffffff;
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    letter-spacing: 0.05em;
    transition: color 0.2s ease;
}

.footer__contact-item:hover {
    color: #d4af37;
    opacity: 1;
}

/* ===== КОПИРАЙТ ===== */
.footer__copyright {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 40px);
    padding: clamp(20px, 3vw, 40px) clamp(20px, 4vw, 60px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__copy-item {
    text-align: center;
    color: #888888;
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
}

.footer__copy-item a {
    transition: color 0.2s ease;
}

.footer__copy-item a:hover {
    color: #ffffff;
    opacity: 1;
}

/* ================================================================
   RESPONSIVE — LARGE DESKTOP (min-width: 1920px)
   ================================================================ */
@media (min-width: 1920px) {
    .hero__title {
        right: 15%;
    }
    
    .hero__button {
        left: calc(9% + 400px);
    }
    
    .services__container {
        max-width: 1400px;
    }
}

/* ================================================================
   RESPONSIVE — LAPTOP (max-width: 1439px)
   ================================================================ */
@media (max-width: 1439px) {
    .hero__title {
        max-width: 55%;
        right: 20%;
    }
    
    .hero__button {
        width: clamp(250px, 30vw, 450px);
        left: calc(5% + clamp(140px, 18vw, 300px));
    }
    
    .hero__anglerfish {
        width: clamp(160px, 35vw, 600px);
        right: clamp(60px, 8vw, 140px);
    }
    
    .hero__fish {
        width: clamp(70px, 22vw, 400px);
        right: clamp(80px, 10vw, 180px);
    }
    
    .services__bubble {
        width: clamp(160px, 28vw, 380px);
    }
    
    .services__bubbles-decor {
        left: clamp(-60px, -5vw, -30px);
        width: clamp(50px, 7vw, 120px);
    }
}

/* ================================================================
   RESPONSIVE — TABLET (max-width: 1023px)
   ================================================================ */
@media (max-width: 1023px) {
    /* Footer */
    .footer__tentacle {
        width: clamp(60px, 20vw, 200px);
    }
    
    .footer__tentacle--left {
        left: clamp(-60px, -6vw, -30px);
    }
    
    .footer__tentacle--right {
        right: clamp(-50px, -5vw, -25px);
    }
}

/* ================================================================
   RESPONSIVE — MOBILE (max-width: 767px)
   ================================================================ */
@media (max-width: 767px) {
    /* Footer */
    .footer__decor {
        height: clamp(150px, 35vw, 250px);
    }
    
    .footer__container-sinking {
                width: clamp(250px, 150vw, 800px);
        margin-bottom: clamp(-180px, -56vw, -120px);
    }
    
    .footer__tentacle {
        width: clamp(50px, 65vw, 270px);
    }
    
    .footer__tentacle--left {
        left: -120px;
    }
    
    .footer__tentacle--right {
        right: -75px;
    }
    
    .footer__contacts {
        grid-template-columns: 1fr;
        gap: clamp(12px, 2vw, 20px);
        padding: clamp(20px, 3vw, 40px);
    }
    
    .footer__copyright {
        grid-template-columns: 1fr;
        gap: clamp(8px, 1vw, 12px);
        padding: clamp(12px, 2vw, 20px) clamp(20px, 3vw, 40px);
    }
    .footer__contact-item {
    font-size: clamp(0.9rem, 3.5vw, 3.1rem);
}
}

/* ================================================================
   RESPONSIVE — SMALL MOBILE (max-width: 479px)
   ================================================================ */
@media (max-width: 479px) {
    .footer__container-sinking {
        width: 100%;
    }
    
    /*.footer__tentacle--left,
    .footer__tentacle--right {
        display: none;
    }*/
    
    .footer__contact-item {
        font-size: clamp(1.2rem, 2.2vw, 1.5rem);
    }
    .footer__container-sinking img {
    width: 145vw;
    height: auto;
    max-width: 145vw;
    background-size: cover;
    transform: translateX(-100px);
}
}

/* ================================================================
   RESPONSIVE — ULTRA-WIDE (min-width: 2560px)
   ================================================================ */
@media (min-width: 2560px) {
    .footer__container-sinking {
        width: min(60vw, 1100px);
    }
    
    .footer__tentacle {
        width: min(25vw, 550px);
    }
}