/* ================================================================
   PAGE-DELIVERY.CSS
   Стили страницы "Доставка и гарантии"
   ================================================================ */

/* ================================================================
   HERO SECTION
   ================================================================ */

.delivery-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    background: #00060E;
    overflow: hidden;
}

.delivery-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.delivery-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.delivery-hero__content {
    position: absolute;
    z-index: 1;
    width: 100%;
    max-width: 1400px;
    margin-left: clamp(20px, 4vw, 60px);
    bottom: 40px;
}

.delivery-hero__title {
    text-align: left;
    max-width: 100%;
    margin-bottom: 0;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
}

/* ================================================================
   PROCESS SECTION — Процесс доставки
   ================================================================ */

.delivery-process {
    /* Фон */
    --process-bg-top: -80px;
    --process-bg-width: 100%;
    
    /* Песочные часы */
   --hourglass-width: 960px;
    --hourglass-x: -160px;
    --hourglass-y: -40px;
    
    /* Кости */
        --dice-width: 1130px;
    --dice-x: 190px;
    --dice-y: -40px;
    
    /* Рыбки */
    --fish-width: 500px;
    --fish-x: 480px;
    --fish-y: 40px;
    
    /* Компас */
    --compass-width: 1020px;
    --compass-x: -170px;
    --compass-y: -40px;
    
    position: relative;
    width: 100%;
    padding: clamp(80px, 10vw, 140px) 0;
    background: linear-gradient(180deg, #00060E 0%, #010203 100%);
    overflow: visible;
}

/* ----- Фоновое изображение (волны + лучи) ----- */
.delivery-process__bg {
    position: absolute;
    top: var(--process-bg-top);
    left: 50%;
    transform: translateX(-50%);
    width: var(--process-bg-width);
    max-width: 2200px;
    z-index: 0;
    pointer-events: none;
}

.delivery-process__bg img {
    width: 100%;
    height: auto;
}

/* ----- Контент ----- */
.delivery-process__inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 60px);
}

/* ----- Шапка секции ----- */
.delivery-process__header {
    text-align: center;
    margin-bottom: clamp(60px, 8vw, 120px);
}

.delivery-process__title {
    margin-bottom: clamp(20px, 3vw, 40px);
}

.delivery-process__subtitle {
    color: #cccccc;
    max-width: 750px;
    margin: 0 auto;
    line-height: 1.4;
}

/* ----- Пункты ----- */
.delivery-process__items {
    display: flex;
    flex-direction: column;
    gap: clamp(80px, 12vw, 160px);
}

/* ----- Один пункт (родитель для картинки + текста) ----- */
.delivery-process__item {
    position: relative;
    min-height: 280px;
    display: flex;
}

/* ----- Контент пункта (текст) ----- */
.delivery-process__item-content {
    position: relative;
    z-index: 2;
    width: 50%;
    max-width: none;
}

/* Текст справа от центральной линии — прижат левым краем к центру */
.delivery-process__item--right .delivery-process__item-content {
    margin-left: 40%;
    padding-left: clamp(40px, 5vw, 80px);
    text-align: left;
}

/* Текст слева от центральной линии — прижат правым краем к центру */
.delivery-process__item--left .delivery-process__item-content {
    margin-left: 5%;
    padding-right: clamp(40px, 5vw, 80px);
    text-align: right;
}

.delivery-process__item-title {
    margin-bottom: clamp(16px, 2vw, 24px);
    text-transform: uppercase;
}

.delivery-process__item-text {
    color: #cccccc;
    line-height: 1.6;
}

/* ----- Картинки внутри пунктов (абсолютное позиционирование) ----- */
.delivery-process__item-image {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    
    /* Точка привязки — центр блока item */
    left: 50%;
    top: 50%;
}

.delivery-process__item-image img {
    width: 100%;
    height: auto;
}

/* Песочные часы — слева */
.delivery-process__item-image--hourglass {
    width: var(--hourglass-width);
    transform: translate(
        calc(-50% + var(--hourglass-x)),
        calc(-50% + var(--hourglass-y))
    );
}

/* Кости — справа */
.delivery-process__item-image--dice {
    width: var(--dice-width);
    transform: translate(
        calc(-50% + var(--dice-x)),
        calc(-50% + var(--dice-y))
    );
}

/* Рыбки — справа от костей */
.delivery-process__item-image--fish {
    width: var(--fish-width);
    transform: translate(
        calc(-50% + var(--fish-x)),
        calc(-50% + var(--fish-y))
    );
}

/* Компас — слева */
.delivery-process__item-image--compass {
    width: var(--compass-width);
    transform: translate(
        calc(-50% + var(--compass-x)),
        calc(-50% + var(--compass-y))
    );
}

/* ================================================================
   RESPONSIVE — TABLET (max-width: 1023px)
   ================================================================ */

@media (max-width: 1023px) {
    /* Hero */
    .delivery-hero {
        min-height: 500px;
    }

    .delivery-hero__content {
        bottom: 30px;
    }
    
    /* Process */
    .delivery-process {
        --hourglass-width: 220px;
        --hourglass-x: -260px;
        
        --dice-width: 260px;
        --dice-x: 220px;
        
        --fish-width: 380px;
        --fish-x: 360px;
        
        --compass-width: 200px;
        --compass-x: -280px;
    }
    
    .delivery-process__items {
        gap: clamp(60px, 10vw, 120px);
    }
    
    .delivery-process__item {
        min-height: 220px;
    }
}

/* ================================================================
   RESPONSIVE — MOBILE (max-width: 767px)
   ================================================================ */

@media (max-width: 767px) {
    /* Hero */
    .delivery-hero {
        min-height: 450px;
    }

    .delivery-hero__content {
        margin-left: 0;
        padding: 0 clamp(20px, 4vw, 40px);
        bottom: 20px;
    }

    .delivery-hero__title {
        text-align: center;
    }
    
    /* Process */
    .delivery-process {
        --process-bg-top: -40px;
        
        --hourglass-width: clamp(160px, 45vw, 200px);
        --hourglass-x: 0;
        --hourglass-y: -140px;
        
        --dice-width: clamp(180px, 50vw, 240px);
        --dice-x: 0;
        --dice-y: -160px;
        
        --fish-width: clamp(200px, 55vw, 280px);
        --fish-x: 60px;
        --fish-y: -100px;
        
        --compass-width: clamp(140px, 40vw, 180px);
        --compass-x: 0;
        --compass-y: -140px;
    }
    
    .delivery-process__header {
        margin-bottom: clamp(40px, 6vw, 80px);
    }
    
    .delivery-process__subtitle br {
        display: none;
    }
    
    .delivery-process__items {
        gap: clamp(200px, 50vw, 280px);
    }
    
    .delivery-process__item {
        min-height: auto;
        padding-top: clamp(140px, 38vw, 200px);
    }
    
    .delivery-process__item-content {
        width: 100%;
    }
    
    .delivery-process__item--right .delivery-process__item-content,
    .delivery-process__item--left .delivery-process__item-content {
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }
    
    .delivery-process__item-text br {
        display: none;
    }
    
    /* Картинки над текстом по центру */
    .delivery-process__item-image {
        top: 0;
        left: 50%;
    }
}

/* ================================================================
   RESPONSIVE — SMALL MOBILE (max-width: 479px)
   ================================================================ */

@media (max-width: 479px) {
    /* Hero */
    .delivery-hero {
        min-height: 400px;
    }
    
    /* Process */
    .delivery-process {
        --hourglass-width: clamp(130px, 40vw, 160px);
        --dice-width: clamp(150px, 45vw, 180px);
        --fish-width: clamp(160px, 48vw, 200px);
        --compass-width: clamp(120px, 36vw, 150px);
    }
    
    .delivery-process__items {
        gap: clamp(180px, 48vw, 240px);
    }
    
    .delivery-process__item {
        padding-top: clamp(120px, 35vw, 160px);
    }
}

/* ================================================================
   CUSTOMS SECTION — Таможенное оформление
   ================================================================ */

.delivery-customs {
    /* Акула */
    --shark-width: 950px;
    --shark-x: 130px;
    --shark-y: -130;
    
    /* Осьминог в трубе */
    --octopus-width: 100%;
    --octopus-margin-top: -500px;
    
    position: relative;
    width: 100%;
    padding-top: clamp(80px, 10vw, 140px);
    padding-bottom: 0;
    background: linear-gradient(0deg, #00060E 0%, #000000 100%);
    
    overflow: visible;
}

/* ----- Акула (абсолютно слева) ----- */
.delivery-customs__shark {
    position: absolute;
    top: var(--shark-y);
    left: var(--shark-x);
    width: var(--shark-width);
    z-index: 0;
    pointer-events: none;
}

.delivery-customs__shark img {
    width: 100%;
    height: auto;
}

/* ----- Контент ----- */
.delivery-customs__inner {
    position: relative;
    z-index: 1;
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 60px);
}

/* ----- Верхняя часть: заголовок справа ----- */
.delivery-customs__header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: clamp(60px, 8vw, 140px);
    margin-right: 230px;
}

.delivery-customs__header-content {
    max-width: 520px;
    text-align: left;
}

.delivery-customs__title {
    margin-bottom: clamp(20px, 3vw, 32px);
}

.delivery-customs__subtitle {
    color: #cccccc;
    line-height: 1.7;
}

/* ----- Три колонки ----- */
.delivery-customs__features {
    display: flex;
    justify-content: space-between;
    gap: clamp(30px, 4vw, 60px);
    margin-bottom: clamp(200px, 6vw, 80px);
}

.delivery-customs__feature {
    flex: 1;
    max-width: max-content;
}

.delivery-customs__feature-title {
    margin-bottom: clamp(12px, 2vw, 20px);
    text-transform: uppercase;
}

.delivery-customs__feature-text {
    color: #cccccc;
    line-height: 1.6;
}

/* ----- Осьминог в трубе (на всю ширину) ----- */
.delivery-customs__octopus {
    position: relative;
    z-index: 0;
    width: var(--octopus-width);
    margin-top: var(--octopus-margin-top);
    margin-left: 50%;
    transform: translateX(-50%);
}

.delivery-customs__octopus img {
    width: 100%;
    height: auto;
    display: block;
}

/* ================================================================
   RESPONSIVE — TABLET (max-width: 1023px)
   ================================================================ */

@media (max-width: 1023px) {
    /* Hero */
    .delivery-hero {
        min-height: 500px;
    }

    .delivery-hero__content {
        bottom: 30px;
    }
    
    /* Process */
    .delivery-process {
        --hourglass-width: 530px;
        --hourglass-x: -220px;
        --dice-width: 750px;
        --dice-x: 179px;
        --fish-width: 440px;
        --fish-x: 360px;
        --compass-width: 720px;
        --compass-x: -160px;
    }
    
    .delivery-process__items {
        gap: clamp(60px, 10vw, 120px);
    }
    
    .delivery-process__item {
        min-height: 220px;
    }
    
    /* Customs */
    .delivery-customs {
        --shark-width: 610px;
        --shark-x: -120px;
        --octopus-margin-top: -340px;
    }
    
    .delivery-customs__header-content {
        max-width: 440px;
    }
    
    .delivery-customs__feature {
        max-width: 280px;
    }
    .delivery-customs__header {
    margin-right: 10%;
}
}


/* ================================================================
   RESPONSIVE — MOBILE (max-width: 767px)
   ================================================================ */

@media (max-width: 767px) {
    /* Hero */
    .delivery-hero {
        min-height: 450px;
    }

    .delivery-hero__content {
        margin-left: 0;
        padding: 0 clamp(20px, 4vw, 40px);
        bottom: 20px;
    }

    .delivery-hero__title {
        text-align: center;
    }
    
    /* Process */
    .delivery-process {
    --process-bg-top: -40px;
    --hourglass-width: clamp(160px, 65vw, 590px);
    --hourglass-x: -10px;
    --hourglass-y: 80px;
    --dice-width: clamp(180px, 100vw, 780px);
    --dice-x: 10px;
    --dice-y: 50px;
    --fish-width: clamp(200px, 55vw, 509px);
    --fish-x: 60px;
    --fish-y: -100px;
    --compass-width: clamp(140px, 140vw, 1010px);
    --compass-x: 0px;
    --compass-y: -10px;
}
    
    .delivery-process__header {
        margin-bottom: clamp(40px, 6vw, 80px);
    }
    
    .delivery-process__subtitle br {
        display: none;
    }
    
    .delivery-process__items {
        gap: clamp(200px, 50vw, 280px);
    }
    
    .delivery-process__item {
        min-height: auto;
        padding-top: clamp(140px, 38vw, 200px);
    }
    
    .delivery-process__item-content {
        width: 100%;
    }
    
    .delivery-process__item--right .delivery-process__item-content,
    .delivery-process__item--left .delivery-process__item-content {
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }
    
    .delivery-process__item-text br {
        display: none;
    }
    
    /* Картинки над текстом по центру */
    .delivery-process__item-image {
        top: 0;
        left: 50%;
    }
    
    /* Customs */
    .delivery-customs {
        --shark-width: clamp(280px, 75vw, 380px);
        --shark-x: 50%;
        --shark-y: 0;
        --octopus-margin-top: -40px;
    }
    
    .delivery-customs__shark {
        position: relative;
        left: auto;
        top: auto;
        transform: translateX(-50%);
        margin-left: var(--shark-x);
        margin-bottom: clamp(30px, 5vw, 50px);
    }
    
    .delivery-customs__header {
        justify-content: center;
        margin-bottom: clamp(40px, 6vw, 60px);
    }
    
    .delivery-customs__header-content {
        max-width: 100%;
        text-align: center;
    }
    
    .delivery-customs__subtitle br {
        display: none;
    }
    
    .delivery-customs__features {
        flex-direction: column;
        align-items: center;
        gap: clamp(30px, 5vw, 50px);
    }
    
    .delivery-customs__feature {
        max-width: 100%;
        text-align: center;
    }
    
    .delivery-customs__feature-text br {
        display: none;
    }
    .delivery-process__item-content {
    max-width: 420px;
    margin: 0 auto!important;
}
.delivery-customs__header {
    margin: 0;
}

}

/* ================================================================
   RESPONSIVE — SMALL MOBILE (max-width: 479px)
   ================================================================ */

@media (max-width: 479px) {
    /* Hero */
    .delivery-hero {
        min-height: 400px;
    }
    
    /* Process */
    .delivery-process {
    --hourglass-width: clamp(130px, 100vw, 450px);
    --dice-width: clamp(150px, 340vw, 810px);
    --fish-width: clamp(160px, 340vw, 810px);
    --compass-width: clamp(120px, 340vw, 810px);
}
    
    .delivery-process__items {
        gap: clamp(180px, 48vw, 240px);
    }
    
    .delivery-process__item {
        padding-top: clamp(120px, 35vw, 160px);
    }
    
    /* Customs */
   .delivery-customs {
    --shark-width: clamp(220px, 110vw, 450px);
    --octopus-margin-top: -30px;
}
     /* Customs */
    .delivery-customs {
        --octopus-margin-top: -40px;
    }
.delivery-process {
    --process-bg-top: -40px;
    --hourglass-width: clamp(160px, 125vw, 590px);
    --hourglass-x: -10px;
    --hourglass-y: 50px;
    --dice-width: clamp(180px, 180vw, 780px);
    --dice-x: 10px;
    --dice-y: 0px;
    --fish-width: clamp(200px, 65vw, 509px);
    --fish-x: 190px;
    --fish-y: 70px;
    --compass-width: clamp(140px, 220vw, 1010px);
    --compass-x: 11px;
    --compass-y: 10px;
}
.delivery-customs {
    padding-top: clamp(10px, 10vw, 140px);
}
.delivery-customs {
    --octopus-margin-top: -210px;
}
.delivery-process {
    padding-bottom: 0;
}
}
/* ================================================================
   FIX: Декоративные изображения без ограничения ширины
   ================================================================ */

.delivery-process__item-image img,
.delivery-customs__shark img {
    max-width: none;
}

/* ================================================================
   RESPONSIBILITY SECTION — Полная ответственность за груз (кит)
   ================================================================ */

.delivery-responsibility {
    position: relative;
    width: 100%;
    padding: clamp(80px, 12vw, 140px) 0;
    background: linear-gradient(181deg, #00060E 0%, #000000 50%, #00060E 100%);
    overflow: hidden;
    padding-top: 20px;
}

/* контейнер текста */
.delivery-responsibility__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 60px);
    position: relative;
    z-index: 2;
}

.delivery-responsibility__content {
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 36px);
}

.delivery-responsibility__title {
    margin: 0;
    text-transform: uppercase;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
}

.delivery-responsibility__text {
    color: #cccccc;
    max-width: 500px;
}

/* кнопка — стиль как в личном кабинете, только отступ сверху */
.delivery-responsibility__btn {
    margin-top: clamp(20px, 3vw, 40px);
}

/* фон с китом */
.delivery-responsibility__visual {
    position: absolute;
    inset: 0;
    width: 100%;
    pointer-events: none;
    z-index: 0;
}

.delivery-responsibility__image {
    position: absolute;
}

/* сам кит */
.delivery-responsibility__image--whale {
    right: 2%;
    top: 50%;
    transform: translateY(-50%);
    width: min(70vw, 1340px);
    opacity: 60%;
}

.delivery-responsibility__image--whale img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* без max-width, чтобы не резало на больших экранах */
    max-width: none;
}

/* ====================== ADAPTIVE ====================== */

@media (max-width: 1023px) {
    .delivery-responsibility {
        padding: clamp(60px, 9vw, 100px) 0;
    }

    .delivery-responsibility__content {
        max-width: 440px;
    }

    .delivery-responsibility__image--whale {
        right: -18%;
        width: min(100vw, 820px);
    }
}

@media (max-width: 767px) {
    .delivery-responsibility {
        padding: clamp(50px, 8vw, 80px) 0;
    }

    .delivery-responsibility__inner {
        padding-inline: clamp(20px, 4vw, 40px);
    }

    .delivery-responsibility__content {
        max-width: 100%;
        text-align: left;
        gap: clamp(16px, 3vw, 28px);
    }

    .delivery-responsibility__title {
        font-size: clamp(26px, 7vw, 34px);
    }

    .delivery-responsibility__text {
        max-width: 100%;
    }

    .delivery-responsibility__image--whale {
        right: -35%;
        top: 55%;
        width: clamp(420px, 120vw, 620px);
        opacity: 0.9;
    }
}

@media (max-width: 479px) {
    .delivery-responsibility__image--whale {
        right: -45%;
        top: 58%;
        width: clamp(360px, 130vw, 520px);
    }
}
/* ================================================================
   BUTTONS — такие же, как на странице перевозки грузов
   ================================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-family: "Archaica", sans-serif;
    font-weight: 400;
    /*border-radius: 10px;*/
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
    letter-spacing: 0.04em;
    position: relative;
    overflow: hidden;
}

/* Основной вариант кнопки — как в первом блоке */
.btn--primary {
    background: #00253A;
    border: 1px solid #48AFC4;
    color: #FFFFFF;

    box-shadow:
        0 0 18px rgba(72, 175, 196, 0.45),
        inset 0 0 16px rgba(72, 175, 196, 0.35);
}

/* Ховер */
.btn--primary:hover {
    box-shadow:
        0 0 28px rgba(72, 175, 196, 0.6),
        inset 0 0 22px rgba(72, 175, 196, 0.5);
    transform: translateY(-2px);
}

/* Актив */
.btn--primary:active {
    transform: translateY(0);
    box-shadow:
        0 0 14px rgba(72, 175, 196, 0.35),
        inset 0 0 12px rgba(72, 175, 196, 0.25);
}

/* Вариант кнопки для блока "Личный кабинет" / кита */
.btn--cabinet {
    margin-top: clamp(20px, 3vw, 40px);
    font-size: 18px;
    padding-inline: 40px;
    padding-block: 16px;
}