/*
 * Tablet and phone fixes (screens up to 1024 px wide; the <link> carries the same media query, so
 * computers never apply these and look exactly as the live site does). Loaded before phone.css,
 * whose phone rules come after these. Found by the 16 Nov 2026 check (.notes/fix-plan-mobile-seo.md, A1-A7):
 * on tablets several event pages were wider than the screen and slid sideways.
 */

/* Tablets and phones */
@media (max-width: 1024px) {
  /* The enquiry forms ("Request the details of…"): their designs start the typing 60 px into each
     box (Text Indent; the summits' forms 15 px with no padding), a third of the box left empty.
     16 px from the edge instead. Not the phone box: its padding makes room for the flag.
     !important: each form sets these with its own, more specific rule. */
  .eael-contact-form-7 .wpcf7-form-control:is(input, textarea, select):not([type="tel"], [type="submit"], [type="checkbox"], [type="radio"], .intl-tel-input *) {
    padding-inline-start: 16px !important;
    text-indent: 0 !important;
  }

  /* RWE Summit 2027 and 2026: the faint "The JCA & PICO Strategy" behind the title is 533 px wide
     and ran off the screen (the page slid sideways on tablets); likewise HSE Nexus 2025's "Event
     Venue". Decoration only: hidden. */
  body .elementor :is(.elementor-element-0c2311f, .elementor-element-2cc27069) .ekit-heading__shadow-text {
    display: none;
  }

  /* The events' countdowns: the plugin pulls its row 15 px out at each side (for its own gutters),
     past the screen's edge ("Minutes" cut). The row stays within its box. */
  body .elementor .elementor-element.elementor-widget-eael-countdown .eael-countdown-container {
    margin-left: 0;
    margin-right: 0;
  }
  /* Their "Days / Hours / Minutes" (10-11 px): 12 px, Google's smallest for phones. */
  body .elementor .elementor-element.elementor-widget-eael-countdown .eael-countdown-label {
    font-size: 12px;
  }

  /* The enquiry forms' phone box: its typing starts after the flag and "+36" (80 px wide), not under
     them (HSE Nexus 3.0 on tablets started it at 60 px: "+36nter Your Phone Number"). */
  .intl-tel-input input:is(.wpcf7-form-control, [type="tel"]) {
    padding-inline-start: 92px !important;
    text-indent: 0 !important;
  }

  /* Event banners (pictures with words drawn into them) in fixed-height boxes, squashed or cropped
     to fill them ("…exus 3.0": HSE Nexus 3.0's lost 58% on phones, 24% on tablets): Next-Gen
     Payments 2027, RWE 2027 and 2026 (beside the form), the AI-Driven Market Access masterclass
     (top), HSE Nexus 3.0 (top and beside the form), HSE Nexus 2025, the Immunogenicity masterclass 2025
     (two) and the webinars. The whole picture, in its own shape. (Photos cropped to fill their box,
     as on the home page, are left as they are.) */
  body .elementor :is(.elementor-element-1c0ef0cd, .elementor-element-b99131d, .elementor-element-1f928d4, .elementor-element-643ca14, .elementor-element-7a3d0330, .elementor-element-ad78514, .elementor-element-3a6862e, .elementor-element-00a796f) img {
    height: auto !important;
    object-fit: contain !important;
  }

  /* Category pages' article pictures are shown as tall crops (3:4), and most are banners with
     words drawn into them, so the words were cut: on tablets and phones, the whole picture. */
  .wp-block-post-featured-image img {
    aspect-ratio: auto !important;
    height: auto !important;
  }

  /* The enquiry forms: the form and its boxes are set to 556-566 px, wider than their column (by
     140 px on tablets, 8 px on small phones). Never wider than the column. Next-Gen Payments 2027,
     RWE 2027 and 2026 (66f614aa); HSE Nexus 2025 (2042d7b1); the masterclasses (f1c8c70, 0895985: on
     phones also phone.css).
     !important: set by more specific rules. */
  body .elementor :is(.elementor-element-66f614aa, .elementor-element-2042d7b1, .elementor-element-f1c8c70, .elementor-element-0895985) :is(.eael-contact-form, .eael-contact-form-7-heading, .eael-contact-form-title, .eael-contact-form-description, .intl-tel-input, input, select, textarea) {
    max-width: 100% !important;
  }

  /* Ticket cards (HSE Nexus 3.0: rows 0fb2922 and 2302535; HSE Nexus 2.0: 2fa89df and 3544c73;
     Next-Gen Payments 2027: cb8ecec). A card's box fills its slot, but what shows is its portrait
     picture, which didn't cover the box and sat in a different place in each card (centred in one,
     at the left in the next), so the cards didn't line up; and the cards' headings keep the
     computers' negative spacing (meant for "Prague" with the date beside it), so on smaller screens
     they lay on top of each other. Each card: about the picture's width, centred, the picture
     covering it, the headings stacked. */
  body .elementor :is(.elementor-element-0fb2922, .elementor-element-2302535, .elementor-element-2fa89df, .elementor-element-3544c73, .elementor-element-cb8ecec) > .e-con-inner > .e-con > .e-con {
    --width: 100%;
    --align-self: center;
    /* The same spacing in every card (the "2 + 1 Delegates" one had none, its date touching "Prague"). */
    --row-gap: 20px;
    max-width: 300px;
    background-size: cover;
  }
  /* 20 px between the cards (on phones they stack, one on top of the other). */
  body .elementor .elementor-element:is(.elementor-element-0fb2922, .elementor-element-2302535, .elementor-element-2fa89df, .elementor-element-3544c73, .elementor-element-cb8ecec) {
    --row-gap: 20px;
  }
  body .elementor :is(.elementor-element-0fb2922, .elementor-element-2302535, .elementor-element-2fa89df, .elementor-element-3544c73, .elementor-element-cb8ecec) > .e-con-inner > .e-con > .e-con > .elementor-widget > .elementor-widget-container {
    margin: 0;
  }
  body .elementor :is(.elementor-element-0fb2922, .elementor-element-2302535, .elementor-element-2fa89df, .elementor-element-3544c73, .elementor-element-cb8ecec) > .e-con-inner > .e-con > .e-con .elementor-heading-title {
    white-space: normal;
  }

  /* Next-Gen Payments 2027's single "Standard Pass" card (row db0b568, without an inner box): the
     same squeezed headings, made as the other cards. */
  body .elementor .elementor-element-db0b568 > .e-con > .e-con > .elementor-widget > .elementor-widget-container {
    margin: 0;
  }
  body .elementor .elementor-element-db0b568 > .e-con > .e-con {
    --row-gap: 20px;
  }
  body .elementor .elementor-element-db0b568 > .e-con > .e-con .elementor-heading-title {
    white-space: normal;
  }
  body .elementor .elementor-element-db0b568 > .e-con {
    --width: 100%;
  }
  body .elementor .elementor-element-db0b568 > .e-con > .e-con {
    --width: 100%;
    --align-self: center;
    max-width: 300px;
    background-size: cover;
  }
}

/* Tablets only */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Ticket cards on tablets (the rows of the card rule above): each row puts its cards in slots of
     50%, 25% or 22%, each card 400 px wide, so the cards spilled off both sides of the screen. Two
     cards a row, centred. */
  body .elementor .elementor-element:is(.elementor-element-0fb2922, .elementor-element-2302535, .elementor-element-2fa89df, .elementor-element-3544c73, .elementor-element-cb8ecec) {
    --flex-wrap: wrap;
    --justify-content: center;
    --row-gap: 20px;
    --column-gap: 20px;
  }
  body .elementor :is(.elementor-element-0fb2922, .elementor-element-2302535, .elementor-element-2fa89df, .elementor-element-3544c73, .elementor-element-cb8ecec) > .e-con-inner > .e-con {
    --width: calc(50% - 10px);
  }
  /* RWE 2026's four white ticket cards (row 02f717e) fit, but their headings ("European", "RWE &
     Market Access", "Summit 2026", the date) lay on top of each other (the computers' negative
     spacing). Stacked, 10 px apart (more would reach the logo at the card's top). Phones were fine. */
  body .elementor .elementor-element-02f717e > .e-con > .e-con > .elementor-widget > .elementor-widget-container {
    margin: 0;
  }
  body .elementor .elementor-element-02f717e > .e-con > .e-con {
    --row-gap: 10px;
  }
  /* Next-Gen's cards hold a longer title: a little taller, so "Single Delegate" isn't cut at the bottom. */
  body .elementor .elementor-element-cb8ecec > .e-con-inner > .e-con > .e-con {
    --min-height: 540px;
  }

  /* The summits' enquiry form (Next-Gen Payments 2027, RWE 2027 and 2026; its width: above) touched
     the screen's right edge: 20 px kept at the right of its column. */
  body .elementor .elementor-element.elementor-element-7fbb8a3c {
    --padding-right: 20px;
  }

  /* Older event pages wider than a tablet: HSE Nexus 2025's "Register Here" (full width plus a
     28 px margin), the webinars' box beside the countdown (102% wide) and the Immunogenicity
     masterclass's "Register now" band (111.5% wide, pulled 44 px past the left). Within the screen. */
  body .elementor .elementor-element.elementor-element-0d09bf4 {
    --margin-left: 0px;
  }
  body .elementor .elementor-element:is(.elementor-element-c047e66, .elementor-element-e78d625) {
    --width: 100%;
    --margin-left: 0px;
    --margin-right: 0px;
  }
  /* The webinars' countdown: "Minutes" didn't fit beside its number in a half-width column: under
     it, as on phones (phone.css). */
  body .elementor-element-91e30d0 :is(.eael-countdown-digits, .eael-countdown-label) {
    display: block;
    text-align: center;
  }

  /* Home page, "Get in touch": the form's fields reach 7 px past the screen (Elementor's field
     gutters, pulled out at each side), so the page slid sideways a little. */
  body .elementor .elementor-element.elementor-element-7783dbb .elementor-form-fields-wrapper {
    margin-left: 0;
    margin-right: 0;
  }
}