/**
 * style.css — тільки те, чого немає в дизайні ipu.bet.
 * -------------------------------------------------------------------------
 * Базу (шрифти Gilroy, типографіка, .wrap/.btn/.hdr/.ftr/.cta/.lang-box/.cookie-bar,
 * .step/.case/.calm, кольори) дає css/site.min.css — копія з ipu.bet
 * (public/landing/css/site.min.css), тому ленд виглядає як сторінки сайту.
 * Оновити = скопіювати файл звідти знову, патчити його не треба.
 * Тут лишаються: смуга довіри в hero, малюнок «замок + документи», шапки секцій,
 * сітка карток-ситуацій і відгуків, блок відповідальної гри.
 */

/* На ipu.bet при ≤860px CSS підміняє логотип на квадратний знак (content:url).
   Нам він не потрібен: у шапці ленда лише кнопка й мова, повний логотип вміщається,
   а зайва картинка ставала LCP-елементом на телефоні. */
@media (max-width:860px){.hdr .logo img{content:normal}}

/* На головній ipu.bet H1 зібраний із трьох рядків-<span>, тому там `.hero h1 span{display:block}`.
   У нас H1 — одне речення, у якому <span class="gr"> підсвічує лише кінець фрази. */
.hero h1 span{display:inline}

/* до першого render() з JS (див. index.html) — місце зарезервоване, текст невидимий */
.js-pending .hero{visibility:hidden}
section[id]{scroll-margin-top:80px}

/* смуга довіри під кнопками hero (три пункти з ТЗ) */
/* Три пункти не влазять в один ряд у колонці hero, тому 2 + 1 на всю ширину:
   інакше третій висить напівпорожнім і ряд виглядає обрізаним. */
.trust{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:38px}
.trust__item:last-child{grid-column:1/-1}
.trust__item{display:flex;align-items:center;gap:13px;background:var(--surf);border:1px solid var(--line-2);border-radius:18px;padding:14px 16px}
.trust__ico{width:38px;height:38px;border-radius:12px;background:#ffffff0d;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.trust__title{font-weight:600;font-size:14.5px;letter-spacing:-.01em;line-height:1.35}

/* візуальний якір hero: inline SVG (замок + документи), нічого не вантажиться.
   .hero-art::after на проді — чорна віньєтка завширшки 190% блока: вона розтушовує
   фотографію в тло, але заходить і на колонку тексту, і в нас гасила праві краї H1
   та ліда («rozwiązać» вицвітало в сірий). Малюнок у нас векторний і прозорий,
   розтушовувати нічого. */
.hero-art::after{content:none}
.art-lock{position:relative;z-index:1;width:min(100%,460px);height:auto;filter:drop-shadow(0 34px 60px rgba(0,0,0,.55))}

/* шапка секції: eyebrow + заголовок + лід */
.sec-head{margin-bottom:clamp(28px,3vw,44px);max-width:760px}
.sec-head .lbl{margin-bottom:18px}
.sec-head .lead{margin-top:18px}
.sec-cta{margin:clamp(26px,3vw,40px) 0 0}

/* картки ситуацій: .step з ipu.bet, але три в ряд і без номера */
.steps--3{grid-template-columns:repeat(3,1fr)}
.steps .step h3:last-child{margin-bottom:0}
@media (max-width:1100px){.steps--3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.steps--3{grid-template-columns:1fr}}

/* відгуки: .case з головної ipu.bet, але сіткою, а не каруселлю (без site.min.js) */
.cases--grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cases--grid .case{flex:none;display:flex;flex-direction:column}
.cases--grid .case .res{margin-top:auto;align-self:flex-start}
/* .av на проді стоїть у стосі аватарів і тягне себе вліво; тут він один */
.case-h .av{margin-left:0;flex-shrink:0}
.case-h>span{display:flex;flex-direction:column;min-width:0}
.case-h b{font-size:14.5px;font-weight:600;color:#fff}
@media (max-width:1100px){.cases--grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cases--grid{grid-template-columns:1fr}}

/* відповідальна гра + 18+ */
.calm{display:flex;gap:20px;align-items:center;flex-wrap:wrap;border-radius:var(--r);border:1px solid var(--line-2);background:var(--surf);padding:24px 28px}
.calm__ico{width:52px;height:52px;border-radius:16px;background:#54a7ff14;border:1px solid rgba(84,167,255,.28);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.calm__body{flex:1;min-width:240px}
.calm h3{margin:0 0 6px;font-size:20px}
.calm p{margin:0;color:var(--mut);font-size:14.5px;line-height:1.6}
.calm__cta{display:flex;flex-direction:column;align-items:center;gap:7px}
.calm__note{font-size:12px;color:var(--mut-2)}
.license{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:18px 4px 0;font-size:13px;color:var(--mut)}
.license span:not(.age){flex:1;min-width:240px}
.license a{font-weight:600;color:var(--blue)}
.age i{font-style:normal;border:1.5px solid var(--mut-2);border-radius:7px;padding:1px 6px;font-size:11.5px;font-weight:700;color:#c4c4ce}

/* фінальний блок заявки (розмітка .cta з ipu.bet) */
.lead--cta{margin:0 auto 26px;color:#eaf3ffdb;max-width:620px}
.cta-guard{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:10px 16px;border-radius:12px;background:#ffffff1a;border:1px solid #ffffff2e;color:#fff}

/* футер: колонки посилань як на ipu.bet. Сітка на проді розрахована на 5 колонок,
   у нас їх три (опис + документи + допомога), тому опис не має розтягуватись на пів екрана. */
.ftr-g{grid-template-columns:1.4fr 1fr 1fr;max-width:1100px}
.ftr-g a{display:block;padding:5px 0;font-size:13.5px;color:#a9a9b4}
.ftr .ab{margin:18px 0 0;max-width:320px;font-size:13px;line-height:1.6;color:var(--mut)}

.lang-menu a b{display:inline-block;width:26px;color:var(--mut-2);font-weight:600}

@media (max-width:860px){
  /* Малюнок лишається тільки на десктопі: на телефоні він займав цілий екран перед
     текстом, а до суті треба дійти одразу. */
  .hero-art{display:none}
  .calm{padding:20px}
  .calm__cta{align-items:stretch;width:100%}
  .ftr-g{grid-template-columns:1fr 1fr;max-width:none}
}
@media (max-width:640px){.trust{grid-template-columns:1fr}}
@media (max-width:760px){
  /* Кнопка входу зникає, головна дія лишається: на ipu.bet її ховає бургер із
     мобільним меню, а в реклами інших точок входу немає. */
  .hdr-r>.btn-ghost{display:none}
  .trust{margin-top:26px}
}
/* Кнопка шапки не переноситься (.btn{white-space:nowrap}), а «Uzyskaj konsultację»
   в польській і російській довше за півекрана: на 390px рядок шапки ставав ширшим
   за вікно і вся сторінка їхала вбік. Тому на вузьких екранах коротка назва. */
.hdr-cta__short{display:none}
@media (max-width:560px){
  .hdr-r>.btn-main{display:inline-flex;padding:11px 14px;font-size:13px}
  .hdr-cta__full{display:none}
  .hdr-cta__short{display:inline}
  .hdr-in{gap:12px}
}