/* ============================================================
   APEX QUEBEC — iPad + MacBook Responsive Fix
   Covers: iPad (768-1279px) + MacBook (1280-1440px)
   Link AFTER style.css:
   <link rel="stylesheet" href="assets/css/ipad-fixes.css">
   ============================================================ */

html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* ============================================================
   1. HEADER — iPad only
   ============================================================ */
@media (min-width: 768px) and (max-width: 1279px) {
  .header-area nav { display: none !important; }
  #menuBtn { display: flex !important; }
  .header-area img[alt="Quebec"] { height: 44px !important; }
  .header-area img[alt="Apex"]   { height: 52px !important; }
}

/* ============================================================
   2A. HERO — iPad (768-1279px)
   Form stacked below banner, perfectly centered
   ============================================================ */
@media (min-width: 768px) and (max-width: 1279px) {

  section.hero {
    margin-top: 70px !important;
    padding-top: 0 !important;
    overflow: visible !important;
    background: #342024 !important;
  }

  /* Show landscape banner */
  section.hero img.hero-bg:first-of-type {
    display: block !important;
    position: relative !important;
    inset: unset !important;
    width: 100% !important;
    height: 370px !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  section.hero img.hero-bg:last-of-type {
    display: none !important;
  }

  section.hero .hero-content {
    position: relative !important;
    z-index: 10 !important;
    background: #342024 !important;
  }

  /* Flex column, centered */
  section.hero .hero-content > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 40px 20px 70px !important;
    margin: 0 !important;
    grid-template-columns: unset !important;
  }

  /* Hide empty left column div */
  section.hero .hero-content > div > div:first-child {
    display: none !important;
  }

  /* FORM — perfectly centered */
  section.hero #form {
    position: relative !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    left: unset !important;
    right: unset !important;
    transform: none !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  section.hero .xl\:ms-auto {
    margin-inline-start: auto !important;
    margin-inline-end: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ============================================================
   2B. HERO — MacBook 13" (1280-1440px)
   Banner must show + form must be visible in right column
   ============================================================ */
@media (min-width: 1280px) and (max-width: 1440px) {

  section.hero {
    margin-top: 60px !important;
    padding-top: 80px !important;
    overflow: hidden !important;
  }

  /* Banner: must cover full area */
  section.hero img.hero-bg {
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Grid wrapper — remove extra bottom spacing */
  section.hero .hero-content > div {
    width: 94% !important;
    padding-top: 20px !important;
    padding-bottom: 10px !important;
  }

  /* Kill Tailwind xl:pb-24 (96px) — the main culprit */
  section.hero .hero-content .xl\:pb-24 { padding-bottom: 10px !important; }
  section.hero .hero-content .xl\:pt-0  { padding-top: 10px !important; }
  section.hero .hero-content .pb-8       { padding-bottom: 0 !important; }

  /* Form size for MacBook */
  section.hero #form {
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }
}

/* ============================================================
   3. USP MARQUEE
   ============================================================ */
@media (min-width: 768px) and (max-width: 1279px) {
  .usp-marquee-wrapper { overflow: hidden !important; width: 100% !important; }
  .usp-marquee-track   { gap: 40px !important; }
  .usp-card            { width: 140px !important; }
}

/* ============================================================
   4. ABOUT PROJECT
   ============================================================ */
@media (min-width: 768px) and (max-width: 1279px) {
  #about-project .grid-cols-1.lg\:grid-cols-2 {
    grid-template-columns: 1fr 1fr !important;
    display: grid !important;
  }
  #about-project .relative.h-\[260px\] { height: 360px !important; }
  #about-project .p-7      { padding: 24px !important; }
  #about-project .lg\:p-16 { padding: 28px !important; }
  #about-project h2        { font-size: 28px !important; }
  #moreContent   { display: inline !important; }
  #readMoreBtn   { display: none !important; }
}

/* ============================================================
   5. AMENITIES
   ============================================================ */
@media (min-width: 768px) and (max-width: 1279px) {
  #amenities .hidden.lg\:grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  #amenities .swiper.amenitiesSlider    { display: none !important; }
  #amenities .relative.overflow-hidden.min-h-\[530px\] { min-height: 360px !important; }
  #amenities h3 { font-size: 20px !important; }
  #amenities p  { font-size: 14px !important; }
}

/* ============================================================
   6. FLOOR PLANS
   ============================================================ */
@media (min-width: 768px) and (max-width: 1279px) {
  #floorplans .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  #floorGrid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .floorSlider       { display: none !important; }
  .floorItem img     { height: 220px !important; }
}

/* ============================================================
   7. PAYMENT PLAN
   ============================================================ */
@media (min-width: 768px) and (max-width: 1279px) {
  #drio-container img { aspect-ratio: 16 / 9 !important; }
  .drio-unlock-btn    { font-size: 14px !important; padding: 12px 22px !important; }
}

/* ============================================================
   8. LOCATION
   ============================================================ */
@media (min-width: 768px) and (max-width: 1279px) {
  #location .grid.lg\:grid-cols-\[1\.1fr_\.9fr\] {
    grid-template-columns: 1fr 1fr !important;
    display: grid !important;
    gap: 20px !important;
  }
  #location iframe { width: 100% !important; height: 320px !important; }
  #location .grid.grid-cols-2.md\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   9. LEGACY / STATS
   ============================================================ */
@media (min-width: 768px) and (max-width: 1279px) {
  .legacy-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .legacy-card h3 { font-size: 42px !important; }
}

/* ============================================================
   10. GALLERY
   ============================================================ */
@media (min-width: 768px) and (max-width: 1279px) {
  .gallery-item { height: 340px !important; }
}

/* ============================================================
   11. FAQ
   ============================================================ */
@media (min-width: 768px) and (max-width: 1279px) {
  #faq .max-w-3xl { max-width: 100% !important; padding: 0 16px !important; }
}

/* ============================================================
   12. FOOTER
   ============================================================ */
@media (min-width: 768px) and (max-width: 1279px) {
  footer .grid.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
  }
  footer .lg\:col-span-2 { grid-column: span 2 !important; }
}

/* ============================================================
   13. MOBILE FOOTER — hide on tablet+
   ============================================================ */
@media (min-width: 768px) {
  .mobile-footer { display: none !important; }
}

/* ============================================================
   14. MODALS
   ============================================================ */
@media (min-width: 768px) and (max-width: 1279px) {
  #formModal > div,
  #formModal1 > div,
  #formModal2 > div,
  #catalogueModal > div {
    max-width: 460px !important;
    width: 90% !important;
  }
}

/* ============================================================
   15. FLOATING BUTTON + WHATSAPP
   ============================================================ */
@media (min-width: 768px) and (max-width: 1279px) {
  #openFormBtn2          { right: -52px !important; }
  a[href*="whatsapp"]    { bottom: 24px !important; right: 20px !important; }
}

/* ============================================================
   16. PAYMENT PLAN HEADING + GALLERY TITLE
   ============================================================ */
@media (min-width: 768px) and (max-width: 1279px) {
  .payment-plan-heading { font-size: 44px !important; }
  #gallery1 h2          { font-size: 34px !important; }
}

/* ============================================================
   MACBOOK — Overflow safety
   ============================================================ */
@media (min-width: 1280px) and (max-width: 1440px) {
  section, .container-main { overflow-x: hidden !important; }
  #location iframe          { width: 100% !important; }
}