/* ============================================================
   БЛОК WORKS («Як це працює»)
   Підключення:
   <link rel="stylesheet" type="text/css" href="{{ asset('public/assets\css\frontend\New_website\works.css') }}">

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

.body-works {
    position: relative;
    width: 100%;
    max-width: 1920px;
    background-color: #FFFFFF;
    overflow: hidden;
    display: flex;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
    padding: 80px 0 110px;
}

/* ---------- декоративні хвилі внизу ----------
   back.png — сині лінії на ЧОРНОМУ тлі, тому:
   invert(1) робить тло білим, а лінії світлими,
   hue-rotate повертає їм блакитний відтінок,
   multiply прибирає біле тло на білій секції */
.works-decor {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    filter: invert(1) hue-rotate(195deg) saturate(1.4);
    mix-blend-mode: multiply;
    opacity: 0.8;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* ---------- контент ---------- */

.works-container {
    position: relative;
    width: 100%;
    max-width: 1386px;
    z-index: 1;
}

.works-title {
    margin: 0 0 46px;
    font-weight: 800;
    font-size: 28px;
    line-height: 34px;
    color: #071F57;
}

.works-title-accent { color: #1D93FF; }

.works-content {
    display: flex;
    align-items: center;
    gap: 64px;
}

/* ---------- ліва колонка: кроки ---------- */

.works-steps {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.works-step {
    display: flex;
    align-items: center;
}

/* велика світло-блакитна цифра, що визирає з-за картки.
   Зроблена ТЕКСТОМ (а не PNG): у картинках 1/2/3.png цифра
   майже зливається з чорним тлом, і витягнути з них чистий
   світло-блакитний колір макета фільтрами неможливо.
   Текст дає точний колір #DCE4EF з м'яким градієнтом, як на макеті */
.works-step-num {
    flex-shrink: 0;
    margin-right: -10px;
    font-weight: 900;
    font-size: 150px;
    line-height: 0.85;
    background: linear-gradient(180deg,  #D3DFEE 55%, #C5D5E9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    user-select: none;
    pointer-events: none;
}

.works-step-card {
    position: relative;
    z-index: 1;
    flex: 1;
    background: #FFFFFF;
    border-radius: 14px;
    padding: 24px 30px;
    box-shadow:
            0 14px 34px rgba(13, 46, 99, 0.10),
            0 2px 8px rgba(13, 46, 99, 0.05);
}

.works-step-card:hover {
    transform: translateY(-8px);
    box-shadow:
            0 22px 44px rgba(13, 46, 99, 0.16),
            0 6px 14px rgba(13, 46, 99, 0.08);
}
.works-step-card h4 {
    margin: 0 0 10px;
    font-weight: 800;
    font-size: 22px;
    line-height: 27px;
    color: #1D1F2E;
}

.works-step-card p {
    margin: 0;
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    color: #3C4254;
}

/* ---------- права колонка: картинка ---------- */

.works-image {
    flex-shrink: 0;
    width: 48%;
    max-width: 664px;
}

.works-image img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    display: block;
    box-shadow: 0 18px 44px rgba(13, 46, 99, 0.12);
}

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

    .body-works { padding: 60px 32px 84px; }

    .works-title { font-size: 26px; margin-bottom: 36px; }

    .works-content { gap: 44px; }

    .works-step-num { font-size: 124px; margin-right: -46px; }

    .works-step-card { padding: 20px 26px; }
    .works-step-card h4 { font-size: 19px; line-height: 24px; }
    .works-step-card p { font-size: 16px; line-height: 24px; }

    .works-image { width: 46%; }
}

/* ============================================================
   ПЛАНШЕТ ПОРТРЕТНИЙ  (<= 1024px)
   Кроки зверху, картинка під ними
   ============================================================ */
@media (max-width: 1024px) {

    .body-works { padding: 48px 24px 64px; }

    .works-title { font-size: 24px; line-height: 30px; margin-bottom: 28px; }

    .works-content {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }

    .works-steps { gap: 20px; }

    .works-step-num { font-size: 104px; margin-right: -40px; }

    .works-image {
        width: 100%;
        max-width: 600px;
        align-self: center;
    }
}

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

    .body-works { padding: 36px 16px 52px; }

    .works-title { font-size: 20px; line-height: 26px; margin-bottom: 20px; }

    .works-steps { gap: 16px; }

    .works-step-num { font-size: 74px; margin-right: -30px; }

    .works-step-card { padding: 16px 18px; border-radius: 12px; }
    .works-step-card h4 { font-size: 16px; line-height: 21px; margin-bottom: 6px; }
    .works-step-card p { font-size: 14px; line-height: 21px; }

    .works-image { max-width: 100%; }
    .works-image img { border-radius: 12px; }

    .works-decor { opacity: 0.6; }
}