/* ==========================================================================
   Hero Section - Responsive Optimizations for 1024px Breakpoint
   ========================================================================== */

/**
 * At 1024px breakpoint, center-align the headline and location/date section
 * for better visual balance on tablet and smaller laptop screens
 */

/* Target 1024px and below */
@media (max-width: 1024px) {
  /* Override container layout to stack vertically and position at bottom */
  .hero .hero__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    text-align: center !important;
    grid-template-columns: 1fr !important;
    padding-bottom: var(--space-xl, 2rem) !important;
    min-height: 100vh !important;
  }
  
  /* Make left section full width and part of bottom stack */
  .hero .hero__container .hero__left {
    text-align: center !important;
    align-items: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: var(--space-lg, 1.5rem) !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
  
  /* Center the intro text */
  .hero .hero__container .hero__left .hero__intro {
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Center the title */
  .hero .hero__container .hero__left .hero__title {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 0 !important;
  }
  
  /* Center each title line - make them block to stack properly */
  .hero .hero__container .hero__left .hero__title .hero__title-line {
    text-align: center !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    letter-spacing: inherit !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  /* Keep THE NEXT with no transform */
  .hero .hero__container .hero__left .hero__title .hero__title-line:first-of-type {
    transform: none !important;
    width: 100% !important;
  }
  
  /* Make WAVE stretch to match THE NEXT width - using nth-child since underline affects last-of-type */
  .hero .hero__container .hero__left .hero__title .hero__title-line:nth-child(2) {
    transform: scaleX(1.5) !important;
    transform-origin: center center !important;
    width: 100% !important;
  }
  
  /* Center the underline - make it wider to match WAVE text */
  .hero .hero__container .hero__left .hero__title .hero__title-underline {
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 460px !important;
  }
  
  /* Center the location */
  .hero .hero__container .hero__left .hero__location {
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Also center the right section if it's visible */
  .hero .hero__container .hero__right {
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Fix button layout - buttons should display inline with proper sizing */
  .hero .hero__container .hero__right .hero__buttons {
    display: flex !important;
    gap: var(--space-md, 1rem) !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
  }
  
  .hero .hero__container .hero__right .hero__buttons .button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }
  
  /* Make ticket bundle match the width of the two buttons above combined */
  .hero .hero__container .hero__right .hero__group-ticket {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    max-width: 500px !important;
    margin: 0 auto !important;
  }
  
  .hero .hero__container .hero__right .hero__group-ticket .button {
    width: 100% !important;
  }
  
  /* Ensure hero__tagline-wrapper matches button width */
  .hero .hero__container .hero__right .hero__tagline-wrapper {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto var(--space-lg, 1.5rem) auto !important;
    padding-top: 0 !important;
  }
}

/* Additional fixes for 768px and below - stack buttons vertically */
@media (max-width: 768px) {
  .hero .hero__container .hero__right .hero__buttons {
    flex-direction: column !important;
    gap: var(--space-md, 1rem) !important;
  }
  
  .hero .hero__container .hero__right .hero__buttons .button {
    width: 100% !important;
    flex: none !important;
  }
  
  /* Canvas should not block any touches */
  .breakout-canvas {
    pointer-events: none !important;
  }
  
  /* Ensure hero content can be scrolled - disable pointer events on text elements */
  .hero__container * {
    touch-action: auto !important;
  }
  
  .hero__intro,
  .hero__title,
  .hero__title-line,
  .hero__title-underline,
  .hero__location,
  .hero__tagline-line {
    pointer-events: none !important;
    user-select: none !important;
  }
  
  /* But allow buttons to be clickable */
  .button,
  .hero__buttons .button,
  .hero__group-ticket .button {
    pointer-events: auto !important;
  }
}