/*
 * Phone fixes (screens up to 767 px wide; the <link> carries the same media query, so computers
 * and tablets never apply these and look exactly as the live site does).
 *
 * 34 of the live site's pages are wider than a phone (and were here too, copied exactly): visitors
 * had to slide sideways, or the phone zoomed the whole page out. Each rule below says what it fixes.
 */
@media (max-width: 767px) {
  /* Nothing slides sideways. What still sticks out past the edge is decoration only: the
     countdowns' 15 px side spacing, faint "shadow" headings, WooCommerce's hidden zoom picture,
     the events list's and inline icon lists' few-pixel gutters. */
  html,
  body {
    /* Both: with only the root clipped, Chrome still lays the page out wider than the phone.
       "clip" (newer browsers) doesn't make the body a scroll box; "hidden" is the fallback. */
    overflow-x: hidden;
    overflow-x: clip;
  }

  /* A word longer than the line breaks rather than running off the screen: the ticket titles'
     "Accommodation" and "Management:" at 48 px, and a long web address in the EPC contracts
     article. Only there: in boxes that size themselves to their words (the About Us "Featured
     Videos" heading), Chrome would then let the box shrink to a syllable. */
  .elementor-widget-woocommerce-product-title .product_title,
  .elementor-element-e72f82b {
    overflow-wrap: break-word;
  }

  /* Tables in articles and ticket descriptions scroll sideways inside themselves. !important for
     the editor's leftovers on the tables themselves: an inline "overflow: hidden" (cut the right
     side off, as on the Privacy Policy) and a fixed height (a table grows past it, a box doesn't).
     A table that fits shows no scroll bar. */
  .elementor-widget-text-editor table,
  .elementor-widget-woocommerce-product-content table {
    display: block;
    max-width: 100%;
    height: auto !important;
    overflow-x: auto !important;
  }

  /* The masterclasses' request form fits the screen: the form, its heading and boxes are set to
     556 px (and to a 1500 px limit) by rules more specific than this file's, hence !important. */
  .elementor-element-f1c8c70 .eael-contact-form,
  .elementor-element-f1c8c70 .eael-contact-form *,
  .elementor-element-0895985 .eael-contact-form,
  .elementor-element-0895985 .eael-contact-form * {
    max-width: 100% !important;
  }

  /* Next-Gen Payments Summit: the four ticket cards, set side by side and never wrapping, stack,
     centred, at about the width they have on computers, the card's picture covering it as there
     (on phones the page shrinks the picture to fit into a full-width box, and the white words
     then ran off it). */
  body .elementor .elementor-element.elementor-element-cb8ecec {
    --flex-wrap: wrap;
    --row-gap: 20px;
    --justify-content: center;
  }
  body .elementor .elementor-element-cb8ecec > .e-con-inner > .e-con {
    --width: 280px;
  }
  body .elementor .elementor-element-cb8ecec .e-con .e-con {
    background-size: cover;
    /* The computers' height: at the phones' 466 px the card's bottom label hung off its picture. */
    --min-height: 500px;
  }

  /* Green Finance and Renewable Energy Finance masterclasses: boxes pushed right by margins meant for computers. */
  body .elementor .elementor-element.elementor-element-1d3e8e7,
  body .elementor .elementor-element.elementor-element-5ed01c9 {
    --margin-left: 0px;
  }

  /* About Us, "Contact us Today": the square phone picture fills its box ("cover"), which phones
     make the screen's width and 300 px tall, so on wider phones the picture was cut to a strip (no
     top of the phone, no "Generating a Smarter Generation Ahead!"). A square box shows all of it,
     the phone rising out of the footer as on computers, at most 450 px wide and centred. */
  body .elementor .elementor-element.elementor-element-6490cd2 {
    --width: min(100%, 450px);
    --min-height: 0px;
    --margin-left: auto;
    --margin-right: auto;
    aspect-ratio: 1;
  }

  /* The webinars' and masterclasses' countdowns (large numbers): the label goes under its number,
     as the plugin's "block" label style does, so "00 Minutes" fits a third of the screen. The
     other countdowns fit as they are. */
  body .elementor-element-91e30d0 .eael-countdown-digits,
  body .elementor-element-91e30d0 .eael-countdown-label,
  body .elementor-element-4564b85 .eael-countdown-digits,
  body .elementor-element-4564b85 .eael-countdown-label,
  body .elementor-element-84aef19 .eael-countdown-digits,
  body .elementor-element-84aef19 .eael-countdown-label {
    display: block;
    text-align: center;
  }
}