/* ==========================================================================
   Uncover Academy — responsive overrides
   The site pages are authored with inline styles, so these rules use
   !important to win the cascade. Loaded last, after the page stylesheet.
   ========================================================================== */

html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; }
.ua-root{ overflow-x:hidden; }
img, video, svg, iframe{ max-width:100%; }

/* Room for the sticky bar so it never covers the end of the page */
body.ua-has-sticky{ padding-bottom:0; }
@media (max-width:900px){
  body.ua-has-sticky{ padding-bottom:84px; }
}

/* Grid/flex children must be allowed to shrink, otherwise a wide descendant
   forces the track wider than the viewport (the classic min-content overflow).
   Scoped to narrow screens so desktop layout is untouched. */
@media (max-width:1024px){
  .ua-root [style*="display:grid"] > *,
  .ua-root [style*="display:flex"] > *{ min-width:0; }
  .ua-root h1, .ua-root h2, .ua-root h3, .ua-root p{ overflow-wrap:break-word; }
}

/* ==========================  TABLET  ====================================== */
@media (max-width:1024px){
  .ua-root [style*="max-width:1220px"]{ padding-left:24px !important; padding-right:24px !important; }
  .ua-root [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"]{ grid-template-columns:1fr 1fr !important; }
  .ua-root [style*="grid-template-columns:repeat(4,1fr)"]{ grid-template-columns:repeat(2,1fr) !important; }
  .ua-root [style*="grid-template-columns:repeat(3,1fr)"]{ grid-template-columns:repeat(2,1fr) !important; }
  .ua-root [style*="gap:64px"]{ gap:40px !important; }
  .ua-root [style*="gap:60px"]{ gap:38px !important; }
}

/* ==========================  MOBILE  ====================================== */
@media (max-width:900px){

  /* ---- containers ---- */
  .ua-root [style*="max-width:1220px"]{ padding-left:20px !important; padding-right:20px !important; }

  /* ---- section padding: trim the tall desktop rhythm ---- */
  .ua-root [style*="padding:88px 32px 30px"]{ padding:48px 20px 24px !important; }
  .ua-root [style*="padding:84px 32px"]{ padding:48px 20px !important; }
  .ua-root [style*="padding:80px 32px"]{ padding:46px 20px !important; }
  .ua-root [style*="padding:78px 32px 84px"]{ padding:44px 20px 48px !important; }
  .ua-root [style*="padding:74px 32px 78px"]{ padding:42px 20px 46px !important; }
  .ua-root [style*="padding:72px 32px"]{ padding:44px 20px !important; }
  .ua-root [style*="padding:70px 32px"]{ padding:42px 20px !important; }
  .ua-root [style*="padding:60px 32px 40px"]{ padding:40px 20px 28px !important; }
  .ua-root [style*="padding:56px 32px 96px"]{ padding:36px 20px 56px !important; }
  .ua-root [style*="padding:34px 32px 48px"]{ padding:26px 20px 32px !important; }
  .ua-root [style*="padding:34px 32px 0"]{ padding:26px 20px 0 !important; }
  .ua-root [style*="padding:30px 32px 56px"]{ padding:24px 20px 36px !important; }
  .ua-root [style*="padding:30px 32px"]{ padding:24px 20px !important; }

  /* ---- header: logo + CTA on row one, nav wraps to row two ---- */
  .ua-root header > div{
    height:auto !important; flex-wrap:wrap !important;
    padding-top:12px !important; padding-bottom:8px !important; gap:12px !important;
  }
  .ua-root header nav{
    order:3; width:100% !important; gap:18px !important;
    font-size:13.5px !important; overflow-x:auto; padding-bottom:2px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .ua-root header nav::-webkit-scrollbar{ display:none; }
  .ua-root header nav a{ white-space:nowrap; }
  .ua-root header [style*="font-size:25px"]{ font-size:21px !important; }
  /* "Talk to us" is covered by the WhatsApp button on mobile — drop it so the
     logo and Apply Now share one row and the sticky header stays short. */
  .ua-root header > div > div > a.ua-navlink{ display:none !important; }
  .ua-root header > div > div{ gap:0 !important; }

  /* ---- every multi-column grid stacks ---- */
  .ua-root [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  /* small tiles read better two-up */
  .ua-root [style*="grid-template-columns:repeat(4,1fr)"],
  .ua-root [style*="grid-template-columns:repeat(2,1fr)"],
  .ua-root [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"]{ grid-template-columns:repeat(2,1fr) !important; }
  .ua-root [style*="gap:64px"], .ua-root [style*="gap:60px"]{ gap:32px !important; }
  .ua-root [style*="gap:30px"]{ gap:22px !important; }

  /* ---- headings and display type ---- */
  .ua-root [style*="font-size:60px"]{ font-size:34px !important; line-height:1.12 !important; }
  .ua-root [style*="font-size:58px"]{ font-size:33px !important; line-height:1.12 !important; }
  .ua-root [style*="font-size:52px"]{ font-size:31px !important; line-height:1.14 !important; }
  .ua-root [style*="font-size:46px"]{ font-size:28px !important; line-height:1.16 !important; }
  .ua-root [style*="font-size:44px"]{ font-size:27px !important; line-height:1.16 !important; }
  .ua-root [style*="font-size:42px"]{ font-size:26px !important; line-height:1.18 !important; }
  .ua-root [style*="font-size:40px"]{ font-size:25px !important; }
  .ua-root [style*="font-size:34px"]{ font-size:23px !important; }
  .ua-root [style*="font-size:30px"]{ font-size:22px !important; }
  .ua-root [style*="font-size:28px"]{ font-size:21px !important; }
  .ua-root [style*="font-size:27px"]{ font-size:20px !important; }
  .ua-root [style*="font-size:26px"]{ font-size:20px !important; }
  .ua-root [style*="font-size:23px"]{ font-size:19px !important; }
  .ua-root [style*="font-size:18px"]{ font-size:16px !important; }
  .ua-root [style*="font-size:17px"]{ font-size:15.5px !important; }

  /* ---- imagery ---- */
  .ua-root [style*="height:540px"]{ height:300px !important; }
  .ua-root [style*="height:520px"]{ height:290px !important; }
  .ua-root [style*="height:460px"]{ height:260px !important; }
  .ua-root [style*="height:420px"]{ height:240px !important; }
  .ua-root [style*="height:300px"]{ height:220px !important; }
  .ua-root [style*="height:200px"]{ height:190px !important; }

  /* ---- the hero's floating stat card: sit it in the flow ---- */
  .ua-root [style*="position:absolute"][style*="left:-26px"]{
    position:static !important; margin:-28px 6px 0 !important; max-width:none !important;
  }
  /* decorative glow blobs must never widen the page */
  .ua-root [style*="position:absolute"][style*="right:-100px"]{ display:none !important; }

  /* ---- buttons: comfortable tap targets, full width in content ---- */
  .ua-root .ua-btn-primary, .ua-root .ua-btn-outline{
    width:100% !important; justify-content:center !important;
    min-height:50px !important; font-size:15.5px !important;
  }
  .ua-root header .ua-btn-primary, .ua-root header .ua-btn-outline{
    width:auto !important; min-height:44px !important; height:44px !important;
    padding:0 18px !important; font-size:14px !important;
  }

  /* ---- tap targets: give links room for a thumb ---- */
  .ua-root header nav a{ min-height:34px; display:inline-flex; align-items:center; }
  .ua-root footer a{ min-height:34px; display:flex !important; align-items:center; }
  .ua-root a.ua-navlink, .ua-root a.ua-a{ }
  .ua-root [style*="letter-spacing:.02em"] + a, .ua-root a[href^="tel:"], .ua-root a[href^="mailto:"]{
    min-height:34px; display:inline-flex !important; align-items:center;
  }

  /* ---- misc ---- */
  .ua-root [style*="letter-spacing:.22em"]{ letter-spacing:.14em !important; }
  .ua-root details summary{ padding-left:16px !important; padding-right:16px !important; }
}

/* ==========================  SMALL PHONES  =============================== */
@media (max-width:400px){
  .ua-root [style*="max-width:1220px"]{ padding-left:16px !important; padding-right:16px !important; }
  .ua-root [style*="font-size:60px"]{ font-size:30px !important; }
  .ua-root [style*="font-size:58px"]{ font-size:29px !important; }
  .ua-root [style*="font-size:52px"]{ font-size:28px !important; }
  .ua-root header nav{ gap:14px !important; font-size:13px !important; }
  /* two-up tiles get cramped below 400px */
  .ua-root [style*="grid-template-columns:repeat(4,1fr)"],
  .ua-root [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"]{ grid-template-columns:1fr !important; }
}