/* Take a Detour · V76
   An expedition dossier inside the shared Homesick paper system. */

.adventure-hub-unified #hidden.detourService {
  --detour-ink: #382447;
  --detour-night: #25142f;
  --detour-plum: #553665;
  --detour-paper: #fffaf0;
  --detour-paper-2: #f5ecdc;
  --detour-yellow: #f1ce64;
  --detour-mint: #acd9bd;
  --detour-blue: #91afe5;
  position: relative;
  scroll-margin-top: 68px;
  padding: clamp(58px, 7vw, 104px) 0 clamp(72px, 8vw, 122px) !important;
  background:
    radial-gradient(circle at 10% 9%, rgba(241, 206, 100, .13), transparent 24rem),
    radial-gradient(circle at 92% 76%, rgba(145, 175, 229, .11), transparent 27rem),
    var(--detour-night) !important;
  color: var(--detour-paper);
  overflow: hidden;
}

.adventure-hub-unified #hidden.detourService::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255, 250, 240, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 250, 240, .12) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.adventure-hub-unified #hidden .shell {
  position: relative;
  z-index: 1;
}

.detourAdventureHero {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, .78fr);
  gap: clamp(44px, 7vw, 104px);
  align-items: center;
}

.detourAdventureCopy {
  min-width: 0;
}

.detourAdventureEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #dcc3e8;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .15em;
}

.detourAdventureEyebrow i {
  width: 11px;
  height: 11px;
  background: var(--detour-yellow);
  transform: rotate(45deg);
}

.detourAdventureRule {
  max-width: 640px;
  margin: 30px 0 15px;
  color: var(--detour-yellow);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .12em;
  line-height: 1.5;
}

.detourAdventureCopy h2 {
  max-width: 760px;
  margin: 0;
  color: var(--detour-paper);
  font-size: clamp(56px, 6.4vw, 94px);
  line-height: .89;
  letter-spacing: -.067em;
  text-transform: uppercase;
}

.detourAdventureCopy h2 span {
  color: transparent;
  -webkit-text-stroke: 2px var(--detour-paper);
  text-stroke: 2px var(--detour-paper);
}

.detourAdventureLead {
  max-width: 700px;
  margin: 31px 0 0;
  color: rgba(255, 250, 240, .76);
  font-size: clamp(16px, 1.45vw, 20px);
  font-weight: 650;
  line-height: 1.62;
}

.detourRouteSignal {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 34px;
  color: rgba(255, 250, 240, .62);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .12em;
  white-space: nowrap;
}

.detourRouteSignal > span {
  flex: 1;
  overflow: hidden;
  color: rgba(241, 206, 100, .56);
  letter-spacing: .22em;
}

.detourRouteSignal .mystery {
  display: grid;
  place-items: center;
  min-width: 58px;
  height: 38px;
  border: 1px dashed var(--detour-yellow);
  border-radius: 50%;
  color: var(--detour-yellow);
  font-size: 15px;
  transform: rotate(-5deg);
}

.detourMapDossier {
  position: relative;
  min-width: 0;
  margin: 20px 13px 20px 0;
  padding: 14px;
  border: 2px solid var(--detour-ink);
  background: var(--detour-paper);
  box-shadow: 14px 14px 0 var(--detour-yellow);
  transform: rotate(1.2deg);
}

.detourMapDossier img {
  display: block;
  width: 100%;
  aspect-ratio: 1.16 / 1;
  object-fit: cover;
  object-position: center;
  filter: saturate(.92) contrast(1.02);
}

.detourMapTape {
  position: absolute;
  top: -20px;
  left: 50%;
  width: 112px;
  height: 32px;
  background: rgba(255, 246, 207, .72);
  transform: translateX(-50%) rotate(-2deg);
  box-shadow: 0 1px 0 rgba(56, 36, 71, .15);
}

.detourMapPin {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border: 2px solid var(--detour-ink);
  background: var(--detour-paper);
  color: var(--detour-ink);
  box-shadow: 4px 4px 0 var(--detour-ink);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
}

.detourMapPin span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--detour-mint);
  font-size: 13px;
}

.detourMapPin.pinStart {
  left: -30px;
  bottom: 14%;
  transform: rotate(-4deg);
}

.detourMapPin.pinUnknown {
  right: -31px;
  top: 18%;
  transform: rotate(4deg);
}

.detourMapPin.pinUnknown span {
  background: var(--detour-yellow);
}

.detourMapStamp {
  position: absolute;
  right: 18px;
  bottom: 19px;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border: 3px double var(--detour-ink);
  border-radius: 50%;
  color: var(--detour-ink);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .08em;
  line-height: 1.05;
  text-align: center;
  transform: rotate(-13deg);
  opacity: .78;
}

.detourMission {
  margin-top: clamp(68px, 8vw, 116px);
  padding: clamp(30px, 4vw, 58px);
  border: 2px solid var(--detour-ink);
  border-radius: 30px;
  background:
    radial-gradient(circle at 88% 0, rgba(172, 217, 189, .23), transparent 25rem),
    var(--detour-paper);
  color: var(--detour-ink);
  box-shadow: 13px 13px 0 var(--detour-blue);
}

.detourMissionHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 29px;
  border-bottom: 2px solid var(--detour-ink);
}

.detourMissionHead small,
.detourRevealCopy small,
.detourSealedCard small {
  display: block;
  color: #8c6a39;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .14em;
}

.detourMissionHead h3 {
  max-width: 780px;
  margin: 9px 0 0;
  font-size: clamp(36px, 4.4vw, 66px);
  line-height: .94;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.detourMissionStatus {
  flex: 0 0 auto;
  padding: 11px 13px;
  border: 2px dashed var(--detour-ink);
  background: var(--detour-yellow);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .11em;
  transform: rotate(2deg);
}

.detourMissionFields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
  margin-top: 27px;
}

.detourMissionFields article {
  position: relative;
  min-height: 290px;
  padding: 25px 23px;
  border: 1.5px dashed rgba(56, 36, 71, .62);
  background: rgba(255, 255, 255, .34);
}

.detourMissionFields article:nth-child(2) {
  transform: translateY(8px) rotate(-.5deg);
}

.detourMissionFields article:nth-child(3) {
  transform: rotate(.7deg);
}

.detourMissionFields article > span {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  margin-bottom: 43px;
  border: 2px solid var(--detour-ink);
  border-radius: 50%;
  background: var(--detour-mint);
  font-size: 12px;
  font-weight: 950;
}

.detourMissionFields article:nth-child(2) > span { background: var(--detour-blue); }
.detourMissionFields article:nth-child(3) > span { background: var(--detour-yellow); }

.detourMissionFields article small {
  display: block;
  color: #8c6a39;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .11em;
}

.detourMissionFields article h4 {
  margin: 10px 0 13px;
  font-size: clamp(25px, 2.2vw, 34px);
  line-height: 1;
  letter-spacing: -.04em;
}

.detourMissionFields article p {
  margin: 0;
  color: #6f6375;
  font-size: 13px;
  line-height: 1.6;
}

.detourRevealStrip {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(280px, 1.15fr) minmax(250px, .75fr);
  gap: 25px;
  align-items: center;
  margin-top: 42px;
  padding: 27px;
  border-radius: 20px;
  background: var(--detour-night);
  color: var(--detour-paper);
}

.detourSealedCard {
  padding: 19px;
  border: 1px dashed rgba(241, 206, 100, .7);
  background: rgba(255, 255, 255, .04);
  transform: rotate(-1deg);
}

.detourSealedCard strong {
  display: block;
  margin-top: 9px;
  color: var(--detour-yellow);
  font-size: clamp(20px, 2vw, 29px);
  line-height: 1;
}

.detourSealedCard span {
  display: block;
  margin-top: 11px;
  color: rgba(255, 250, 240, .48);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
}

.detourRevealCopy small { color: var(--detour-yellow); }

.detourRevealCopy p {
  margin: 9px 0 0;
  color: rgba(255, 250, 240, .72);
  font-size: 13px;
  line-height: 1.62;
}

.detourRevealAction {
  min-width: 0;
}

.detourRevealAction .detourWhatsapp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  padding: 17px 19px;
  border: 2px solid var(--detour-paper);
  background: var(--detour-yellow);
  color: var(--detour-ink);
  box-shadow: 6px 6px 0 var(--detour-paper);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .08em;
}

.detourRevealAction .detourWhatsapp:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--detour-paper);
}

.detourRevealAction > small {
  display: block;
  margin-top: 13px;
  color: rgba(255, 250, 240, .5);
  font-size: 9px;
  line-height: 1.45;
}

@media (max-width: 1040px) {
  .detourAdventureHero {
    grid-template-columns: 1fr;
  }

  .detourMapDossier {
    width: min(680px, calc(100% - 28px));
    margin: 8px auto 0;
  }

  .detourRevealStrip {
    grid-template-columns: 1fr 1fr;
  }

  .detourRevealAction {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .adventure-hub-unified #hidden.detourService {
    scroll-margin-top: 60px;
    padding: 54px 0 78px !important;
  }

  .detourAdventureCopy h2 {
    font-size: clamp(46px, 14.4vw, 66px);
  }

  .detourAdventureCopy h2 span {
    -webkit-text-stroke-width: 1.5px;
  }

  .detourRouteSignal {
    display: grid;
    grid-template-columns: auto 1fr auto;
    white-space: normal;
  }

  .detourRouteSignal > span:nth-of-type(2),
  .detourRouteSignal > b:last-child {
    display: none;
  }

  .detourMapDossier {
    width: calc(100% - 20px);
    padding: 9px;
    box-shadow: 9px 9px 0 var(--detour-yellow);
  }

  .detourMapPin {
    padding: 7px 8px;
    font-size: 7px;
  }

  .detourMapPin.pinStart { left: -9px; }
  .detourMapPin.pinUnknown { right: -9px; }
  .detourMapStamp { width: 69px; height: 69px; font-size: 8px; }

  .detourMission {
    margin-top: 66px;
    padding: 25px 18px 28px;
    border-radius: 22px;
    box-shadow: 8px 8px 0 var(--detour-blue);
  }

  .detourMissionHead {
    display: block;
  }

  .detourMissionHead h3 {
    font-size: clamp(34px, 10vw, 48px);
  }

  .detourMissionStatus {
    display: inline-flex;
    margin-top: 21px;
  }

  .detourMissionFields {
    grid-template-columns: 1fr;
  }

  .detourMissionFields article,
  .detourMissionFields article:nth-child(2),
  .detourMissionFields article:nth-child(3) {
    min-height: 0;
    transform: none;
  }

  .detourMissionFields article > span {
    margin-bottom: 29px;
  }

  .detourRevealStrip {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 21px;
  }

  .detourRevealAction {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .detourRevealAction .detourWhatsapp {
    transition: none;
  }
}