/* Product Explorer — breakpoints.
   Desktop ≥1024: full 3D · Tablet 768–1023: shallower depth (JS DEPTH.tablet)
   Mobile <768: vertical card stack, compact dial on top, gallery below, no blur/tilt. */

/* ───────── Tablet ───────── */
@media (max-width: 1023.98px) {
  .pe-section {
    --pe-card-w: clamp(180px, 25vw, 240px);
    --pe-hub: clamp(118px, 15vw, 150px);
    --pe-node: 50px;
    --pe-nav: 84px;
    --pe-perspective: 1200px;
  }

  .pe-node__label {
    width: 128px;
    margin-left: -64px;
    font-size: 0.68rem;
  }
}

/* Short landscape screens (phones turned sideways, small laptops) */
@media (min-width: 768px) and (max-height: 620px) {
  .pe-section {
    --pe-card-w: clamp(140px, 30vh, 210px);
    --pe-hub: clamp(96px, 22vh, 140px);
    --pe-node: 44px;
    --pe-nav: 64px;
    --pe-fs-h: clamp(1.1rem, 4vh, 1.6rem);
  }

  .pe-card__tag,
  .pe-node__label,
  .pe-panel__desc > :last-child {
    display: none;
  }

  .pe-slider__btn { width: 38px; height: 38px; margin-top: -19px; }
}

/* Tablet portrait + phones: hub title is in the panel — hide the hub label under the circle.
   Node labels stay visible (compact) so numbers still have names. */
.pe-stacked .pe-hub__label {
  display: none;
}

.pe-stacked .pe-node__label {
  width: 78px;
  margin-left: -39px;
  top: calc(100% + 16px);
  font-size: 0.55rem;
  line-height: 1.15;
  gap: 0;
}

.pe-stacked .pe-node__label > :first-child {
  font-size: 0.62rem;
  font-weight: 600;
}

/* Secondary language hidden on stacked — primary (Arabic) stays readable without overlap */
.pe-stacked .pe-node__label > :last-child {
  display: none;
}

/* Stacked: size the slider to the photo instead of stretching to fill the screen */
.pe-stacked .pe-slider {
  flex: 0 1 auto;
  aspect-ratio: 4 / 3;
}

/* ───────── Mobile ───────── */
@media (max-width: 767.98px) {
  .pe-section {
    --pe-card-w: min(calc(100vw - 40px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)), 400px);
    --pe-card-h: clamp(100px, 16.5dvh, 148px);
    --pe-hub: clamp(120px, 34vw, 152px);
    --pe-node: 48px;
    --pe-nav: 72px;
    --pe-radius: 18px;
    --pe-radius-sm: 12px;
    --pe-fs-h: clamp(1.25rem, 5.6vw, 1.7rem);
    --pe-fs-panel: clamp(1.05rem, 4.6vw, 1.3rem);
    --pe-fs-body: clamp(0.8rem, 3.4vw, 0.9rem);
    --pe-float-amp: 4px;
  }

  .pe-bg::after {
    background-size: 48px 48px;
  }

  /* Card becomes a horizontal tile: text over a darkened inline-start gradient */
  .pe-card__shade {
    background:
      linear-gradient(90deg, rgba(7, 8, 10, 0.94) 0%, rgba(7, 8, 10, 0.72) 48%, rgba(7, 8, 10, 0.15) 100%),
      linear-gradient(135deg, color-mix(in srgb, var(--pe-accent) 14%, transparent), transparent 50%);
  }
  [dir="rtl"] .pe-card__shade,
  .pe-section[dir="rtl"] .pe-card__shade {
    transform: scaleX(-1);
  }

  .pe-card__body {
    inset: 0;
    padding: 14px 18px;
    align-content: center;
    gap: 3px;
  }

  .pe-card__num { margin-bottom: 0; font-size: 0.66rem; }
  .pe-card__title > :first-child { font-size: 1.12rem; }
  .pe-card__title > :last-child { font-size: 0.66rem; }
  .pe-card__tag { display: none; }
  .pe-card__count { margin-top: 4px; padding-top: 6px; font-size: 0.62rem; max-width: 60%; }

  .pe-node__num { font-size: 0.78rem; }

  .pe-node__label {
    width: 84px;
    margin-left: -42px;
    top: calc(100% + 16px);
  }

  .pe-node__label > :first-child { font-size: 0.6rem; }

  .pe-panel { gap: 6px; }

  .pe-panel__copy {
    padding: 10px 12px 10px;
  }

  .pe-panel__meta { font-size: 0.58rem; letter-spacing: 0.14em; }
  .pe-panel__title { margin-top: 4px; }
  .pe-panel__title > :last-child { font-size: 0.68rem; }
  .pe-panel__desc { margin-top: 4px; line-height: 1.45; }
  .pe-panel__num {
    direction: ltr;
    unicode-bidi: isolate;
  }

  /* Slider: no blur layers on phones; larger hit targets */
  .pe-slide__bg { display: none; }
  .pe-slider { background: #0b0d10; }
  .pe-slider__btn {
    width: 44px;
    height: 44px;
    margin-top: -22px;
    opacity: 0.95;
    background: rgba(10, 12, 15, 0.78);
  }
  .pe-slider__btn--prev { left: 6px; }
  .pe-slider__btn--next { right: 6px; }
  .pe-slider__foot { bottom: 6px; }

  /* Stacked: dial + photo fill the stage — slider grows into leftover height */
  .pe-stacked .pe-panel__desc { display: none; }
  .pe-stacked .pe-panel__title > :last-child { display: none; }
  .pe-stacked .pe-slider {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: min(38dvh, 320px);
    max-height: none;
    width: 100%;
  }
  .pe-stacked .pe-slide__img {
    object-fit: contain;
    width: 100%;
    height: 100%;
  }
  .pe-stacked .pe-node__label {
    width: 96px;
    margin-left: -48px;
    top: calc(100% + 12px);
    font-size: 0.56rem;
  }

  /* No backdrop blur on phones: solid, contrast-safe surface */
  .pe-panel__copy {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--pe-glass-solid) !important;
  }

  .pe-rail {
    inset-inline-end: max(6px, env(safe-area-inset-right, 0px));
    height: 28vh;
    margin-top: -14vh;
  }

  .pe-rail__label { display: none; }
}

/* Very short phones: drop the secondary description */
@media (max-width: 767.98px) and (max-height: 700px) {
  .pe-panel__desc > :last-child { display: none; }
}

/* ───────── Reduced motion ───────── */
@media (prefers-reduced-motion: reduce) {
  .pe-card__float { animation: none; }
  .pe-slider__track,
  .pe-slide__img { transition-duration: 0.01ms; }
}

.pe-reduced .pe-card__float { animation: none; }