/* ======================================================================
   SAIL SQUAD HUB
   Loaded after snow-squad.css and snow-squad-hub.css, which supply the
   trip cards and join section; the gallery and carousel are the shared
   sliders in style.css. This file adds
   only what the Sail Squad funnel needs on top.

   Mobile first, because nearly all traffic arrives from an Instagram
   comment through ManyChat and lands in the in app browser on a phone.
   ====================================================================== */

/* ── The announcement screen ──────────────────────────────────────────
   One vertical clip, first thing anyone sees. On a phone it fills the
   viewport. On desktop the 9:16 clip is centred and a blurred, darkened
   copy of the same clip fills the space either side, so the band is full
   width without cropping the subject or leaving black bars. */

.page-trip .announce {
  position: relative;
  width: 100%;
  height: 100svh;              /* svh, so the iOS toolbar cannot clip it */
  min-height: 34rem;
  overflow: hidden;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The blurred backdrop. Desktop only: on a phone the clip already fills
   the screen, so painting it twice would cost data for nothing. */
.page-trip .announce-backdrop {
  display: none;
}

.page-trip .announce-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* contain, never cover. The whole 9:16 frame is always visible and the
   navy shows around it when the screen is a different shape. */
.page-trip .announce-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--navy);
}

/* Tap target over the poster frame. Removed once the clip is playing. */
.page-trip .announce-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: rgba(15, 26, 36, 0.28);
  cursor: pointer;
  padding: 0;
  transition: background 0.25s;
}

.page-trip .announce-play:hover,
.page-trip .announce-play:focus-visible {
  background: rgba(15, 26, 36, 0.14);
}

.page-trip .announce-play[hidden] {
  display: none;
}

.page-trip .announce-play-ring {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background: rgba(15, 26, 36, 0.55);
  border: 2px solid var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4);
}

/* A triangle drawn with borders, so there is no icon file to load. */
.page-trip .announce-play-ring::after {
  content: '';
  border-style: solid;
  border-width: 1.1rem 0 1.1rem 1.75rem;
  border-color: transparent transparent transparent var(--white);
  margin-left: 0.4rem;
}

.page-trip .announce-play-label {
  position: absolute;
  bottom: 22%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(15, 26, 36, 0.6);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  white-space: nowrap;
}

/* ── The down arrow ───────────────────────────────────────────────────
   Visible from the moment the page loads, because on a phone the first
   screen is entirely video and nothing else signals there is more. */

.page-trip .announce-down {
  position: absolute;
  bottom: calc(1.6rem + 60px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(15, 26, 36, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: sail-bob 2.2s ease-in-out infinite;
}

.page-trip .announce-down::after {
  content: '';
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(45deg) translate(-2px, -2px);
}

@keyframes sail-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

/* @media (prefers-reduced-motion: reduce) {
  .page-trip .announce-down { animation: none; }
} */

/* ── Desktop ──────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  .page-trip .announce {
    height: 88vh;
  }

  /* The blurred fill either side of the 9:16 clip. */
  .page-trip .announce-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(28px) brightness(0.4);
    transform: scale(1.12);   /* hides the soft edge the blur leaves */
    z-index: 0;
  }

  .page-trip .announce-stage {
    width: auto;
    aspect-ratio: 9 / 16;
    height: 100%;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
  }

  .page-trip .announce-play-ring {
    width: 6.5rem;
    height: 6.5rem;
  }

  .page-trip .announce-down {
    bottom: 1.6rem;
  }
}

/* ── Podcast clips ────────────────────────────────────────────────────
   Three landscape 16:9 slots. Each can hold a local file or a YouTube
   embed; the embed is not loaded until the poster is tapped, so three
   iframes cannot slow the first paint on a phone. */

.page-trip .podcast-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}

.page-trip .podcast-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: var(--navy);
}

.page-trip .podcast-slot video,
.page-trip .podcast-slot iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}

.page-trip .podcast-slot .placeholder {
  height: 100%;
  margin: 0;
  border-radius: 6px;
}

/* The poster and play button shown before a YouTube embed is loaded. */
.page-trip .podcast-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-trip .podcast-poster::after {
  content: '';
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(15, 26, 36, 0.62);
  border: 2px solid var(--white);
  background-image: linear-gradient(transparent, transparent);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

.page-trip .podcast-poster[hidden] { display: none; }

@media (min-width: 768px) {
  .page-trip .podcast-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}