/* ============================================================
   БЛОК ISSUES («Проблематики», 3-й блок)
   Підключення:
   <link rel="stylesheet" type="text/css" href="{{ asset('public/assets\css\frontend\New_website\issues.css') }}">

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

.body-issues {
    position: relative;
    width: 100%;
    max-width: 1920px;
    min-height: 831px;
    background-color: #00112F;
    overflow: hidden;
    display: flex;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
    padding: 0 0 60px;
}

/* ---------- декоративні елементи ----------
   PNG — білі/сірі лінії на чорному тлі, тому використовуємо
   mix-blend-mode: screen — чорне тло зникає, лишаються лінії */

.issues-decor {
    position: absolute;
    mix-blend-mode: screen;
    pointer-events: none;
    user-select: none;
}

/* тонкий хрест ліворуч угорі (Group_1597887682.png) */
.issues-decor-cross {
    top: 0;
    left: 0;
    width: 274px;
    height: auto;
    opacity: 0.9;
}

/* вертикальна лінія ліворуч (Group_1597887683.png) */
.issues-decor-vline {
    top: 0;
    left: 47px;
    width: 51px;
    height: auto;
    opacity: 0.9;
}

/* сині завитки праворуч угорі: Layer_x0020_1.png лежить
   ПОВЕРХ Layer_x0020_1-1.png в одній і тій самій позиції.
   Тон — темно-синій, як у макеті (лінії ~#0C3070),
   а не яскраво-блакитний */
.issues-decor-wave-r,
.issues-decor-wave-tr {
    top: 0;
    right: 0;
    width: 438px;
    height: auto;
    /* білі лінії притемнюємо і фарбуємо в темно-синій */
    filter: brightness(0.3) sepia(1) saturate(5) hue-rotate(195deg);
}

/* нижній шар (Layer_x0020_1-1.png) */
.issues-decor-wave-r {
    z-index: 1;
    opacity: 0.45;
}

/* верхній шар (Layer_x0020_1.png) */
.issues-decor-wave-tr {
    z-index: 2;
    opacity: 0.85;
}

/* хвилі ліворуч унизу: _105553197705088.png лежить
   ПОВЕРХ _105553197705088-1.png в одній і тій самій позиції.
   Тон — приглушений темно-синій, як у макеті (лінії ~#142E64) */
.issues-decor-wave-bc,
.issues-decor-wave-bl {
    left: 0;
    bottom: 0;
    width: 780px;
    height: auto;
    filter: brightness(0.28) sepia(1) saturate(4) hue-rotate(195deg);
}

/* нижній шар (_105553197705088-1.png) */
.issues-decor-wave-bc {
    z-index: 1;
    opacity: 0.35;
}

/* верхній шар (_105553197705088.png) */
.issues-decor-wave-bl {
    z-index: 2;
    opacity: 0.65;
}

/* ---------- величезний напис-вотермарка ---------- */

.issues-watermark {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1386px;
    font-weight: 800;
    font-size: 74px;
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #1A2B49;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

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

.issues-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1386px;
    padding-top: 90px;
}

.issues-title {
    margin: 0 0 50px;
    font-weight: 800;
    font-size: 30px;
    line-height: 38px;
    color: #FFFFFF;
}

.issues-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 36px;
}

.issues-card {
    display: flex;
    align-items: center;
    gap: 34px;
    min-height: 215px;
    padding: 36px 44px;
    box-sizing: border-box;
    border-radius: 16px;

    border: 1px solid transparent;

    background:
            linear-gradient(#021533, #021533) padding-box,
            linear-gradient(to right,
            rgba(45, 141, 253, 0.95),
            rgba(45, 141, 253, 0)
            ) border-box;

    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

/* світіння картки при наведенні */
.issues-card:hover {

    background: linear-gradient(
            to right,
            rgb(45 141 253 / 0.55) 0%,
            rgb(2 21 51) 100%
    );
    box-shadow:
            0 0 24px rgba(45, 141, 253, 0.35),
            0 0 64px rgba(45, 141, 253, 0.18),
            inset 0 0 18px rgba(45, 141, 253, 0.12);
}

/* перша (підсвічена) картка з градієнтом */
.issues-card-active {
    background: linear-gradient(100deg, #0D4584 0%, #0A3567 38%, #04204A 70%, #021533 100%);
    border: 1px solid rgba(45, 141, 253, 0.65);
}

.issues-num {
    flex-shrink: 0;
    font-weight: 800;
    font-size: 58px;
    line-height: 1;
    color: #2D8DFD;
}

.issues-card p {
    margin: 0;
    font-weight: 600;
    font-size: 28px;
    line-height: 38px;
    color: #FFFFFF;
}

/* ---------- нижній рядок ---------- */

.issues-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin-top: 56px;
}

.issues-bottom-text {
    margin: 0;
    font-weight: 800;
    font-size: 28px;
    line-height: 36px;
    color: #FFFFFF;
}

.issues-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 38px;
    border-radius: 24px;
    background: #FFA014;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}

.issues-btn:hover { background: #FF9100; }

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

    .body-issues { min-height: 0; padding: 0 32px 56px; }

    .issues-watermark {
        max-width: none;
        padding: 0 32px;
        box-sizing: border-box;
        font-size: 58px;
    }

    .issues-container { padding-top: 72px; }

    .issues-title { font-size: 28px; margin-bottom: 40px; }

    .issues-card {
        min-height: 180px;
        padding: 30px 36px;
        gap: 28px;
    }

    .issues-num { font-size: 50px; }
    .issues-card p { font-size: 23px; line-height: 32px; }

    .issues-bottom { margin-top: 44px; }
    .issues-bottom-text { font-size: 23px; line-height: 30px; }

    .issues-decor-wave-tr,
    .issues-decor-wave-r  { width: 360px; }
    .issues-decor-wave-bl,
    .issues-decor-wave-bc { width: 620px; }
}

/* ============================================================
   ПЛАНШЕТ ПОРТРЕТНИЙ  (<= 1024px)
   ============================================================ */
@media (max-width: 1024px) {

    .body-issues { padding: 0 24px 48px; }

    .issues-watermark { font-size: 42px; top: -8px; padding: 0 24px; }

    .issues-container { padding-top: 56px; }

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

    .issues-grid {
        column-gap: 16px;
        row-gap: 20px;
    }

    .issues-card {
        min-height: 150px;
        padding: 24px 26px;
        gap: 20px;
        border-radius: 14px;
    }

    .issues-num { font-size: 40px; }
    .issues-card p { font-size: 18px; line-height: 26px; }

    .issues-bottom { margin-top: 36px; }
    .issues-bottom-text { font-size: 19px; line-height: 26px; }

    .issues-decor-wave-tr,
    .issues-decor-wave-r  { width: 280px; }
    .issues-decor-wave-tr { opacity: 0.7; }
    .issues-decor-wave-r  { opacity: 0.4; }

    .issues-decor-wave-bl,
    .issues-decor-wave-bc { width: 480px; }
    .issues-decor-wave-bl { opacity: 0.45; }
    .issues-decor-wave-bc { opacity: 0.25; }
}

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

    .body-issues { padding: 0 16px 40px; }

    .issues-watermark { font-size: 26px; top: -4px; padding: 0 16px; }

    .issues-container { padding-top: 44px; }

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

    /* картки в один стовпець */
    .issues-grid {
        grid-template-columns: 1fr;
        row-gap: 14px;
    }

    .issues-card {
        min-height: 0;
        padding: 20px;
        gap: 16px;
        border-radius: 12px;
    }

    .issues-num { font-size: 32px; }
    .issues-card p { font-size: 15px; line-height: 22px; }

    /* нижній рядок у стовпець */
    .issues-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-top: 28px;
    }

    .issues-bottom-text { font-size: 16px; line-height: 23px; }

    .issues-btn {
        width: 100%;
        padding: 13px 24px;
    }

    .issues-decor-cross,
    .issues-decor-vline { opacity: 0.5; }
    .issues-decor-wave-tr,
    .issues-decor-wave-r  { width: 200px; }
    .issues-decor-wave-tr { opacity: 0.6; }
    .issues-decor-wave-r  { opacity: 0.35; }

    .issues-decor-wave-bl,
    .issues-decor-wave-bc { width: 360px; }
    .issues-decor-wave-bl { opacity: 0.4; }
    .issues-decor-wave-bc { opacity: 0.2; }
}