/* ================================================================
   CGK Realties - the phone layer.

   Every rule sits inside a phone-only media query, so a desktop
   browser cannot read a line of it and the desktop pixel lock
   (deploy/screens.py diff) holds by construction. Loaded last on
   every page, so it wins ties against the page's own stylesheet.

   The viewport tag carries viewport-fit=cover: the page runs to the
   glass, under the iPhone home indicator and, in landscape, under the
   notch. Anything fixed to an edge pads itself by env(safe-area-inset-*).
   On a screen with no notch every inset is 0 and nothing moves.
   ================================================================ */

@media (max-width: 760px) {

  /* Logo, "Réserver une visite" and Menu do not fit side by side: the
     button ran over REALTIES and pushed Menu off a 390px screen. Booking
     stays one tap away, in the call bar and at the foot of the menu. */
  .nav-cta { display: none; }

  /* iOS Safari zooms the whole page when a control under 16px takes
     focus, and does not zoom back out. */
  .form input, .form select, .form textarea,
  .field select, .unit-select { font-size: 16px; }

  /* The article's building card: photo, address and a no-wrap "Voir
     l'immeuble" are wider than a 390px screen. The link takes its own line. */
  .linked-building { flex-wrap: wrap; row-gap: 0.75rem; }
  .linked-building > span:not(.go) { flex: 1 1 0; min-width: 0; }
  .linked-building .go { flex-basis: 100%; text-align: right; }

  /* The menu panel runs to the bottom edge too. */
  .mobile-panel { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); }
}

/* The call bar and the button above it exist from 720px down. */
@media (max-width: 720px) {
  .callbar a { padding-bottom: calc(0.9375rem + env(safe-area-inset-bottom)); }
  body { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
  .to-top { bottom: calc(52px + 1rem + env(safe-area-inset-bottom)); }
  /* The bar sits over the open menu; its last line scrolls clear of it. */
  .mobile-panel { padding-bottom: calc(52px + 2.5rem + env(safe-area-inset-bottom)); }
}

/* A phone on its side: wider than 760px, never taller than 500px.
   The notch takes one side, so side padding never drops below it. */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  .wrap, .mobile-panel, .notfound {
    padding-left: max(var(--pad), env(safe-area-inset-left));
    padding-right: max(var(--pad), env(safe-area-inset-right));
  }
}