/* =========================================================
   WebCoreLab — Mobile Fixes (v1, 22.04.2026)
   Target: all mobile viewports (<=1000px), iOS + Android
   Override for wcl-design-system.css global img sizing trap
   ========================================================= */

/* ------------ 0) Universal safety ------------ */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ------------ 1) LOGO constraint (CRITICAL)  -----
   wcl-design-system.css has `img, video, iframe { max-width: 100% !important; height: auto !important }`
   which overrides the header.php logo rule. On mobile this renders the 1572x843 source PNG
   at full size inside a position:fixed header, blocking every section.
   Fix: force explicit height + max-width with higher specificity + !important.
   -------------------------------------------------- */
@media (max-width: 1000px) {
  .site-logo,
  .site-header-wrap .site-logo,
  .wcl-mainbar .site-logo {
    flex-shrink: 1 !important;
    max-width: 160px !important;
    overflow: hidden !important;
  }
  .site-logo img,
  .site-logo .logo-default,
  .site-header-wrap .site-logo .logo-default,
  .site-header-wrap .site-logo .logo-sticky,
  body .site-logo img {
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
    max-width: 160px !important;
    object-fit: contain !important;
  }
  .site-header-wrap.is-scrolled .site-logo .logo-sticky,
  .site-header-wrap.is-scrolled .site-logo .logo-default {
    height: 34px !important;
    max-height: 34px !important;
    max-width: 140px !important;
  }

  /* Ensure hamburger is always visible & tappable */
  .mobile-trigger,
  #mobile-trigger {
    display: flex !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    z-index: 10002 !important;
  }
  .mobile-trigger span {
    background: #fff !important;
  }
  .page-template-page-light-chess .mobile-trigger span {
    background: #1a1a2e !important;
  }

  /* Mainbar container: fixed padding, proper spacing */
  .wcl-mainbar-inner {
    padding: 0 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 64px !important;
  }
  .wcl-mainbar {
    background: rgba(15,15,20,0.85) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .page-template-page-light-chess .wcl-mainbar {
    background: rgba(255,255,255,0.92) !important;
  }
  .site-header-wrap.is-scrolled .wcl-mainbar-inner {
    height: 54px !important;
  }
}

/* ------------ 2) Hero adjustments  -------------- */
@media (max-width: 768px) {
  .wcl-hero {
    min-height: auto !important;
    padding-top: 72px !important; /* below fixed header */
  }
  .wcl-hero-shapes {
    opacity: 0.35 !important;
  }
  .wcl-hero-video {
    opacity: 0.6 !important;
  }
  .wcl-hero-content {
    padding: 24px 16px !important;
  }
  .wcl-hero h1,
  .wcl-hero-split h1 {
    font-size: clamp(24px, 6.2vw, 32px) !important;
    line-height: 1.15 !important;
    word-break: break-word;
  }
  .wcl-hero-left p,
  .wcl-hero-right p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  .wcl-hero-btn-primary,
  .wcl-hero-btn-outline,
  .wcl-hero-cta a {
    min-height: 48px !important;
    font-size: 13px !important;
    padding: 12px 18px !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ------------ 3) Footer readability on mobile -------- */
@media (max-width: 768px) {
  .wcl-footer,
  footer, footer * {
    font-size: inherit;
  }
  .wcl-footer a,
  footer a,
  .wcl-footer .wcl-footer-col a,
  footer .wcl-footer-col a {
    font-size: 13px !important;
    line-height: 1.45 !important;
    min-height: 0 !important;
    padding: 2px 0 !important;
    display: block;
  }
  /* Links in .wcl-footer-links стеком — compact vertical rhythm */
  .wcl-footer-links li { margin-bottom: 4px !important; }
  .wcl-footer-logo { height: 32px !important; margin-bottom: 10px !important; }
  .wcl-footer-desc, .wcl-footer-contact-addr { font-size: 12px !important; line-height: 1.5 !important; margin-bottom: 8px !important; }
  .wcl-footer-contact a { font-size: 13px !important; margin-bottom: 4px !important; }
  .wcl-footer-social { gap: 8px !important; margin-top: 10px !important; }
  .wcl-footer { padding: 40px 0 0 !important; }
  .wcl-footer-inner { padding: 0 16px !important; }
  .wcl-footer .wcl-footer-col strong,
  .wcl-footer .wcl-footer-col h3,
  .wcl-footer .wcl-footer-col h4 {
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
  }
  .wcl-footer-bottom,
  .wcl-footer-bottom a {
    font-size: 12px !important;
  }
  /* Stack footer columns on narrow screens */
  .wcl-footer-cols,
  .wcl-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px !important;
  }
}
@media (max-width: 480px) {
  /* Task #171 24.04.2026: НЕ стакаем 4 блока в одну колонку (footer был ~1940px). */
  /* Keep 2 cols; first block (logo+address+contacts) spans both — остальные 3 блока в 2x2. */
  .wcl-footer-cols,
  .wcl-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 14px !important;
  }
  .wcl-footer-grid > div:first-child {
    grid-column: 1 / -1 !important;
  }
  .wcl-footer h4 { font-size: 11px !important; letter-spacing: 0.06em !important; margin: 0 0 8px !important; }
  .wcl-footer-links a, .wcl-footer a { font-size: 12px !important; padding: 1px 0 !important; }
}

/* ------------ 4) Social icons / small buttons ------- */
@media (max-width: 768px) {
  .wcl-social-icon,
  .wcl-footer-social a,
  footer .social a,
  [class*="social"] a {
    min-width: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
  }
}

/* ------------ 5) Sections — universal mobile padding & fonts ---------- */
@media (max-width: 768px) {
  section[class*="wcl-s"],
  .wcl-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  section[class*="wcl-s"] [class*="-inner"],
  section[class*="wcl-s"] [class*="-container"],
  section[class*="wcl-s"] > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  h1 { font-size: clamp(26px, 6.4vw, 34px) !important; line-height: 1.2 !important; }
  h2, section h2, [class*="wcl-s"] h2 {
    font-size: clamp(22px, 5.8vw, 30px) !important;
    line-height: 1.22 !important;
    word-wrap: break-word;
  }
  h3 { font-size: clamp(18px, 5vw, 22px) !important; line-height: 1.3 !important; }
  p, li { font-size: 15px !important; line-height: 1.6 !important; }

  /* Tags/pills baseline */
  .wcl-hero-tags span,
  [class*="-tag"], [class*="-pill"], [class*="-chip"] {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
}

/* ------------ 6) Cards & grids stack on mobile ---------- */
@media (max-width: 768px) {
  [class*="wcl-s"] [class*="-grid"],
  [class*="wcl-s"] [class*="-cards"],
  [class*="wcl-s"] [class*="-row"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Allow selected 2-col grids to stay 2-col at 2col:ok intent */
  .wcl-s06-cards,
  .wcl-s08-grid,
  .wcl-s11-brands {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  [class*="wcl-s"] [class*="-card"] {
    padding: 18px 16px !important;
  }
  [class*="wcl-s"] [class*="-card"] img,
  [class*="wcl-s"] [class*="-icon"] img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ------------ 7) Tap targets for all anchor/buttons -------- */
@media (max-width: 1000px) {
  .main-nav > ul > li > a,
  .mobile-sub-links a {
    min-height: 44px !important;
    padding: 12px 18px !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
  }
  .wcl-topnav a,
  .wcl-topbar-right a {
    padding: 10px 8px !important;
    min-height: 36px !important;
  }
}

/* ------------ 8) Forms & inputs mobile friendly ---------- */
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="url"], input[type="search"], input[type="number"],
  textarea, select {
    font-size: 16px !important; /* iOS no-zoom */
    min-height: 48px !important;
    padding: 12px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  textarea { min-height: 120px !important; }
  button, input[type="submit"], .wcl-btn, .button {
    min-height: 48px !important;
    font-size: 14px !important;
    padding: 12px 20px !important;
  }
}

/* ------------ 9) Parallax & BG images — perf & safety  ---- */
@media (max-width: 768px) {
  [class*="wcl-s"][class$="-bg"],
  .wcl-hero-bg {
    background-attachment: scroll !important; /* iOS ignores fixed */
  }
  .wcl-parallax, [data-parallax] {
    transform: none !important;
    will-change: auto !important;
  }
}

/* ------------ 10) Hide/shrink desktop-only decorations ----- */
@media (max-width: 768px) {
  .desktop-only,
  .hide-mobile,
  .wcl-desktop-only {
    display: none !important;
  }
  /* Oversized decorative SVGs often used only as desktop bg */
  .wcl-deco-circle-lg,
  .wcl-hero-orb-xl,
  [class*="deco"][class*="xl"] {
    display: none !important;
  }
}

/* ------------ 11) Safe-area for iOS notch ---------------- */
@supports (padding: max(0px)) {
  .site-header-wrap {
    padding-top: env(safe-area-inset-top, 0);
  }
  .wcl-footer {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0)) !important;
  }
}

/* ------------ 11.4) Kill horizontal-translate animations on mobile (they cause pre-scroll overflow) ----- */
@media (max-width: 900px) {
  .zn-animateInViewport.zn-anim-fadeInRight,
  .zn-animateInViewport.zn-anim-fadeInLeft,
  .zn-anim-fadeInRight,
  .zn-anim-fadeInLeft,
  [class*="fadeInRight"],
  [class*="fadeInLeft"],
  [class*="slideInRight"],
  [class*="slideInLeft"] {
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }
}

/* ------------ 11.5) Portfolio-specific fixes (wclp-*) ----- */
@media (max-width: 900px) {
  .wclp-section-naked,
  .wclp-section-light,
  .wclp-section-dark,
  .wclp-subheader {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  .wclp-container {
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .wclp-g2,
  .wclp-g3,
  .wclp-g4 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .wclp-g2 > *,
  .wclp-details-card,
  .wclp-metrics-row,
  .wclp-gallery,
  .wclp-gallery-zoom {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .wclp-metrics-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .wclp-gallery,
  .wclp-gallery-zoom {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .wclp-gallery img,
  .wclp-gallery-zoom img {
    width: 100% !important;
    height: auto !important;
  }
  .wclp-detail-row,
  .wclp-problems li,
  .wclp-container p,
  .wclp-container li,
  .wclp-container h1,
  .wclp-container h2,
  .wclp-container h3 {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    min-width: 0 !important;
  }
  /* Code blocks inside portfolio: keep internal scroll, not bleed */
  .wclp-section-naked pre,
  .wclp-section-light pre,
  .wclp-section-dark pre {
    max-width: 100% !important;
    overflow-x: auto !important;
    font-size: 12px !important;
  }
  .wclp-subheader h1 {
    font-size: clamp(22px, 5.8vw, 28px) !important;
    line-height: 1.25 !important;
    word-break: break-word;
  }
  .wclp-subheader {
    padding: 120px 16px 40px !important;
  }
}

/* ------------ 12) Prevent horizontal scroll anywhere ------ */
@media (max-width: 768px) {
  section, .wcl-section, article, main, header, footer {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  /* Tables on mobile — allow internal scroll */
  table {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
  }
}

/* ------------ 13) Small viewport (iPhone SE / 360 Android) --- */
@media (max-width: 380px) {
  .wcl-mainbar-inner { padding: 0 10px !important; height: 60px !important; }
  .site-logo img, .site-logo .logo-default {
    height: 36px !important;
    max-width: 140px !important;
  }
  .wcl-hero h1 { font-size: 24px !important; }
  h2, section h2, [class*="wcl-s"] h2 { font-size: 22px !important; }
}