/* Gromadis V20.8.1 — CONTENT + MOBILE QA HOTFIX
   Corrective layer only: copy cleanup, robust wrapping, mobile grid hardening. */

html, body { max-width: 100%; }
body { overflow-x: clip; }
img, picture, video, iframe, svg { max-width: 100%; }

/* Grid/flex children must be allowed to shrink instead of pushing text outside cards. */
.container > *,
.project-detail-grid > *,
.projects-hub-grid > *,
.project-hub-card > *,
.project-hub-card-body,
.project-back-row > *,
.project-facts > *,
.project-related-grid > *,
.project-start-inner > *,
.footer-grid > *,
.track-record-grid > *,
.application-grid > *,
.case-source-grid > *,
.portfolio-evidence-grid > *,
.portfolio-evidence-card > *,
.portfolio-evidence-card-body,
.project-map-layout > *,
.social-proof-panel > * { min-width: 0; }

h1, h2, h3, p, li, .eyebrow, .project-hub-chip, .project-map-card strong, .project-map-card em {
  overflow-wrap: break-word;
}

.project-back-row,
.project-hero-actions,
.project-service-links,
.project-hub-card-foot,
.footer-bottom,
.footer-legal {
  flex-wrap: wrap;
}

.project-hero-actions .btn,
.service-bottom-cta .btn,
.social-proof-side .btn,
.modal .btn { max-width: 100%; white-space: normal; text-align: center; }

.project-gallery img,
.project-gallery picture,
.case-source-figure,
.case-source-figure img { max-width: 100%; }

/* Avoid thin columns for factual rows on medium screens. */
@media (max-width: 900px) {
  .case-source-grid,
  .portfolio-evidence-head { grid-template-columns: minmax(0,1fr) !important; }
  .portfolio-evidence-grid { grid-template-columns: minmax(0,1fr) !important; }
  .project-back-row { gap: 8px 14px; }
  .project-back-row .eyebrow { margin-left: 0; }
}

@media (max-width: 720px) {
  .project-hero h1,
  .projects-hub-hero h1,
  .service-hero h1 {
    font-size: clamp(30px, 9vw, 42px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.03em !important;
  }

  .project-facts { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .project-gallery-multi,
  .projects-hub-grid,
  .project-related-grid,
  .track-record-grid,
  .application-grid { grid-template-columns: minmax(0,1fr) !important; }

  .project-hub-card-foot { gap: 10px 14px; align-items: flex-start; }
  .project-hub-chip { white-space: normal !important; }
  .scope-list li > div { min-width: 0; }
  .case-proof-list li { grid-template-columns: minmax(0,1fr) !important; gap: 4px !important; }
  .portfolio-evidence-card { grid-template-columns: minmax(0,1fr) !important; }
  .portfolio-evidence-card img { width: 100%; height: auto; min-height: 0; max-height: none; aspect-ratio: 16 / 10; object-fit: cover; }

  .service-bottom-cta .container,
  .project-cta .container,
  .project-start-inner { grid-template-columns: minmax(0,1fr) !important; }

  dialog.modal,
  .modal { width: min(92vw, 560px) !important; max-width: calc(100vw - 24px) !important; }
  .quick-form input,
  .quick-form textarea,
  .quick-form select { width: 100%; max-width: 100%; box-sizing: border-box; }
}

@media (max-width: 480px) {
  .project-facts { grid-template-columns: minmax(0,1fr) !important; }
  .project-back-row { display: grid !important; grid-template-columns: minmax(0,1fr) !important; }
  .project-back-row .back-link,
  .project-back-row .eyebrow { width: auto; max-width: 100%; }
  .project-hero-actions { display: grid !important; grid-template-columns: minmax(0,1fr) !important; }
  .project-hero-actions .btn { width: 100%; }
  .breadcrumbs { flex-wrap: wrap; }
  .footer-bottom { gap: 10px 18px; }
}

/* V20.8.2 — MOBILE RENDER QA
   Fixes found on real Android screenshots: B2B grid overflow, map attribution under fixed CRO bar,
   cramped horizontal map filters, and safer mobile width handling. */

/* The base visual layer keeps .service-layout as a two-column grid even on phones.
   Force a single-column composition before content becomes too narrow. */
@media (max-width: 900px) {
  .service-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }
  .service-layout > *,
  .work-list,
  .service-process,
  .b2b-process,
  .b2b-input-grid,
  .b2b-proof-grid,
  .b2b-track,
  .related-services,
  .case-strip {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 760px) {
  /* Better than clipping the last filter label at the right edge on phones. */
  .project-map-filters {
    flex-wrap: wrap !important;
    overflow: visible !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 10px !important;
    scrollbar-width: none;
  }
  .project-map-filters::-webkit-scrollbar { display: none; }
  .project-map-filter { flex: 0 0 auto; }

  /* The fixed conversion bar is 76px+ tall and previously covered Leaflet attribution. */
  body.cro-bar-visible { padding-bottom: 88px !important; }
  body.cro-bar-visible .project-map-canvas .leaflet-bottom {
    bottom: 86px !important;
  }
  .project-map-canvas .leaflet-control-attribution {
    max-width: calc(100% - 18px) !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    font-size: 9px !important;
    padding: 2px 4px !important;
  }

  /* B2B step/process blocks must never remain in an off-screen column. */
  .service-process,
  .b2b-process,
  .b2b-input-grid,
  .b2b-proof-grid,
  .b2b-track,
  .work-list,
  .application-grid,
  .related-services,
  .case-strip {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .process-step,
  .work-item,
  .application-card,
  .b2b-proof-card,
  .track-record-card,
  .related-services a,
  .case-mini {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  .project-map-filter {
    padding: 9px 10px !important;
    font-size: 8.5px !important;
  }
  .project-map-canvas .leaflet-control-attribution {
    font-size: 8px !important;
  }
}