/* =========================================================
   DTRANS — CASES PAGE
   ========================================================= */

.dtrans-cases-page { background: var(--dtrans-cream); }

.dtrans-cases-hero {
    position: relative;
    min-height: 640px;
    overflow: hidden;
    background-image:
        linear-gradient(90deg, rgba(13,10,8,.93) 0%, rgba(16,12,10,.85) 29%, rgba(18,14,11,.53) 50%, rgba(18,14,11,.16) 70%, rgba(18,14,11,0) 84%),
        var(--dtrans-cases-hero-image, url("https://dtrans.com.ua/wp-content/uploads/2026/09/Изображение-ChatGPT-30-сент.-2026-г.-11_11_23.jpg"));
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

.dtrans-cases-hero__overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.01),rgba(0,0,0,.12)); pointer-events:none; }
.dtrans-cases-hero__inner { position:relative; z-index:2; min-height:640px; display:flex; align-items:center; }
.dtrans-cases-hero__content { width:min(740px,60%); padding:72px 0; color:#fff; }
.dtrans-cases-hero__eyebrow,.dtrans-cases-kicker { font-size:12px; line-height:1.5; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#d79a62; }
.dtrans-cases-hero__title { max-width:780px; margin:18px 0 22px; color:#fff; font-size:clamp(42px,5vw,74px); line-height:.98; font-weight:800; letter-spacing:-.04em; }
.dtrans-cases-hero__text { max-width:650px; margin:0 0 30px; color:rgba(255,255,255,.88); font-size:18px; line-height:1.55; }
.dtrans-cases-hero__button,.dtrans-cases-bottom__button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 22px; border-radius:10px; color:#fff; text-decoration:none; font-size:14px; line-height:1; font-weight:700; background:linear-gradient(135deg,#c8762f,#9c501f); box-shadow:0 12px 30px rgba(184,115,51,.26); transition:transform .2s ease; }
.dtrans-cases-hero__button:hover,.dtrans-cases-bottom__button:hover { transform:translateY(-2px); }

.dtrans-cases-intro { padding:88px 0 42px; }
.dtrans-cases-intro__head { display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:end; }
.dtrans-cases-intro__head h2,.dtrans-cases-bottom__box h2 { margin:8px 0 0; color:var(--dtrans-espresso); font-size:clamp(30px,3vw,44px); line-height:1.08; font-weight:800; letter-spacing:-.03em; }
.dtrans-cases-intro__head > p { max-width:540px; margin:0; color:var(--dtrans-text-muted); font-size:16px; line-height:1.7; }

.dtrans-cases-list { padding:0 0 98px; }
.dtrans-case-detail { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); min-height:500px; margin-top:24px; overflow:hidden; border:1px solid rgba(58,31,15,.10); border-radius:24px; background:#fffaf4; box-shadow:0 18px 42px rgba(58,31,15,.06); }
.dtrans-case-detail--reverse { grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); }
.dtrans-case-detail--reverse .dtrans-case-detail__media { order:2; }
.dtrans-case-detail--reverse .dtrans-case-detail__content { order:1; }

.dtrans-case-detail__media { position:relative; min-height:500px; background-size:cover; background-position:center; background-repeat:no-repeat; background-color:#3a210f; }
.dtrans-case-detail__shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,7,5,.06) 30%,rgba(16,10,7,.78) 100%); }
.dtrans-case-detail__media-copy { position:absolute; left:30px; right:30px; bottom:28px; z-index:2; color:#fff; }
.dtrans-case-detail__media-copy > span { display:inline-flex; align-items:center; justify-content:center; width:44px; height:36px; margin-bottom:14px; border-radius:10px; background:rgba(255,255,255,.16); backdrop-filter:blur(8px); font-size:14px; font-weight:800; }
.dtrans-case-detail__media-copy h3 { margin:0 0 6px; color:#fff; font-size:34px; line-height:1.05; font-weight:800; letter-spacing:-.03em; }
.dtrans-case-detail__media-copy p { margin:0; color:rgba(255,255,255,.84); font-size:14px; line-height:1.5; }

.dtrans-case-detail__content { display:flex; flex-direction:column; justify-content:center; padding:42px 44px; }
.dtrans-case-detail__label { margin-bottom:8px; color:#b5682d; font-size:11px; line-height:1.4; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.dtrans-case-detail__task { margin:0 0 28px; color:var(--dtrans-espresso); font-size:20px; line-height:1.55; font-weight:700; }
.dtrans-case-detail__list { margin:0 0 30px; padding:0; list-style:none; }
.dtrans-case-detail__list li { position:relative; margin:0 0 11px; padding-left:25px; color:var(--dtrans-text-muted); font-size:14px; line-height:1.55; }
.dtrans-case-detail__list li::before { content:"✓"; position:absolute; left:0; top:0; color:#bd6d2d; font-weight:800; }
.dtrans-case-detail__result { margin-top:auto; padding:22px 24px; border:1px solid rgba(181,104,45,.16); border-radius:16px; background:#f8ede2; }
.dtrans-case-detail__result p { margin:0; color:var(--dtrans-espresso); font-size:15px; line-height:1.65; font-weight:600; }

.dtrans-cases-bottom { padding:0 0 100px; }
.dtrans-cases-bottom__box { display:grid; grid-template-columns:1fr auto; gap:50px; align-items:center; padding:38px 42px; border-radius:22px; background:linear-gradient(135deg,#4b210c,#6c3215 60%,#8e4c1f); box-shadow:0 18px 42px rgba(58,31,15,.13); }
.dtrans-cases-bottom__box h2 { color:#fff; }
.dtrans-cases-bottom__box p { max-width:760px; margin:14px 0 0; color:rgba(255,255,255,.76); font-size:15px; line-height:1.65; }
.dtrans-cases-bottom__box .dtrans-cases-kicker { color:#e8b887; }
.dtrans-cases-bottom__button { white-space:nowrap; background:#c8742f; box-shadow:none; }

@media (max-width: 900px) {
    .dtrans-cases-hero,.dtrans-cases-hero__inner { min-height:570px; }
    .dtrans-cases-hero__content { width:72%; }
    .dtrans-cases-intro__head { grid-template-columns:1fr; gap:20px; }
    .dtrans-case-detail,.dtrans-case-detail--reverse { grid-template-columns:1fr; }
    .dtrans-case-detail--reverse .dtrans-case-detail__media,.dtrans-case-detail--reverse .dtrans-case-detail__content { order:initial; }
    .dtrans-case-detail__media { min-height:360px; }
    .dtrans-cases-bottom__box { grid-template-columns:1fr; gap:28px; }
}

@media (max-width: 600px) {
    .dtrans-cases-hero { min-height:600px; background-position:65% center; }
    .dtrans-cases-hero__inner { min-height:600px; align-items:flex-end; }
    .dtrans-cases-hero__content { width:100%; padding:80px 0 52px; }
    .dtrans-cases-hero__title { font-size:42px; }
    .dtrans-cases-hero__text { font-size:16px; }
    .dtrans-cases-intro { padding:60px 0 32px; }
    .dtrans-case-detail { border-radius:18px; }
    .dtrans-case-detail__media { min-height:300px; }
    .dtrans-case-detail__media-copy { left:22px; right:22px; bottom:22px; }
    .dtrans-case-detail__media-copy h3 { font-size:28px; }
    .dtrans-case-detail__content { padding:30px 22px; }
    .dtrans-case-detail__task { font-size:18px; }
    .dtrans-case-detail__result { padding:18px; }
    .dtrans-cases-bottom { padding-bottom:70px; }
    .dtrans-cases-bottom__box { padding:30px 24px; border-radius:18px; }
    .dtrans-cases-bottom__button { width:100%; }
}