/* ===== Patch overrides ===== */

/* 1. Vertical cards: show screenshot in full (letterbox), remove grayscale, hide decorative clutter */
.project-strip .bg-img,
body:not(.is-slider-dragging) .project-strip:hover .bg-img,
.project-strip:hover .bg-img {
  object-fit: cover !important;
  object-position: top center !important;
  background: #0a0a0a !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Dim the gradient overlay so image stays readable */
.project-strip:after { background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.85) 100%) !important; }

/* Kill decorative barcode, tech header, huge bg number */
.strip-barcode,
.list-item-barcode,
.strip-tech-header,
.strip-bg-num { display: none !important; }

/* Title: allow wrapping instead of truncating */
.strip-title,
.list-item-title {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  font-size: 1.35rem !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

/* 2. List-view rows (the horizontal list variant) */
.list-item-bg-img,
.project-list-item:hover .list-item-bg-img,
.project-list-item .list-item-bg-img {
  object-fit: cover !important;
  object-position: top center !important;
  background: #0a0a0a !important;
  filter: none !important;
}

/* 3. Detail viewer: make the site screenshot visible as a real image, not a dim bg */
.viewer-slide-wrapper { background: #050505 !important; }
.viewer-bg { display: none !important; }
/* Soften overlays so bg image is readable */
.project-details-overlay { background: rgba(5,5,5,0.55) !important; }

/* Put main project screenshot above the text blocks */
.data-main .img-display[data-img-type="main"] { order: -1 !important; }

/* Hero title: equalize visual width of first/last name across languages.
   RU: АЛЕКСАНДР (9) / ПРОЗУМЕНЩИКОВ (13) — 9/13 ≈ 0.69
   EN: ALEXANDER (9) / PROZUMENSHCHIKOV (16) — 9/16 ≈ 0.56 */
.hero-title { font-size: 5.5vw !important; }
html[lang="ru"] .hero-layer-front { font-size: 0.69em !important; }
html[lang="en"] .hero-layer-front { font-size: 0.56em !important; }

/* Remove viewfinder/scanner overlay on profile photo */
.scanner-grid-overlay-profile,
.face-target-box-profile,
.ft-corner-profile,
.scan-data-profile,
.scanner-frame-profile:before,
.scanner-frame-profile:after,
.scanner-line { display: none !important; }
.photo-img-profile { filter: none !important; }

/* Audit stage 4: keep language switcher reachable on mobile while other HUD data stays hidden */
@media (max-width: 900px) {
  .hud-tr {
    display: block !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 12000 !important;
  }

  .hud-tr > span,
  .hud-tr > br {
    display: none !important;
  }

  .hud-tr .lang-switcher-static {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 768px) {
  .hero {
    height: auto !important;
    min-height: 72vh !important;
    padding: 5rem 1rem 2.5rem !important;
  }

  .hero-title {
    font-size: 14vw !important;
    margin-bottom: 0.75rem !important;
  }

  .hero-label {
    margin-bottom: 1.25rem !important;
  }

  .hero-subtitle {
    margin-top: 1.25rem !important;
    font-size: 1rem !important;
  }
}

body:not(.is-loaded) main {
  visibility: hidden !important;
}

/* =====================================================================
   MOBILE UX/UI FIXES (audit stage 5)
   All rules below ONLY apply on mobile viewports (≤480px).
   Desktop (>480px) is NOT affected.
   ===================================================================== */

@media (max-width: 480px) {
  /* 1. KILL HORIZONTAL SCROLL — overlay layers were 11px wider than viewport */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* 2. PROJECT CARD TITLES — add dark backdrop so text is readable on screenshots,
        and force wrapping for long names like "CryptoVault — Криптобиржа" */
  .strip-title,
  .list-item-title {
    background: rgba(0, 0, 0, 0.65) !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    max-width: calc(100% - 24px) !important;
    font-size: 1.15rem !important;
    line-height: 1.2 !important;
    box-decoration-break: clone !important;
    -webkit-box-decoration-break: clone !important;
  }

  /* 3. RU/EN BUTTONS — enlarge tap target from 17×18px to 44×44px (Apple HIG / Material) */
  .lang-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 4. HIDE "CASE FILE: AP-26 / STATUS: GRADUATING" text in HUD top-right
        (it overlaps with RU/EN buttons on small screens).
        Keep .lang-switcher-static visible by restoring its font-size. */
  .hud-tr {
    font-size: 0 !important;
  }
  .hud-tr .lang-switcher-static,
  .hud-tr .lang-switcher-static * {
    font-size: 13px !important;
  }

  /* 5. SLIDER/LIST view-mode buttons — were 16px tall with 10px font, too small */
  .view-mode-btn {
    min-height: 40px !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
  }
  .view-mode-btn span {
    font-size: 12px !important;
  }

  /* 6. KWORK / EMAIL contact links — match visual weight of TELEGRAM CTA */
  .social-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 12px 18px !important;
    font-size: 14px !important;
    border: 1px solid rgba(255, 0, 60, 0.35) !important;
    border-radius: 4px !important;
    margin: 6px 4px !important;
  }

  /* 7. HERO CONTENT — was a fixed 495px wide block overflowing the 375px viewport.
        Constrain it to viewport width so title and subtitle don't get clipped by overflow-x:hidden. */
  .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }
  .hero-title {
    width: 100% !important;
    max-width: 100% !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    font-size: 11vw !important;
  }
  /* Front layer (ПРОЗУМЕНЩИКОВ / PROZUMENSHCHIKOV) — keep tight ratio so the long surname fits.
     Lang-agnostic on mobile so it works regardless of browser locale detection. */
  .hero-layer-front {
    font-size: 0.62em !important;
    letter-spacing: -0.04em !important;
    display: inline-block !important;
    max-width: 100% !important;
  }
  .hero-subtitle {
    font-size: 0.92rem !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 8. RED DIAGONAL THREAD — dim it on mobile so it doesn't cross text */
  .thread-container svg {
    opacity: 0.35 !important;
  }

  /* 9. ID DATA GRID (РОЛЬ / УРОВЕНЬ / Родной язык / Доп. язык) —
        equalize cell heights so 2-line "FULLSTACK-РАЗРАБОТЧИК" doesn't break grid */
  .id-data-grid {
    align-items: start !important;
  }
  .id-data-grid > div {
    min-height: 56px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }
}