/* v895 — Mobile polish for guide/sidebar/service article pages
   Desktop untouched: all rules are mobile/tablet scoped only. */

@media (max-width: 1080px) {
  /* Common service/article layouts with sidebars */
  body.useful-guide-clean-v890 .useful-guide-shell-v890,
  body.tips-page-v870 .tips-layout-v870,
  body.emergency-visa-page-v787FR .emergency-layout-v787FR,
  body.voa-page .voa-layout,
  body.speedup-page .speedup-layout,
  body.evisa-correction-page .correction-layout,
  body.working-visa-page .working-layout,
  body.arrival-fast-track-page .fasttrack-layout,
  body.departure-fast-track-page .fasttrack-layout,
  body[class*="speedup"] .speedup-article-layout,
  body[class*="correction"] .correction-article-layout,
  body[class*="working"] .working-article-layout,
  body[class*="fast-track"] .fasttrack-article-layout,
  body[class*="fasttrack"] .fasttrack-article-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Any common emergency/sidebar rail should stop being sticky and go below */
  body.useful-guide-clean-v890 .useful-guide-emergency-sidebar-v890,
  body .emergency-sidebar-v787FR,
  body .standard-right-sidebar-v787HA,
  body .vge-standard-sidebar-v787HA,
  body [class*="sidebar"][class*="v787"],
  body [class*="sidebar"][class*="side"],
  body [class*="side-box"] {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body .emergency-sidebar-v787FR,
  body .standard-right-sidebar-v787HA,
  body .vge-standard-sidebar-v787HA,
  body.useful-guide-clean-v890 .useful-guide-emergency-sidebar-v890 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 14px !important;
  }

  /* Mobile/tablet summary: keep first core support blocks, hide extra long sidebar tail */
  body .emergency-sidebar-v787FR .emergency-side-box-v787FR:nth-of-type(n+5),
  body .standard-right-sidebar-v787HA > *:nth-child(n+5),
  body .vge-standard-sidebar-v787HA > *:nth-child(n+5),
  body.useful-guide-clean-v890 .useful-guide-emergency-sidebar-v890 .emergency-side-box-v787FR:nth-of-type(n+5) {
    display: none !important;
  }

  /* Main article rails must not keep fixed desktop width */
  body main,
  body article,
  body section,
  body [class*="article"],
  body [class*="main"],
  body [class*="content"] {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Common grid/card groups collapse before they start squeezing text */
  body.useful-guide-clean-v890 .guide-route-grid-v513G,
  body.useful-guide-clean-v890 .guide-card-grid-v513G,
  body.useful-guide-clean-v890 .useful-guide-source-list-v890,
  body [class*="route-grid"],
  body [class*="card-grid"],
  body [class*="feature-grid"],
  body [class*="service-grid"],
  body [class*="steps-grid"],
  body [class*="benefit-grid"],
  body [class*="two-col"],
  body [class*="three-col"],
  body .grid.two,
  body .grid.three,
  body .grid.four {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  /* keep pages inside the screen */
  body.useful-guide-clean-v890,
  body.tips-page-v870,
  body.emergency-visa-page-v787FR,
  body.voa-page,
  body.speedup-page,
  body.evisa-correction-page,
  body.working-visa-page,
  body.arrival-fast-track-page,
  body.departure-fast-track-page,
  body[class*="emergency"],
  body[class*="speedup"],
  body[class*="correction"],
  body[class*="working"],
  body[class*="fast-track"],
  body[class*="fasttrack"] {
    overflow-x: hidden !important;
    padding-bottom: 96px !important;
  }

  body.useful-guide-clean-v890 .container,
  body.tips-page-v870 .container,
  body.emergency-visa-page-v787FR .container,
  body.voa-page .container,
  body.speedup-page .container,
  body.evisa-correction-page .container,
  body.working-visa-page .container,
  body.arrival-fast-track-page .container,
  body.departure-fast-track-page .container,
  body[class*="emergency"] .container,
  body[class*="speedup"] .container,
  body[class*="correction"] .container,
  body[class*="working"] .container,
  body[class*="fast-track"] .container,
  body[class*="fasttrack"] .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  /* hero areas */
  body.useful-guide-clean-v890 .guide-hero,
  body.tips-page-v870 .tips-hero,
  body.emergency-visa-page-v787FR .emergency-hero-v787FR,
  body.voa-page .voa-hero,
  body.speedup-page .speedup-hero,
  body.evisa-correction-page .correction-hero,
  body.working-visa-page .working-hero,
  body.arrival-fast-track-page .fasttrack-hero,
  body.departure-fast-track-page .fasttrack-hero,
  body[class*="speedup"] [class*="hero"],
  body[class*="correction"] [class*="hero"],
  body[class*="working"] [class*="hero"],
  body[class*="fast-track"] [class*="hero"],
  body[class*="fasttrack"] [class*="hero"] {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }

  body h1 {
    font-size: clamp(30px, 9vw, 42px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
  }
  body h2 {
    font-size: clamp(23px, 6.5vw, 32px) !important;
    line-height: 1.18 !important;
  }
  body p,
  body li {
    font-size: 14.5px !important;
    line-height: 1.62 !important;
  }

  /* wide hero/visual images: reduce height and prevent ugly crop */
  body.useful-guide-clean-v890 img,
  body.tips-page-v870 img,
  body.emergency-visa-page-v787FR img,
  body.voa-page img,
  body.speedup-page img,
  body.evisa-correction-page img,
  body.working-visa-page img,
  body.arrival-fast-track-page img,
  body.departure-fast-track-page img {
    max-width: 100% !important;
    height: auto !important;
  }

  body [class*="banner"] img,
  body [class*="hero"] img,
  body [class*="visual"] img,
  body [class*="art"] img {
    object-fit: cover !important;
  }

  body [class*="banner"],
  body [class*="hero-art"],
  body [class*="hero-media"],
  body [class*="visual-card"],
  body [class*="image-panel"] {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  /* sidebar on mobile: one column, compact */
  body .emergency-sidebar-v787FR,
  body .standard-right-sidebar-v787HA,
  body .vge-standard-sidebar-v787HA,
  body.useful-guide-clean-v890 .useful-guide-emergency-sidebar-v890 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body .emergency-sidebar-v787FR .emergency-side-box-v787FR,
  body .standard-right-sidebar-v787HA > *,
  body .vge-standard-sidebar-v787HA > *,
  body.useful-guide-clean-v890 .useful-guide-emergency-sidebar-v890 .emergency-side-box-v787FR {
    padding: 14px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body .emergency-sidebar-v787FR .emergency-side-box-v787FR:nth-of-type(n+4),
  body .standard-right-sidebar-v787HA > *:nth-child(n+4),
  body .vge-standard-sidebar-v787HA > *:nth-child(n+4),
  body.useful-guide-clean-v890 .useful-guide-emergency-sidebar-v890 .emergency-side-box-v787FR:nth-of-type(n+4) {
    display: none !important;
  }

  body .emergency-side-btn-v787FR,
  body .btn,
  body button,
  body input[type="submit"] {
    min-height: 42px !important;
  }

  body .emergency-side-btn-v787FR,
  body .hero-actions .btn,
  body [class*="actions"] .btn,
  body [class*="cta"] .btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  body .hero-actions,
  body [class*="actions"],
  body [class*="cta-actions"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* Cards/blocks should become flat and readable */
  body.useful-guide-clean-v890 .guide-intro-card-v513G,
  body.useful-guide-clean-v890 .guide-route-card-v513G,
  body.useful-guide-clean-v890 .guide-card-v513G,
  body.useful-guide-clean-v890 .guide-cta-panel-v513G,
  body.useful-guide-clean-v890 .useful-guide-source-item-v890,
  body [class*="card"],
  body [class*="panel"],
  body [class*="box"] {
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Tables inside guide pages must scroll, never overflow page */
  body table {
    min-width: 560px !important;
    max-width: none !important;
    width: max-content !important;
  }
  body .table-wrap,
  body .table-responsive,
  body [class*="table-wrap"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Form controls */
  body input,
  body select,
  body textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Useful Guide specific */
  body.useful-guide-clean-v890 .guide-hero-copy {
    max-width: 100% !important;
  }
  body.useful-guide-clean-v890 .guide-hero-copy h1 {
    margin-bottom: 16px !important;
  }
  body.useful-guide-clean-v890 .guide-hub-intro-v513G {
    margin-top: 10px !important;
  }
  body.useful-guide-clean-v890 .useful-guide-source-item-v890 {
    grid-template-columns: 40px minmax(0,1fr) !important;
    padding: 14px !important;
  }
  body.useful-guide-clean-v890 .useful-guide-source-icon-v890 {
    width: 34px !important;
    height: 34px !important;
    font-size: 18px !important;
  }

  /* Emergency / service pages */
  body.emergency-visa-page-v787FR .emergency-hero-v787FR,
  body[class*="emergency"] [class*="hero"] {
    min-height: 0 !important;
  }
}

@media (max-width: 480px) {
  body .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body h1 {
    font-size: clamp(28px, 10vw, 36px) !important;
  }
  body h2 {
    font-size: clamp(22px, 7vw, 29px) !important;
  }

  body [class*="banner"],
  body [class*="hero-art"],
  body [class*="hero-media"],
  body [class*="visual-card"],
  body [class*="image-panel"] {
    max-height: 150px !important;
  }

  body table {
    min-width: 520px !important;
  }

  body .emergency-side-box-v787FR p,
  body .emergency-side-box-v787FR li,
  body .emergency-side-box-v787FR a {
    font-size: 13.5px !important;
  }
}