/* ============================================================
   HeroSection.module.css — Editorial Adventure Hero
   ============================================================ */

.hero {
  position: relative;
  width: 100%;
  min-height: calc(100vh - var(--navbar-height));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--ppt-text);
  background-color: #F8FAF7;
}

/* ── Background & Overlays ─────────────────────────────────── */

.heroBgWrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.heroBgImage {
  object-fit: cover;
  object-position: 80% 25%;
  filter: saturate(1.05) contrast(1.02);
}

/* Soft horizontal gradient protecting readability of headline & CTA */
.heroOverlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.90) 26%,
    rgba(255, 255, 255, 0.50) 46%,
    rgba(255, 255, 255, 0.12) 66%,
    rgba(255, 255, 255, 0) 80%
  );
}

/* Subtle bottom vertical fade for transition to upcoming trips section */
.heroBottomFade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(247, 249, 247, 0) 0%,
    rgba(247, 249, 247, 0.6) 60%,
    var(--ppt-background) 100%
  );
}

/* Topographic Contour Lines in Bottom-Left Corner */
.topoOverlay {
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 460px;
  height: 330px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.95;
}

/* ── Hero Container ────────────────────────────────────────── */

.heroContainer {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: clamp(680px, 86vh, 820px);
  padding-top: var(--space-8);
  padding-bottom: var(--space-12);
  gap: var(--space-8);
}

/* ── Left Column: Content ──────────────────────────────────── */

.leftContent {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

/* Eyebrow */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-4);
}

.eyebrowText {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #4B5563;
}

.eyebrowLine {
  width: 48px;
  height: 1.5px;
  background-color: #9CA3AF;
  opacity: 0.75;
  border-radius: 1px;
}

/* Headline */
.headline {
  font-size: clamp(2.4rem, 4.4vw, 3.85rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #182532;
  margin-bottom: var(--space-5);
  min-height: clamp(140px, 15vw, 180px);
  display: block;
}

.headlineDark {
  color: #182532;
}

.headlineAccent {
  color: #269436;
  display: inline;
}

.cursor {
  display: inline-block;
  color: #269436;
  font-weight: 300;
  margin-left: 3px;
  animation: blinkCursor 0.9s step-end infinite;
  user-select: none;
}

@keyframes blinkCursor {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Description */
.description {
  font-size: 16.5px;
  line-height: 1.6;
  color: #4B5563;
  max-width: 540px;
  margin-bottom: var(--space-8);
}

.descBr {
  display: inline;
}

/* CTA Group */
.ctaGroup {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
  flex-wrap: wrap;
}

.primaryCta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #237A2F;
  color: #ffffff !important;
  padding: 0 1.75rem;
  height: 52px;
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(35, 122, 47, 0.28);
  transition: all 250ms ease;
}

.primaryCta:hover {
  background-color: #1c6827;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(35, 122, 47, 0.38);
}

.ctaArrow {
  transition: transform 250ms ease;
}

.primaryCta:hover .ctaArrow {
  transform: translateX(3px);
}

.secondaryCta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #ffffff;
  color: #182532;
  padding: 0 1.5rem;
  height: 52px;
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: 700;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 250ms ease;
}

.secondaryCta:hover {
  background-color: #f9fafb;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.12);
}

.playIconWrapper {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #237A2F;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.secondaryCta:hover .playIconWrapper {
  transform: scale(1.08);
}

.playIcon {
  transform: translateX(1px);
}

/* Value Propositions */
.valueProps {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-top: var(--space-2);
}

.valueItem {
  display: flex;
  align-items: center;
  gap: 10px;
}

.valueIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.valueText {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.valueHeading {
  font-weight: 800;
  color: #182532;
  font-size: 13.5px;
}

.valueSub {
  font-weight: 500;
  color: #4B5563;
  font-size: 12.5px;
}

.valueDivider {
  width: 1px;
  height: 32px;
  background-color: rgba(0, 0, 0, 0.14);
  flex-shrink: 0;
}

/* ── Right Overlays: Decorative & Social Proof ─────────────── */

.rightOverlay {
  position: relative;
  flex: 1;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
}

/* Handwritten Accent */
.handwrittenAccent {
  position: absolute;
  top: 10px;
  right: 170px;
  transform: rotate(-3.5deg);
  text-align: left;
  pointer-events: auto;
  user-select: none;
}

.handwrittenText {
  font-family: var(--font-family-handwritten, 'Caveat', cursive, sans-serif);
  font-size: 27px;
  font-weight: 700;
  color: #283747;
  line-height: 1.15;
  display: block;
}

.handwrittenUnderline {
  width: 136px;
  height: 16px;
  margin-top: -2px;
  display: block;
}

/* Social Proof Floating Card */
.socialCard {
  position: absolute;
  bottom: 80px;
  right: 180px;
  width: 250px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 12px 30px rgba(18, 37, 50, 0.09);
  pointer-events: auto;
  transition: transform 250ms ease, box-shadow 250ms ease;
}

.socialCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(18, 37, 50, 0.13);
}

.socialHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.avatarGroup {
  display: flex;
  align-items: center;
}

.avatarWrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  overflow: hidden;
  margin-left: -8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
  position: relative;
  background: #E5E7EB;
}

.avatarWrap:first-child {
  margin-left: 0;
}

.avatarImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.socialStats {
  display: flex;
  flex-direction: column;
}

.socialNumber {
  font-size: 15px;
  font-weight: 800;
  color: #182532;
  line-height: 1.1;
}

.socialLabel {
  font-size: 11px;
  color: #4B5563;
  line-height: 1.25;
}

.socialLabel strong {
  color: #182532;
  font-weight: 700;
}

.socialDivider {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin-bottom: 8px;
}

.socialQuote {
  font-size: 12px;
  font-style: italic;
  color: #374151;
  line-height: 1.4;
  margin: 0;
}

/* ── Scroll Indicator (Bottom Right) ─────────────────────────── */

.scrollIndicator {
  position: absolute;
  bottom: 24px;
  right: 48px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: transparent;
  transition: all 200ms ease;
  user-select: none;
}

.scrollIndicator:hover {
  transform: translateY(-2px);
}

.mouseIcon {
  width: 20px;
  height: 32px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 11px;
  display: flex;
  justify-content: center;
  padding-top: 5px;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.mouseWheel {
  width: 2px;
  height: 7px;
  background-color: #ffffff;
  border-radius: 1px;
  animation: mouseWheelLoop 1.6s ease-in-out infinite;
}

@keyframes mouseWheelLoop {
  0%   { transform: translateY(0); opacity: 1; }
  50%  { transform: translateY(6px); opacity: 0.35; }
  100% { transform: translateY(0); opacity: 1; }
}

.scrollText {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  line-height: 1.25;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.scrollTextSub {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.scrollTextMain {
  color: #ffffff;
  font-weight: 700;
}

/* ── Responsive Rules ────────────────────────────────────────── */

@media (max-width: 1400px) {
  .handwrittenAccent {
    right: 120px;
  }
  .socialCard {
    right: 120px;
  }
}

@media (max-width: 1200px) {
  .handwrittenAccent {
    right: 60px;
  }
  .socialCard {
    right: 60px;
    bottom: 80px;
  }
  .scrollIndicator {
    right: 24px;
    bottom: 20px;
  }
}

@media (max-width: 1024px) {
  .heroOverlay {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.93) 48%,
      rgba(255, 255, 255, 0.70) 70%,
      rgba(255, 255, 255, 0.25) 100%
    );
  }

  .heroContainer {
    flex-direction: column;
    align-items: flex-start;
    padding-top: var(--space-8);
    padding-bottom: var(--space-10);
    min-height: auto;
  }

  .headline {
    font-size: clamp(3rem, 5vw, 3.65rem);
    margin-bottom: var(--space-4);
  }

  .leftContent {
    max-width: 100%;
  }

  .descBr {
    display: none;
  }

  .valueProps {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-5);
  }

  .valueDivider {
    display: block;
  }

  .rightOverlay {
    width: 100%;
    min-height: auto;
    margin-top: var(--space-6);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-6);
  }

  .handwrittenAccent {
    display: none;
  }

  .socialCard {
    position: static;
    width: 100%;
    max-width: 320px;
    padding: 14px 16px;
  }

  .scrollIndicator {
    display: none;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding-top: var(--space-5);
    padding-bottom: var(--space-10);
    overflow-x: hidden;
  }

  .heroBgImage {
    object-position: 85% center;
  }

  .heroOverlay {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(255, 255, 255, 0.93) 55%,
      rgba(255, 255, 255, 0.75) 80%,
      rgba(255, 255, 255, 0.45) 100%
    );
  }

  .topoOverlay {
    width: 300px;
    height: 200px;
    opacity: 0.6;
  }

  .heroContainer {
    min-height: auto;
    padding-top: var(--space-4);
    padding-bottom: var(--space-6);
    gap: var(--space-5);
  }

  .headline {
    font-size: clamp(2rem, 7.5vw, 2.6rem);
    line-height: 1.15;
    margin-bottom: var(--space-4);
    min-height: clamp(110px, 24vw, 150px);
  }

  .description {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: var(--space-6);
  }

  .descBr {
    display: none;
  }

  .ctaGroup {
    flex-direction: column;
    width: 100%;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
  }

  .primaryCta,
  .secondaryCta {
    width: 100%;
    height: 52px;
    justify-content: center;
  }

  .valueProps {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    width: 100%;
    padding-top: 0;
  }

  .valueDivider {
    display: none;
  }

  .valueItem {
    width: 100%;
  }

  .handwrittenAccent {
    display: none;
  }

  .rightOverlay {
    width: 100%;
    margin-top: var(--space-3);
  }

  .socialCard {
    width: 100%;
    max-width: 100%;
    padding: 16px;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(22, 61, 50, 0.08);
  }

  .scrollIndicator {
    display: none;
  }
}