/* Partners page (partners.html) on a phone. Loaded last, after mobile-common.css, which
   already gives it the ☰ menu, spacing, section headings and the footer. This file is only
   what the partners page's own sections need. On a desktop screen none of it shows.

   Laid out the way the country pages are: the title, then the photo, then the words; the
   reasons swiped sideways instead of stacked; buttons full width and at least 56px tall.
   No fixed button at the bottom: the page is short and already has one button on its first
   screen and one at its end. */

@media (max-width: 760px) {

  /* ---------- Hero ---------- */
  /* The two columns become one, and the photo moves up between the title and the text so
     the first screen has a picture. */
  .p-hero { padding: 12px 0 56px; }
  .p-hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .p-hero-grid > div { display: contents; }
  .p-hero .mono { order: 1; }
  .p-hero h1 { order: 2; margin: 12px 0 26px; font-size: 54px; line-height: 1; }
  .p-hero-photo { order: 3; border-radius: 24px; }
  .p-hero-photo img { aspect-ratio: 4 / 3; object-position: 50% 55%; }
  .p-hero .lead { order: 4; max-width: none; margin: 26px 0 28px; font-size: 19px; line-height: 1.45; opacity: .85; }
  .p-hero .btn { order: 5; justify-content: center; min-height: 56px; font-size: 17px; }
  .p-hero .p-note { order: 6; max-width: none; margin-top: 18px; font-size: 16px; opacity: .8; }

  /* ---------- Why choose us, swiped ---------- */
  /* All four open, the next one showing at the edge, like the reasons on a country page */
  .p-why {
    display: flex; gap: 12px; margin: 0 -20px; padding: 0 20px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px;
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .p-why::-webkit-scrollbar { display: none; }
  .p-why article { flex: 0 0 78%; min-height: 250px; padding: 24px 22px 26px; border-radius: 24px; scroll-snap-align: start; }
  .p-why .mono { margin-bottom: 32px; font-size: 15px; }
  .p-why h3 { margin-bottom: 12px; font-size: 32px; line-height: 1.05; }
  .p-why p { font-size: 17px; opacity: .85; }

  /* ---------- Closing strip ---------- */
  .p-end { padding: 8px 0 80px; }
  .p-end h2 { margin: 14px 0 18px; font-size: 48px; line-height: 1.02; }
  .p-end h2 .br { white-space: nowrap; } /* "[ partner ]" moves down whole */
  .p-end p { max-width: none; margin-bottom: 28px; font-size: 17px; opacity: .85; }
  .p-end .btn { display: flex; justify-content: center; width: 100%; min-height: 56px; font-size: 17px; }

  /* ---------- The form, as a panel that comes up from the bottom ---------- */
  /* Like the consultation form on the other pages. There is no bar to pull it down by:
     Google's form inside takes the finger, so it closes with the × (48px) or a tap above it. */
  dialog#partner {
    width: 100vw; max-width: 100vw; margin: auto 0 0;
    max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px);
    border-radius: 24px 24px 0 0; overscroll-behavior: contain;
  }
  .anim dialog#partner[open] { animation: m-sheet-in .45s var(--ease); }
  .p-modal { padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
  .p-modal .consult-close { top: 12px; right: 10px; width: 48px; height: 48px; font-size: 34px; }
  .p-modal-head { padding: 24px 12px 16px; }
  .p-modal-head h3 { font-size: 34px; }
  .p-modal iframe { height: calc(100dvh - 160px); border-radius: 16px; }
  .p-modal-todo { margin: 0; padding: 24px 20px; font-size: 16px; }
}