/* ─── App Theater: Screenshot Showcase ─────────────────────── */
.app-theater { padding: 64px 0 48px; background: #f0f5fa; overflow: hidden; }
.app-theater-card {
  background: #016ec3;
  border-radius: 24px; padding: 40px 24px 36px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.08), 0 20px 60px rgba(0,0,0,0.15);
  border: 1px solid rgba(1,110,195,0.3);
  max-width: 1100px; margin: 0 auto;
}
.app-theater-stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: 24px; margin-bottom: 32px; height: 460px; border-radius: 16px; padding: 24px 16px;
  background:
    radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px),
    rgba(0,0,0,0.12);
  background-size: 24px 24px;
  overflow: hidden;
}

/* Prev / Next ghost previews */
.app-theater-ghost { flex-shrink: 0; width: 140px; opacity: 0.55; transform: scale(0.88); transition: opacity 0.4s, transform 0.4s; cursor: pointer; border-radius: 16px; overflow: hidden; }
.app-theater-ghost img { width: 100%; display: block; border-radius: 16px; }
.app-theater-ghost:hover { opacity: 0.8; transform: scale(0.92); }

/* Center frame */
.app-theater-frame {
  position: relative;
  flex-shrink: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.app-theater-frame img {
  display: block; border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  object-fit: contain;
}
/* Use max-height + auto width so the image preserves its natural
   aspect ratio without stretching when the stage is narrower than
   the intrinsic width (this was causing landscape shots to look
   vertically squished on desktop). */
.app-theater-frame.is-portrait img {
  height: auto; width: auto;
  max-height: 400px; max-width: 100%;
}
.app-theater-frame.is-landscape img {
  height: auto; width: auto;
  max-height: 340px; max-width: 100%;
}

/* Arrow buttons */
.app-theater-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  color: #334155;
}
.app-theater-arrow:hover { background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.15); transform: translateY(-50%) scale(1.05); }
.app-theater-arrow.prev { left: 16px; }
.app-theater-arrow.next { right: 16px; }

/* Tab pills */
.app-theater-tabs { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; padding: 0 16px; }
.app-theater-tab {
  padding: 7px 16px; border-radius: 100px; border: 2px solid rgba(255,255,255,0.35);
  background: transparent; color: rgba(255,255,255,0.8);
  font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500;
  cursor: pointer; transition: all 0.25s; white-space: nowrap; position: relative;
}
.app-theater-tab:hover { color: #fff; border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.08); }
.app-theater-tab.active {
  background: #fff; color: #016ec3; font-weight: 600;
  border-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Caption */
.app-theater-caption {
  text-align: center; max-width: 480px; margin: 0 auto;
  font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.6; color: rgba(255,255,255,0.85);
  transition: opacity 0.3s; min-height: 48px; padding: 0 20px;
}

/* Dot indicators — hidden (tabs are sufficient) */
.app-theater-dots { display: none; }

/* Mobile adjustments */
@media (max-width: 768px) {
  .app-theater-ghost { display: none; }
  .app-theater-stage { height: 380px; gap: 0; padding: 20px 8px; }
  /* Frame already shrinks on desktop; mobile just needs shorter heights. */
  .app-theater-frame { max-width: 100%; }
  .app-theater-frame.is-portrait img {
    height: auto; width: auto;
    max-height: 340px; max-width: 100%;
  }
  .app-theater-frame.is-landscape img {
    height: auto; width: auto;
    max-height: 260px; max-width: 100%;
  }
  .app-theater-arrow.prev { left: 8px; }
  .app-theater-arrow.next { right: 8px; }
  .app-theater-arrow { width: 36px; height: 36px; }
  .app-theater-tabs { gap: 4px; }
  .app-theater-tab { padding: 6px 12px; font-size: 0.75rem; }
}