/* Site-wide fixes, own code (after leaving Webflow) */

/* Mobile menu: hide the closed drawer — its shadow used to bleed in as a grey strip on the right */
html body .md{visibility:hidden;transition:transform .7s cubic-bezier(.22,1,.36,1),visibility 0s linear .7s}
html.mo body .md{visibility:visible;transition:transform .7s cubic-bezier(.22,1,.36,1)}

@media (max-width:767px){
  /* "Чем я работаю": full-width stacked cards instead of a squeezed carousel */
  html body #skills .cs-wrap{padding-left:20px!important;padding-right:20px!important}
  html body #skills .cs-grid3{margin:0!important;display:grid!important;grid-template-columns:1fr!important;gap:14px!important;overflow:visible!important;padding:0!important;scroll-snap-type:none!important}
  html body #skills .sk-c{width:auto!important;min-width:0!important;max-width:none!important;flex:none!important}
}

@media (max-width:560px){
  /* Art filters: 2×2 segmented control so nothing is cut off */
  html body .ag-filt{display:grid!important;grid-template-columns:1fr 1fr;width:100%;max-width:380px;box-sizing:border-box;border-radius:26px!important;overflow:visible!important}
  html body .ag-filt .ag-f{text-align:center}
}

/* Art filters: chips fill their grid cells */
@media (max-width:560px){
  html body .ag-filt .ag-f{width:100%;box-sizing:border-box}
}

/* About → "Что я переношу": keep the text of a list row together (the no-wrap "2D-арт" used to split off as a separate column) */
html body .ab-li{display:block!important;position:relative;padding-left:34px!important}
html body .ab-li .ab-ck{position:absolute;left:0}

/* Home → DB Navigator tile on phones: the screens strip was only scroll-linked (could not be swiped).
   On touch-size screens it becomes a normal swipeable row with snap. Desktop (mouse) keeps the scroll effect; any touch screen (phone, tablet) gets swipe. */
@media (max-width:767px), (hover:none) and (pointer:coarse){
  html body .ht-db .ht-st{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  html body .ht-db .ht-st::-webkit-scrollbar{display:none}
  html body .ht-db .hs-strip{transform:none!important;padding:0 20px;box-sizing:content-box}
  html body .ht-db .hs-it{scroll-snap-align:center}
}

/* Header on small laptops (992–1279px): keep everything on one line */
@media (min-width:992px) and (max-width:1279px){
  html body .nav{padding-left:28px!important;padding-right:28px!important}
  html body .brand-name{font-size:20px!important;white-space:nowrap}
  html body .nav-links{gap:24px!important}
  html body .nav-link{font-size:15px!important;white-space:nowrap}
  html body .nav .btn-compact{padding:11px 18px!important;font-size:15px!important;white-space:nowrap}
  html body .lsw{margin-right:8px}
}

/* "Чем я работаю" on tablets / small laptops: less side padding so the three cards have room */
@media (min-width:768px) and (max-width:1199px){
  html body #skills .cs-wrap{padding-left:32px!important;padding-right:32px!important}
}

/* Home case tiles on tablets: one tile per row instead of two cramped ones */
@media (min-width:768px) and (max-width:991px){
  html body .ht-row{grid-template-columns:1fr!important}
}

/* "Чем я работаю" on tablets: stacked like on phones (three columns are too narrow for the tags) */
@media (min-width:768px) and (max-width:991px){
  html body #skills .cs-grid3{margin:0 auto!important;display:grid!important;grid-template-columns:1fr!important;gap:16px!important;overflow:visible!important;padding:0!important;max-width:640px}
  html body #skills .sk-c{width:auto!important;min-width:0!important;max-width:none!important;flex:none!important}
}

/* Legal links in the footer */
html body .footer-legal{width:100%;margin:10px 0 0;font-size:13px;color:#8a83a0}
html body .footer-legal a{color:#8a83a0;text-decoration:none}
html body .footer-legal a:hover{color:#2A1A5E}