/* ============================================================
   Presents page — pinned slider with 3 prizes
   Layout per slide:
     • Present image                          → centered
     • Tag SVG (e.g. "ΤΑΞΙΔΙΩΤΙΚΟ VOUCHER")    → upper area, position
                                                tweakable per slide
     • Copy SVG ("3 ΝΙΚΗΤΕΣ" etc.)            → bottom-left
     • (Slide 2 only) extra ΠΑΝΗΓΥΡΙ VLOG KIT → top-left
     • ΦΙΞ logo + progress bar                → constant, sit in the
                                                pin (not in slides)
   Animation matches the contest slider on index.php — horizontal
   slide transitions on `transform: translateX()`. JS handles wheel
   scroll-jacking, touch swipes, and progress-bar drag.
   ============================================================ */

.presents-section {
  /* Solid colour outside the pinned area so the transition into the
     pin's gradient is seamless. */
  background-color: #000d45;
  color: #ffffff;
}

/* Pin the global nav for the entire presents page. By default it is
   `position: absolute; top: 0` (so it scrolls away with the page) —
   here we want it locked to the viewport top so the burger + logo
   stay visible during the whole pinned slider scroll. The nav's
   `z-index: 1000` is much higher than anything in the slider, so it
   automatically paints on top of the gradient. */
.presents-section .site-nav {
  position: fixed;
}

/* --- Slider container: provides scroll length for the sticky pin --- */

.presents-slider {
  position: relative;
  /* 3 slides × 100vh of scroll each — gives keyboard / scrollbar
     fallback enough room and the pin enough sticky duration. */
  height: 300vh;
  overflow: clip;
}

.presents-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;

  /* Gradient lives here (not on the page section) so it stays in
     place while the user scrolls — pin is sticky so its painting
     box doesn't move, giving the impression of a fixed background. */
  background: radial-gradient(
    circle,
    rgba(0, 99, 195, 1) 0%,
    rgba(0, 13, 69, 1) 83%,
    rgba(0, 13, 69, 1) 100%
  );
}

/* --- Stage holds the 3 absolutely-stacked slides --- */

.presents-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Slides slide in from the right and out to the left. JS sets an
   inline `transform: translateX(N * 100%)` on every slide where
   N = slideIndex - activeIndex.

   Slide is a flex container so the figure (image + tag) can centre
   on its natural width without being squeezed by the absolute-
   positioning shrink-to-fit algorithm. The copy and extra-text
   blocks remain `position: absolute` and overlay the slide. */
.present-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(100%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.present-slide.is-active {
  transform: translateX(0);
}

/* While the user is dragging the progress diamond, drop the
   transform animation so each frame snaps to the cursor. */
.presents-slider.is-dragging .present-slide {
  transition: none;
}

/* Mouse drag on the slide stage (desktop). Cursor turns to grab
   when hovering and grabbing while a drag is in progress. The
   transform transition is disabled during the drag so the slides
   follow the cursor 1:1. */
.presents-stage {
  cursor: grab;
}
.presents-slider.is-slide-dragging .presents-stage {
  cursor: grabbing;
}
.presents-slider.is-slide-dragging .present-slide {
  transition: none;
}

/* --- Figure wrapper holds the image AND the tag together so the
       tag can be positioned in % RELATIVE TO THE IMAGE.
         e.g. `top: -30%`  →  30% of image height above the image
              `right: -20%` →  20% of image width to the right

       Figure is `position: relative` (NOT absolute) — it's a flex
       item inside `.present-slide` and sizes to its image's
       natural width without any shrink-to-fit interference. --- */

.present-figure {
  position: relative;
  flex: 0 0 auto;
}

.present-image {
  display: block;
  width: clamp(280px, 45vw, 640px);
  /* Override the global `img { max-width: 100% }` rule so the image
     can render at its requested width even though the figure has no
     explicit width set. */
  max-width: none;
  height: auto;
  pointer-events: none;
}

/* Per-slide image size tweaks — adjust freely. */
.present-image--first,
.present-image--second,
.present-image--third {
  width: clamp(500px, 48vw, 900px);
}

/* --- Tag SVGs (label + diamond + leader line). Positioned in
       percentages of the figure (= image bounds). Negative values
       place the tag outside the image: `top: -30%` lifts it above,
       `right: -20%` pushes it past the image's right edge. --- */

.present-tag {
  position: absolute;
  height: auto;
  pointer-events: none;
  z-index: 2;
  width: clamp(140px, 18vw, 240px);
}

/* Defaults — tweak per slide. Examples:
     • `top: -10%`  → 10% of image-height above image's top
     • `right: -20%` → 20% of image-width to the right of image
     • `bottom: 100%` → tag's bottom edge sits AT image's top
     • `left: 100%`   → tag's left edge sits AT image's right     */
.present-tag--first {
  top: -10%;
  right: -10%;
}

.present-tag--second {
  top: -5%;
  right: -5%;
}

.present-tag--third {
  top: -10%;
  right: -10%;
}

/* --- Copy SVG ("3 ΝΙΚΗΤΕΣ" / "20 ΝΙΚΗΤΕΣ" / "50 ΝΙΚΗΤΕΣ").
       Direct child of `.present-slide`, anchored to the bottom-left
       corner of the slide. --- */

.present-copy {
  position: absolute;
  left: clamp(1.5rem, 3vw, 3.5rem);
  bottom: clamp(4rem, 8vh, 6rem);
  width: clamp(250px, 25vw, 600px);
  height: auto;
  pointer-events: none;
  z-index: 2;
}

/* --- Slide 2 only: ΠΑΝΗΓΥΡΙ VLOG KIT title + paragraph.
       Lives inside .present-figure so its top / left / right / bottom
       are PERCENTAGES OF THE IMAGE BOUNDS, just like .present-tag.
       Negative values place it outside the image (e.g. `top: -10%`
       lifts it 10% of the image height above the image). --- */

.present-extra {
  position: absolute;
  width: clamp(240px, 22vw, 360px);
  z-index: 2;
}

/* Per-slide positioning (only slide 2 currently uses this) — adjust
   the offsets to taste. Examples:
     • `top: -15%; left: -20%` → just above + to the left of the image
     • `bottom: 100%; left: 0` → directly above the image's top edge
     • `top: 0; left: 100%` → top-right corner, right of image       */
.present-extra {
  top: -5%;
  left: -25%;
}

.present-extra-title {
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1;
  margin: 0 0 0.75rem;
  color: #ffffff;
  span.large {
    font-size: clamp(2rem, 3vw, 3rem);
  }
}

.present-extra-body {
  font-size: clamp(0.85rem, 1vw, 1rem);
  line-height: 1.45;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
}

/* --- ΦΙΞ ΕΛΛΑΣ badge (constant bottom-right) --- */

.presents-fix-badge {
  position: absolute;
  right: clamp(1.5rem, 3vw, 3.5rem);
  bottom: clamp(2rem, 6vh, 4rem);
  width: clamp(60px, 7vw, 110px);
  height: auto;
  pointer-events: none;
  z-index: 5;
}

/* --- Progress bar (matches the contest + teaser sliders) --- */

.presents-progress {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 3vh, 2.5rem);
  transform: translateX(-50%);
  width: clamp(280px, 40vw, 600px);
  height: 16px;
  z-index: 5;
  /* Interactive — click to jump, drag the diamond to scrub. */
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
  padding-block: 0.75rem;
  margin-block: -0.75rem;
}

.presents-progress-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  background: rgba(255, 255, 255, 1);
}

.presents-progress-diamond {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  background: #002779;
  outline: 1px solid #ffffff;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: left 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: grab;
}

.presents-progress-diamond:active,
.presents-slider.is-dragging .presents-progress-diamond {
  cursor: grabbing;
  transition: none;
}

/* ============================================================
   Mobile / portrait
   - Slides shrink, copy and badges drop closer to the edges so the
     present image has the most space.
   - Section gets a touch more scroll height so keyboard / arrow
     fallback feels paced.
   ============================================================ */

@media (max-width: 768px), (orientation: portrait) {
  .presents-slider {
    height: 360vh;
  }

  .present-image {
    width: clamp(220px, 75vw, 480px);
  }

  .present-image--first,
  .present-image--second,
  .present-image--third {
    width: clamp(300px, 100vw, 700px);
  }

  .present-tag {
    width: clamp(110px, 28vw, 180px);
  }

  /* Mobile defaults — same `top` / `right` % syntax, relative to
     the image. Tweak freely per slide. */
  .present-tag--first {
    top: -10%;
    right: -10%;
  }
  .present-tag--second {
    top: -8%;
    right: -8%;
  }
  .present-tag--third {
    top: -10%;
    right: -10%;
  }

  .present-copy {
    bottom: clamp(4rem, 10vh, 6rem);
    width: clamp(140px, 44vw, 220px);
  }

  .present-extra {
    top: 0;
    transform: translateY(-100px);
    left: 1rem;
    max-width: 60%;
    /* display: none; */
  }

  .present-extra-title {
    font-size: 1.1rem;
  }
  .present-extra-body {
    font-size: 0.8rem;
  }

  .presents-fix-badge {
    /* right: 1rem; */
    bottom: clamp(4rem, 10vh, 6rem);
    width: clamp(50px, 14vw, 80px);
  }

  .presents-progress {
    width: 70%;
    bottom: 1.25rem;
  }
}