/* Fixology Hub mobile intake ergonomics.
 * Presentation-only layer for the launch booking entry point. It must not add
 * required fields, business authority, or alternate booking behavior.
 */

@media (max-width: 680px) {
  /* Sticky navigation must not cover the primary booking target after CTA jumps. */
  #fixology-intake,
  [data-fixology-result],
  [data-fixology-slot] {
    scroll-margin-top: 88px;
  }

  /* Keep the one-action card comfortable on narrow phones without shrinking controls. */
  .fx-intake-card {
    width: 100%;
    max-width: 100%;
  }
  .fx-intake-heading {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .fx-intake-heading small {
    flex-basis: 100%;
    margin-left: 16px;
    line-height: 1.4;
  }

  /* Prevent long locality/address values from forcing horizontal overflow. */
  .fx-inline-fields,
  .fx-location,
  .fx-location input,
  .fx-confirm-row,
  .fx-confirm input {
    min-width: 0;
    width: 100%;
  }
  .fx-location {
    padding-left: 12px;
  }

  /* 16px text avoids focus-time browser zoom while preserving practical tap size. */
  .fx-location input,
  .fx-confirm input,
  textarea {
    font-size: 16px;
  }
  .fx-location,
  .fx-photo,
  .fx-primary,
  .fx-confirm input,
  .fx-confirm .fx-confirm-button {
    min-height: 52px;
  }
  .fx-photo {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
  .fx-primary,
  .fx-confirm .fx-confirm-button {
    font-size: 16px;
  }
  .fx-microcopy {
    font-size: 12px;
    line-height: 1.5;
  }

  /* Result details stay scannable rather than compressing into narrow columns. */
  .fx-result-grid,
  .fx-confirm-row {
    grid-template-columns: 1fr;
  }
  .fx-result-wide {
    grid-column: auto;
  }
  .fx-slot-time {
    overflow-wrap: anywhere;
  }

  /* Respect notched devices when the mobile navigation panel is open. */
  .fx-mobile-menu nav {
    max-height: calc(100dvh - 92px - env(safe-area-inset-bottom));
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 390px) {
  .fx-hero {
    padding-left: 14px;
    padding-right: 14px;
  }
  .fx-intake-card {
    padding: 18px;
    border-radius: 20px;
  }
  .fx-hero-notes span {
    padding: 7px 9px;
  }
}