/* Volynets IT — mobile layout v4.0
 * Dedicated phone composition for 320–620px.
 * Goal: near-full viewport width, compact typography, readable cards, clear tap targets.
 * Sandbox only until explicit approval.
 */

@media (max-width: 620px) {
  :root {
    --vit-header-height: 66px;
  }

  html,
  body {
    overflow-x: hidden !important;
  }

  /* Mobile header: compact, but still easy to use. */
  body.page header .wp-block-group.alignwide {
    min-height: 66px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  body.page header .wp-block-site-title,
  body.page header .wp-block-site-title a {
    font-size: 22px !important;
    line-height: 1.1 !important;
  }

  body.page header .wp-block-navigation__responsive-container-open,
  body.page header .wp-block-navigation__responsive-container-close {
    width: 46px !important;
    height: 46px !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }

  /* Break Gutenberg's narrow content constraint on phones.
     Keep only 10px of safe space at each viewport edge. */
  body.page .wp-block-post-content {
    width: calc(100vw - 20px) !important;
    max-width: none !important;
    margin-left: 50% !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: translateX(-50%);
  }

  body.page:not(.page-id-40) .wp-block-post-title {
    width: calc(100vw - 20px) !important;
    max-width: none !important;
    margin-left: 50% !important;
    margin-right: 0 !important;
    transform: translateX(-50%);
  }

  .vit-inner-page > .wp-block-group,
  .page-id-40 .vit-hero-v32-shell,
  .page-id-40 .vit-audience-section,
  .page-id-40 .vit-services-section,
  .page-id-40 .vit-process-section,
  .page-id-40 .vit-final-cta {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Homepage hero */
  .page-id-40 .vit-hero-v32-shell {
    margin-bottom: 14px !important;
    padding: 22px 18px !important;
    border-radius: 18px !important;
  }

  .vit-hero-v32 {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .vit-hero-v32__eyebrow,
  .vit-quick-nav__label {
    margin-bottom: 9px !important;
    font-size: 9px !important;
    letter-spacing: .12em !important;
  }

  .vit-hero-v32 h1 {
    max-width: none !important;
    font-size: clamp(29px, 8.2vw, 33px) !important;
    line-height: 1.07 !important;
    letter-spacing: -.026em !important;
  }

  .vit-hero-v32__lead {
    margin-top: 18px !important;
    font-size: 15.5px !important;
    line-height: 1.52 !important;
  }

  .vit-hero-v32__sub {
    margin-top: 10px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .vit-hero-v32__actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 20px !important;
  }

  .vit-btn {
    width: 100% !important;
    min-height: 46px !important;
    padding: 10px 16px !important;
    border-radius: 11px !important;
    font-size: 14px !important;
  }

  .vit-hero-v32__meta {
    gap: 6px !important;
    margin-top: 16px !important;
  }

  .vit-hero-v32__meta span {
    min-height: 28px !important;
    padding: 6px 8px !important;
    font-size: 10.5px !important;
  }

  /* Quick choice must look like navigation, not a second giant hero. */
  .vit-quick-nav {
    width: 100% !important;
    padding: 18px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

  .vit-quick-nav h2 {
    margin-bottom: 14px !important;
    font-size: 22px !important;
    line-height: 1.12 !important;
  }

  .vit-quick-nav__list {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .vit-quick-nav__list a {
    min-height: 46px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  .vit-quick-nav__all {
    margin-top: 14px !important;
    font-size: 12px !important;
  }

  /* Homepage content sections */
  .page-id-40 .vit-audience-section,
  .page-id-40 .vit-services-section,
  .page-id-40 .vit-process-section,
  .page-id-40 .vit-final-cta {
    margin-bottom: 14px !important;
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }

  .page-id-40 .vit-audience-section > h2,
  .page-id-40 .vit-services-section > h2,
  .page-id-40 .vit-process-section > h2,
  .page-id-40 .vit-final-cta > h2 {
    font-size: 24px !important;
    line-height: 1.14 !important;
  }

  .vit-audience-card,
  .vit-service-card,
  .vit-process-section .wp-block-column {
    min-height: 0 !important;
    padding: 18px !important;
    border-radius: 13px !important;
  }

  .vit-audience-card h3,
  .vit-service-card h3,
  .vit-process-section .wp-block-column h3 {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  .vit-service-card p,
  .vit-audience-card p,
  .vit-audience-card li,
  .vit-process-section .wp-block-column p {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
  }

  .vit-service-icon,
  .vit-audience-icon {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 14px !important;
  }

  .vit-services-grid,
  .vit-process-section .wp-block-columns {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .vit-services-all {
    width: 100% !important;
    min-height: 44px !important;
    margin-top: 14px !important;
    justify-content: center !important;
    font-size: 13px !important;
  }

  /* Internal pages */
  body.page:not(.page-id-40) .wp-block-post-title {
    margin-bottom: 8px !important;
    font-size: 9px !important;
    letter-spacing: .1em !important;
  }

  .vit-inner-page > .wp-block-group {
    margin-bottom: 14px !important;
  }

  .vit-inner-hero {
    padding: 22px 18px !important;
    border-radius: 18px !important;
  }

  .vit-inner-hero > h2 {
    max-width: none !important;
    margin-bottom: 16px !important;
    font-size: clamp(28px, 8vw, 32px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.027em !important;
  }

  .vit-inner-hero > p {
    margin-top: 9px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .vit-inner-hero > .wp-block-buttons,
  .vit-inner-final > .wp-block-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 20px !important;
  }

  body.page:not(.page-id-40) .wp-block-button,
  body.page:not(.page-id-40) .wp-block-button__link {
    width: 100% !important;
  }

  .vit-inner-section,
  .vit-inner-final {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }

  .vit-inner-section > h2,
  .vit-inner-final > h2 {
    margin-bottom: 18px !important;
    font-size: 23px !important;
    line-height: 1.15 !important;
  }

  .vit-inner-section .wp-block-columns,
  .vit-inner-process .wp-block-columns,
  .vit-catalog-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .vit-inner-section .wp-block-column,
  .vit-catalog-card {
    min-height: 0 !important;
    padding: 18px !important;
    border-radius: 13px !important;
  }

  .vit-inner-section .wp-block-column h3,
  .vit-catalog-card h3 {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  .vit-inner-section .wp-block-column p,
  .vit-inner-section .wp-block-column li,
  .vit-catalog-card p,
  .vit-catalog-card li {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
  }

  .vit-catalog-grid .wp-block-column {
    padding: 0 !important;
  }

  .vit-faq-item {
    padding: 17px !important;
    border-radius: 12px !important;
  }

  .vit-inner-process-number {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 14px !important;
  }
}