/* "Despre noi" and "Contact" at tablet and phone widths.
 *
 * These two pages are written by AF_About and AF_Contact and styled in
 * ux.css, which another task owns. This file is loaded after ux.css and does
 * nothing but correct what a phone and a tablet showed. Every number below
 * was measured in a real device emulation at 390, 414, 768, 834 and 1024, not
 * inferred from the stylesheet.
 *
 * Enqueued by AF_About::assets() and AF_Contact::assets(), both with a
 * dependency on the 'af-ux' handle, so it can never land before the rules it
 * is correcting.
 */

/* ==================================================================
   THE PAGE SAT 30px LEFT OF CENTRE

   page-af-arranged.php wraps the writing in the parent theme's four
   boxes: .container.content-page, a .sidebar-position-* wrapper, a
   bootstrap .row and a .content column. The .row carries bootstrap's
   `margin: 0 -15px` and the column its answering `padding: 0 15px`,
   which cancel out only while the row is allowed its natural width.

   ux.css gives the About page `body.af-about-page .row { width:100%
   !important }`. That takes the row down to the container's content
   width while the -15px margins stay, so the row starts 15px to the
   left of where it should and finishes 15px short on the right. The
   column's 15px padding then eats another 15px on the right only.

   Measured on "Despre noi", .af-about's box against a 390px screen:

     .container.content-page      0..390   padding 15
     .sidebar-position-without   15..375
     .row                         0..360   margin -15/-15, width 100%
     .content.col-md-12           0..360   padding 15/15
     .af-about                   15..345

   45px of dead screen on the right against 15px on the left - the
   whole page visibly off its own axis, and 30px of a 390px screen
   spent on nothing. The same 30px asymmetry is there at 768, 834 and
   1024; on a 1440px desktop it is 2% of the band and nobody saw it.

   The fix is the one policy.css and faq.css already use, and for the
   same reason: flatten the four wrappers rather than fight each one.
   Named with descendant combinators, not child ones - the sidebar
   wrapper sits between .content-page and .row, so `.content-page >
   .row` matches nothing. That miss is what let the row overflow a
   390px screen at x=-15..405 on the FAQ and the policy pages before
   it was corrected, and it is the reason this file does not repeat it.

   The contact page is flattened with it. It was already symmetric,
   but it sat inside the container's 15px padding while the FAQ and
   the five policy pages sit on --af-gutter alone: measured at 390px
   the contact card edges were at x=31 against x=16 everywhere else,
   so two pages a reader moves between had different margins. Flat,
   all four content pages now begin at the same x, and the form on a
   390px screen gains 30px - fields of 322px instead of 292px, which
   is the control on the page that most needs the width.
   ================================================================== */
body.af-about-page .content-page,
body.af-about-page .content-page [class*="sidebar-position-"],
body.af-about-page .content-page .row,
body.af-about-page .content-page .content,
body.af-contact-page .content-page,
body.af-contact-page .content-page [class*="sidebar-position-"],
body.af-contact-page .content-page .row,
body.af-contact-page .content-page .content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ==================================================================
   THE MAP ON A LANDSCAPE TABLET

   ux.css puts the contact form and the map side by side and stacks
   them again below 981px, with the map stretched to the form's height
   so the row has one bottom edge. That works on a desktop, where the
   form is short and wide.

   At 1024 - an iPad held sideways, which is a real way this shop is
   read - the form column is 504px and the fields inside it come out
   around 230px each, so the form runs 1029px tall. The map, told to
   match it, was measured at 402x1027: a strip two and a half times
   taller than it is wide, showing one street of Salonta at a time.

   Between 981 and 1100 the two go back to one column. The map is then
   the full 958px wide and 320px tall, and the form's short fields are
   around 455px each rather than 230px. The declarations are the ones
   ux.css already uses below 981px, so nothing changes for a phone -
   only the width at which the stack gives way moves.
   ================================================================== */
@media (min-width: 981px) and (max-width: 1100px) {
  .af-contact__row {
    grid-template-columns: 1fr;
  }

  .af-contact__row > .af-contact__map iframe {
    height: auto;
    min-height: clamp(240px, 40vw, 320px);
  }
}