/* ============ Apantia mobile — responsive layer ============
   Adapted from the final design handoff. Loaded last so it overrides the
   desktop layers at the mobile breakpoint (720px). */

/* ---- unified hero: when the 2-col hero stacks, show COPY first (not preview) ---- */
@media (max-width: 900px) {
  .hero .hero-visual-wrap { order: 1; margin-top: 6px; }
  .hero .browser { transform: none; }
}

/* ---- global mobile tightening ---- */
@media (max-width: 720px) {
  .wrap { padding: 0 18px; }
  .h-display { font-size: clamp(31px, 9vw, 42px); }
  .hero { padding: 28px 0 8px; }
  .hero-visual-wrap { margin-top: 22px; }
  .hero-cta { width: 100%; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-chips { gap: 8px; }
  .hero-chips .chip { font-size: 12.5px; padding: 7px 12px; }

  .section { padding: 40px 0; }
  .sec-head { margin-bottom: 26px; }

  /* composer stacks; prefix + slug stay together via .composer-url-row */
  .composer { flex-direction: column; align-items: stretch; padding: 16px; gap: 12px; }
  .composer .url { justify-content: flex-start; }
  .composer .btn { width: 100%; justify-content: center; }

  /* the floating tags are designed to hang outside the card edge, which pushes
     past a narrow viewport — drop them on phones to kill the horizontal scroll */
  .hero .float-tag { display: none; }
  /* nothing in the hero may exceed the viewport width */
  .hero *, .hero-visual-wrap, .browser { max-width: 100%; }
  .hero-grid { min-width: 0; }
  .hero-grid > * { min-width: 0; }

  /* features / steps / values single column already; tighten */
  .feat3, .steps, .v2values { gap: 12px; }
  .feat, .step, .v2value { padding: 20px; }

  .cta-band { padding: 36px 22px; }
}

/* ---- create / gallery flow on mobile ---- */
@media (max-width: 720px) {
  .create-shell, .create-shell-wide { padding: 18px 16px 60px; }
  .gallery-head h1 { font-size: 26px; }
  .gal-grid { grid-template-columns: 1fr; }
  .gal-cats { gap: 7px; }
  .cat-chip { padding: 8px 13px; font-size: 13px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
}

/* ---- public + manage pages on mobile ---- */
@media (max-width: 720px) {
  .pub-shell { padding: 18px 14px 56px; }
  .pub-banner { height: 120px; margin-bottom: -40px; }
  .pub-card { padding: 20px; }
  .pub-card .h1 { font-size: 25px; }
  .rsvp-choices { gap: 8px; }
  .page-shell, .page-shell-wide { padding: 20px 14px 60px; }
}
.u-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- larger touch targets everywhere on mobile ---- */
@media (max-width: 720px) {
  .btn { min-height: 46px; }
  .btn-sm { min-height: 40px; }
  /* 16px inputs prevent iOS Safari from auto-zooming the page on focus */
  .input, .textarea, .select { font-size: 16px; }
  .seg button { min-height: 38px; }
}