/* ============================================
   EVENTS BY MERRY — Mobile Responsive Fixes
   ============================================ */

/* Ensure any remaining opacity:0 elements are visible
   (GSAP animations won't run in static version) */
[style*="opacity:0"] {
  opacity: 1 !important;
}

/* Fix reveal overlay blocks (white/cream covers over images) */
div[style*="background:#e8e4df"][style*="z-index:2"],
div[style*="background:#fff"][style*="z-index:3"] {
  transform: translateX(100%) !important;
}

/* Ensure hero content container is visible */
#home > div[style*="z-index:10"] {
  opacity: 1 !important;
  transform: none !important;
}

/* ---- TABLET (max-width: 1024px) ---- */
@media (max-width: 1023px) {

  /* About Grid: stack vertically */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  /* Services Grid: keep 2 cols but reduce gap */
  .services-grid {
    gap: 16px !important;
  }

  /* Wedding Grid: 2 columns */
  .wedding-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 280px 280px 280px !important;
  }
  .wedding-card-large {
    grid-row: auto !important;
  }

  /* Process Grid: 2x2 */
  .process-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px 0 !important;
  }
  .process-line {
    display: none !important;
  }

  /* Gallery: 2 columns */
  .gallery-cols {
    column-count: 2 !important;
  }

  /* Trust Grid: 2 columns */
  .trust-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Contact Grid: stack */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  /* Footer Grid: 2x2 */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px !important;
  }

  /* Location Grid */
  .location-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Reception Grid */
  .reception-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Section padding reduction */
  #about,
  #services,
  #process,
  #gallery,
  section[style*="padding:140px"] {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
}


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

  /* --- NAVIGATION --- */
  .nav-links {
    display: none !important;
  }
  .nav-cta {
    display: none !important;
  }
  .nav-burger {
    display: block !important;
  }

  /* Mobile Menu Overlay */
  .mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 55;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }
  .mobile-menu.open {
    opacity: 1;
    pointer-events: all;
  }
  .mobile-menu a {
    font-family: Forum, serif;
    font-size: 28px;
    color: #1a1a2e;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.3s;
  }
  .mobile-menu a:hover {
    color: #c4a265;
  }
  .mobile-menu .btn {
    font-size: 15px;
    margin-top: 16px;
  }

  /* --- HERO SECTION --- */
  #home {
    min-height: 100svh !important;
  }

  /* --- ABOUT GRID --- */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* --- SERVICES GRID: single column --- */
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* --- WEDDING GRID: single column --- */
  .wedding-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: 300px repeat(4, 220px) !important;
  }
  .wedding-card-large {
    grid-row: auto !important;
  }

  /* --- RECEPTION GRID --- */
  .reception-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* --- PROCESS GRID: 2x2 --- */
  .process-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 36px 16px !important;
  }
  .process-line {
    display: none !important;
  }

  /* --- GALLERY: 2 columns --- */
  .gallery-cols {
    column-count: 2 !important;
    column-gap: 12px !important;
  }

  /* --- TESTIMONIALS --- */
  .testimonial-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- LOCATION GRID --- */
  .location-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* --- TRUST GRID: 2 columns --- */
  .trust-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* --- CONTACT CTA --- */
  .cta-btns {
    flex-direction: column !important;
    align-items: center !important;
  }
  .cta-btns .btn {
    width: 100%;
    justify-content: center;
  }
  .cta-contact {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .cta-contact span[style*="width:4px"] {
    display: none !important;
  }

  /* --- CONTACT GRID: stack --- */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* --- FORM ROWS: single column --- */
  .form-row {
    grid-template-columns: 1fr !important;
  }

  /* --- FOOTER GRID: stack --- */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* --- FOOTER BOTTOM --- */
  .footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }

  /* --- SECTION PADDING REDUCTION --- */
  #about,
  #services,
  #process,
  #gallery,
  section[style*="padding:140px"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* --- HERO BOTTOM PADDING --- */
  #home > div[style*="padding"] {
    padding-bottom: 60px !important;
  }

  /* --- STATS ROW --- */
  .about-grid div[style*="gap:48px"] {
    gap: 24px !important;
  }
}


/* ---- SMALL MOBILE (max-width: 480px) ---- */
@media (max-width: 480px) {

  /* Process: single column */
  .process-grid {
    grid-template-columns: 1fr !important;
    gap: 40px 0 !important;
  }

  /* Trust: single column */
  .trust-grid {
    grid-template-columns: 1fr !important;
  }

  /* Gallery: single column */
  .gallery-cols {
    column-count: 1 !important;
  }

  /* Wedding grid heights */
  .wedding-grid {
    grid-template-rows: repeat(5, 240px) !important;
  }

  /* Form padding */
  form[style*="padding:44px"] {
    padding: 28px 20px !important;
  }

  /* Buttons full width */
  .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Gallery filter buttons scroll */
  .gallery-cols + div,
  div[style*="flex-wrap:wrap"][style*="justify-content:center"] {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
}