/* Shared mobile layout for public pages and the CMS phone preview. */
@media (max-width: 1200px) {
  .ui-site .ui-service-cards.ui-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-site .ui-service-cards .ui-option { min-width: 0; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
  header .menu-btn { flex: 0 0 auto; white-space: nowrap; }
  .ui-site .ui-wrap { padding-inline: 20px; }
  .ui-site .ui-grid.two,
  .ui-site .ui-grid.three,
  .ui-site .ui-grid.four,
  .ui-site.pv-home-page .ui-grid.three,
  .ui-site .ui-industry-intro,
  .ui-site .ui-service-cards.ui-grid,
  .ui-site .ui-service-steps,
  .ui-site .ui-solution-overview,
  .ui-site .ui-solution-delivery,
  .ui-site .ui-solution-notes,
  .ui-site .ui-solution-process,
  .ui-site .ui-inquiry,
  .ui-site .ui-inquiry-heading,
  .ui-site .ui-form-grid,
  .ui-site .ui-scenes,
  .ui-site #company-scenes .ui-scenes {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .ui-site .ui-adaptive-grid,
  .ui-site .ui-product-grid { grid-template-columns: minmax(0, 1fr); }
  /* Card-count rules in the original desktop template set explicit spans. */
  .ui-site .ui-adaptive-grid > .ui-card,
  .ui-site .ui-product-grid > .ui-card { grid-column: 1 / -1 !important; }
  .ui-site .ui-grid > *,
  .ui-site .ui-industry-intro > *,
  .ui-site .ui-card-body { min-width: 0; }
  .ui-site .ui-card-body { padding: 18px; }
  .ui-site .ui-card-body > h2,
  .ui-site .ui-card-body > h3 { font-size: 21px; line-height: 1.45; }
  .ui-site .ui-card-body > p { min-height: 0; font-size: 15px; line-height: 1.8; }
  .ui-site .ui-card-body .ui-more { margin-top: 16px; white-space: normal; }
  .ui-site .ui-single-card > .ui-card { display: block; }
  .ui-site .ui-single-card > .ui-card > .ui-cover,
  .ui-site .ui-application-cards.ui-single-card > .ui-card > .ui-cover,
  .ui-site .ui-product-grid .ui-cover {
    width: 100%; height: auto; aspect-ratio: 3 / 2; border-right: 0;
  }
  .ui-site .ui-scenes .scene-photo-button,
  .ui-site #company-scenes .scene-photo-button {
    height: auto; aspect-ratio: 4 / 3;
  }
  .ui-site .ui-scenes .scene-photo-button img { object-fit: cover; }
  .ui-site .ui-scenes figcaption { padding: 18px; }
  .ui-site .ui-scenes figcaption h3 { font-size: 21px; line-height: 1.45; }
  .ui-site .ui-scenes figcaption p { font-size: 15px; line-height: 1.75; }
  .ui-site .ui-heading,
  .ui-site .pv-home-examples .ui-heading {
    flex-direction: column; align-items: flex-start; gap: 12px;
  }
  .ui-site .ui-heading > * { max-width: 100%; min-width: 0; }
  .ui-site .ui-heading > a { white-space: normal; }
  .ui-site .ui-inline-links { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ui-site .ui-inline-links > a { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
  .ui-site .ui-flow-details dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ui-site .ui-flow-details dt,
  .ui-site .ui-flow-details dd { min-width: 0; margin-inline: 0; }
  .ui-site .pv-config-explanation { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ui-site .pv-config-explanation dd { margin-bottom: 12px; min-width: 0; }
  .ui-site .ui-industry-intro { gap: 24px; }
  .ui-site .ui-industry-intro figure { width: 100%; max-height: none; }
  .ui-site .ui-industry-intro h1 { font-size: 30px; }
  .ui-site .ui-form { padding: 20px; }
  .ui-site .ui-field input:not([type=checkbox]),
  .ui-site .ui-field select,
  .ui-site .ui-field textarea { width: 100%; font-size: 16px; }
  .ui-site .ui-actions { flex-wrap: wrap; }
  .ui-site .ui-button { min-height: 44px; white-space: normal; }
  .ui-site section[id],
  .ui-site article[id],
  .ui-site [id^="product-"] { scroll-margin-top: 84px !important; }
}

@media (max-width: 480px) {
  .ui-site .ui-table tbody,
  .ui-site .ui-table tr { display: block; }
  .ui-site .ui-table th,
  .ui-site .ui-table td {
    display: block; width: 100%; min-width: 0; box-sizing: border-box;
    padding: 10px 12px; text-align: left;
  }
}

@media (max-width: 380px) {
  header .bar { gap: 8px; padding-inline: 12px; }
  header .logo,
  header .logo img { width: 120px; min-width: 0; }
  header .menu-btn { padding: 6px 8px; font-size: 13px; }
}

.ui-site .ui-about-grid > figure.cms-company-media {
  min-width: 0; aspect-ratio: auto; background: transparent; overflow: visible;
}
.cms-company-media .media-switch { margin-bottom: 12px; }
.cms-company-media [data-media-panel="image"] {
  aspect-ratio: 4 / 3; border-radius: 8px; background: #f1f5fa; overflow: hidden;
}
.cms-company-media [data-media-panel="image"] > .scene-photo-button { height: 100%; }
.cms-company-media .cms-company-video { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.cms-company-video-empty {
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  padding: 24px; border: 1px solid #dce5ef; border-radius: 8px;
  background: #f1f5fa; color: #596c7e; text-align: center;
}