.fixpanigiria {
  font-family: myriad-pro, sans-serif;

  .hero {
    background-image: url("../../img/fixpanigiria/herofixpanigiriamobile.webp");
    min-height: 100dvh;
    background-size: cover;
    background-position: center;
    position: relative;
  }
  .contest-fix-badge {
    position: absolute;
    right: clamp(1.5rem, 3vw, 3.5rem);
    bottom: clamp(1.5rem, 3vh, 3rem);
    width: clamp(50px, 6vw, 100px);
    height: auto;
    z-index: 10;
    pointer-events: none;
  }
  .intro {
    /* padding-inline: clamp(1.5rem, 3vw, 3.5rem); */
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-block: 4rem;

    img.intro-text {
      width: clamp(280px, 60vw, 775px);
    }
  }
  .end-section {
    overflow-x: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 2rem;
    min-height: 100dvh;

    .bg-image {
      grid-area: 1 / 1 / -1 / -1;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .fixpanigiria.end-copy-container {
      grid-area: 2 / 1 / -1 / -1;
      align-self: start;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow-x: hidden;
    }
    img.end-svg {
      width: clamp(320px, 65vw, 899px);
      padding-top: 4rem;
      max-width: 100%;
    }
    .bg-desktop {
      display: none;
    }
  }
  .fix-copy {
    margin-top: 3rem;
    font-size: clamp(20px, 1.2vw, 22px);
    color: #002779;
    text-align: center;
    width: clamp(400px, 55vw, 724px);
    line-height: 1.2;
    padding-inline: clamp(1.5rem, 3vw, 3.5rem);
    max-width: 100%;
  }

  .take-part-banner {
    padding-inline: clamp(1.5rem, 3vw, 3.5rem);

    background-color: white;
    .take-part-container {
      padding-block: clamp(1.5rem, 3vw, 3rem);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 60px;
      flex-wrap: wrap;
    }
    .take-part-banner-text {
      font-size: clamp(18px, 1.2vw, 22px);
      color: #002779;
    }
    .panigiria-fix-badge {
      width: clamp(100px, 6vw, 100px);
    }
    .left,
    .right {
      /* width: 100%; */
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: clamp(50px, 6vw, 100px);
      a {
        position: relative;
        width: clamp(242px, 6vw, 360px);
      }
    }
    .left {
      width: clamp(400px, 51vw, 684px);
    }
  }
}

@media (min-width: 768px) {
  .fixpanigiria {
    .hero {
      background-image: url("../../img/fixpanigiria/herofixpanigiria.webp");
    }
    .intro {
      padding-block: 8rem;
    }
    img.end-svg {
      padding-top: 8rem;
    }
    .end-section {
      .bg-mobile {
        display: none;
      }
      .bg-desktop {
        display: block;
      }
    }
    .take-part-banner {
    }
  }
}

/* ============================================================
   Homepage teaser slider
   Layout differs between mobile and desktop:

   Mobile / portrait:
     - .teaser-copy--out (the ΑΠΟ ΣΗΜΕΡΑ paragraph) is in normal
       flow at the top of the section. The user scrolls past it
       BEFORE the pin sticks — it is NOT pinned.
     - The pin contains stage (instrument + ADOPT), CTA, progress.

   Desktop landscape:
     - .teaser-copy--out is hidden. The duplicate .teaser-copy--in
       lives inside the pin so it stays visible while the user
       scrolls through the slides.
     - Layout: copy top-left, CTA bottom-left (same column),
       instrument centered, progress full width at the bottom.
   ============================================================ */

.fixpanigiria .teaser-section {
  position: relative;
  /* Section is no longer pinned — it sits in normal page flow at
     its natural height (copy + 100vh pin). Slides change ONLY via
     touch swipe / mouse drag / progress bar; vertical scroll just
     scrolls past this section like any other. */
  background: #000d45;
  color: #ffffff;
  overflow: clip;
  /* Lets the browser do vertical pan natively while horizontal
     touches go to JS for the swipe handler. */
  touch-action: pan-y;
}

/* --- Copy block (rendered twice in PHP, swapped via display) --- */

.fixpanigiria .teaser-copy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fixpanigiria .teaser-copy-title {
  font-size: clamp(1.5rem, 2.4vw, 2.4rem);
  letter-spacing: 0.02em;
  margin: 0;
}

.fixpanigiria .teaser-copy-body {
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}

.fixpanigiria .teaser-copy-body strong {
  color: #ffffff;
  font-weight: 600;
}

/* Mobile copy: in normal flow at the top of the section, scrolls
   away before the pin sticks. */
.fixpanigiria .teaser-copy--out {
  padding: clamp(2rem, 5vw, 3rem) 1.25rem 1.25rem;
  text-align: center;
  align-items: center;
  /* border-bottom: 1px solid rgba(255, 255, 255, 0.4); */
}

/* Desktop copy lives inside the pin. Hidden on mobile. */
.fixpanigiria .teaser-copy--in {
  display: none;
}

/* --- Pin (sticky container with stage, CTA, progress) --- */

.fixpanigiria .teaser-pin {
  /* Used to be `position: sticky` — now just a regular 100vh block
     in normal flow. Renamed conceptually but kept the class name
     to avoid touching markup. */
  position: relative;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto auto;
  grid-template-areas:
    "stage"
    "cta"
    "progress";
  padding: 1.25rem 1rem 1.5rem;
  box-sizing: border-box;

  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 9 absolutely-stacked slides --- */

.fixpanigiria .teaser-stage {
  grid-area: stage;
  position: relative;
  width: 100%;
  height: 100%;
  /* Clip slides that have been translated off-screen. */
  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 is `slideIndex - activeIndex`. Active = 0%, ahead = +100%,
   +200%, …, behind = -100%, -200%, … */
.fixpanigiria .teaser-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Default: off to the right (used until JS runs). */
  transform: translateX(100%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* Drag the slides with the mouse (desktop). Cursor turns into a
   grab when hovering over the stage and grabbing while dragging.
   The transform transition is disabled during the drag so slides
   follow the cursor 1:1 instead of easing to each frame. */
.fixpanigiria .teaser-stage { cursor: grab; }
.fixpanigiria .teaser-section.is-slide-dragging .teaser-stage { cursor: grabbing; }
.fixpanigiria .teaser-section.is-slide-dragging .teaser-slide {
  transition: none;
}

.fixpanigiria .teaser-slide.is-active {
  /* Initial render before JS kicks in: first slide shows centered. */
  transform: translateX(0);
  pointer-events: auto;
}

.fixpanigiria .teaser-slide-link {
  display: flex;
  /* Mobile: anchor to the bottom of the slide so the instrument sits
     close to the page bottom. Desktop overrides to `center` below. */
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  text-decoration: none;
}

.fixpanigiria .teaser-slide-instrument {
  display: block;
  /* Mobile gets a much taller instrument; desktop overrides this. */
  height: clamp(280px, 93vh, 1200px);
  width: auto;
  pointer-events: auto;
  cursor: pointer;
  object-fit: contain;
}

/* ADOPT [region] stack: lives at stage level (not inside slides) so it
   doesn't translate horizontally with the instrument. JS swaps `src`
   on slide change and the opacity transition cross-fades it. */
.fixpanigiria .teaser-slide-adopt {
  position: absolute;
  left: 0.5rem;
  bottom: clamp(136px, 40vw, 280px);
  width: clamp(160px, 40vw, 280px);
  height: auto;
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.25s ease;
}

/* --- CTA --- */

.fixpanigiria .teaser-cta {
  grid-area: cta;
  margin: 1rem auto 0.5rem;
  width: clamp(280px, 90vw, 420px);
  text-decoration: none;
  position: relative;
}

/* --- Progress bar --- */

/* Progress bar — matches the contest slider (css/contest/slider.css). */

.fixpanigiria .teaser-progress {
  grid-area: progress;
  position: relative;
  /* Mobile: 70% width, indented from the left edge. Desktop overrides
     this further down to a 50vh-wide bar centered horizontally. */
  left: clamp(1.5rem, 4vw, 5rem);
  width: 70%;
  height: 16px;
  /* Progress bar is interactive — click anywhere to jump to that
     slide and drag the diamond to scrub. */
  pointer-events: auto;
  cursor: pointer;
  /* Generous tap target around the actual line for finger / mouse. */
  padding-block: 0.75rem;
  margin-block: -0.75rem;
  margin-inline: 0;
  touch-action: none;
}

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

.fixpanigiria .teaser-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;
}

.fixpanigiria .teaser-progress-diamond:active,
.fixpanigiria .teaser-section.is-dragging .teaser-progress-diamond {
  cursor: grabbing;
  /* Snap directly to drag position without lag during scrubbing. */
  transition: none;
}

/* While the user is scrubbing, also drop the slide transform animation
   so slides snap to position without queued 0.6s tweens overlapping. */
.fixpanigiria .teaser-section.is-dragging .teaser-slide {
  transition: none;
}

.fixpanigiria .teaser-section.is-dragging .teaser-slide-adopt {
  transition: none;
}

/* ============================================================
   Mobile / portrait extra rules
   The instrument should reach the very bottom of the section, with
   the CTA + progress sitting on top of it. We achieve this WITHOUT
   absolute-positioning the stage by spanning it across all 3 grid
   rows; the CTA/progress keep their own rows but get a higher
   z-index so they paint above the stage.
   ============================================================ */

@media (max-width: 768px), (orientation: portrait) {
  .fixpanigiria .teaser-pin {
    /* No bottom padding so the stage extends to the section's edge. */
    padding-bottom: 0;
  }

  .fixpanigiria .teaser-stage {
    /* Span the full grid (rows 1 → last) instead of only the "stage"
       row, so the slide inside (and its bottom-aligned instrument)
       reaches the pin's bottom edge. */
    grid-row: 1 / -1;
    grid-column: 1;
  }

  /* Render order alone would put cta/progress above the stage (they
     come after it in the DOM), but z-index makes the stacking
     explicit and survives any future re-ordering. */
  .fixpanigiria .teaser-cta,
  .fixpanigiria .teaser-progress {
    z-index: 3;
  }

  .fixpanigiria .teaser-progress {
    margin-bottom: 1rem;
  }
}

/* ============================================================
   Desktop landscape (>768px AND landscape)
   - Hide the mobile copy at the top, show the in-pin copy
   - Drop the grid: every layer (stage, copy, CTA, progress) is
     positioned absolutely on top of the pin so the layout matches
     the design exactly:
        instrument centered horizontally
        copy + CTA stacked on the right
        ADOPT stack anchored to the slide's bottom-left
        progress bar centered at the bottom
   ============================================================ */

@media (min-width: 769px) and (orientation: landscape) {
  .fixpanigiria .teaser-copy--out {
    display: none;
  }

  /* Reset the mobile grid: pin becomes a flat absolute-positioning
     canvas. We only override `padding` (so the stage fills edge-to-edge)
     — DO NOT touch `position` here: `position: sticky` is set on the
     base rule and any override (relative / absolute) would break the
     pinning behaviour. */
  .fixpanigiria .teaser-pin {
    display: block;
    padding: 0;
  }

  /* Stage covers the full pin so the centered instrument is centered
     on the page, and the ADOPT stack (absolute inside the slide) lands
     at the pin's bottom-left corner. */
  .fixpanigiria .teaser-stage {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .fixpanigiria .teaser-copy--in {
    display: flex;
    position: absolute;
    top: clamp(3rem, 8vh, 7rem);
    right: clamp(2rem, 5vw, 5rem);
    max-width: clamp(20rem, 28vw, 26rem);
    padding: 0;
    border: 0;
    text-align: left;
    align-items: flex-start;
    z-index: 3;
  }

  .fixpanigiria .teaser-cta {
    position: absolute;
    bottom: clamp(5rem, 12vh, 9rem);
    right: clamp(2rem, 5vw, 5rem);
    width: clamp(280px, 28vw, 420px);
    margin: 0;
    z-index: 3;
  }

  /* Desktop progress: same 50vh-wide centered bar as the contest slider. */
  .fixpanigiria .teaser-progress {
    position: absolute;
    left: 50%;
    bottom: clamp(1.25rem, 3vh, 2.5rem);
    transform: translateX(-50%);
    width: 50vh;
    margin: 0;
    z-index: 3;
  }

  /* Desktop wants the instrument vertically centered, not bottom. */
  .fixpanigiria .teaser-slide-link {
    /* align-items: center; */
  }

  .fixpanigiria .teaser-slide-instrument {
    height: clamp(300px, 93vh, 1400px);
  }

  /* ADOPT stack at the bottom-left of the pin (inside the slide,
     so it slides with it as the user scrolls). */
  .fixpanigiria .teaser-slide-adopt {
    left: clamp(2rem, 5vw, 5rem);
    bottom: clamp(5rem, 12vh, 9rem);
    width: clamp(240px, 24vw, 380px);
  }
}