/* ========================================
   MOBILE RESPONSIVE — Avalon Auto Service
   ======================================== */

/* GLOBAL: Header stays visible at top when scrolling */
.hdr, header.hdr {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000;
  background: var(--bg, #070707) !important;
}
body {
  padding-top: 75px !important;
}

/* GLOBAL: Service card numbers — restored to top-right corner */
.srv-card__n{
  top: 0px !important;
  transform: skewX(5deg) !important;
}
.srv-card:hover .srv-card__n{
  top: 0px !important;
  transform: skewX(5deg) !important;
}

/* GLOBAL: Advantage block numbers — vertically centered */
.adv-num{
  align-self: center !important;
}

/* GLOBAL: Works section — reduce top padding to center heading visually */
.wrk{padding-top:75px !important}

.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:1002;padding:8px;background:none;border:none}
.burger span{display:block;width:26px;height:2px;background:#fff;transition:all .3s}
.burger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* HEADER SOCIAL — hidden on desktop */
.hdr__social{display:none}

/* MOBILE OVERLAY */
.mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:999;opacity:0;transition:opacity .3s}
.mob-overlay.active{display:block;opacity:1}

/* HEADER SOCIAL ICONS — in flow, next to phone */
.hdr__icons{position:absolute;right:40px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:14px}
.hdr__icons a{display:flex;align-items:center;justify-content:center;transition:transform .2s}
.hdr__icons a:hover{transform:scale(1.15)}
.hdr__icons svg path{fill:#00A3FF;transition:fill .3s}
.hdr__icons a:hover svg path{fill:#fff;filter:drop-shadow(0 0 6px #00A3FF)}

/* ========================
   TABLET — max 1200px
   ======================== */
@media(max-width:1200px){
  .container{padding:0 24px}
  .hdr .container{padding:0 24px}
  .hdr__nav{gap:24px}
  .hdr__nav a{font-size:15px}
  .hdr__phone{font-size:17px}
  .hdr__icons svg{width:22px;height:22px}
  .hdr__icons{gap:12px}
  .srv-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .wrk-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .adv-list{gap:24px}
  .hero__title{font-size:clamp(48px,7vw,100px)}
  .abt .container{gap:40px}
  .abt-text h2{font-size:42px}
  .cnt-grid{gap:30px}
  .stats-grid{flex-wrap:wrap;gap:40px;justify-content:center}
}

/* ========================
   COMPACT TABLET — max 1000px
   ======================== */
@media(max-width:1000px){
  .hdr__nav{gap:16px}
  .hdr__nav a{font-size:14px;letter-spacing:0}
  .hdr__phone{font-size:15px}
  .hdr__logo{font-size:32px}
  .hdr__logo-img{height:65px}
  .hdr__icons svg{width:20px;height:20px}
  .hdr__icons{gap:10px}
}

/* ========================
   PRE-MOBILE — max 900px
   ======================== */
@media(max-width:900px){
  .hdr__nav{gap:12px}
  .hdr__nav a{font-size:13px}
  .hdr__phone{font-size:14px}
  .hdr__icons svg{width:18px;height:18px}
  .hdr__icons{gap:8px}
}

/* ========================
   MOBILE — max 768px
   ======================== */
@media(max-width:768px){
  /* GLOBAL — prevent horizontal overflow */
  html,body{overflow-x:hidden;width:100%}
  .container{padding:0 16px;max-width:100%;overflow-x:hidden}

  /* HEADER */
  .burger{display:flex}
  .hdr{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;z-index:1000;background:var(--bg) !important}
  body{padding-top:60px !important}
  .hdr .container{padding:0 16px;height:60px}
  .hdr__logo{font-size:28px;height:60px}
  .hdr__logo-img{height:60px}
  .hdr__nav{
    position:fixed;top:0;right:-100%;width:280px;height:100vh;
    flex-direction:column;background:#0a0a0a;padding:80px 30px 30px;
    gap:0;z-index:1000;transition:right .35s ease;
    border-left:1px solid #222;overflow-y:auto
  }
  .hdr__nav.open{right:0}
  .hdr__nav a{padding:16px 0;font-size:16px;border-bottom:1px solid #1a1a1a;width:100%}
  .hdr__phone{display:none}
  .hdr__icons{display:none}
  .social-float{display:none !important}

  /* HEADER SOCIAL — show inline on mobile (small icons next to burger) */
  .hdr__social{display:flex;align-items:center;gap:12px;margin-left:auto;margin-right:12px}
  .hdr__social a{display:flex;align-items:center;justify-content:center;transition:transform .2s}
  .hdr__social a:hover{transform:scale(1.15)}
  .hdr__social svg{width:20px;height:20px}

  /* HERO */
  .hero{min-height:auto;overflow:hidden;padding:40px 0 20px}
  .hero .container{align-items:center}
  .hero__bg{background-size:cover !important;background-position:center 40% !important;transform:scale(1) !important}
  .hero--kuzovnoj .hero__bg{background-position:25% center !important}
  .hero__bg::after{display:none}
  .hero__content{max-width:100%;padding:0 8px;display:flex;flex-direction:column;align-items:center}
  .hero__title{font-size:clamp(36px,10vw,60px);margin-top:40px;margin-bottom:40px}
  .hero__title em{-webkit-text-stroke:1px var(--red)}
  .hero__desc{font-size:15px;margin-bottom:0}
  .hero__eyebrow{font-size:10px;padding:5px 12px;margin-bottom:14px}
  .hero__actions{flex-direction:column;gap:8px;align-items:center;margin-top:40px;padding-bottom:30px}
  .btn-race{padding:14px 28px;font-size:14px;transform:skewX(0)}
  .btn-race span{transform:skewX(0)}
  .btn-outline{padding:12px 28px;font-size:14px;transform:skewX(0)}
  .btn-outline span{transform:skewX(0)}
  .hero__stripe{display:block;width:70px !important;right:2% !important}

  /* MARQUEE */
  .marquee{padding:10px 0;margin:30px 0 22px;overflow:hidden}
  .marquee-track span{font-size:15px;padding:0 20px;letter-spacing:1px}

  /* SERVICES */
  .srv{padding:0 0 60px}
  .sec-title{font-size:28px;margin-top:40px;margin-bottom:40px}
  .srv-grid{grid-template-columns:1fr;gap:16px}
  .srv-card{padding:30px 24px;min-height:220px;transform:skewX(0) !important;transition:background-color .15s ease,box-shadow .15s ease,border-color .15s ease;overflow:hidden}
  .srv-card > *{transform:skewX(0) !important}
  /* Сброс skew у фонового блока — убирает искажение при нажатии */
  .srv-card__bg{transform:skewX(0) scale(1) !important;transition:opacity .2s ease !important}
  .srv-card:hover{transform:skewX(0) !important}
  /* Touch: палец на карточке — ярче, синяя рамка, число светится */
  .srv-card.touch-active,
  .srv-card:active{
    background-color:#1a1a1a !important;
    border-color:#00A3FF !important;
    box-shadow:0 0 0 2px rgba(0,163,255,0.5),0 8px 28px rgba(0,163,255,0.25) !important;
    transform:skewX(0) !important
  }
  .srv-card.touch-active .srv-card__bg,
  .srv-card:active .srv-card__bg{
    opacity:0.65 !important;
    transform:skewX(0) scale(1) !important
  }
  .srv-card.touch-active .srv-card__n,
  .srv-card:active .srv-card__n{
    color:#00A3FF !important;
    -webkit-text-stroke:0 !important;
    opacity:1 !important;
    text-shadow:0 0 24px rgba(0,163,255,0.9)
  }
  .srv-card.touch-active h3,
  .srv-card:active h3{color:#fff}
  .srv-card__n{font-size:40px;right:12px}
  .srv-card h3{font-size:22px}
  .srv-card p{font-size:14px}

  /* ABOUT */
  .abt{padding:50px 0}
  .abt .container{grid-template-columns:1fr;gap:30px}
  .abt-img{transform:skewX(0);border-left-width:3px;display:inline-block;width:100%;line-height:0}
  .abt-img img{transform:skewX(0) scale(1);height:300px;display:block;width:100%;object-fit:cover}
  .abt-text h2{font-size:36px}
  .abt-text p{font-size:15px}
  .abt-tags{gap:8px}
  .abt-tag{padding:6px 12px;font-size:11px;transform:skewX(0)}
  .abt-tag span{transform:skewX(0)}

  /* STATS */
  .stats{padding:40px 0}
  .stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
  .stat-item{display:flex;flex-direction:column;align-items:center;text-align:center}
  .stat-n{font-size:48px;text-align:center}
  .stat-l{font-size:12px;letter-spacing:1px;text-align:center}

  /* WORKS */
  .wrk{padding:0 0 40px}
  .wrk-grid{grid-template-columns:1fr;gap:12px}
  .wrk-item{height:250px;transform:skewX(0)}
  .wrk-item img{transform:skewX(0) scale(1.05)}
  .wrk-item:hover img{transform:skewX(0) scale(1)}
  .wrk-label{opacity:1;transform:translateY(0) skewX(0)}
  .wrk-label h4{font-size:18px}

  /* ADVANTAGES */
  .adv{padding:0 0 60px}
  .adv-list{grid-template-columns:1fr;gap:16px}
  .adv-item{padding:20px;gap:16px;align-items:center}
  .adv-num{font-size:36px}
  .adv-text h4{font-size:20px}
  .adv-text p{font-size:14px}

  /* ADV-CARD (philosophy blocks on service pages) */
  .adv-grid{grid-template-columns:1fr !important;gap:16px !important}
  .adv-card{padding:24px 20px !important;min-height:auto !important;transform:skewX(0) !important}
  .adv-card > *{transform:skewX(0) !important}

  /* CTA */
  .cta-sec{padding:50px 16px;overflow:hidden}
  .cta-sec h2{font-size:32px;line-height:1.1}
  .cta-sec p{font-size:15px;margin-bottom:20px}
  .btn-black{transform:skewX(0);padding:14px 30px;font-size:14px}
  .btn-black span{transform:skewX(0)}

  /* CONTACTS */
  .cnt{padding:40px 0}
  .cnt-grid{grid-template-columns:1fr;gap:16px}
  .cnt-info{padding:24px 16px;border:1px solid var(--border)}
  .cnt-info h3{font-size:20px;margin-bottom:20px;line-height:1.3}
  .cnt-info::before,.cnt-info::after{display:none}
  .c-row{margin-bottom:18px}
  .c-row__l{font-size:14px;margin-bottom:3px}
  .c-row__v{font-size:15px}
  .cf-wrap{padding:24px 16px;border:1px solid var(--border)}
  .cf-wrap::before,.cf-wrap::after{display:none}
  .cf input,.cf textarea{padding:12px 14px;font-size:14px}
  .cf textarea{height:100px}
  .cf button{transform:skewX(0);width:100%;padding:14px;font-size:14px}
  .cf button span{transform:skewX(0)}
  .cf label{white-space:normal !important;font-size:13px !important;line-height:1.4}
  .social-pills{gap:8px;flex-wrap:wrap;justify-content:center}
  .social-pill{min-width:0;flex:0 0 calc(50% - 4px);width:calc(50% - 4px);font-size:12px;padding:14px 6px;justify-content:center;flex-direction:column;text-align:center;gap:8px}

  /* SOC BANNER (contacts page) */
  .soc-banner{padding:40px 0}
  .soc-banner__title{font-size:24px !important;margin-bottom:30px !important}
  .soc-banner__icons{gap:12px !important;justify-content:center !important;flex-wrap:wrap !important}
  .soc-banner__link{flex:0 0 calc(50% - 6px) !important;width:calc(50% - 6px) !important;padding:20px 10px !important;font-size:11px !important;gap:10px !important;transform:skewX(0) !important}
  .soc-banner__link svg{width:36px !important;height:36px !important}
  .soc-banner__link > *{transform:skewX(0) !important}
  /* FOOTER */
  .ftr{padding:30px 0}
  .ftr .container{flex-direction:column;gap:20px;text-align:center}
  .ftr__logo{font-size:28px;transform:skewX(0)}
  .ftr__links{flex-direction:column;gap:12px}
  .ftr__links a{font-size:12px}
  .ftr__copy{font-size:12px}

  /* VACANCY CARDS */
  .job-card{flex-direction:column !important}
  .job-left{border-right:none !important;border-bottom:1px solid var(--border);padding:24px 20px !important}
  .job-right{width:100% !important;padding:24px 20px !important}
  .job-num{font-size:50px;margin-bottom:10px;margin-top:-10px;transition:color .2s,-webkit-text-stroke .2s,text-shadow .2s}
  /* Touch: number lights up in blue when finger held on card */
  .job-card:active .job-num{
    color:#00A3FF !important;
    -webkit-text-stroke:0 !important;
    text-shadow:0 0 20px rgba(0,163,255,0.7)
  }
  .job-card:active{
    border-color:#00A3FF;
    box-shadow:0 8px 24px rgba(0,163,255,0.2)
  }
  .job-title{font-size:20px;margin-bottom:18px}
  .job-ul li{font-size:14px;line-height:1.5}
  .job-salary{font-size:22px;padding-top:12px}
  .job-right .btn-race{width:100%;text-align:center;justify-content:center;display:flex}

  /* GALLERY (PDR page) — mobile optimisation */
  .pdr-gallery{padding:24px 0 16px !important}
  .pdr-gallery .sec-title{margin-top:0 !important;margin-bottom:43px !important}
  /* Wrapper: padding = arrow zone */
  .gallery-slider-wrap{padding:0 36px !important;max-width:100% !important}
  /* One full-width slide at a time — width set by JS in px, gap must be 0 to match G=0 in JS */
  .gallery-track{gap:0 !important}
  .gallery-slide{border-radius:4px}
  .gallery-slide img{height:auto !important;width:100%;display:block}
  /* Arrows: smaller, symmetric */
  .gallery-btn{width:28px !important;height:28px !important;box-shadow:0 2px 8px rgba(0,0,0,.5) !important}
  .gallery-btn svg{width:14px !important;height:14px !important}
  .gallery-btn-prev{left:4px !important}
  .gallery-btn-next{right:4px !important}
  /* PDR price section — override inline padding:80px, center heading */
  section.srv[style*="80px"]{padding:16px 0 16px !important}
  section.srv[style*="80px"] .sec-title{margin-top:-8px !important;margin-bottom:43px !important}

  section[style*="padding:80px"] {padding:40px 16px !important}

  /* PRICE TABLE (PDR page) — compact 4-column layout */
  .price-table{width:100%;table-layout:fixed}
  .price-table thead th{font-size:10px !important;padding:10px 4px !important;letter-spacing:0 !important;line-height:1.3}
  .price-table tbody td{font-size:11px !important;padding:10px 4px !important}
  .price-table tbody td:first-child{font-size:11px !important}
  .price-table tbody td:last-child{font-size:11px !important}

  /* PDR TABS — compact mobile layout */
  /* Icons: 4 per row, 2 rows */
  .wrp-tabs__click{
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:6px !important;
    padding:10px !important;
    justify-content:space-between
  }
  .wrp-tabs__item{
    flex:unset !important;
    margin:0 !important;
    font-size:10px !important;
    display:flex;flex-direction:column;align-items:center;text-align:center
  }
  .wrp-tabs__item .divv{height:32px !important;margin-bottom:4px}
  .wrp-tabs__item .divv img{height:28px !important;width:auto}
  .wrp-tabs__item:after{display:none !important}

  /* Technique list: horizontal pills wrapping in 2 rows */
  .wrp-tabs-wrp{flex-direction:column !important}
  .wrp-tabs-wrp-l{width:100% !important;margin-bottom:12px}
  .wrp-tabs-wrp-r{width:100% !important;padding-left:0 !important;padding-top:0 !important}
  .wrp-tabs-wrapper-menu ul{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    padding:0 !important
  }
  .wrp-tabs-wrapper-menu ul li{
    flex:0 0 calc(25% - 6px) !important;
    list-style:none !important
  }
  .wrp-tabs-wrapper-menu ul a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    font-size:12px !important;
    padding:8px 4px !important;
    border:1px solid var(--border) !important;
    border-bottom:1px solid var(--border) !important;
    border-radius:2px !important;
    background:#111 !important;
    line-height:1.2 !important
  }
  .wrp-tabs-wrapper-menu ul a:hover,
  .wrp-tabs-wrapper-menu ul .active a{
    background:rgba(0,163,255,0.15) !important;
    color:var(--red) !important
  }
  .wrp-tabs-wrapper-menu ul .active a:before{display:none !important}

  h2.h1-tpl{font-size:26px !important}
  .h1-tpl .h1-tpl-dop{font-size:16px !important}
  .h1-tpl-dop:before,.h1-tpl-dop:after{display:none !important}

  /* VERSION SWITCHER */
  .vsw{display:none !important}
}

/* ========================
   SMALL PHONES — max 480px
   ======================== */
@media(max-width:480px){
  .hero{min-height:60vh}
  .hero__title{font-size:clamp(28px,9vw,44px)}
  .hero__desc{font-size:14px}
  .sec-title{font-size:24px;margin-bottom:40px}
  .abt-text h2{font-size:28px}
  .stat-n{font-size:40px}
  .cta-sec h2{font-size:28px}
  .cnt-info h3{font-size:22px}
  .job-title{font-size:18px}
  .job-salary{font-size:20px}
  .social-pill{flex:1 1 calc(50% - 6px);font-size:10px}
}

/* ========================
   TOUCH DEVICES — :active replaces :hover for cards
   ======================== */
@media (hover: none) and (pointer: coarse) {
  .service-card:active .service-card__img {
    transform: scale(1.08);
  }
  .service-card:active .service-card__overlay {
    background: linear-gradient(180deg,
      rgba(26,95,255,0.1) 0%,
      rgba(10,10,15,0.9) 100%
    );
  }
  .service-card:active .service-card__desc {
    opacity: 1;
    transform: translateY(0);
  }
  .service-card:active .service-card__arrow {
    opacity: 1;
    border-color: var(--blue-primary);
    background: var(--blue-glow);
  }
}