/* ==========================================================================
   PARS BABA / PARS CLUB
   ========================================================================== */


/* ==========================================================================
   SECTION
   ========================================================================== */

.pars-baba-showcase {
  position: relative;

  width: 100%;

  overflow: hidden;

  direction: rtl;
}


/* ==========================================================================
   SECTION HEADING

   دیگر یک بلوک مستقل کامل‌عرض نیست — حالا داخل ستون محتوا نشسته
   و بالای آن باید با بالای پارس‌بابا تراز باشد (به همین دلیل
   margin-top ندارد و اولین فرزند فلکس است).
   ========================================================================== */

.pars-baba-heading {
  width: 100%;
  flex: 0 0 auto;

  text-align: right;
}


.pars-baba-heading .section-label {
  margin-bottom: 10px;
}


.pars-baba-heading .section-title {
  margin-bottom: 0;
}


/* ==========================================================================
   MAIN LAYOUT
   ==========================================================================

   IMPORTANT:

   We explicitly define physical positions.

   LEFT  = Pars Baba
   RIGHT = Text (heading + card)

   This avoids the RTL Grid-order problem.
   ========================================================================== */

.pars-baba-layout {
  display: grid;

  grid-template-columns:
    350px
    minmax(0, 1fr);

  grid-template-areas:
    "stage content";

  column-gap: clamp(32px, 5vw, 80px);

  width: 100%;
  height: 500px;

  align-items: stretch;

  direction: ltr;
}


/* ==========================================================================
   TEXT COLUMN

   هدر (تیتر) و کارت متن به‌صورت عمودی چیده می‌شوند: هدر بالا،
   کارت پایین. justify-content: space-between به‌همراه gap به‌عنوان
   حداقل فاصله، تضمین می‌کند که بالای هدر با بالای پارس‌بابا و
   پایین کارت با پایین پارس‌بابا تراز بماند.
   ========================================================================== */

.pars-baba-content {
  grid-area: content;

  width: 100%;
  height: 500px;

  min-width: 0;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;

  direction: rtl;
}


/* ==========================================================================
   TEXT CARD
   ========================================================================== */

.pars-baba-text-card {
  width: 100%;

  min-width: 0;
  flex: 0 0 auto;

  box-sizing: border-box;

  padding:
    clamp(32px, 4vw, 56px);

  border-radius: 30px;

  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: clamp(20px, 3vw, 40px);

  text-align: right;
}


/* --------------------------------------------------------------------------
   Text body

   قبلاً با margin-inline-start: auto محدود می‌شد که در RTL باعث
   می‌شد متن سمت چپ بچسبد و فاصله‌ی بزرگ بی‌دلیل سمت راست بیفتد.
   حالا کل عرض باقی‌مانده‌ی کنار دکمه را پر می‌کند.
   -------------------------------------------------------------------------- */

.pars-baba-text-card__body {
  flex: 1 1 auto;
  min-width: 0;
}


.pars-baba-text-card p {
  margin: 0;

  color: var(--color-ink-700);

  font-size: clamp(15px, 1.05vw, 17px);

  line-height: 2;

  text-align: right;
}


.pars-baba-text-card p + p {
  margin-top: 24px;
}


/* --------------------------------------------------------------------------
   Button

   حالا کنار متن است (نه زیرش)، سمت چپ کارت، و با align-items: flex-end
   روی ردیف، پایینش با پایین متن (خط آخر) هم‌تراز می‌شود.
   -------------------------------------------------------------------------- */

.pars-baba-text-card__action {
  flex: 0 0 auto;

  display: flex;
}


/* ==========================================================================
   PARS BABA STAGE
   ========================================================================== */

.pars-baba-stage {
  grid-area: stage;

  position: relative;

  width: 350px;
  height: 500px;

  min-width: 0;

  display: grid;
  place-items: center;

  perspective: 1200px;
}


/* ==========================================================================
   PARS BABA FRAME
   ========================================================================== */

.pars-baba-frame {
  position: relative;

  width: 350px;
  height: 500px;

  flex: 0 0 350px;

  overflow: hidden;

  isolation: isolate;

  border-radius: 30px;

  box-sizing: border-box;

  transform:
    translate3d(0, 0, 0)
    rotateX(var(--pb-rotate-x, 0deg))
    rotateY(var(--pb-rotate-y, 0deg));

  transform-origin: center center;

  transform-style: preserve-3d;

  backface-visibility: hidden;

  transition:
    transform 700ms var(--ease-smooth, cubic-bezier(.22, .61, .36, 1)),
    box-shadow 700ms var(--ease-smooth, cubic-bezier(.22, .61, .36, 1));

  will-change: transform;
}


/* ==========================================================================
   INNER SCENE
   ========================================================================== */

.pars-baba-scene {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  pointer-events: none;

  transform-style: preserve-3d;
}


/* ==========================================================================
   GLOW
   ========================================================================== */

.pars-baba-glow {
  position: absolute;

  z-index: 1;

  top: 50%;
  left: 50%;

  width: 92%;
  height: auto;

  max-width: none;

  transform:
    translate3d(-50%, -50%, 0);

  object-fit: contain;

  pointer-events: none;

  user-select: none;

  opacity: .72;

  mix-blend-mode: normal;

  will-change: transform;
}


/* ==========================================================================
   PARS BABA BODY
   ========================================================================== */

.pars-baba-body {
  position: absolute;

  z-index: 3;

  left: 50%;
  bottom: 3%;

  width: auto;
  height: 94%;

  max-width: none;

  object-fit: contain;

  transform:
    translate3d(-50%, 0, 38px);

  transform-origin: center bottom;

  pointer-events: none;

  user-select: none;

  filter:
    drop-shadow(0 22px 28px rgba(27, 32, 36, .16));

  will-change: transform;
}


/* ==========================================================================
   INTERACTION STATE
   ========================================================================== */

.pars-baba-frame:hover {
  box-shadow:
    0 28px 70px rgba(20, 35, 38, .12),
    0 10px 28px rgba(20, 35, 38, .07);
}


/* ==========================================================================
   SUBTLE REFLECTION
   ========================================================================== */

.pars-baba-frame::after {
  content: "";

  position: absolute;

  z-index: 5;

  inset: 0;

  pointer-events: none;

  border-radius: inherit;

  background:
    radial-gradient(
      circle at var(--pb-glow-x, 50%) var(--pb-glow-y, 50%),
      rgba(255, 255, 255, .20),
      rgba(255, 255, 255, 0) 38%
    );

  opacity: .65;

  transition: opacity 400ms ease;
}


/* ==========================================================================
   DESKTOP SPACING
   ========================================================================== */

@media (min-width: 1200px) {

  .pars-baba-layout {
    column-gap: clamp(56px, 5vw, 90px);
  }

}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

  .pars-baba-layout {
    grid-template-columns:
      320px
      minmax(0, 1fr);

    column-gap: 32px;
  }

  .pars-baba-stage {
    width: 320px;
  }

  .pars-baba-frame {
    width: 320px;
    height: 460px;

    flex-basis: 320px;
  }

  .pars-baba-content {
    height: 460px;
  }

  .pars-baba-text-card {
    padding: 32px;
  }

  .pars-baba-body {
    height: 94%;
  }

}


/* ==========================================================================
   SMALL TABLET / LARGE MOBILE
   ========================================================================== */

@media (max-width: 767px) {

  /* ---------------------------------------------------------------
     Mobile layout
     --------------------------------------------------------------- */

  .pars-baba-layout {
    display: grid;

    grid-template-columns: 1fr;

    grid-template-areas:
      "stage"
      "content";

    width: 100%;

    height: auto;

    row-gap: 32px;

    direction: rtl;
  }


  /* ---------------------------------------------------------------
     Stage
     --------------------------------------------------------------- */

  .pars-baba-stage {
    grid-area: stage;

    width: 100%;
    height: auto;

    display: grid;
    place-items: center;
  }


  .pars-baba-frame {
    width: min(78vw, 320px);

    height: auto;

    aspect-ratio: 320 / 460;

    flex: 0 0 auto;

    border-radius: 26px;
  }


  /* ---------------------------------------------------------------
     Content
     --------------------------------------------------------------- */

  .pars-baba-content {
    grid-area: content;

    width: 100%;
    height: auto;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 24px;
  }


  .pars-baba-text-card {
    width: 100%;
    height: auto;

    min-height: 0;

    padding: 28px;

    border-radius: 26px;

    display: flex;

    flex-direction: column;

    justify-content: center;
  }


  .pars-baba-text-card__body {
    max-width: none;
  }


  .pars-baba-text-card p {
    font-size: 15px;

    line-height: 2;
  }


  .pars-baba-text-card p + p {
    margin-top: 20px;
  }


  .pars-baba-text-card__action {
    margin-top: 28px;
  }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {

  .pars-baba-frame {
    width: min(82vw, 300px);

    border-radius: 24px;
  }


  .pars-baba-text-card {
    padding: 24px;
  }


  .pars-baba-text-card p {
    font-size: 14px;

    line-height: 1.95;
  }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .pars-baba-frame {
    transform: none !important;

    transition: none !important;
  }

  .pars-baba-frame::after {
    transition: none;
  }

}