/* destination: /home/ale/p2a/static/css/cardrotating.css */
/* ===================================================
   GENERIC 3D CARD ROTATION – JOURNEY FLIP
   – landscape: no flip, două coloane
   – portrait: perspectivă 3D, front/back
   =================================================== */

/* LANDSCAPE / DESKTOP:
   – nu facem flip, doar două coloane */
@media (min-width: 769px) {
  .journey-flip-shell {
    height: auto !important;
  }

  .journey-flip-card {
    position: relative;
    transform: none !important;
    transform-style: flat !important;
  }

  .journey-flip-card .flip-side {
    position: relative;
    backface-visibility: visible;
    transform: none !important;
  }
}

/* PORTRET (orice device în picioare):
   – OUTBOUND = față, RETURN = verso, flip 3D + spin controlat din JS */
@media (orientation: portrait) {
  .journey-flip-shell {
    position: relative;
    perspective: 1100px;
  }

  /* un singur card, nu două coloane */
  .journey-grid-two {
    display: block;
  }

  .journey-flip-card {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    /* tranziția de bază pentru snap / flip;
       JS o suprascrie cu "none" în timpul drag / spin */
    transition: transform 0.9s cubic-bezier(.2, 0.7, 0.3, 1);
  }

  .journey-flip-card .flip-side {
    position: absolute;
    inset: 0;
    width: 100%;
    backface-visibility: hidden;
  }

  .journey-flip-card .flip-back {
    transform: rotateY(180deg);
  }
}

/* OPTIONAL: ascundem orice scrollbar intern pentru un look curat pe mobil */
.journey-flip-card,
.journey-flip-card .flip-side {
  overflow: visible !important;
  scrollbar-width: none;
}

.journey-flip-card::-webkit-scrollbar,
.journey-flip-card .flip-side::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}