/* ---------------------------------------------------------------------------
   Replicates the layout switching that the original React bundle performs in
   JavaScript (`size={isMobile ? 12 : 6}` / `size={isMobile ? 12 : 5}`), where
   `isMobile` is true below 768px. In the original, React re-renders the MUI
   Grid with different emotion classes; here the same result is achieved with a
   media query so a single static document covers both layouts.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .css-14wd3ve,
  .css-1r7ztuo {
    width: calc(100% * 12 / var(--Grid-parent-columns) - (var(--Grid-parent-columns) - 12) * (var(--Grid-parent-columnSpacing) / var(--Grid-parent-columns)));
  }
}

/* The <picture> element added around .growingWallImg (the bundle swaps the src
   between growingWall.svg and growingWallMobile.svg at the same 768px point)
   must not disturb the wrapper's layout. */
.growingWallImgWrap picture {
  display: contents;
}

/* Honeypot: a field only an automated script would fill in. Kept out of the
   layout, out of the tab order and out of the accessibility tree, rather than
   display:none, which some bots check for. */
.claimTrapWrap {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* The Terms and Conditions accordion and the two buttons next to it are direct
   children of the MUI grid container, which is a wrapping flexbox that stretches
   every item in a row to the tallest one. Opening the accordion therefore
   stretched the buttons to its full height. Keep them at their natural size,
   aligned with the accordion's heading row. */
.claimSection .MuiGrid2-container > .claimActions {
  align-self: flex-start;
}