/* Phone layout only. Desktop rules stay in app.css. */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  .wrap, header, nav, .hero, .grid, .card, .panel, .row, .shots, .chips {
    min-width: 0;
    max-width: 100%;
  }
  .wrap { width: 100%; padding: 0 16px 32px; overflow-x: clip; }
  header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    width: auto;
    margin: 0 -16px 4px;
    padding: 12px 16px 10px;
  }
  .brand { grid-column: 1; grid-row: 1; font-size: 22px; }
  .lang-pick { grid-column: 2; grid-row: 1; margin-left: 0; }
  .lang-select { max-width: 132px; padding: 8px 24px 8px 10px; }
  nav { display: contents; }
  .nav-link {
    grid-row: 2;
    min-width: 0;
    padding: 8px 6px;
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
  }
  .nav-link:nth-child(1) { grid-column: 1; grid-row: 2; }
  .nav-link:nth-child(2) { grid-column: 2; grid-row: 2; }
  .nav-link:nth-child(3) { grid-column: 3 / 5; grid-row: 2; }
  .nav-link:nth-child(4) { grid-column: 1; grid-row: 3; }
  .nav-link:nth-child(5) { grid-column: 2 / 5; grid-row: 3; white-space: normal; }
  .nav-link:nth-child(6) { grid-column: 1 / 5; grid-row: 4; }
  .lang { padding: 8px 8px; }
  h1, h2, p, .lead, .section-lead { overflow-wrap: break-word; }
  .hero { padding: 16px 0 4px; }
  h1 { font-size: 28px; line-height: 1.15; }
  h2 { font-size: 22px; }
  .lead, .section-lead { font-size: 15px; }
  .block { margin-top: 28px; scroll-margin-top: 120px; }
  .card, .panel { padding: 14px; border-radius: 14px; }
  .chips { gap: 6px; }
  .chip { font-size: 12px; padding: 6px 8px; }
  .shots { margin-top: 16px; touch-action: pan-y; }
  .shot {
    flex: 0 0 calc(100vw - 64px);
    width: calc(100vw - 64px);
    height: calc((100vw - 64px) * 0.512);
  }
  .row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .field {
    width: 100%;
    min-width: 0;
    font-size: 16px;
  }
  .btn, .btn.ghost {
    width: 100%;
    min-height: 44px;
  }
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .tab, .gen {
    flex: 0 0 auto;
    min-height: 40px;
  }
  #tiles.grid { grid-template-columns: 1fr 1fr; }
  .tile strong { font-size: 14px; }
  .version { align-items: stretch; }
  .version .btn { width: auto; align-self: flex-start; }
  .product h1 { font-size: 26px; }
  .product { grid-template-columns: 1fr; }
  .file-line em { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .member-table, .member-table tbody, .member-table tr, .member-table td { display: block; width: 100%; }
  .member-table td:last-child { text-align: left; padding-bottom: 12px; }
  .pay-row .btn { width: 100%; }
  .contacts a {
    display: inline-block;
    margin: 0 10px 8px;
    word-break: break-word;
  }
  .shot-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: 48px 8px 56px;
    border: 0;
    border-radius: 0;
  }
  .shot-dialog img {
    width: 100%;
    max-height: calc(100vh - 112px);
  }
  .shot-nav {
    top: auto;
    bottom: 8px;
    width: 44px;
    height: 40px;
    font-size: 28px;
    transform: none;
  }
  .shot-prev { left: 8px; }
  .shot-next { right: 8px; }
}