/* Layout fixes for the Nicepage export, shared by every page.

   Nicepage centres most sections on a fixed-width column (.u-sheet: 1140px
   on desktop, then 940 / 720 / 540 / 340px). Some sections were exported
   without that column, so their rows ran edge to edge, and on a 360px phone
   the 340px column leaves only 10px either side. These rules give every
   section the same centred column with at least a 20px gutter. */

:root {
  --mfa-gutter: 20px;
}

/* ---------- Sections without a column (marked .mfa-contained) ---------- */

/* Full-width rows: forms, videos, card lists and split layouts. */
.mfa-contained > .u-expanded-width {
  width: min(1140px, 100% - 2 * var(--mfa-gutter)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Split layouts with grid spacing pull their cards outwards by half the
   gutter (u-gutter-18 by 9px, u-gutter-30 by 15px); narrow the row by the
   same amount so the cards themselves keep the 20px gutter. */
.mfa-contained > .u-layout-wrap.u-gutter-18 {
  width: min(1140px, 100% - 2 * var(--mfa-gutter) - 18px) !important;
}

.mfa-contained > .u-layout-wrap.u-gutter-30 {
  width: min(1140px, 100% - 2 * var(--mfa-gutter) - 30px) !important;
}

/* Headings and text placed straight in those sections. */
.mfa-contained > :not(.u-expanded-width) {
  max-width: calc(100% - 2 * var(--mfa-gutter));
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Home page split layouts (About the Academy, Tactical Sessions, Player
   Progress): their text and buttons had large fixed right margins sized for
   the old full-width rows. Inside the column they would squeeze the text, so
   let the text use the card's own padding instead. */
#sec-7e2e .u-text-3,
#sec-7e2e .u-btn-1,
#sec-0cc5 .u-text-1,
#sec-0cc5 .u-text-2,
#sec-0cc5 .u-text-3,
#sec-0cc5 .u-btn-1,
#sec-ea29 .u-text-1,
#sec-ea29 .u-text-3,
#sec-ea29 .u-text-4 {
  margin-right: 0 !important;
}

/* Join Us forms: Nicepage's form grid shifts the fields 30px to the left,
   so equal padding left them 20px from the box's left edge and 50px from
   its right. Add the 30px back on the left. */
.mfa-contained .u-form .u-inner-form {
  padding: 50px 50px 50px 80px !important;
}

/* "Why us?" cards: each title starts 90px in, beside its icon, but a -90px
   right margin stretched it to the card's full width, so long titles could
   run past the card's edge. */
#sec-ed4f .u-list-item h5 {
  margin-right: 0 !important;
}

/* Footer: on small laptops (992-1199px) the "Become a member" line had a
   -28px right margin that pushed it out of the column. */
@media (min-width: 992px) and (max-width: 1199px) {
  .u-footer .u-text-2 {
    margin-right: 0 !important;
  }
}

/* Rounded corners on the highlight video now that it sits in the column. */
.mfa-contained > .u-video {
  border-radius: 16px;
  overflow: hidden;
}

/* ---------- Match Highlights (home page) ---------- */

/* On desktop the heading started 36px outside the column; line it up. */
@media (min-width: 1200px) {
  #sec-c093 > .u-text-1,
  #sec-c093 > .u-text-3 {
    margin-left: calc((100% - 1140px) / 2) !important;
  }

  /* Keep "Relive the Best Moments!" on one line after the shift above. */
  #sec-c093 > .u-text-3 {
    margin-right: calc((100% - 1140px) / 2) !important;
  }

  #sec-c093 > .u-text-2 {
    margin-right: calc((100% - 1140px) / 2) !important;
  }
}

/* The intro paragraph on the right sat 18px outside the column on tablets
   and small laptops (6-8px from the screen edge). */
@media (min-width: 992px) and (max-width: 1199px) {
  #sec-c093 > .u-text-2 {
    margin-right: calc((100% - 940px) / 2) !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #sec-c093 > .u-text-2 {
    margin-right: calc((100% - 720px) / 2) !important;
  }
}

/* ---------- Phones ---------- */

@media (max-width: 575px) {
  /* Less padding on phones so the fields keep a usable width (the extra
     30px on the left offsets the form grid's shift, as above). */
  .mfa-contained .u-form .u-inner-form {
    padding: 30px 24px 30px 54px !important;
  }
}

/* Narrow phones (most Android phones are 360px wide): shrink the 340px
   column so it keeps a 20px gutter, and stop fixed 340px elements from
   overflowing it. */
@media (max-width: 379px) {
  .u-body {
    --theme-sheet-width-xs: calc(100% - 2 * var(--mfa-gutter));
  }

  .u-body .u-sheet .u-text,
  .u-body .u-sheet .u-image,
  .u-body .u-sheet .u-list,
  .u-body .u-sheet .u-gallery,
  .u-body .u-sheet .u-group,
  .u-body .u-sheet .u-layout-wrap {
    max-width: 100%;
  }

  .u-body section > .u-text {
    max-width: calc(100% - 2 * var(--mfa-gutter));
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Nested layout grids (e.g. the captain cards on Our Team) otherwise
     refuse to shrink below their content and poke past the right edge. */
  .u-body .u-sheet .u-layout-col,
  .u-body .u-sheet .u-layout-row {
    min-width: 0;
  }
}