/* هیرو صفحهٔ /apps/<tech>: متن کنار رسانه (تصویر، ویدیو، صوت).
   ستون رسانه فقط وقتی هست که اپ واقعاً رسانه دارد؛ وگرنه هیرو وسط‌چین قبلی می‌ماند. */
.ab-apphero { inline-size: 100%; }

.ab-apphero-media {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  inline-size: 100%;
  min-inline-size: 0;
  margin-block-start: 1.75rem;
}

/* صحنه: قاب ثابت ۱۶:۱۰ تا تصویرهای با نسبت‌های مختلف CLS نسازند و کامل دیده شوند. */
.ab-apphero-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--rd-radius, 18px);
  overflow: hidden;
  border: 1px solid var(--rd-line, #e3e8f2);
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(37, 99, 235, .10), transparent 60%),
    linear-gradient(180deg, #f6f8fd, #eef2fb);
  box-shadow: 0 18px 40px -22px rgba(15, 32, 80, .35);
}
.ab-apphero-shot, .ab-apphero-stage > img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.ab-apphero-shot { cursor: zoom-in; }
.ab-apphero-stage img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  object-position: center;
}
.ab-apphero-blank {
  display: grid;
  place-items: center;
  block-size: 100%;
}
.ab-apphero-blank img { inline-size: 96px; block-size: 96px; opacity: .9; }

/* دکمهٔ پخش روی تصویر؛ ویدیو فقط با کلیک ساخته و دانلود می‌شود. */
.ab-apphero-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  border: 0;
  padding: 0;
  background: linear-gradient(180deg, rgba(10, 22, 60, 0) 35%, rgba(10, 22, 60, .38));
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}
.ab-apphero-play > span:last-child {
  padding: .45rem .9rem;
  border-radius: 999px;
  background: rgba(10, 22, 60, .62);
  backdrop-filter: blur(6px);
}
.ab-apphero-play-ico {
  display: grid;
  place-items: center;
  inline-size: 64px;
  block-size: 64px;
  border-radius: 50%;
  background: var(--rd-blue, #2453d8);
  box-shadow: 0 0 0 10px rgba(36, 83, 216, .22);
  transition: transform .2s ease, box-shadow .2s ease;
}
/* مثلث پخش در راست‌چین هم باید به راست اشاره کند. */
.ab-apphero-play-ico svg { transform: translateX(2px); }
.ab-apphero-play:hover .ab-apphero-play-ico { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(36, 83, 216, .2); }
.ab-apphero-play:focus-visible { outline: 3px solid var(--rd-cyan, #06b6d4); outline-offset: -3px; }
.ab-apphero-player {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  background: #000;
}
.ab-apphero-nojs {
  position: absolute;
  inset-block-end: .75rem;
  inset-inline-start: .75rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  background: #fff;
}

/* کارت صوت: پخش‌کنندهٔ بومی مرورگر با preload=none (صفر بایت تا کلیک). */
.ab-apphero-audio {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .75rem .9rem;
  border: 1px solid var(--rd-line, #e3e8f2);
  border-radius: 14px;
  background: #fff;
  text-align: start;
}
.ab-apphero-audio-ico {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 12px;
  color: var(--rd-blue, #2453d8);
  background: var(--rd-blue-soft, #eaf0ff);
}
.ab-apphero-audio-body { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: .35rem; }
.ab-apphero-audio-body b { font-size: .95rem; color: var(--rd-ink, #0f172a); }
.ab-apphero-audio audio { inline-size: 100%; block-size: 40px; }

/* نوار تصویرهای کوچک: افقی و قابل اسکرول، هر کدام لایت‌باکس را باز می‌کند. */
.ab-apphero-thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(120px, 23%);
  gap: .6rem;
  margin: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-block-end: .25rem;
}
.ab-apphero-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--rd-line, #e3e8f2);
  background: #f3f6fc;
  scroll-snap-align: start;
  cursor: zoom-in;
  transition: border-color .15s ease, transform .15s ease;
}
.ab-apphero-thumb img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
.ab-apphero-thumb:hover { border-color: var(--rd-blue, #2453d8); transform: translateY(-2px); }
.ab-apphero-thumb:focus-visible, .ab-apphero-shot:focus-visible { outline: 3px solid var(--rd-cyan, #06b6d4); outline-offset: 2px; }

/* دسکتاپ: دو ستون؛ متن در سمت آغاز (راست) و رسانه در سمت پایان. */
@media (min-width: 992px) {
  .ab-apphero--media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 3rem;
    align-items: center;
  }
  .ab-apphero--media .ab-apphero-media { margin-block-start: 0; }
  .rd-apps-detail-page .ab-apphero--media .ab-apphero-copy,
  .rd-apps-detail-page .ab-apphero--media .ab-apphero-copy h1,
  .rd-apps-detail-page .ab-apphero--media .ab-apphero-copy .rd-lead,
  .rd-apps-detail-page .ab-apphero--media .ab-apphero-copy .ab-plan-methods-title {
    text-align: start;
    margin-inline: 0;
  }
  .rd-apps-detail-page .ab-apphero--media .rd-apps-detail-head {
    flex-direction: row;
    justify-content: flex-start;
    margin-inline: 0;
  }
  .rd-apps-detail-page .ab-apphero--media .rd-apps-detail-icon { margin-inline: 0; }
  .rd-apps-detail-page .ab-apphero--media .rd-apps-badges,
  .rd-apps-detail-page .ab-apphero--media .rd-apps-price-row,
  .rd-apps-detail-page .ab-apphero--media .rd-hero-actions {
    justify-content: flex-start;
    margin-inline: 0;
  }
  .rd-apps-detail-page .ab-apphero--media .ab-plan-methods--hero { margin-inline: 0; text-align: start; }
}

@media (max-width: 600px) {
  .ab-apphero-play-ico { inline-size: 54px; block-size: 54px; }
  .ab-apphero-thumbs { grid-auto-columns: 38%; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-apphero-play-ico, .ab-apphero-thumb { transition: none; }
}