/* =========================================================
   PrepLingo mobile polish + performance layer
   Scope: mobile/tablet stability only. Desktop layout untouched.
   ========================================================= */

html, body { overflow-x: hidden !important; }

/* Keep footer logos/contact blocks from stretching on course pages with different CSS systems. */
.site-footer .footer-brand,
.site-footer .footer-brand p,
.site-footer .footer-brand .preplingo-footer-contact,
.site-footer .footer-brand .preplingo-footer-socials {
  max-width: 100% !important;
}
.site-footer .footer-brand img,
.footer-brand img {
  width: 132px !important;
  max-width: 132px !important;
  height: auto !important;
  max-height: 52px !important;
  object-fit: contain !important;
}

/* Mobile page-speed help: below-fold sections render lazily where supported. */
@supports (content-visibility: auto) {
  section:not(.hero):not(.about-hero):not(.contact-hero):not(.terms-hero):not(#sec-hero),
  .pl-seo-cluster,
  .site-footer {
    content-visibility: auto;
    contain-intrinsic-size: 1px 720px;
  }
}

@media (max-width: 980px) {
  .pl-header-container { min-height: 70px !important; }
  .pl-brand img { width: 120px !important; max-width: 120px !important; max-height: 48px !important; }
  .pl-mobile-panel { max-height: 72vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* Horizontal course journeys looked like broken overflow on phones. Stack only on mobile/tablet. */
  .journey-line,
  .path-track {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: visible !important;
    gap: 14px !important;
    padding: 0 !important;
  }
  .journey-step,
  .path-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    transform: none !important;
  }
  .journey-step::after,
  .journey-step:not(:last-child)::after { display: none !important; }

  /* Decorative blobs/bubbles should not create perceived overlap or side overflow on mobile. */
  .blob,
  .blob.two,
  .blob-one,
  .blob-two,
  .duo-bubble,
  .stat-bubble {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .pl-header-container {
    width: min(100% - 24px, 760px) !important;
    min-height: 66px !important;
    gap: 10px !important;
  }
  .pl-brand img { width: 112px !important; max-width: 112px !important; }
  .pl-header-whatsapp { width: 40px !important; min-height: 40px !important; }
  .pl-mobile-toggle { width: 40px !important; height: 40px !important; }

  /* Duolingo hero: keep all score/map cards visible and separated on phones. */
  body .duo-hero { min-height: auto !important; }
  body .duo-panel {
    min-height: 735px !important;
    overflow: hidden !important;
    padding: 18px !important;
    border-radius: 30px !important;
  }
  body .duo-topbars { left: 44px !important; right: 22px !important; gap: 10px !important; }
  body .duo-owl {
    left: 50% !important;
    top: 78px !important;
    transform: translateX(-50%) scale(.86) !important;
  }
  body .duo-mock-card {
    left: 50% !important;
    top: 34px !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: calc(100% - 38px) !important;
    white-space: normal !important;
  }
  body .duo-score-card {
    left: 18px !important;
    right: 18px !important;
    top: 314px !important;
    width: auto !important;
  }
  body .duo-lesson-card {
    left: 18px !important;
    right: 18px !important;
    top: 458px !important;
    width: auto !important;
  }
  body .duo-speak-card {
    left: 18px !important;
    right: 18px !important;
    bottom: 26px !important;
    width: auto !important;
  }

  /* TOEFL hero: separate mission board floating cards on phones. */
  body .mission-board {
    min-height: 840px !important;
    overflow: hidden !important;
    border-radius: 30px !important;
    padding: 18px !important;
  }
  body .format-pill {
    left: 50% !important;
    right: auto !important;
    top: 42px !important;
    transform: translateX(-50%) !important;
    max-width: calc(100% - 38px) !important;
    white-space: normal !important;
  }
  body .main-task-card {
    left: 18px !important;
    right: 18px !important;
    top: 112px !important;
    width: auto !important;
  }
  body .score-card {
    left: 24px !important;
    right: 24px !important;
    top: 438px !important;
    width: auto !important;
  }
  body .speaking-card {
    left: 24px !important;
    right: 24px !important;
    top: 594px !important;
    width: auto !important;
  }
  body .writing-card {
    left: 24px !important;
    right: 24px !important;
    bottom: 32px !important;
    width: auto !important;
  }

  /* Footer columns should never sit side-by-side on phones. */
  .site-footer .footer-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
}

@media (max-width: 520px) {
  .pl-brand img { width: 106px !important; max-width: 106px !important; }
  body .duo-panel { min-height: 760px !important; }
  body .mission-board { min-height: 870px !important; }
  .lesson-item { grid-template-columns: 58px 1fr 30px !important; }
}