/* Mobile event details stay fixed in one viewport with no nested scrolling. */
@media (max-width: 809.98px) {
  #attract-events-page {
    padding-bottom: 50px !important;
  }

  html.ae-modal-open,
  body.ae-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  #attract-event-modal {
    height: fit-content !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 32px) !important;
    margin: auto !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  #attract-event-modal::backdrop {
    background: rgba(2, 10, 8, 0.58) !important;
    backdrop-filter: blur(7px) saturate(0.9) !important;
    -webkit-backdrop-filter: blur(7px) saturate(0.9) !important;
  }

  #attract-event-modal .ae-modal-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: clamp(260px, 38dvh, 320px) minmax(0, 1fr) !important;
    height: fit-content !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #attract-event-modal .ae-modal-art {
    position: relative !important;
    z-index: 3 !important;
    top: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ae-line) !important;
  }

  #attract-event-modal .ae-modal-body {
    position: relative !important;
    z-index: 4 !important;
    height: fit-content !important;
    min-height: 0 !important;
    padding: 18px 20px 20px !important;
    overflow: hidden !important;
  }

  #attract-event-modal .ae-modal-close {
    position: fixed !important;
    z-index: 10 !important;
    top: var(--ae-close-top, 22px) !important;
    right: var(--ae-close-right, 32px) !important;
    margin: 0 !important;
    color: var(--ae-paper) !important;
    background: #091211 !important;
    border-color: rgba(243, 240, 229, 0.62) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: background-color 0.25s, color 0.25s, border-color 0.25s !important;
  }

  #attract-event-modal .ae-modal-close::before,
  #attract-event-modal .ae-modal-close::after {
    background: var(--ae-paper) !important;
  }

  #attract-event-modal .ae-modal-title {
    margin: 14px 0 16px !important;
    font-size: 50px !important;
    line-height: 0.82 !important;
  }

  #attract-event-modal .ae-modal-facts {
    margin-bottom: 16px !important;
  }

  #attract-event-modal .ae-modal-fact {
    padding: 12px !important;
  }

  #attract-event-modal .ae-modal-description {
    margin: 0 0 16px !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  #attract-event-modal .ae-modal-actions {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 0 !important;
  }

  #attract-event-modal .ae-modal-actions .ae-link {
    min-height: 52px !important;
    padding: 0 13px !important;
  }
}

/* Preserve breathing room on extra-narrow phones while still enlarging the art. */
@media (max-width: 340px) and (orientation: portrait) {
  #attract-event-modal .ae-modal-grid {
    grid-template-rows: clamp(245px, 36dvh, 260px) minmax(0, 1fr) !important;
  }
}

/* Keep the no-scroll contract usable in very short landscape viewports. */
@media (max-width: 809.98px) and (max-height: 620px) and (orientation: landscape) {
  #attract-event-modal {
    height: calc(100dvh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    margin: 10px !important;
  }

  #attract-event-modal .ae-modal-grid {
    grid-template-columns: 0.78fr 1.22fr !important;
    grid-template-rows: 1fr !important;
    height: 100% !important;
  }

  #attract-event-modal .ae-modal-art {
    height: 100% !important;
    border-right: 1px solid var(--ae-line) !important;
    border-bottom: 0 !important;
  }

  #attract-event-modal .ae-modal-body {
    padding: 12px 14px !important;
  }

  #attract-event-modal .ae-modal-eyebrow {
    font-size: 9px !important;
  }

  #attract-event-modal .ae-modal-title {
    margin: 8px 0 10px !important;
    font-size: 38px !important;
  }

  #attract-event-modal .ae-modal-facts {
    margin-bottom: 8px !important;
  }

  #attract-event-modal .ae-modal-fact {
    padding: 7px 8px !important;
  }

  #attract-event-modal .ae-modal-fact small {
    margin-bottom: 4px !important;
  }

  #attract-event-modal .ae-modal-fact strong {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  #attract-event-modal .ae-modal-description {
    display: none !important;
  }

  #attract-event-modal .ae-modal-actions {
    gap: 6px !important;
  }

  #attract-event-modal .ae-modal-actions .ae-link {
    min-height: 38px !important;
    padding: 0 8px !important;
    font-size: 8px !important;
  }

  #attract-event-modal .ae-modal-close {
    top: var(--ae-close-top, 22px) !important;
    right: var(--ae-close-right, 22px) !important;
    width: 40px !important;
    height: 40px !important;
  }
}