/* ============================================================
   БЛОК CASES («Наші кейси» + стрічка логотипів + «Вигода для всіх»)
   Підключення:
   <link rel="stylesheet" type="text/css" href="{{ asset('public/assets\css\frontend\New_website\cases.css') }}">
   Потрібен також скрипт:
   <script src="{{ asset('assets\js\website\cases.js') }}"></script>

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

.body-cases {
    position: relative;
    width: 100%;
    max-width: 1920px;
    background-image: url('/assets/image/website/body/cases/back for 7 block.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* overflow має бути visible, щоб картка могла «виїхати» вище секції */
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
    padding: 0 0 90px;
}

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

/* ============================================================
   1. БІЛА КАРТКА З КЕЙСОМ
   ============================================================ */

.cases-card {
    position: relative;
    z-index: 2;
    background: #FFFFFF;
    border-radius: 24px;
    padding: 36px 40px 40px;
    box-sizing: border-box;
    box-shadow: 0 24px 60px rgba(0, 10, 30, 0.25);

    /* картка «виїжджає» вгору поверх попередньої секції */
    margin-top: -84px;
}

/* контейнер з кейсами анімовано виїжджає вгору,
   коли блок доходить до половини екрана (клас знімає cases.js) */
.cases-reveal {
    transform: translateY(90px);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.7s ease;
}

.cases-reveal.is-visible {
    transform: translateY(0);
    opacity: 1;
}

/* миттєвий показ без анімації (сторінку відкрили вже нижче блока) */
.cases-reveal.is-no-anim { transition: none; }

/* ---------- шапка: заголовок, навігація, кнопка ---------- */

.cases-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.cases-title {
    margin: 0;
    font-weight: 800;
    font-size: 28px;
    line-height: 34px;
    color: #1D1A37;
}

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

.cases-nav {
    display: flex;
    align-items: center;
    gap: 36px;
}

.cases-nav-btn {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(18, 22, 51, 0.45);
    padding: 4px 0;
    width: 100px;
    height: 40px;
    border-bottom: 1.5px solid rgba(18, 22, 51, 0.2);
    transition: color 0.2s, border-color 0.2s;
    letter-spacing: 0.3px;
}

.cases-nav-btn:hover { color: rgba(18, 22, 51, 1);
    border-bottom: 1.5px solid #E8A824;
    font-weight: 600;
}



.cases-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 26px;
    border-radius: 22px;
    background: #FFFFFF;
    border: 1px solid #2A90FF;
    color: #1D1A37;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    text-decoration: none;
    transition: box-shadow 0.2s;
}

.cases-all-btn:hover { box-shadow: 0 0 14px rgba(42, 144, 255, 0.35); }

/* ---------- слайди кейсів ---------- */

.case-slide { display: none; }

.case-slide.is-active {
    display: block;
    animation: case-slide-in 0.45s ease;
}

@keyframes case-slide-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* шапка кейса */
.case-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(90deg, #D0E5F8 0%, #E8F3FC 60%, #F7FBFF 100%);
    border-radius: 14px 14px 0 0;
    padding: 18px 26px;
}

.case-top-left {
    display: flex;
    align-items: center;
    gap: 18px;
}

.case-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 16px;
    border-radius: 8px;
    background: #FFFFFF;
    border: 1.5px solid #3C96E4;
    color: #2196FF;
    font-weight: 700;
    font-size: 15px;
    line-height: 20px;
}

.case-name {
    margin: 0;
    font-weight: 800;
    font-size: 24px;
    line-height: 30px;
    color: #1D1A37;
}

.case-read-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 20px;
    background: #FFA014;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    text-decoration: none;
    transition: background 0.2s;
}

.case-read-btn:hover { background: #FF9100; }

/* дві колонки: до співпраці / з Neuron24 */
.case-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.case-col {
    padding: 34px 40px 40px;
    box-sizing: border-box;
}

.case-col-before { background: #ECF1F7; }
.case-col-after  { background: #FFFFFF; }

.case-col-title {
    margin: 0 0 28px;
    font-weight: 800;
    font-size: 28px;
    line-height: 34px;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.case-col-before .case-col-title { color: #1D1A37; }
.case-col-after  .case-col-title { color: #2196FF; }

.case-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.case-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 22px;
    font-weight: 500;
    font-size: 17px;
    line-height: 25px;
    color: #1D1F2E;
}

.case-list li:last-child { margin-bottom: 0; }

/* вертикальна риска ліворуч від пункту */
.case-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 3px;
    border-radius: 2px;
}

.case-col-before .case-list li::before { background: #C2CCD8; }
.case-col-after  .case-list li::before { background: #FFA014; }

/* ---------- синя смуга з білими чіпами (безкінечна стрічка) ---------- */

.case-results {
    background: #2A90FF;
    border-radius: 0 0 14px 14px;
    padding: 16px 0;
    overflow: hidden;
}

/* чіпи біля країв смуги РОЗЧИНЯЮТЬСЯ в прозорість:
   маска на доріжці плавно зводить крайні чіпи в нуль,
   сама синя смуга лишається суцільною */
.cases-logos {
    -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    #000 15%,
    #000 85%,
    transparent 100%);
    mask-image: linear-gradient(to right,
    transparent 0,
    #000 15%,
    #000 85%,
    transparent 100%);
}

.case-results-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: cases-marquee-rtl 18s linear infinite;
}

.case-results-group {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 16px;
    flex-shrink: 0;
}

.case-chip {
    flex-shrink: 0;
    padding: 9px 20px;
    border-radius: 8px;
    background: #FFFFFF;
    color: #3198FF;
    font-weight: 700;
    font-size: 15px;
    line-height: 20px;
    white-space: nowrap;
}

@keyframes cases-marquee-rtl {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ============================================================
   2. СТРІЧКА ЛОГОТИПІВ КЛІЄНТІВ
   ============================================================ */

.cases-logos {
    width: 100%;
    background: rgba(5, 20, 48, 0.6);
    margin: 56px 0;
    padding: 34px 0;
    overflow: hidden;
}

/* логотипи біля країв екрана розчиняються в прозорість */
.case-results {
    -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            #000 15%,
            #000 85%,
            transparent 100%
    );
    mask-image: linear-gradient(
            to right,
            transparent 0%,
            #000 15%,
            #000 85%,
            transparent 100%
    );
}

.cases-logos-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: cases-marquee-rtl 24s linear infinite;
}

.cases-logos-group {
    display: flex;
    align-items: center;
    gap: 180px;
    padding-right: 180px;
    flex-shrink: 0;
}

/* логотипи — білі на чорному тлі, screen прибирає чорне;
   притушені, як у макеті */
.cases-logos-group img {
    height: 30px;
    width: auto;
    mix-blend-mode: screen;
    opacity: 0.65;
}

/* ============================================================
   3. «ВИГОДА ДЛЯ ВСІХ»
   ============================================================ */

.benefits-title {
    margin: 0 0 32px;
    font-weight: 800;
    font-size: 28px;
    line-height: 34px;
    color: #FFFFFF;
}

.benefits-title-accent { color: #368EF0; }

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.benefit-col {
    display: flex;
    flex-direction: column;
}

.benefit-col-head {
    display: flex;
    align-items: center;
    background: #2A90FF;
    border-radius: 12px 12px 0 0;
    padding: 26px 30px;
    height: 112px;
    width: 416px;
    font-weight: 800;
    font-size: 22px;
    line-height: 27px;
    color: #FFFFFF;
}

.benefit-cell {
    display: flex;
    align-items: center;
    background: #052754;
    border: 1.5px solid #3C96E4;
    padding: 26px 30px;
    height: 135px;
    width: 416px;
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    color: #FFFFFF;
}

.benefit-cell:last-child { border-radius: 0 0 12px 12px; }

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

    .body-cases { padding: 0 32px 72px; }

    .cases-card { padding: 28px 30px 32px; margin-top: -64px; }

    .cases-title { font-size: 26px; }

    .case-col { padding: 28px 30px 32px; }
    .case-col-title { font-size: 24px; line-height: 30px; margin-bottom: 22px; }
    .case-list li { font-size: 15px; line-height: 23px; margin-bottom: 18px; }

    .case-name { font-size: 21px; }

    .cases-logos { margin: 44px 0; padding: 26px 0; }
    .cases-logos-group { gap: 120px; padding-right: 120px; }
    .cases-logos-group img { height: 26px; }

    .benefits-title { font-size: 26px; }
    .benefit-col-head { font-size: 19px; line-height: 24px; padding: 22px 24px; width: 100% }
    .benefit-cell { font-size: 16px; line-height: 24px; padding: 22px 24px; width: 100%}
}

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

    .body-cases { padding: 0 24px 56px; }

    .cases-card { margin-top: -48px; }

    /* шапка картки переноситься */
    .cases-head { flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
    .cases-title { font-size: 24px; }
    .cases-nav { order: 3; width: 100%; justify-content: flex-start; gap: 24px; }

    /* колонки кейса одна під одною */
    .case-columns { grid-template-columns: 1fr; }

    .case-top { flex-wrap: wrap; padding: 14px 18px; }
    .case-name { font-size: 18px; line-height: 24px; }

    .cases-logos { margin: 36px 0; padding: 20px 0; }
    .cases-logos-group { gap: 80px; padding-right: 80px; }

    /* вигоди в один стовпець */
    .benefits-grid { grid-template-columns: 1fr; gap: 22px; }
    .benefits-title { font-size: 24px; margin-bottom: 22px; }
}

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

    .body-cases { padding: 0 16px 44px; }

    .cases-card { padding: 18px 16px 20px; border-radius: 16px; margin-top: -32px; }

    .cases-title { font-size: 20px; line-height: 26px; }

    .cases-all-btn { padding: 10px 18px; font-size: 13px; }

    .cases-nav-btn { width: 80px; }

    .case-top { border-radius: 10px 10px 0 0; }
    .case-tag { font-size: 13px; padding: 4px 12px; }
    .case-name { font-size: 16px; line-height: 21px; }
    .case-read-btn { padding: 9px 18px; font-size: 13px; }

    .case-col { padding: 20px 16px 24px; }
    .case-col-title { font-size: 19px; line-height: 24px; margin-bottom: 16px; }
    .case-list li { font-size: 14px; line-height: 21px; margin-bottom: 14px; padding-left: 16px; }

    .case-results { padding: 12px 0; border-radius: 0 0 10px 10px; }
    .case-chip { font-size: 13px; padding: 8px 14px; }
    .case-results-track { animation-duration: 14s; }

    .cases-logos { margin: 28px 0; padding: 16px 0; }
    .cases-logos-group { gap: 56px; padding-right: 56px; }
    .cases-logos-group img { height: 22px; }
    .cases-logos-track { animation-duration: 18s; }

    .benefits-title { font-size: 20px; line-height: 26px; }
    .benefit-col-head { font-size: 17px; padding: 18px 20px; border-radius: 10px 10px 0 0; }
    .benefit-cell { font-size: 14px; line-height: 22px; padding: 18px 20px; }
    .benefit-cell:last-child { border-radius: 0 0 10px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .case-results-track,
    .cases-logos-track { animation: none; }

    .cases-reveal {
        transform: none;
        opacity: 1;
        transition: none;
    }

    .case-slide.is-active { animation: none; }
}