/* =====================================================================
   Lingokids partner landing pages — tablet / landscape-phone gap fix
   Pages:  /americanairlines (post 88043)
           /tclpromo         (post 88430)
           /contixo          (post 88538)

   Scope:  ONLY viewports 768px–999px wide (Elementor "tablet" range).
           This is also where phones in LANDSCAPE land (812/844/896px).
           <768px (portrait phones) and >=1000px (desktop) are untouched.

   Why:    In this range Elementor shows the desktop sections but keeps
           fixed min-heights (hero 788px, features 88vh, T&Cs 709px)
           while the content shrinks, leaving big empty bands between
           blocks. A 55px purple spacer container adds to the gap, and
           the header logo <img> is a fixed 333px inside a 20% column
           so it overlaps the nav / rating badge.

   Zero-tracking: pure CSS. No scripts, pixels, fonts or embeds.
   Where to paste: Appearance > Customize > Additional CSS
                   (or Elementor > Site Settings > Custom CSS).
   ===================================================================== */

@media (min-width: 768px) and (max-width: 999px) {

  /* 1. Hero (desktop variant): drop the 788px min-height, size to content */
  .elementor-page-88043 .elementor-88043 .elementor-element.elementor-element-03c1569,
  .elementor-page-88430 .elementor-88430 .elementor-element.elementor-element-03c1569,
  .elementor-page-88538 .elementor-88538 .elementor-element.elementor-element-03c1569 {
    --min-height: 0;
    --padding-top: 48px;
    --padding-bottom: 48px;
  }

  /* 2. "Everything kids love" / PLAAAY block: drop the 88vh min-height.
        Extra bottom padding keeps the scalloped edge of the background
        image below the CTA + privacy line. */
  .elementor-page-88043 .elementor-88043 .elementor-element.elementor-element-27d2a5f,
  .elementor-page-88430 .elementor-88430 .elementor-element.elementor-element-27d2a5f,
  .elementor-page-88538 .elementor-88538 .elementor-element.elementor-element-27d2a5f {
    --min-height: 0;
    --padding-top: 56px;
    --padding-bottom: 110px;
  }

  /* 3. 55px solid spacer container between features and T&Cs: hide it.
        (Still shown on desktop >=1000px, where it was designed.) */
  .elementor-page-88043 .elementor-88043 .elementor-element.elementor-element-a7ef7f0,
  .elementor-page-88430 .elementor-88430 .elementor-element.elementor-element-a7ef7f0,
  .elementor-page-88538 .elementor-88538 .elementor-element.elementor-element-a7ef7f0 {
    display: none;
  }

  /* 4. Terms & conditions: drop the 709px min-height */
  .elementor-page-88043 .elementor-88043 .elementor-element.elementor-element-e082069,
  .elementor-page-88430 .elementor-88430 .elementor-element.elementor-element-e082069,
  .elementor-page-88538 .elementor-88538 .elementor-element.elementor-element-e082069 {
    --min-height: 0;
    --padding-top: 64px;
    --padding-bottom: 64px;
  }

  /* 5. Site header logo: let it shrink into its 20% column instead of
        overlapping the nav and the "4.7 by 1M families" badge.
        Scoped to these three pages only; the header template (84321)
        itself is not changed. */
  .elementor-page-88043 .elementor-84321 .elementor-element-b76adb8 img,
  .elementor-page-88430 .elementor-84321 .elementor-element-b76adb8 img,
  .elementor-page-88538 .elementor-84321 .elementor-element-b76adb8 img {
    max-width: 100%;
    height: auto;
  }
}


/* =====================================================================
   PART 2 — /americanairlines only: match Figma "Module2: everything
   kids love" (node 326:410). Phone widths <768px.

   Problem A: the yellow section uses background-size: cover on a
   1170x2061 PNG that has PLAAAY at the top and the scalloped edge at
   the bottom. Cover crops the image top as the viewport widens, so
   on anything wider than ~380px the PLAAAY lettering slides up under
   the "Everything kids love!" heading.
   Fix: anchor the image to the top at 100% width and let the section
   height follow the image's aspect ratio (2061/1170 = 176vw) so the
   scallop still lands on the bottom edge.

   Problem B: the "© MARVEL 2026" vertical copyright from the design
   is missing. Added as ::after (no DOM change needed).
   ===================================================================== */

@media (max-width: 767px) {

  .elementor-page-88043 .elementor-88043 .elementor-element.elementor-element-85ab63f {
    background-size: 100% auto !important;   /* Elementor inlines cover; !important needed here */
    background-position: center top !important;
    --min-height: 176vw;                      /* = image aspect, keeps scallop at bottom */
    --padding-top: 5vw;                       /* heading sits at design offset above PLAAAY */
  }

  /* Phone mockup: don't let it grow past design proportions on wide phones */
  .elementor-page-88043 .elementor-88043 .elementor-element.elementor-element-85ab63f .elementor-widget-image {
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* "© MARVEL 2026" vertical copyright — bottom-left of the features block,
   mobile (85ab63f) and desktop (27d2a5f) variants. PP Agrandir Medium,
   #351F62, reads bottom-to-top as in Figma. */
.elementor-page-88043 .elementor-element-85ab63f,
.elementor-page-88043 .elementor-element-27d2a5f {
  position: relative;
}
.elementor-page-88043 .elementor-element-85ab63f::after,
.elementor-page-88043 .elementor-element-27d2a5f::after {
  content: "\00a9 MARVEL 2026";
  position: absolute;
  left: 8px;
  bottom: 36px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: "PP Agrandir", sans-serif;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: .04em;
  color: #351f62;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}
@media (min-width: 768px) {
  .elementor-page-88043 .elementor-element-27d2a5f::after {
    left: 24px;
    bottom: 140px;
    font-size: 11px;
  }
}