/*
 * FGMC Retreat M5.7.3 — Mobile Interface Hotfix
 *
 * Purpose:
 * - stop the hero content from becoming a giant oval on phones;
 * - remove conflicting height, aspect-ratio, clipping and parallax transforms;
 * - keep desktop styling and all registration/payment logic unchanged.
 */

@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #page-landing {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Keep the fixed navigation compact without altering its desktop design. */
  .site-nav.fgmc-v2-nav {
    width: 100% !important;
    max-width: 100% !important;
  }

  .site-nav.fgmc-v2-nav .nav-main-row {
    width: 100% !important;
    min-width: 0 !important;
  }

  .site-nav.fgmc-v2-nav .nav-brand,
  .site-nav.fgmc-v2-nav .logo-text {
    min-width: 0 !important;
  }

  /* Restore a normal mobile hero canvas. */
  #page-landing .hero.fgmc-v2-hero {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 94px 12px 34px !important;
    display: block !important;
    overflow: hidden !important;
    text-align: left !important;
    isolation: isolate !important;
  }

  #page-landing .hero.fgmc-v2-hero::before {
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    clip-path: none !important;
    transform: none !important;
    filter: none !important;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .46), rgba(0, 0, 0, .82)) !important;
  }

  #page-landing .hero-slides,
  #page-landing .hero-slide,
  #page-landing .hero-slide::after {
    border-radius: 0 !important;
    clip-path: none !important;
  }

  #page-landing .hero-v2-grid {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }

  /*
   * This is the element that was expanding into the large oval.
   * Reset every geometric property that may be inherited from earlier
   * mobile/design blocks.
   */
  #page-landing .hero-content.hero-premium-copy {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;

    margin: 0 !important;
    padding: 20px 15px !important;

    border-radius: 24px !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;

    background:
      linear-gradient(180deg, rgba(5, 5, 5, .72), rgba(20, 0, 0, .62)) !important;
    border: 1px solid rgba(215, 181, 109, .30) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .32) !important;

    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    rotate: 0deg !important;
    filter: none !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;

    overflow: visible !important;
    opacity: 1 !important;
  }

  #page-landing .hero-content.hero-premium-copy::before,
  #page-landing .hero-content.hero-premium-copy::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    filter: none !important;
  }

  #page-landing .hero-content.hero-premium-copy > * {
    position: relative;
    z-index: 2;
    max-width: 100% !important;
  }

  #page-landing .hero-premium-copy h1.hero-title,
  #page-landing .hero-premium-copy h1.typewriter-title {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 11px 0 13px !important;
    font-size: clamp(2rem, 11.6vw, 3.25rem) !important;
    line-height: 1.02 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
    transform: none !important;
    filter: none !important;
  }

  #page-landing .typewriter-title .tw-line,
  #page-landing .typewriter-title .tw-line-1,
  #page-landing .typewriter-title .tw-line-2,
  #page-landing .typewriter-title .tw-line-3 {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    border-right: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
  }

  #page-landing .hero-premium-copy p {
    width: 100% !important;
    max-width: 100% !important;
    font-size: .94rem !important;
    line-height: 1.55 !important;
  }

  #page-landing .hero-premium-copy .event-meta {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    justify-items: start !important;
    gap: 9px !important;
  }

  #page-landing .hero-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }

  #page-landing .hero-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* The hero side panel must follow the copy instead of overlapping it. */
  #page-landing .hero-side-panel {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: block !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    filter: none !important;
    clip-path: none !important;
    overflow: visible !important;
  }

  #page-landing .scripture-card {
    display: none !important;
  }

  #page-landing .countdown-card {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 16px 10px !important;
    border-radius: 20px !important;
    clip-path: none !important;
    background: rgba(5, 5, 5, .78) !important;
    border: 1px solid rgba(215, 181, 109, .30) !important;
    transform: none !important;
    filter: none !important;
    overflow: hidden !important;
  }

  #page-landing .countdown-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #page-landing .countdown-grid > div {
    min-width: 0 !important;
    padding: 10px 3px !important;
    border-radius: 13px !important;
  }

  #page-landing .countdown-grid strong {
    font-size: clamp(1.3rem, 7vw, 1.8rem) !important;
  }

  #page-landing .countdown-grid small {
    font-size: 8px !important;
    letter-spacing: .04em !important;
  }

  /* Keep the language control visible and outside the content panel. */
  .lang-toggle.floating-lang {
    position: fixed !important;
    top: 92px !important;
    right: auto !important;
    bottom: auto !important;
    left: 13px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 999px !important;
    transform: none !important;
    z-index: 10020 !important;
  }
}

@media (max-width: 420px) {
  #page-landing .hero.fgmc-v2-hero {
    padding-top: 88px !important;
  }

  #page-landing .hero-content.hero-premium-copy {
    padding: 18px 13px !important;
    border-radius: 21px !important;
  }

  #page-landing .hero-premium-copy h1.hero-title,
  #page-landing .hero-premium-copy h1.typewriter-title {
    font-size: clamp(1.9rem, 11.7vw, 2.85rem) !important;
  }

  #page-landing .countdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .nav-cta-price {
    display: none !important;
  }
}

/* Never apply the mobile reset on desktop. */
@media (min-width: 761px) {
  .fgmc-mobile-hotfix-marker {
    display: none !important;
  }
}