/* Standalone block below wheels */

/* Horizontal block for AMOR A LA DISTANCIA */
/* Mole block below wheels in panel 3 */
.hs__scene3Mole {
  margin: 32px 0 0 0;
  display: flex;
  align-items: center;
  gap: 32px;
}

.hs__scene3MolePhoto {
  margin: 0;
  width: clamp(180px, 16vw, 260px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e7e3dc;
  flex: 0 0 auto;
}

.hs__scene3StoryGrid {
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: center;
  margin-top: 32px;
}
.hs__scene3StoryRow {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  max-width: 1200px;
  justify-content: center;
}
.hs__scene3StoryRow--reverse {
  flex-direction: row-reverse;
}
.hs__scene3StoryPhoto {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e7e3dc;
  flex: 0 0 auto;
}
.hs__scene3StoryRow:first-child .hs__scene3StoryPhoto {
  width: clamp(480px, 48vw, 800px);
}
.hs__scene3StoryRow--reverse .hs__scene3StoryPhoto {
  width: clamp(280px, 22vw, 360px);
}
.hs__scene3StoryRow--reverse {
  flex-direction: row-reverse;
  margin-left: 0;
  align-items: center;
}
.hs__scene3StoryPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
}
.hs__scene3StoryText {
  max-width: 600px;
  min-width: 320px;
  text-align: left;
  flex: 1 1 0;
  align-self: flex-start;
  word-break: normal;
}

.hs__scene3CustomText {
  max-width: 480px;
}

/* CSS Variables for horizontal scroll section */
.hs {
  --hs-bg: #f6f4ee;
  --hs-text: #111;
  --hs-muted: rgba(18, 18, 18, 0.65);
  --hs-gap: 0px;
  --hs-gutter: 0px;
}

/* Section wrapper (height set by JS on desktop) */
.hs {
  position: relative;
  background: var(--hs-bg);
  color: var(--hs-text);
}

/* Intro spacer before horizontal begins (height set by JS via inline calc) */
.hs__lead {
  height: 0; /* JS uses this element's height for the “lead pause” */
}

/* Sticky pin container */
.hs__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Horizontal track */
.hs__track {
  height: 100%;
  display: flex;
  gap: var(--hs-gap);
  padding-left: var(--hs-gutter);
  padding-right: var(--hs-gutter);
  will-change: transform;

  /* optional micro-smoothing on some trackpads */
  transition: transform 0.08s linear;
}

/* Each panel takes a viewport width (plus the gap is handled by the track) */
.hs__panel {
  flex: 0 0 100vw;
  height: 100%;
  transform: translateZ(0); /* prevent blur on transforms */
}

.hs__panelInner {
  height: 100%;
  padding: clamp(24px, 4vw, 64px);
  display: grid;
  align-content: start;
  gap: 16px;
}

/* Dummy block just to show space */
.hs__block {
  width: min(520px, 100%);
  height: 280px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.08);
}

/* ===== Panel 1 “Nuestra Historia” Layout ===== */
.hs__panelInner--story {
  padding: clamp(28px, 5vw, 84px);
  position: relative;
  z-index: 2;
}

.hs__title {
  margin: 0 0 18px 0;
  letter-spacing: 0.16em;
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--hs-muted);
}

.hs__storyGrid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 520px) minmax(320px, 520px);
  gap: clamp(16px, 2vw, 32px);
  align-items: start;
}

.hs__photo {
  margin: 0;
  border-radius: 0; /* keep editorial */
  overflow: hidden;
}

.hs__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
  transform: scale(1);
  transform-origin: center top;
}

/* slightly zoomed out main photo so it's less cropped */
.hs__photo--main img {
  transform: scale(0.94);
  transform-origin: center top;
}

.hs__photo--main {
  width: 100%;
  aspect-ratio: 4 / 5;
}

.hs__text {
  max-width: 520px;
  font-size: 16px;
  line-height: 1.7;
}

.hs__subtitle {
  margin: 6px 0 14px 0;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hs-muted);
  font-weight: 600;
}

.hs__text p {
  margin: 0 0 14px 0;
}

/* Floating photo like your screenshot */
.hs__photo--float {
  position: absolute;
  right: clamp(-260px, -16vw, -140px);
  bottom: clamp(20px, 10vh, 80px);
  width: clamp(240px, 28vw, 380px);
  aspect-ratio: 16 / 9;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
}

/* ===== Responsive: Native horizontal scroll on mobile ===== */
@media (max-width: 768px) {
  .hs {
    /* Remove JS-controlled height on mobile */
    height: auto !important;
  }

  .hs__lead {
    display: none;
  }

  .hs__sticky {
    position: relative;
    height: auto;
    overflow: visible;
  }

  .hs__track {
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    transform: none !important;
    transition: none;

    /* Scroll-snap for polished feel */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    /* Hide scrollbar but keep functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .hs__track::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .hs__panel {
    flex: 0 0 85vw; /* Each panel takes 85% of viewport width */
    min-width: 85vw;
    height: auto;
    min-height: 70vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .hs__panelInner {
    padding: 20px;
    height: 100%;
  }

  /* Panel 1: Story intro */
  .hs__panelInner--story {
    padding: 20px;
  }

  .hs__title {
    font-size: 18px;
    margin-bottom: 16px;
  }

  .hs__storyGrid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .hs__photo--main {
    aspect-ratio: 3 / 4;
    max-height: 40vh;
  }

  .hs__text {
    font-size: 14px;
  }

  .hs__subtitle {
    font-size: 11px;
  }

  .hs__photo--float {
    position: static;
    width: 100%;
    margin-top: 12px;
    box-shadow: none;
  }

  /* Scroll indicator - gradient fade on right edge */
  .hs__sticky::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(
      to right,
      transparent,
      var(--hs-bg, #f6f4ee) 80%
    );
    pointer-events: none;
    z-index: 10;
    opacity: 0.8;
  }

  /* Pagination dots indicator */
  .hs__track {
    padding-bottom: 40px; /* Space for dots */
  }

  .hs__panel {
    position: relative;
  }
}

/* ===== Panel 2 (scene layout like your screenshot) ===== */
.hs__panelInner--scene2 {
  position: relative;
  padding: clamp(28px, 5vw, 84px);
  height: 100%;
}

/* Left anchored image (carried over from panel 1 floating image) */
.hs__scene2Left {
  position: absolute;
  /* make the left image peek about half-visible */
  left: -24%;
  bottom: 140px;
  width: clamp(280px, 30vw, 520px);
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  background: #e7e3dc;
  z-index: 0;
}

.hs__scene2Left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
}

/* Right-side blocks base */
.hs__scene2Block {
  position: absolute;
  right: auto;
  left: clamp(20px, 12vw, 180px);
  width: min(640px);

  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: clamp(18px, 2.2vw, 34px);
  align-items: start;
}

/* ✅ These two are CRITICAL to prevent overlap */
.hs__scene2Block--top {
  top: clamp(72px, 10vh, 120px);
  left: clamp(80px, 14vw, 180px);
}

.hs__scene2Block--bottom {
  bottom: clamp(72px, 10vh, 120px);
  left: clamp(100px, 18vw, 240px);
}

.hs__scene2Photo {
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e7e3dc;
}

.hs__scene2Photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
}

.hs__scene2Text {
  font-size: 16px;
  line-height: 1.7;
  max-width: 360px;
}

.hs__scene2Title {
  margin: 6px 0 12px 0;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hs-muted);
  font-weight: 600;
}

.hs__scene2Text p {
  margin: 0 0 12px 0;
}

/* Mobile fallback for panel 2 */
@media (max-width: 768px) {
  .hs__panelInner--scene2 {
    position: relative;
    padding: 20px;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .hs__scene2Left {
    position: static;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0;
  }

  .hs__scene2Block {
    position: static;
    width: 100%;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .hs__scene2Block--top,
  .hs__scene2Block--bottom {
    left: auto;
    top: auto;
    bottom: auto;
  }

  .hs__scene2Photo {
    width: 100%;
  }

  .hs__scene2Text {
    max-width: none;
    font-size: 14px;
  }

  .hs__scene2Title {
    font-size: 11px;
  }
}

/* ===== Panel 3 (grid-based so text never overlaps images) ===== */
/* ===== Panel 3 (editorial layout with true vertical centering) ===== */
.hs__panelInner--scene3 {
  position: relative;
  height: 100%;
  padding: clamp(28px, 5vw, 84px);

  display: grid;
  grid-template-columns:
    clamp(320px, 28vw, 480px) /* left image - moved left, smaller */
    minmax(360px, 520px) /* center text */
    clamp(220px, 20vw, 320px); /* right tall image */
  column-gap: clamp(28px, 5vw, 84px);
  align-items: start;
}

/* Left large image (Ferris wheel) */
.hs__scene3Left {
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e7e3dc;
}

.hs__scene3Left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
}

/* Center column – ONLY the top story */
.hs__scene3Center {
  font-size: 16px;
  line-height: 1.7;
}

.hs__scene3Block {
  margin-bottom: 0;
}

.hs__scene3Title {
  margin: 0 0 14px 0;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hs-muted);
  font-weight: 600;
}

.hs__scene3Center p {
  margin: 0 0 14px 0;
}

/* ===== Bottom row: letters + AMOR (same row = perfect centering) ===== */
.hs__scene3BottomRow {
  position: absolute;

  /* BELOW ferris wheel */
  top: calc(
    clamp(40px, 8vh, 140px) + (clamp(520px, 46vw, 760px) * 9 / 16) +
      clamp(32px, 6vh, 90px)
  );

  /* Starts under ferris wheel toward middle - moved left */
  left: calc(var(--hs-gutter) - clamp(520px, 46vw, 760px) * 5.5);

  /* Prevent collision with right image */
  width: calc(100% - (var(--hs-gutter) * 2) - clamp(220px, 20vw, 320px));

  display: flex;
  align-items: center; /* 🔥 THIS fixes the vertical centering */
  gap: clamp(24px, 3vw, 56px);
}

/* Letters image */
.hs__scene3Bottom {
  margin: 0;
  width: clamp(240px, 22vw, 340px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e7e3dc;
  flex: 0 0 auto;
}

.hs__scene3Bottom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
}

/* Amor text */
.hs__scene3Amor {
  width: min(520px, 40vw);
}

.hs__scene3Amor p {
  margin: 0;
}

/* Right tall image */
.hs__scene3Right {
  margin: 0;
  width: 100%;
  aspect-ratio: 3 / 5;
  overflow: hidden;
  background: #e7e3dc;
  margin-top: clamp(50px, 6vh, 120px);
  transform: translateX(clamp(24px, 6vw, 120px));
}

.hs__scene3Right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
}

/* ===== Mobile fallback ===== */
@media (max-width: 768px) {
  .hs__panelInner--scene3 {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 24px;
    height: auto;
  }

  .hs__scene3StoryGrid {
    gap: 32px;
    margin-top: 0;
  }

  .hs__scene3StoryRow {
    flex-direction: column;
    gap: 16px;
  }

  .hs__scene3StoryRow--reverse {
    flex-direction: column;
  }

  .hs__scene3StoryPhoto {
    width: 100% !important;
  }

  .hs__scene3StoryRow:first-child .hs__scene3StoryPhoto {
    width: 100%;
  }

  .hs__scene3StoryRow--reverse .hs__scene3StoryPhoto {
    width: 100%;
  }

  .hs__scene3StoryText {
    min-width: auto;
    max-width: none;
    font-size: 14px;
  }

  .hs__scene3Title {
    font-size: 11px;
  }

  .hs__scene3BottomRow {
    position: static;
    width: 100%;
    left: auto;
    top: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .hs__scene3Amor {
    width: 100%;
  }

  .hs__scene3Right {
    transform: none;
    width: 100%;
  }

  .hs__scene3Left {
    width: 100%;
  }
}