/**
 * Global: page-heroes.css
 * Shared inner-page hero shell (FAQ, Contact, How It Works, booking).
 *
 * Loaded on every marketing front-end request (see inc/assets.php).
 * Pattern-specific CSS stays in assets/css/blocks/.
 */

/* ——— Inner-page hero shell (about-hero, how-it-works-hero, FAQ, contact, booking) ——— */

.tidal-wave-page-hero {
  position: relative;
  overflow: hidden;
}

.tidal-wave-page-hero__panel {
  position: relative;
  display: grid;
  gap: var(--tidal-wave-block-gap);
}

.tidal-wave-page-hero__columns {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
}

.tidal-wave-page-hero__columns > .wp-block-column {
  min-width: 0;
}

.tidal-wave-faq-hero.tidal-wave-wave-section::before,
.tidal-wave-contact-hero.tidal-wave-wave-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.35;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 120'%3E%3Cpath d='M20 90h40l10-18 10 18h40M120 88h28l8-14 8 14h28M220 92h24l9-16 9 16h24' stroke='%23B6D7FA' stroke-width='2' fill='none'/%3E%3C/svg%3E") repeat-x center bottom / 320px 120px;
}

@media (min-width: 782px) {
  .tidal-wave-page-hero:not(.tidal-wave-hero--composed):not(.tidal-wave-about-hero)
    .tidal-wave-page-hero__columns,
  .tidal-wave-booking-hero .tidal-wave-page-hero__columns {
    width: 100%;
    max-width: var(--tidal-wave-page-hero-content-max);
    margin-inline: auto;
  }

  .tidal-wave-page-hero:not(.tidal-wave-hero--composed):not(.tidal-wave-about-hero)
    .tidal-wave-page-hero__columns.wp-block-columns,
  .tidal-wave-booking-hero .tidal-wave-page-hero__columns.wp-block-columns {
    gap: var(--wp--preset--spacing--lg, 1.5rem) !important;
  }
}