/* ==========================================================================
   Front-page hero.

   The photograph is the best asset MAST has, so the job is to make white text
   legible on it WITHOUT drowning it. A scrim weighted to the bottom, where the
   copy sits, leaves the peaks bright.

   FRAGILE SELECTOR — READ THIS BEFORE EDITING THE HERO IN ELEMENTOR.
   `.travel-monster__search-section` is NOT a structural class. It is a custom
   class someone typed into the Elementor section's "CSS Classes" field. Clear
   that field and every rule below silently stops applying: no scrim, no
   ridgeline, no button sizing — with no error anywhere. If the hero ever loses
   its treatment, check that field first.
   ========================================================================== */

.home .travel-monster__search-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Sizing the hero so the ridgeline lands inside the first screen.
 *
 * Two things this has to get right, and the first version got both wrong:
 *
 * 1. THE HEADER HEIGHT IS NOT A CONSTANT. It was hardcoded to 118px. On a phone the
 *    utility strip loses its credentials line, the burger replaces the nav, and the
 *    header row can wrap — so 118px is fiction, the hero is mis-sized, and the
 *    bottom-anchored ridgeline is pushed off the fold. `--mast-header-h` is now
 *    MEASURED from the real header by nav.js and kept current on resize. The 118px
 *    here is only a first-paint fallback.
 *
 * 2. `100vh` IS THE WRONG UNIT ON MOBILE. It means the LARGE viewport — the height
 *    with the browser's URL bar collapsed. On iOS Safari the page is shorter than
 *    that on first paint, so a 100vh hero runs under the address bar, taking the
 *    ridgeline (the entire point of the hero) with it. `100svh` is the SMALL
 *    viewport: what is actually visible before the user scrolls. The vh line below
 *    is the fallback for browsers without svh. */
.home .travel-monster__search-section.elementor-section-height-full {
  min-height: calc(100vh - var(--mast-header-h, 118px));
  height: calc(100vh - var(--mast-header-h, 118px));

  min-height: calc(100svh - var(--mast-header-h, 118px));
  height: calc(100svh - var(--mast-header-h, 118px));
}

/* The scrim. Light enough that snow still reads as snow; just enough weight
   under the copy to carry white text. */
.home .travel-monster__search-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgb(12 15 16 / 0.03) 0%,
      rgb(12 15 16 / 0.12) 38%,
      rgb(12 15 16 / 0.38) 70%,
      rgb(12 15 16 / 0.58) 100%
    );
}

/* The copy rides above the scrim. */
.home .travel-monster__search-section .elementor-widget {
  position: relative;
  z-index: 2;
}

/* The slow "Ken Burns" drift is GONE, deliberately.
 *
 * It was `transform: scale(1.04)` on the SECTION, which does far more than move a
 * photograph:
 *   - it scales the headline, the body copy and both CTAs too — text re-rasters at a
 *     fractional scale for twenty seconds and the buttons visibly creep;
 *   - a transformed element becomes the containing block for any `position: fixed`
 *     descendant, which breaks the site's floating WhatsApp button;
 *   - it creates a stacking context, so the header's dropdown menu can end up
 *     painting behind the hero;
 *   - at 104% width, a 100vw hero overhangs the viewport and adds a horizontal
 *     scrollbar.
 *
 * A real Ken Burns needs the transform on a background LAYER, not on the element
 * holding the content. Elementor owns that layer here, so the honest move is to not
 * fake it. The ridgeline is the motion this hero needs; it doesn't need two.
 */

/* --- Type ---------------------------------------------------------------- */

.home .travel-monster__search-section h1,
.home .travel-monster__search-section h2,
.home .travel-monster__search-section .elementor-heading-title {
  text-shadow: 0 2px 22px rgb(12 15 16 / 0.5);
  text-wrap: balance;
}

.home .travel-monster__search-section p {
  text-shadow: 0 1px 12px rgb(12 15 16 / 0.55);
}

/* The intro sentence under the two headlines.
 *
 * It's built as an Elementor *heading* widget, so it inherited the display treatment meant for the
 * big title above it: weight 800 and a negative -0.54px tracking. On a full sentence that reads as
 * cramped and "scattered" — the tight letters pull whole words together, and the centred `balance`
 * wrap leaves a single word ("responsible") stranded on its own line.
 *
 * This is a supporting line, not a headline. It should sit BELOW the 700-weight subhead above it in
 * the hierarchy, so: normal tracking (words breathe), a lighter 500 weight, and enough line-height
 * for a wrapped sentence. `pretty` evens the last lines out so no word is orphaned.
 *
 * Scoped to this one Elementor widget id (stable across the DB copy that feeds /new) so it can't
 * touch the h1 or the subhead, whose tight look is correct.
 */
.home .travel-monster__search-section .elementor-element-95bedad .elementor-heading-title {
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.5;
  text-wrap: pretty;
}

/* --- Buttons ------------------------------------------------------------- */

.home .travel-monster__search-section .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border-radius: var(--mast-radius);
  font-family: var(--mast-font-display);
  font-weight: var(--mast-weight-strong);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  /* On the dark hero photo, the ink secondary button blends into the background — the shape
     vanishes and it reads as plain text. A hairline light ring defines every hero button against
     the photograph. Harmless on the red primary, essential for the ink secondary. More specific
     than the global transparent-border rule, so it wins. */
  border: 1.5px solid rgb(255 255 255 / 0.28) !important;
  transition: transform 0.2s var(--mast-ease), box-shadow 0.2s var(--mast-ease),
    background-color 0.2s var(--mast-ease), border-color 0.2s var(--mast-ease);
}
.home .travel-monster__search-section .elementor-button:hover {
  border-color: rgb(255 255 255 / 0.5) !important;
}

/* The two hero CTAs sat flush against each other (0px gap) and 4px out of vertical
   alignment, because each button widget carried its own uneven margin from Elementor.
   Zero the vertical margins so they share a baseline, and put a real gap between
   adjacent buttons so the different widths read as intentional, not broken. */
.home .travel-monster__search-section .elementor-widget-button {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: flex;
  align-items: center;
}
.home .travel-monster__search-section .elementor-widget-button + .elementor-widget-button {
  margin-left: 16px !important;
}

.home .travel-monster__search-section .elementor-button:hover,
.home .travel-monster__search-section .elementor-button:focus {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgb(12 15 16 / 0.4);
}

.home .travel-monster__search-section .elementor-button:focus-visible {
  outline: 2px solid var(--mast-accent-quiet);
  outline-offset: 3px;
}

/* --- The ridgeline -------------------------------------------------------
   MAST's real flagship route along the foot of the hero: Khandbari at 1,036m up
   to Makalu Base Camp at 4,870m on day nine, and back. The same curve the trek
   pages draw, so the homepage and the product speak one language.

   A line and a marker. No heavy fill — a red slab across the photograph reads as
   a mistake, not a mountain. */

.mast-ridge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 22vh;
  min-height: 120px;
  max-height: 180px;
  pointer-events: none;
}

.mast-ridge svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* No fill. A tinted mass under the line reads as a red slab dumped on the
   photograph — it fights the mountain instead of tracing it. The route is a
   LINE across the landscape; that is all it should ever be. */
.mast-ridge__fill {
  display: none;
}

.mast-ridge__line {
  fill: none;
  stroke: var(--mast-accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgb(179 45 46 / 0.6));
}

.mast-ridge__dot {
  fill: #fff;
  stroke: var(--mast-accent);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 9px rgb(255 255 255 / 0.75));
}

/* The readout. Mono, tabular — instrumentation, not ornament. */
/* Bottom-LEFT: the site's floating WhatsApp button lives bottom-right and would
   sit straight on top of the readout. */
.mast-ridge__readout {
  position: absolute;
  left: var(--mast-space-8);
  bottom: var(--mast-space-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  font-family: var(--mast-font-mono);
  color: #fff;
  text-shadow: 0 1px 10px rgb(12 15 16 / 0.85);
}

.mast-ridge__label {
  font-size: 10px;
  letter-spacing: var(--mast-tracking-label);
  text-transform: uppercase;
  opacity: 0.75;
}

.mast-ridge__alt {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.mast-ridge__alt b {
  font-weight: 400;
  color: var(--mast-accent-quiet);
}

@media (max-width: 700px) {
  .mast-ridge { height: 20vh; min-height: 100px; }
  .mast-ridge__readout { left: var(--mast-space-4); bottom: var(--mast-space-3); }
}

/* --- Headline ------------------------------------------------------------
   Words rise out of a mask, one after another — peaks coming out of cloud. */

/* The mask that makes the words rise is `overflow: hidden` — but the H1's whole
   legibility over bright snow comes from a 22px text-shadow, and an overflow box
   clips it to each word's own bounds. The shipped state was the ILLEGIBLE one:
   the shadow only survived when JS failed and no words were split.

   So the mask is temporary. `overflow` is a discrete property, which means a
   keyframe can flip it — at 1.6s, once the last word has landed, the box opens
   and the shadow comes back. No JS involved. */
.mast-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  animation: mast-word-unmask 0s linear 1.6s forwards;
}

@keyframes mast-word-unmask {
  to { overflow: visible; }
}

/* The word spans only exist once JS has split the headline, so animating them
   directly is safe: no JS, no spans, no hidden text — the headline just renders
   normally. */
.mast-word__in {
  display: inline-block;
  animation: mast-word-rise 0.9s cubic-bezier(0.16, 0.84, 0.28, 1) both;
}

@keyframes mast-word-rise {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}

/* --- Entrance ------------------------------------------------------------ */

@keyframes mast-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes mast-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* CSS drives the entrance on its own — it must NEVER wait for JavaScript.
   An earlier version held the content at opacity 0 until a script added a class.
   If that script was slow, blocked, or threw, the hero's CTAs never appeared at
   all. On the page whose whole job is to send people to the treks, that is not a
   missing animation, it is a broken business. `animation-fill-mode: both` gives
   the same reveal with no JS in the critical path. */

.home .travel-monster__search-section .elementor-widget-text-editor,
.home .travel-monster__search-section .elementor-widget-button {
  animation: mast-rise 0.75s cubic-bezier(0.22, 0.68, 0.31, 1) both;
}

/* The headline has its own word reveal — don't slide the whole block too, or the
   two motions fight. It only fades; the words do the work. */
.home .travel-monster__search-section .elementor-widget-heading {
  animation: mast-fade 0.6s ease both;
}

.home .travel-monster__search-section .elementor-widget-text-editor { animation-delay: 0.5s; }
.home .travel-monster__search-section .elementor-widget-button      { animation-delay: 0.62s; }

@media (prefers-reduced-motion: reduce) {
  .home .travel-monster__search-section { animation: none; }
  .home .travel-monster__search-section .elementor-widget-heading,
  .home .travel-monster__search-section .elementor-widget-text-editor,
  .home .travel-monster__search-section .elementor-widget-button {
    animation: none;
    opacity: 1;
  }
  .mast-word__in { transform: none; animation: none; }
  .mast-ridge__line { stroke-dasharray: none; stroke-dashoffset: 0; }
}