/* Синегор v2.4 — адаптивність: гумові поля, «виріз» iPhone, альбомна орієнтація, зручні для пальця кнопки.
   Підключається останнім на всіх сторінках нового дизайну. */

/* 1. Гумові поля сторінки: плавно 18 → 32 px, і не менше за «виріз»/заокруглення екрана (iPhone в альбомі) */
:root{--gut:clamp(18px,calc(8px + 2.6vw),32px);--gl:max(var(--gut),env(safe-area-inset-left,0px));--gr:max(var(--gut),env(safe-area-inset-right,0px))}
.wrap{padding-left:var(--gl)!important;padding-right:var(--gr)!important}
html,body{max-width:100%;overflow-x:clip}
img,video{max-width:100%}
@media (max-width:980px){
 /* стрічки з горизонтальним гортанням — рівно до країв екрана, без «виступу» */
 .bf-c,#reels .rac-r,.tm3g{margin-left:calc(-1 * var(--gl))!important;margin-right:calc(-1 * var(--gr))!important;padding-left:var(--gl)!important;padding-right:var(--gr)!important;scroll-padding-left:var(--gl)!important}
}

/* 2. Системні зони: нижнє меню, повідомлення, вікна — не заходять під «виріз» і смугу «додому» */
.toast{bottom:calc(30px + env(safe-area-inset-bottom,0px))}
.mdl{padding-top:max(16px,env(safe-area-inset-top,0px))!important;padding-bottom:max(16px,env(safe-area-inset-bottom,0px))!important;padding-left:max(16px,env(safe-area-inset-left,0px))!important;padding-right:max(16px,env(safe-area-inset-right,0px))!important}
.mdl-box{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.rlb .lb-x{top:max(14px,env(safe-area-inset-top,0px))}
@media (max-width:980px){
 .ms-in{left:max(14px,env(safe-area-inset-left,0px));right:max(14px,env(safe-area-inset-right,0px));
  max-height:calc(100% - 92px - 14px - env(safe-area-inset-bottom,0px) - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
}

/* 3. Зручно для пальця: мінімум ≈44 px на кожну ціль, без накладання сусідніх */
@media (pointer:coarse),(max-width:980px){
 .nav .em-a{padding:4px 10px;margin-left:-10px;margin-right:-4px}
 .prs-dots{gap:0!important}
 .prs-dots button{position:relative;width:22px!important;height:40px!important;border-radius:0!important;background:none!important;transition:width .6s cubic-bezier(.22,.9,.24,1)!important}
 .prs-dots button::before{content:"";position:absolute;left:8px;right:8px;top:17px;height:6px;border-radius:3px;background:rgba(17,17,16,.16);transition:background .6s}
 .prs-dots button.on{width:36px!important;background:none!important}
 .prs-dots button.on::before{background:#f5053d}
 .fb{row-gap:0!important}
 .fb a{display:inline-flex;align-items:center;min-height:44px}
 .crumb a,.pcr a,.rel-a{display:inline-block;padding:13px 5px;margin:-13px -5px}
 .q4 a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
 .mnav a,.cl-i{min-height:44px}
}

/* 4. Телефон в альбомній орієнтації: ширину використовуємо раціонально — дві колонки замість стовпчика */
@media (orientation:landscape) and (max-height:540px) and (max-width:980px){
 .hero{min-height:auto!important;padding-top:28px!important}
 .aud,.acc2,.bl3,.sv-aud,.cxa,.g3c,.pmg,.rel-g,.mf2,.cta2-g,ul.sl,.offs,.vx{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
 .aud>*,.bl3>*,.sv-aud>*,.g3c>*,.pmg>*,.rel-g>*,ul.sl>*,.offs>*,.acc2>*,.cta2-g>*{min-width:0;width:auto!important;max-width:none!important}
 /* блок «Опинилися перед фактом обшуку»: текст ліворуч — дія праворуч */
 .urg{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)!important;grid-template-areas:"t1 g" "hr hr" "t2 b"!important;column-gap:28px!important;row-gap:0!important;align-items:center;padding:28px 28px!important}
 .urg>*{grid-row:auto!important;grid-column:auto!important}
 .urg-t1{grid-area:t1!important;font-size:19px!important}
 .urg-g{grid-area:g!important}
 .urg-hr{grid-area:hr!important;margin:22px 0!important}
 .urg-t2{grid-area:t2!important;font-size:15.5px!important}
 .urg-b{grid-area:b!important}
 .urg-g{grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
 .urg .gd{display:grid!important;grid-template-columns:34px minmax(0,1fr);column-gap:14px;row-gap:4px;align-items:center;padding:14px 16px!important;min-height:0!important}
 .urg .gd .fi{grid-row:1/3}
 .urg .gdl{margin:0!important;grid-column:2;white-space:normal!important;font-size:14px}
 .urg .gd-t b{font-size:16px}
 .ms-in{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px;margin:0 auto;bottom:calc(72px + env(safe-area-inset-bottom,0px))!important;max-height:calc(100% - 72px - 12px - env(safe-area-inset-bottom,0px))}
 /* нижнє меню компактніше — більше місця для змісту */
 .nav{bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;padding-top:5px!important;padding-bottom:5px!important}
 .mb,.nav .go{height:44px!important}
 body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))!important}
 .ms-in>a{font-size:20px!important;padding:12px 16px!important}
 /* відео «Коротко про право»: картки за висотою екрана */
 #reels .rc,#reels .rc.on{flex-basis:min(58vw,calc((100svh - 96px) * .6))!important}
 /* плеєр: відео на всю висоту, підпис — праворуч */
 .rlb .lb-w{grid-template-columns:auto minmax(0,300px)!important;gap:22px!important;align-items:center!important;padding:0 var(--gr) 0 var(--gl)!important}
 .rlb .lb-v{height:calc(100svh - 24px)!important;width:auto!important;max-height:none!important}
 .rlb .lb-nav{display:flex!important}
 .rlb .lb-t{font-size:18px!important}
}
@media (orientation:landscape) and (max-height:540px) and (max-width:640px){
 .bento{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .bento>*{grid-column:auto!important;min-width:0}
 .bento>.b6{grid-column:1 / -1!important}
}
/* планшет в альбомі / невеликі ноутбуки — вікно й меню з власною прокруткою, якщо не вміщаються */
@media (max-height:560px){.mdl{align-items:flex-start!important}}

/* 5. Вузькі телефони (320–420 px) */
@media (max-width:420px){
 .bl-c>i{display:none}
 .bl-c{justify-content:center}
 .bl-btn{white-space:normal!important;min-width:0;max-width:100%;text-align:left}
 .p404 .sheet{max-width:calc(100% - 16px)!important}
}

/* 6. v2.4.2 — форма запису: «Формат» завжди в одному рядку з датою і не налазить на поле дати (iOS Safari) */
.mdl .mf2:has(input[type=date]){grid-template-columns:minmax(0,1fr) auto!important;gap:12px!important;align-items:end!important}
.mdl .mf2:has(input[type=date])>label{min-width:0}
.mdl input[type=date]{min-width:0;width:100%;max-width:100%;-webkit-appearance:none;appearance:none;display:block;min-height:46px;box-sizing:border-box}
.mdl input[type=date]::-webkit-date-and-time-value{text-align:left}
.mdl .fmt{flex-wrap:nowrap!important;justify-self:end}
.mdl .fmt legend{white-space:nowrap}

/* 7. v2.4.2 — цитати партнерів на планшеті й телефоні в альбомі: фото ліворуч, текст праворуч (як на десктопі) */
@media (min-width:641px) and (max-width:980px){
 .qz{padding:30px 32px 20px!important}
 .qs{grid-template-columns:clamp(128px,19vw,176px) minmax(0,1fr)!important;grid-template-areas:none!important;gap:0 30px!important;align-items:center!important}
 .qs-b{display:block!important}
 .qs-ph{display:block!important;grid-area:auto!important;width:100%!important;aspect-ratio:4/5!important;border-radius:20px!important;align-self:center}
 .qs-pr{display:block!important;margin-bottom:10px!important;padding-right:64px}
 .qs blockquote{border-left:0!important;padding-left:0!important}
 .qs blockquote p{font-size:clamp(17px,2.3vw,21px)!important;line-height:1.5!important}
 .qs figcaption{display:flex!important;margin-top:14px!important;padding-right:0!important}
 .qs figcaption b{display:inline;font-size:17px}
 .qs figcaption span{display:inline;font-size:15px!important}
 .qz-m{font-size:120px!important;right:22px!important;top:-4px!important}
}
@media (min-width:641px) and (max-width:980px) and (orientation:landscape) and (max-height:540px){
 .qz{padding:22px 26px 14px!important}
 .qs{grid-template-columns:clamp(112px,16vw,150px) minmax(0,1fr)!important;gap:0 24px!important}
 .qs blockquote p{font-size:16.5px!important}
 .qz-t{margin-top:14px!important;padding-top:10px!important}
}

/* 8. v2.4.2 — «Коротко про право» на планшеті й у альбомі: заголовок і компактна картка Instagram поруч, стрічка відео — на всю ширину */
@media (min-width:641px) and (max-width:980px){
 #reels .rac-h{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,330px);column-gap:28px;align-items:end}
 #reels .rac-h h2{grid-column:1}
 #reels .rac-h p{grid-column:1;margin-bottom:0!important}
 #reels .pf{grid-column:2;grid-row:1 / span 2;margin:0!important;padding:12px 14px!important;gap:10px!important;border-radius:18px}
 #reels .pf-av{width:46px;height:46px}#reels .pf-in{width:40px;height:40px}#reels .pf-em{width:19px}
 #reels .pf-id b{font-size:16px}#reels .pf-id span{font-size:12.5px}
 #reels .pf-st{font-size:11.5px}#reels .pf-st b{font-size:15px}
 #reels .pf-bt{padding:9px 12px;font-size:14.5px;border-radius:10px}
 #reels .rc,#reels .rc.on{flex:0 0 clamp(170px,30vw,260px)!important}
}
@media (orientation:landscape) and (max-height:540px) and (max-width:980px){
 /* у альбомі на телефоні: ліворуч — заголовок і картка, праворуч — відео на висоту екрана */
 #reels .rac{grid-template-columns:minmax(0,300px) minmax(0,1fr)!important;gap:24px!important;align-items:center}
 #reels .rac-h{display:flex!important;flex-direction:column;align-items:stretch!important}
 #reels .rac-h h2{font-size:30px}
 #reels .rac-h p{margin:8px 0 14px!important;font-size:15px}
 #reels .pf{grid-column:auto;grid-row:auto}
 #reels .rac-r{margin-left:0!important;padding-left:0!important;scroll-padding-left:0!important}
 #reels .rc,#reels .rc.on{flex:0 0 calc((100svh - 110px) * .6)!important;max-width:220px}
}
@media (orientation:landscape) and (max-height:540px) and (max-width:640px){
 #reels .rac{grid-template-columns:minmax(0,1fr)!important}
}

/* 9. v2.4.3 — плитки другого екрана */
.faces .fx{display:none}
@media (min-width:641px) and (max-width:980px),(orientation:landscape) and (max-height:540px) and (max-width:980px){
 /* «N адвокатів і юристів»: уся команда замість «+N» */
 .b3 .faces .fx{display:block}
 .b3 .faces:has(.fx) .more{display:none!important}
 .b3 .faces{max-width:560px!important}
 .b3 .faces img{margin-left:-2.5%!important}
 .b3 .faces>*:first-child{margin-left:0!important}
 /* «Що саме ми робимо»: заголовок ліворуч, перелік — праворуч */
 .bento .b6.svc{display:grid!important;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto auto 1fr;column-gap:32px;align-items:start}
 .b6.svc>.mono{grid-column:1;grid-row:1}
 .b6.svc>h3{grid-column:1;grid-row:2;margin-top:6px}
 .b6.svc>.svm{grid-column:1;grid-row:3;align-self:end;margin-top:18px}
 .b6.svc>.svl{grid-column:2;grid-row:1 / span 3;align-self:center;margin:0!important}
}
/* телефон в альбомі: «Наш підхід» і три блоки цінностей приховані, як і у вертикальному положенні; плитки — 2×2 */
@media (orientation:landscape) and (max-height:540px) and (max-width:980px){
 #about .shT,#why .vx{display:none!important}
 .bento{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:auto!important;gap:12px!important}
 .bento>*{grid-column:auto!important;grid-row:auto!important;min-width:0}
 .bento>.b6{grid-column:1 / -1!important}
 .bento .b1{min-height:0!important}
 .bento .b4{min-height:300px!important}
 .bento .b2 h3{font-size:24px!important}
 .bento .b2 .mono{padding-right:64px}
}

/* 10. v2.4.3 — команда: по двоє в рядок на планшеті та в альбомі */
@media (min-width:641px) and (max-width:980px),(orientation:landscape) and (max-height:540px) and (max-width:980px){
 .ga.g3,.ga.g4{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:28px!important}
 .ga.g3 .ca:first-child{grid-column:auto!important}
}
@media (orientation:landscape) and (max-height:540px) and (max-width:640px){
 .ga .ca,.ga.g3 .ca:first-child{grid-template-columns:84px minmax(0,1fr)!important;column-gap:14px!important}
 .ga .ca .tn,.ga .ca.big .tn{font-size:18px!important}
}

/* 11. v2.4.3 — блог на телефоні й планшеті: фільтр за автором поруч із пошуком */
@media (max-width:980px){
 .bf-row2 .bf-r{display:flex!important;align-items:center;gap:10px;width:100%}
 .bf-row2 .bf-s{flex:1 1 auto;width:auto!important;min-width:0}
 .adrop{display:block!important;flex:none;position:relative}
 .ad-b{height:52px;padding:0 16px;max-width:min(46vw,250px)}
 .ad-b .ad-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
 .ad-p{width:min(300px,calc(100vw - 2 * var(--gut)));max-height:min(62vh,440px);max-height:min(62dvh,440px);overflow-y:auto;overscroll-behavior:contain}
}

/* 12. v2.4.3 — скринінг у альбомі: запитання ліворуч, прогрес праворуч; варіанти старту — поруч */
@media (orientation:landscape) and (max-height:540px) and (max-width:980px){
 .scr-p .scr-h{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)!important;gap:20px!important;align-items:end;margin-bottom:16px!important}
 .scr-p .scr-h h2{font-size:30px!important}
 .scr-p .scr{display:grid!important;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)!important;gap:14px!important;align-items:start}
 .scr-p .qside{height:auto!important;align-self:start!important}
 .scr-p .qside .score{padding:18px!important;flex:none!important;height:auto!important}
 .scr-p .qside .cats{margin-top:14px!important;padding-top:0!important}
 .scr-p .start{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 .scr-p .start button{padding:14px 16px!important;gap:10px!important;flex-direction:column;align-items:flex-start;justify-content:flex-start}
 .scr-p .start button>span:last-child{display:block}
 .scr-p .start .ic{width:40px;height:40px}
 .scr-p .start b{font-size:17px!important;line-height:1.25}
 .scr-p .start button span span{font-size:14.5px!important;line-height:1.4}
 .scr-p .qq{font-size:22px!important}
 .scr-p .qa{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
 .scr-p .qa button{min-height:52px}
 .scr-p .acts{display:flex;flex-wrap:wrap;gap:10px}
}
/* блог: автор — праворуч від пошуку */
@media (max-width:980px){.bf-row2 .adrop{order:2}}

/* v2.8.1: герб в окремій скляній «монеті» зліва від смуги меню (варіант А).
   Скло смуги перенесено в ::before — тоді «монета» (дочірній елемент) розмиває саму сторінку, а не смугу, і виглядає ідентично */
.nav{--coin-g:10px;left:calc(50% + 36px)!important;padding-left:7.5px!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;border-color:transparent!important}
.nav::before,.nav .em-a{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 1px #fff,0 10px 30px -18px rgba(17,17,16,.3)}
.nav::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none}
.nav .em-a{position:absolute!important;top:-1px;bottom:-1px;right:calc(100% + var(--coin-g));aspect-ratio:1;width:auto;margin:0!important;padding:0!important;display:grid!important;place-items:center;border-radius:50%!important;transition:none!important;transform:none!important}
.nav .em-a .em{width:26px!important}
.nav .em-a:focus-visible{outline:2px solid var(--red);outline-offset:3px}
@media (max-width:980px){
 .nav{--coin-g:8px;left:calc(50% + 39px)!important;width:min(calc(100vw - 24px - 78px),402px)!important;padding-left:8px!important}
 .nav .em-a .em{width:25px!important}
}
@media (max-width:980px) and (max-height:540px){.nav{left:calc(50% + 30px)!important}}