/* Triplan Website / Containers / Group Trips Hero — V5
 * Shortcode: [triplan_group_trips_hero]
 * Socle midnight + photo, dégradé latéral, titre Bricolage, stats réelles.
 */

.tp-group-trips-hero {
  --tp-group-hero-pad-x: var(--tp-section-padding-x-desktop, clamp(16px, 4vw, 48px));

  position: relative;
  overflow: hidden;
  background: var(--tp-midnight, #0B2239);
  color: var(--tp-ivory, #F6F3EE);
  font-family: var(--tp-body-font, "Inter", sans-serif);
}

.tp-group-trips-hero *,
.tp-group-trips-hero *::before,
.tp-group-trips-hero *::after {
  box-sizing: border-box;
}

.tp-group-trips-hero__media,
.tp-group-trips-hero__overlay {
  position: absolute;
  inset: 0;
}

.tp-group-trips-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.tp-group-trips-hero__overlay {
  background:
    linear-gradient(90deg, rgba(11, 34, 57, 0.94) 0%, rgba(11, 34, 57, 0.62) 46%, rgba(11, 34, 57, 0.22) 100%),
    linear-gradient(180deg, rgba(11, 34, 57, 0) 55%, rgba(11, 34, 57, 0.55) 100%);
  pointer-events: none;
}

.tp-group-trips-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--tp-content-max-width, 1200px);
  margin: 0 auto;
  /* Desktop: the search filter now rests INSIDE the hero (over the spacer,
     below the title) and docks on scroll, so the top only needs to clear the
     transparent header nav. Mobile keeps the filter fixed at the top (media
     queries below add room for it). */
  padding: clamp(84px, 7vw, 104px) var(--tp-group-hero-pad-x) clamp(40px, 4vw, 56px);
}

/* No width cap so the H1 stays on a single line like the mockup; the subtitle
   keeps its own 46ch measure below. */
.tp-group-trips-hero__content {
  max-width: none;
}

.tp-group-trips-hero__eyebrow {
  margin: 0 0 14px;
  color: var(--tp-cyan-soft, #9DE2E8);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tp-group-trips-hero__title {
  margin: 0 0 16px;
  color: var(--tp-ivory, #F6F3EE);
  font-family: var(--tp-heading-font, "Bricolage Grotesque", sans-serif);
  font-size: clamp(40px, 8vw, 84px);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.tp-group-trips-hero__subtitle {
  max-width: 46ch;
  margin: 0;
  color: rgba(246, 243, 238, 0.82);
  font-size: clamp(15px, 2vw, 19px);
  line-height: 1.55;
  font-weight: 400;
}

/* Resting spot for the fixed search filter inside the hero (desktop). The
   height reserves room so the stats sit below the filter's rest position; the
   dock script transforms the filter onto it and lifts it on scroll. */
.tp-group-trips-hero__filter-spacer {
  height: 68px;
  margin-top: clamp(18px, 3vw, 28px);
}

.tp-group-trips-filter.is-hero-reveal {
  will-change: transform;
}

/* Search bar fills its content column (the __inner below decides the width)
   with rounded-rect corners like the mockup. Scoped under the header slot to
   out-specify the slot's own width:min(100%,980px) rule. */
.tp-site-header__filter-slot .tp-group-trips-filter__bar {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 20px;
}

.tp-group-trips-filter__field,
.tp-group-trips-filter__search {
  border-radius: 14px;
}

/* Keep the resting and docked search bar on the same content column as the
   hero and catalogue. The generic header-slot rule removes this padding, so
   it must be restored here for the Group Trips page. */
.tp-site-header__filter-slot .tp-group-trips-filter__inner {
  max-width: var(--tp-content-max-width, 1200px);
  padding: 0 var(--tp-section-padding-x-desktop, clamp(16px, 4vw, 48px));
  transition: max-width 220ms ease, padding 220ms ease;
}

/* --- Compact header + dock integration ---------------------------------
   The header no longer reserves the 76px search-bar zone (the filter now
   reveal-docks), so it stays at nav height and turns solid on scroll like
   every other page. The white "search row" is painted only once the bar is
   actually docked (is-hero-docked, toggled by group-trips-hero-dock.js). */
.tp-website-page--group-trips .tp-site-header--has-filter {
  height: var(--tp-site-header-height);
}

.tp-website-page--group-trips .tp-site-header__filter-slot {
  height: 0;
  padding: 0;
}

/* Docked: align the search row to the HEADER content column (same max-width +
   padding as the nav, inherited from the header) so the fields line up under
   the logo/actions. */
.tp-group-trips-filter.is-hero-docked .tp-group-trips-filter__inner {
  max-width: var(--tp-site-header-max-width, 1640px);
  padding: 0 var(--tp-site-header-pad-x, clamp(30px, 5.2vw, 98px));
}

/* Full-viewport background matching the solid header, so the docked row reads
   as a second header row. */
.tp-group-trips-filter.is-hero-docked::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(26, 43, 73, 0.08);
  pointer-events: none;
  z-index: -1;
}

.tp-group-trips-filter.is-hero-docked .tp-group-trips-filter__bar {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.tp-group-trips-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 4vw, 40px);
  margin-top: clamp(18px, 3vw, 28px);
}

.tp-group-trips-hero__stat {
  padding-left: 0;
}

.tp-group-trips-hero__stat strong {
  display: block;
  color: var(--tp-ivory, #F6F3EE);
  font-family: var(--tp-heading-font, "Bricolage Grotesque", sans-serif);
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1;
  font-weight: 800;
}

.tp-group-trips-hero__stat span {
  display: block;
  margin-top: 6px;
  color: rgba(246, 243, 238, 0.62);
  font-size: 12.5px;
  line-height: 1.25;
  font-weight: 400;
}

@media (max-width: 1100px) {
  .tp-group-trips-hero__inner {
    padding-top: 128px;
  }

  /* Mobile: the filter stays fixed at the top, so no in-hero resting spot. */
  .tp-group-trips-hero__filter-spacer {
    display: none;
  }
}

@media (max-width: 640px) {
  .tp-group-trips-hero__inner {
    padding-top: 120px;
  }

  .tp-group-trips-hero__stats {
    gap: 16px 22px;
  }

  .tp-group-trips-hero__stat {
    padding-left: 22px;
  }

  .tp-group-trips-hero__stat:nth-child(2) {
    padding-left: 0;
    border-left: 0;
  }
}